Multiple Tours

[amanfs]

I'm curious is it possible to have multiple tours running?

[DaftMonk]

Honestly, it wasn't built with that in mind. Can you give me an idea of the use case?

[amanfs]

First of all I got to say what you've done so far has been remarkable in terms of integration and fluidity.

Anyways, in this case. A user is presented with an app based website, there is a dashboard which houses multiple sections. (Ex. users, messages, settings, etc). There would be a tour for the main dashboard (global), and for the individual (scope) section. Each section is loaded in using either an ng-switch or an ng-include. The user would have an option of opening a tour for each individual (scope) section, or a tour for the site navigation (global).

Thanks Again

[DaftMonk]

Thanks! Let me ask a couple questions to get a better idea of how it would work.

The markup for that would be something like this?

<tour>
  <main-nav></main-nav>
</tour

<!-- ng include the following markup
<tour>
  <messages></messages>
</tour>
--!>

Then would tours automatically play in the specified order after the previous one is complete?

e.g

<tour="1">  <!-- plays second -->
<tour="0">  <!-- plays first -->

[amanfs]

Exactly!

For the tours playing automatically, maybe that could be an option. What if at the end of one tour, there could be an additional button that said "Start messages tour"

Here is a mock

http://dribbble.com/shots/1380023-Flat-tour-tooltip/attachments/198592

[DaftMonk]

Very nice mockup!

I'm thinking that this could require a tour-group directive to keep track of the tours, similarly to how the tour keeps track of tour-tips. However that could be trickier to implement than it sounds because of the multi-level scope inheritance.

One easier way, tours could have an option for autoplay. You could set only your main tour to autoplay and disable it for all the rest. Then have an onComplete method for the tour that enables autoplay for the next tour.

Something like this:

<tour autoplay="true" oncomplete="messageTourEnabled = true">
</tour>

<tour autoplay="messageTourEnabled">
</tour>

Or this:

<tour autoplay="true">

  <!-- tour tip markup 

    ...

    <button ng-click="messageTourEnabled = true"> Next Tour: Messages </button>
  -->

</tour>

<tour autoplay="messageTourEnabled">
</tour>

Anyway, I'll have to look into this more later to see what would work.

[amanfs]

What if the autoplay method was based on which controller the tour is in. Say its in the messageController

<tour name="messageTour"></tour>

app.controller('MessageCtrl',.....){
$scope.messageTour = true
}

or

<button ng-click="openMessageTour"></button>
<tour name="messageTour"></tour>

app.controller('MessageCtrl',.....){
$scope.openMessageTour = function(){
     $scope.messageTour = true
}

}

If you'd like, I can implement my design into your plugin.

[DaftMonk]

Sure, go for it. We'll need a test for it as well.

[DaftMonk]

In version 0.1.0+ of angular-tour you can now set the model that is used to keep track of the step. This allows for multiple tours, i.e.

<tour step="firstTourStep">
  ...
</tour>

<tour step="secondTourStep">
  ...
</tour>

[amanfs]

Dude thanks soo much for this. You're a wizard!