sjmc11 / tourguide-js

TourGuide is a Javascript library for creating user tours and on-boarding steps for your apps.
https://tourguidejs.com
MIT License
592 stars 27 forks source link

[Feature Request] Ability to skip steps #27

Closed jmanos closed 6 months ago

jmanos commented 7 months ago

Would it to be possible to add the ability to skip steps? Two helpful functionalities for our application would be:

  1. The ability to skip a step in its beforeEnter event. Maybe if false is returned in the event, the step would be skipped?
    • For example, if the first step of a tour is to show how to open a UI and the second step is to show the opened UI, it would be useful to skip the first step if the UI is already open.
  2. The ability to change which step is next in the beforeEnter/afterLeave events.
    • Using the same idea from the example above, if there are multiple steps showing how to open the UI, it would be useful to jump to the step that shows the UI if the UI is already open.
    • I tried using the visitStep method inside the beforeEnter event to jump to a later step, but that obviously didn't work.

The general idea is to be able to have a dynamic tour that can change depending on the state of the application, and maybe even have branching paths if necessary.

sjmc11 commented 6 months ago

HI @jmanos

As a short-term (and slightly hacky) solution, you can do the following:

       beforeEnter: ()=>{
          return new Promise((resolve, reject) => {
              // Reject entering the step
              reject('skip step')
              // Prevent loading state from stopping step navigation
              tg._promiseWaiting = false
              // Get the desired step index based on direction
              let skipToIndex = 3
              if (tg.activeStep === 3) skipToIndex = 1
              // Visit the desired step
              tg.visitStep(skipToIndex)
          })
      }

I've had a look at an intuitive way to utilise a skipStep method and will require a little more thought, but under the hood it may look something like this anyway.

Triggering this inside the beforeLeave callback is a little more problematic as it constantly calls itself when it tries to leave causing all sorts of mayhem.