Feature Req: Provide more control on Next/Previous Handlers

[OClement]

In "Tour Mode", I would need to call a function on a step's next, and deffer highlighting the next element until some time (think async function/promise/observable/etc.)

Use Case:

• Start Tour
• Highlight an item
• Click next
  • A function should be called that would open an animated panel.
  • The new Item should be highlighted only after the panel has been fully opened.

Right now, the "tour" is broken because it cannot find the yet-to-be-shown element

[moghya]

So basically you want to have delays/event-occurene between two steps ?

[kamranahmedse]

Hey, we already have the hooks to manipulate but this is out of the scope. Ideally, you should not have the animation when the Driver is active because it will be hidden under the overlay anyway. You can maybe hook into one of the events and see if the element is hidden and is about to be shown, just show it without animation.

[OClement]

Yeah, so I tried to "dumb down" the use case a bit
But in reality, my particular use case is that I need to dispatch an action (using NGRX/Redux) in order to change the state of the app, before highlighting an element.

Basically, imagine clicking a toolbar where clicking a button would show/hide different content in a panel. So I would start the tour with the default state, describing a thing or two, then on "next" I would need to trigger an event so that the UI would change and the tour would proceed.

I can make use of onHighlightStarted/onDeselected, but the problem is that even then, the callback is called to quickly and the DOM doesn't have time to change , so Driver is trying to highlest an element that doesn't exist yet

Is that clearer?

[Avejack]

I think this should not have been closed. This is a very cool Feature Request!
I would think of this as an interactive tutorial. For example: Driver highlights an element and forces the user to press this button. On button press and XHR call gets fired. Now it would be cool if the "onNext"-hook would expect a promise and wait for it to resolve. After the promise resolves the next step gets triggered.

EDIT: NVM i've seen the docs provide a "preventMove" for exactly this function! Nice library.