driver.js

driver.js copied to clipboard

Hi mate,

today i used your library it and it works nice with static elements. Then i tried to install your library inside my Angular 5 project but without success. In my page i have a lot of dynamic component so when i try to define steps sequence not all elements are in the dom (*ngIf if you know somthing about Angular). This is the error message:

Element to highlight #ffl_step2 not found

So, not dynamic component are managed by your library?

Thank you for your work. Have a nice day.

Sure. That's the correct case in my guess for the library to not handle this sort of issues. We had the same issue when we wrapped this package in a React component. So we implemented a step interval checker for the elements visibility and that's pretty easy.

Before we start the Walkthrough steps we make sure that all the elements are exist. (regular setInterval that get dismissed once successful, and -if you want- you can implement a timeout at some point)

Thank you @Attrash-Islam for your response. But i cannot use your approach. Example:

I'm making a wizard tour of my SPA application. After the welcome message, i go to highlight edit button. Then i need to highlight an input with id="ffl_step2" after user click on an edit button but before click the ffl_step2 not exists. It will be add to dom after click on edit button. So i can't add this step (ffl_step2) in driver.defineSteps because ffl_step2 not exists.

i can't implemented a step interval checker for the elements visibility because element ffl_step2 will be visible only after click on Edit button and i need that driver.js start wizard tour imediattly after page loaded when ffl_step2 is not defined.

I see your point. In that case I'd go with multiple driver guides. Define the first tour for the first phase and the second tour for the second phase. @kamranahmedse Do you think of another approach?

I'm interested how you solved this ! :)

multiple driver guides.

const driver = new Driver();
if (this.driver) {
    this.driver.defineSteps([{
        element: '#a',
        popover: {
            title: 'title',
            description: 'description',
            position: 'bottom',
            doneBtnText: 'Next'
        },
        onDeselected: () => {
            driver.preventMove()
            // router.push('/b')
            setTimeout(() = > {
                // new Driver
                // defineSteps
                // start
            }, 1500);
        }
    }])
    this.driver.start()
}

There are no other ways ?

good. I am having same issue on hidden element. Element are visible only after some event. How to show for hidden elements?

multiple driver guides.

const driver = new Driver();
if (this.driver) {
    this.driver.defineSteps([{
        element: '#a',
        popover: {
            title: 'title',
            description: 'description',
            position: 'bottom',
            doneBtnText: 'Next'
        },
        onDeselected: () => {
            driver.preventMove()
            // router.push('/b')
            setTimeout(() = > {
                // new Driver
                // defineSteps
                // start
            }, 1500);
        }
    }])
    this.driver.start()
}

There are no other ways ?

The issue with this approach is that when using multiple drivers, the last element from the previous driver remains highlighted. Here is an example: https://codepen.io/johnzhou/pen/ZEOMvYd. Calling reset() on the previous driver can be used to clear the issue, but for some reason, it will remove the modal on the current driver.

multiple driver guides.

const driver = new Driver();
if (this.driver) {
    this.driver.defineSteps([{
        element: '#a',
        popover: {
            title: 'title',
            description: 'description',
            position: 'bottom',
            doneBtnText: 'Next'
        },
        onDeselected: () => {
            driver.preventMove()
            // router.push('/b')
            setTimeout(() = > {
                // new Driver
                // defineSteps
                // start
            }, 1500);
        }
    }])
    this.driver.start()
}

There are no other ways ?

The issue with this approach is that when using multiple drivers, the last element from the previous driver remains highlighted. Here is an example: https://codepen.io/johnzhou/pen/ZEOMvYd. Calling reset() on the previous driver can be used to clear the issue, but for some reason, it will remove the modal on the current driver.

A word of warning. If you do plan to use multiple drivers, you need to add

onNext: function () {
  driver.preventMove();
}

to the last step of the first driver. Otherwise, the first driver will remove the modal when you reach step 2 on the second driver.

I've created a wrapper around driver.js to help with this problem

We just released v1.0 of driver.js which has been rewritten from the ground up. This issue should no longer exist. Please have a look at the docs and do let me know if you face any issues.