search

DaftMonk / angular-tour

AngularJS directive for giving an interactive tour of your website.
http://daftmonk.github.io/angular-tour/
MIT License
609 stars 137 forks source link

Remove <tour> wrapping requirement #10

Closed kentcdodds closed 6 years ago

kentcdodds commented 10 years ago

This is awesome. I don't have a current use case for it, but I know that when I do I'm not going to want to wrap everything in a <tour> is there any way that requirement can be lifted? The thing is, I don't have a page so I can have a tour. Integrating the tour should be as lightweight as possible I think, and by requiring everything to be wrapped in a specific element it's imposing itself on what really matters (the actual page markup). Thoughts?

DaftMonk commented 10 years ago

You can chain together tours to target specific parts of your page:

<tour step="sidebarTourStep" post-tour="startMainTour()">
  <span tourtip-step="0" tourtip="Info"></span>
  <span tourtip-step="1" tourtip="Info"></span>
</tour>

<tour step="mainTourStep">
  <span tourtip-step="0" tourtip="Info"></span>
  <span tourtip-step="1" tourtip="Info"></span>
</tour>

$scope.sidebarTourStep = 0;
// setting to -1 prevents this tour from showing
$scope.mainTourStep = -1;

$scope.startMainTour = function() {
  $scope.mainTourStep = 0;
}
kentcdodds commented 10 years ago

No, that's what I'm saying. What I don't like about this api is that if I have an app that's structured like this:

<body>
  <div class="container">
    <div class="nav">...</div>
    <div class="content">
      <div class="header">...</div>
      <div class="content">...</div>
      <div class="footer">...</div>
    </div>
  </div>
</body>

I would have to change it to:


<body>
  <tour step="tour">
    <div class="container">
      <div class="nav">...</div>
      <div class="content">
        <div class="header">...</div>
        <div class="content">...</div>
        <div class="footer">...</div>
      </div>
    </div>
  </tour>
</body>

Where everything's nested inside the <tour> element. If I wanted to chain them, then I'd still have to wrap the elements at some point (even if it was the element itself) and then I'd have to worry about maintaining that chain and it just seems like a less than optimal api. I would much rather simply add an attribute on the element I want to have a tour step on and provide a template url for the step contents...

DaftMonk commented 10 years ago

Removing the tour directive and just using tour-steps would be a simpler api. But I'm not sure how that would achieve the same functionality. The tour directive acts as a manager for all the tour steps. How you would do post tour / post step callbacks, or manage multiple tours?

kentcdodds commented 10 years ago

You could potentially add a tour-id attribute that would go with the tour-steps. Then you could have a service where post-tour callbacks would be attached based on the tour-id. I think that would be a simpler api. And the tour callbacks should be put on the tour-step element itself to simplify the api as well I think. What do you think?

DaftMonk commented 10 years ago

That seems like a reasonable approach. Although I'd probably want to leave callbacks off the tour steps themselves and instead register them with service directly.

kentcdodds commented 10 years ago

That's great. If it were implemented this way and it were this simple to integrate into an existing app, I have a few apps with a use case for this tour. Thanks!

ikb42 commented 10 years ago

This is great, thanks! I agree about the wrapping <tour> element, it is a problem for me due to the styling setup in my app.

britztopher commented 9 years ago

@ikb42 I dont know if this helps, but you can use the tour directive as an attribute too which would make it not mess up your styling if you are using css

ikb42 commented 9 years ago

@britztopher That does help, thanks for pointing that out.

lvarayut commented 9 years ago

I'm facing the same problem. I had to wrap everything inside the <tour> element which causes maintainability issues.

dboundz commented 9 years ago

@DaftMonk did anything ever come of this? I really like @kentcdodds's suggestion and very much dislike the idea of wrapping everything in tour.

dshep4 commented 8 years ago

You can use virtual steps to get around this