search

fortesinformatica / Sideshow

Sideshow is a powerful javascript library which aims to reduce your user's learning curve by providing a way to create step-by-step interactive tours. Explain the features of your application, control your end-user's interaction with your UI, emphasize what you're explaining in each step by masking it. Just think! The sky is the limit!
http://fortesinformatica.github.io/Sideshow
Apache License 2.0
86 stars 31 forks source link

Automatically select a tutorial #6

Closed WilliamHua closed 9 years ago

WilliamHua commented 9 years ago

Is there a way to skip past the "choose a tutorial page' and just select a tutorial to show them?

DanielApt commented 9 years ago

Would love to know this as well. I have a solution for you, if you only have one tutorial.

If you have one tutorial you can provide Sideshow.config.autoSkipIntro = true; which will skip the Choose a Tutorial Page.

We have multiple tutorials, but want to open a specific tutorial, how can we do this?

DanielApt commented 9 years ago

Actually, we've got a solution when you have multiple tutorials.

You can get the available wizards through calling Sideshow.getElegibleWizards(). This basically returns an array of Objects/Classes.

You can then use lodash (or underscore) to find the wizard which matches a certain property. For example, to start the wizard with the the name being watchlist you would call: var wizard = _.find(Sideshow.getElegibleWizards(), {name:'watchlist'})

Lastly you would want to play it, you can do this by calling prepareAndPlay() on the wizard: wizard.prepareAndPlay()

Putting this all together: _.find(Sideshow.getElegibleWizards(), {name:'watchlist'}).prepareAndPlay();

If I've got the spare time I might submit a pull request, but happy for somebody else to do this if they've got a moment to spare.

TLDR _.find(Sideshow.getElegibleWizards(), {name:'watchlist'}).prepareAndPlay();

DanielApt commented 9 years ago

@alcidesqueiroz is awesome and has just created this feature in v0.4.2. Update to that version and you can specify the tutorial by calling:

Sideshow.start({wizardName: "nameOfWizard"});

If this solves your issue, please remember to close this issue.

alcidesqueiroz commented 9 years ago

@WilliamHua I've just released a new version of Sideshow with this enhancement yesterday. Now you can start a specific wizard by passing the wizardName option to the Sideshow.start method. Just like this:

Sideshow.start({ wizardName: "introducing_sideshow" });

@DanielApt the problem with the approach of calling prepareAndPlay() directly is that the hotkeys bindings (e.g., the ESC key) are not initialized. Besides, the close button isn't rendered, and the user will have to finish the tutorial in order to close it. Well, the latest release (v0.4.2-platoon) does the job! =)