Specific event on each step.

[ronaldohoch]

Hello :) Thank for the project!

Is this project still in maintenance?

Well, my question: I know we have the onNext event, but i would like to have specific events for each step. Why i need it?

Because in my project have some tabs and i would like to open that tab after or before to run an step. Currently, i'm checking at onNext event for an element.:

const driver = new Driver({
  onNext: (Element) => {                // Called when moving to next step on any step  
      if(Element.node.classList.contains("gjs-pn-views")){
          $(".fa-paint-brush").click();
      }                
  }
});
driver.defineSteps([
  {
      element: '.gjs-pn-views',
      popover: {
          title: 'Abas do editor',
          description: 'Aqui você encontra as ferramentas para criar sua página.'
      }
  },
  {
      element: '.fa-paint-brush',
      popover: {
          title: 'Abas do editor',
          description: 'Aqui você encontra as ferramentas para criar sua página.'
      }
  }
});
driver.start();

In my example, i need to verify if the Element is the last element before the moment i need it. When i'm in the first step, it doesn't run the event, when i change to second, it runs the onNext but it pass the first step's element.

If i could do something like it:

driver.defineSteps([
  {
      element: '.gjs-pn-views',
      popover: {
          title: 'Abas do editor',
          description: 'Aqui você encontra as ferramentas para criar sua página.'
      },
      onStart: () => {},
      onLeave: () => {},
  },
  {
      element: '.fa-paint-brush',
      popover: {
          title: 'Abas do editor',
          description: 'Aqui você encontra as ferramentas para criar sua página.'
      }
      onStart: () => {},
      onLeave: () => {},
  }
});

May i help with it if you allow me.

[tector]

i think that would be a nice feature

[mlisowsk]

@ronaldohoch you can have specific event handlers for the onNext (or any other event) for each step. For example you can bind an onNext handler just for the first step by writing:

driver.defineSteps([
  {
      element: '.gjs-pn-views',
      popover: {
          title: 'Abas do editor',
          description: 'Aqui você encontra as ferramentas para criar sua página.'
      },
      onNext: (el) => { /* do something to check or prevent going from first to second step */ }
  },
  {
      element: '.fa-paint-brush',
      popover: {
          title: 'Abas do editor',
          description: 'Aqui você encontra as ferramentas para criar sua página.'
      }
  }
});

I do not understand your statement "i need to verify if the Element is the last element before the moment i need it." - maybe you can rephrase it? What is "before the moment I need it" ?

You could bind to onHighlightStarted if you need do do something before the highlighting is done - maybe that is where you need to bind? If you need do some action before entering the first step, maybe you should do that before you start() the tour in the first place - i.e. don't start() the tour if prerequisites are not met.

For example the sequence of Driver.js events for a 4-step tour where the user presses the Next button and finally the Done button is as follows: Driver.onHighlightStarted Driver.onHighlighted Driver.onNext Driver.onHighlightStarted Driver.onDeselected Driver.onHighlighted Driver.onNext Driver.onHighlightStarted Driver.onDeselected Driver.onHighlighted Driver.onNext Driver.onHighlightStarted Driver.onDeselected Driver.onHighlighted Driver.onNext Driver.onReset Driver.onDeselected

[kamranahmedse]

We just released v1.0 of driver.js which has been rewritten from the ground up. There are more simplified hooks which give you more control over the popover and the whole lifecycle. You are probably looking at one of onHighlightStarted, onHighlighted or onDeselected. Please have a look at the docs and do let me know if you face any issues.