Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: continue when target not found #190

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

mndaipre
Copy link

@mndaipre mndaipre commented May 7, 2021

Hi!
I'm adding this PR, here's the explanation why:

First change in Vstep.vue:

In our use case, we needed to have a new property when we rendered a component recursively.
The standard behaviour of the library is that, when a target component is not found, it fails and stops, but we needed it to jump to our next target, or step.
But to achieve that, we needed to also modify the behaviour of step advancing and backing, so we added a new options prop:
continueWhenTargetNotFound.
This prop is by default set to false, keeping the library standard behaviour, and when you need it to jump to the next step or the previous one, like we did, you can change it to true.

Second change in Vstep.vue:

I added an "if" statement to the removeHighlight function, because when the previous/next step target wasn't yet rendered, it would throw an error, so with this change it will only try to remove it, if it exists.

@yassinesabri
Copy link

@mndaipre Question:
I've seen a constant called stopOnTargetNotFound and from the name and if set to false it should behave the same way as the constant you've added, can you check please ?

@dan-whitehouse
Copy link

I was looking for this feature, but could not find it in the documentation. Thankfully someone created a PR for it, however it's unfortunate it hasn't been implemented. For anyone looking to do this a hacky way this is what I came up with.

target: '#table-options-filters',
before: type => new Promise((resolve, reject) => {
    if(!document.querySelector('#table-options-filters')) {
        if(type === 'previous') { this.$tours.xxx.start('3') }
        else if(type === 'next') { this.$tours.xxx.start('5') }
    }
})

If you need to skip a step when the target isn't found you can do so in the before function. Use document.querySelector to look for the current target. If it isn't found, check the type and and recall the start function at the step you need it to go to.

However, this solution will not work if you don't know the step id


Also, I tried adding stopOnTargetNotFound: false into the step params and it didn't do anything. The unknown target still appeared.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants