xbsoftware / enjoyhint

MIT License
777 stars 275 forks source link

Trigger next fails #115

Open RoelDeveloper opened 5 years ago

RoelDeveloper commented 5 years ago

Hello,

In my code I try to trigger to the next step if an element is not visible, the trigger next executes and goes to the next element for less then one second, then it goes back to the previous element (which I wanted to skip). Why is this happing? Code:

HelpTour:function() {
        page.tour =new EnjoyHint( { } );
        page.tour.set([ {
            "next .area-card": 'Hello, In this short tour guide I\'ll show you<br>some features/components included in Altair Admin.<br>This is the main header.<br>Click "Next" to proceed.'
        }
        , {
            "click .btn-list": "Here you can activate fullscreen.", showSkip: !1
        }
        , {
            "click .open-valve": "Click this icon to show search form.", showSkip: !1,  timeout: 500
        }
        , {
            "next .valve-general": "This is the main search form.", showSkip: !1,  timeout: 1000
        }
        , {
            "next .valve-alarms": "This is the main search form.", showSkip: !1
        }
        , {
            "next .time-range-selector": "This is the main search form.", showSkip: !1
        }
        , {
            "next #valve-default-area": "This is the main search form.", showSkip: !1,
            onBeforeStart:function() { 
                if ($('#valve-default-area').is(":hidden")) {
                    page.tour.trigger('next');
                } 
            }
        }
        , {
            "next #valve-vac-area": "This is the main search form.", showSkip: !1,
            onBeforeStart:function() { 
                if($('#valve-vac-area').is(":hidden")) {
                    page.tour.trigger('next');
                } 
            }
        }
        , {
            "next #valve-aai-area": "This is the main search form.", showSkip: !1,
            onBeforeStart:function() { 
                if ($('#valve-aai-area').is(":hidden")) {   
                    page.tour.trigger('next');
                } 
            }
        }

        ]),
        page.tour.run();

    }
zapper59 commented 5 years ago

Triggering next during the onBeforeStart is essentially a race condition because the current step is still starting. The best solution is to simply check while initializing the step list and don't add those steps if they won't be relevant. Alternatively if you don't know if those elements will exist on tour initialization you should be able to set the onNext function to do your check and trigger next (it looks like this should get rid of one race condition, can't guaranty all). You can get your current selector to search for by using var selector = tourSteps[tourInstance.getCurrentStep()].selector;. Alternatively if all else fails a somewhat hacky solution would be to run your page.tour.trigger inside of a half second delay.

maivanco commented 4 years ago

Hi everyone, My steps are more complex so I really need trigger('next') method works correctly like what that RoelDeveloper mentioned. Is there anyone who solved that problem?