benmarch / angular-ui-tour Goto Github PK

The code below fails because the 2nd step disregards the enabled flag ('tour-step-enable').

<div class="col-md-4" tour-step order="1" data-tour-step-enable="false" title="YEP" content="SURE DID!" placement="top">
    </div>

    <div class="col-md-4" tour-step order="0" data-tour-step-enable="true" title="We’ve made some changes!" content="are you sure?" placement="top">
    </div>

Thanks

We are wanting to build several independent tours to explain different parts of our site. As well as one that explains the site from a birds eye view. We haven't run into this issue yet, but we are afraid of adding a tour step in multiple tours ( due to the umbrella tour having many nested views ).

So the use case we are fearing looks something like this

Tour Umbrella
    Step U1
    Tour Child 1
            Step C1-1
            Step C1-2
    Step U2
    Tour Child 2
            Step C2-1
            Step C2-2

Will the Steps C1 and C2 be added Tour Umbrella?

If so, is there anyway to avoid this... or make it clear which tour a step belongs to?

When I have a modal with a named tour. The tour works as expected, but if the modal is destroyed and brought back, the tour will not display... is there a way to delink it from the old element?

Maybe I miss something but in the TourConfig provider there is no option to set the templateUrl and I am not able to change the template as it's mentioned in the README.

<div class="with-top-navbar"
     ui-tour
     ui-tour-scroll-offset="270"
     ui-tour-on-ready="onTourReady(tour)"
     ui-tour-on-show="onTourStep(tour)"
     ui-tour-on-end="onTourEnd()"
     ui-tour-template-url="'app/app/shared/tutorial.html'"> //Does not work
    <header data-ng-include="'app/app/header/header.html'"></header>
    <messages class="messages-fixed-top"></messages>
    <div id="content" ui-view></div>
    <!--<footer id="footer" data-ng-include="'app/app/footer/footer.html'"></footer>-->
</div>

/* Content of angular-ui-tour.js */
var config = {
            placement: 'top',
            animation: true,
            popupDelay: 1,
            closePopupDelay: 0,
            enable: true,
            appendToBody: false,
            tooltipClass: '',
            orphan: false,
            backdrop: false,
            backdropZIndex: 10000,
            scrollOffset: 100,
            scrollIntoView: true,
            useUiRouter: false,
            useHotkeys: false,

            onStart: null,
            onEnd: null,
            onPause: null,
            onResume: null,
            onNext: null,
            onPrev: null,
            onShow: null,
            onShown: null,
            onHide: null,
            onHidden: null
        };

Do you have some advice?

Firstly, excellent job @benmarch

Really enjoying this module so far. Just want to note some bugs as I go along. The placement option on the directive does not seem to work =) I tried the following

placement="bottom"
placement="'bottom'"

I'm happy to help out with these?

Hi,
Thanks for the awesome library...
With regards to my question, I am using ui-router for navigating between views. To continue on next page I have to set tour-step-next-path="path/to/view", otherwise the next button is hidden on the tour step. But when I set tour-step-next-path, it won't redirect to appropriate view. I have even tried tour-step-on-next="onNext()" and called $state.transitionTo("state") inside controller but still it won't redirect. Could you help me please to resolve this issue.

Thanks...

Looks like having nested steps might affect the order but it shouldn't.

There was a change made in AUIB 1.3.0 that causes the popover titles to be undefined and not to display.

Currently in NPM has a diffrence between versions in the repository and in NPM.

In repository in Bower.json version is 0.5.3
In NPM in Bower.json version is 0.4.0

So npm package is outdated and must be updated.

Hello, sample tour: http://bootstraptour.com/
If you press the right and left arrow key it'll navigate thru the steps.

There is a nice module that provides keyboard shortcuts
http://chieffancypants.github.io/angular-hotkeys/

If you're interested I can send a PR.

When a step uses the backdrop, it is cloned and positioned over the original element. The clone, however, does not have any association with the original element's scope, which will disable some functionality. This issue is to research and enhance the backdrop service to attach the original scope to the cloned element. If it is doable--which I imagine it is--then it will be in the next release.

This issue was reported by @waflessnet in #23.

Would you be able to add this in? Without it, the arrow on the popups don't respect the placement setting. Thanks!

Hi,
How I will be getting the multiple tour instances object...as tour object is added to scope by API....how to get tour obj of in case of multiple tours...???

Unfortunately I have another issue with the tooltip class option on the ui-tour directive.

<div class="with-top-navbar"
     ui-tour
     ui-tour-scroll-offset="270"
     ui-tour-tooltip-class="'tour-tooltip'" //Does not work
     ui-tour-backdrop="true"
     ui-tour-on-ready="onTourReady(tour)"
     ui-tour-on-show="onTourStep(tour)"
     ui-tour-on-end="onTourEnd()"
     ui-tour-template-url="'app/app/shared/tutorial.html'">
    <header data-ng-include="'app/app/header/header.html'"></header>
    <messages class="messages-fixed-top"></messages>
    <div id="content" ui-view></div>
    <!--<footer id="footer" data-ng-include="'app/app/footer/footer.html'"></footer>-->
</div>

I can't even find any reference in the angular-ui-tour.js which is dealing with this property. Is it just missing or do I miss something?

removeStep always removes at least one step, no matter if the step isn't actually in the list, check the line: https://github.com/benmarch/angular-ui-tour/blob/master/app/tour-controller.js#L227

That method should be changed for:

self.removeStep = function (step) {
    var index = stepList.indexOf(step);
    if(index !== -1){
        stepList.splice(index, 1);
        self.emit('stepRemoved', step);
    }

};

I found this plugin and it looks and works great from what I can tell this far. I am looking forward to getting to use it on our project. I was just viewing the demo tour on my phone and noticed that the 4th step (the start of the table) has the "tooltip" off to the left. While I don't remember having any issue with it on my desktop yesterday, on my phone it is off the screen and I have no way of "scrolling over" to it or anything, hence leaving me unable to continue or close the tour. I have no current tests with it or fixes as of yet. I just didn't know if you were aware of this and if it is a bug or just a styling issue that I will have to avoid when I implement this.

Great work!

Hi;

I am getting $uibPosition.viewportOffset is not a function error if I add backdrop to a step.

 <div class="col-lg-3 col-lg-offset-1 col-md-4 col-sm-4 col-xs-12" tour-step tour-step-title="Main Menu" tour-step-content="Navigate the site using this menu." tour-step-order="0" tour-step-placement="top" tour-step-backdrop="true">

What is wrong?

Is there anyway to say add a step pointing at this html element id? I've got elements shared across many pages, and want to have tour steps on the first page, but not any subsequent pages.

I love how you define steps in the demos, would just prefer not to have them bound on the shared template, and call that out as additional steps, or something.

I'm trying to set the current current step via code, but this its not changing the step.

Have you got an example of how to do this?

I can do 'next' and 'prev' but nothing beyond that.

Thanks

Hi,

First of all thank you for this project, it is very useful.

However I need to launch the tour based on a controller variable received from the server.

Something like this:

$scope.loadSettings = function() {

if($scope.launch_tour == true){
tour.restart(true);
}
};

Tried different things but no luck so far. Any ideas?

Can You provide a simpliest codepen demo?

GET http://benmarch.github.io/angular-ui-tour/bower_components/angular-hotkeys/build/hotkeys.css 404 (Not Found)
(index):81 GET http://benmarch.github.io/angular-ui-tour/bower_components/angular-hotkeys/build/hotkeys.js
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module uiTourDemo due to:
Error: [$injector:modulerr] Failed to instantiate module bm.uiTour due to:
Error: [$injector:modulerr] Failed to instantiate module cfp.hotkeys due to:
Error: [$injector:nomod] Module 'cfp.hotkeys' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

HTML: http://pastebin.com/trp5pbMN
JS: uiTourService.getTourByName("test").start()

Expected: Both steps executed
Happens: Only first step is shown, then I can only select Pause or End

Works as expected if I remove the names.

Hey @benmarch, if I have a step in an element with ng-disabled that catches true or disabled="disabled" the popover doesn't appear, like:

<button data-ng-click="doSomething()" class="btn" data-tour-step data-tour-step-order="2" data-tour-step-prevent-scrolling="true" data-tour-step-placement="left" data-tour-step-content="This button do something." data-ng-disabled="form.$invalid">Do something!</button>

The backdrop of this element and the other popovers are shown normally.

When I switch between the two steps with tour-step-backdrop=true I see backdrop flashes for a split second - is lost and then reappears.
I record little demo, you can see it here - http://take.ms/iDuLK.

Can you fix this? Or maybe i do something wrong?

Hi,

I have a scenario like this and I found that uiTour is not working for me:

• A layout page with ui-tour directive set on
• A view gets loaded in the body that has a side menu and the content area.
• My side menu has a controller and the content area has another controller.
• I want a button on the content area that should trigger the tour and I plan to define a <div> with ui-tour set and all the menu items will be contained inside the <div>.

I get an error that reads -
TypeError: Cannot read property 'onShow' of undefined
at self.showStep (angular-ui-tour.js:352)
at self.start (angular-ui-tour.js:260)
at $parseFunctionCall (angular.js:12404)
Hope it makes sense.

For a visual illustration - I want the tour to work against the menu items on the left when I click on start tour as illustrated here - http://themicon.co/theme/angle/v3.2/backend-angular/#/app/tour

The tour on this site works for elements that are defined in the container where the Start tour button is. I want to define the tour elements to be defined against the menu items while keeping the button as it is now.

Regards,
Kiran Banda

removing the ng-submit form the form tag and then using the ng-click="someMethod" elsewhere in my form solved the problem. However, I wanted to point it to other potential users.

When the backdrop is activated the cloned element is backdropped fine, but when prevent scrolling is activated occurs variations in the width and x-position of the cloned element. His height and y-position seems fine.

Hi,

I am using preventScrolling and it works fine in Chrome, but it's hell of a mess in Firefox...
ui-tour ui-tour-backdrop=true

`

I have a page without x or y-scroll and want to give a tour on it, so no scrolling at all. On Firefox it keeps scrolling my content up and copying the element at another place, like this: https://i.gyazo.com/1c57105299695d2c394c49b1352a4fd9.png (the original element is the upper one and all my page content is above the upper one)

1.On start i am making prevent scrolling true but when coming to same step, after going forward and back by 1 step, prevent scrolling was not working.
2. backdrop is not covering entire page..it is covering only current viewport...
pasting below code for above 2 points:

<div tour-step tour-step-title="Intro to payments"  tour-step-order="5" tour-step-placement="bottom" tour-step-scroll-into-view="true" tour-step-backdrop="true" tour-step-prevent-scrolling="true" >

Im, not sure if this an actual bug or just something that you should note in the documentation.

When specifying the tour to use a back drop, the back drop will cover the popovers unless they are appended to the body element. This makes since with how html and z indexes work, and I don't if you can actually get around it.

....btw... thanks for the super fast response yesterday, the fixes were great.

Firstly, congratulations for the awesome library!

I'm trying to implement it on an AngularJS application and I'm not getting control the flow from a controller. I read the documentation but I didn't get it and I didn't find any demo or example.

Thanks!

The directive APIs are documented, but the Tour API is not.

Your module depend on ngSmoothScroll' ' 'ez-ng', but the readme is not clear!

I am try create tour, when change select send other step, but not access to scope of controller example in controller the $scope.Rubro always is null , but delete tag tour-step the $scope working properly:

app.config(function(TourConfigProvider,$stateProvider, $urlRouterProvider) {
  ...
  //tour 
  TourConfigProvider.set('scrollOffset', 200);

        TourConfigProvider.set('onStart', function () {
            console.log('Started Tour');
        });
        TourConfigProvider.set('onNext', function () {
            console.log('Moving on...');
        });
 $stateProvider
.state('prueba',{
        url:'/prueba',
      params: {
          xxxx :2, 
      },
      controller: 'pruebaCtrl', 
        templateUrl: "/xxxxx/xxxxx/xxxxxx/template.html"
  })
app.controller('pruebaCtrl', function ($scope,$http,$state) {
  ...
$scope.clickRubro = function(){
  ...
// value $scope.Rubro is null , but if not use tour directive in div, the scope.Rubro is correct 
        $http.get('/xxxxx/xxxxx/'+$scope.Rubro).success(function(data){ 
           if(!angular.isArray(data.item)){
              $scope.selProducto.push(data.item);
            }else {
              $scope.selProducto = data.item;  
            }
          $scope.loading = false;
       });

    }
});

layout:

<body ui-tour>
<aside tour-step="'PH'" tour-step-title="Bienvenido!" tour-step-content="Este tour tratará de explicarle como utilizar la herramienta!" tour-step-order="0" tour-step-orphan="true" tour-step-backdrop="true">
</aside>
....
<div class="row">
        <div ui-view></div>
     </div>

view template.html

<div class="form-group" tour-step="'PH'" tour-step-title="ejemplo" tour-step-content="Seleccione rubro" tour-step-order="10" tour-step-orphan="false" tour-step-backdrop="true"  tour-step-fixed="false">
                  <label for="sector" class="Tit_verde">Rubro:</label> 
                  <select  size="1" class="menu_lista form-control" ng-model="Rubro" ng-options="item.IDCategoria as item.Rubro for item in selRubro" ng-change="clickRubro();" ></select>
                </div>

to try add tour.next(), but generate error not found config etc.

<select  size="1" class="menu_lista form-control" ng-model="Rubro" ng-options="item.IDCategoria as item.Rubro for item in selRubro" ng-change="clickRubro(); tour.next()" ></select>

which is the correct way to access the scope of controller? by example in controller 'pruebaCtrl' , and/or how access to directive tour for next when change select ,
very thanks !

Through console logging I have traced the issue as far as I can.

//Add step to tour
scope.tourStep = step;
scope.tour = scope.tour || ctrl;


if (ctrl.initialized) {
    configureInheritedProperties();
    ctrl.addStep(step);
} else {
    console.info( step.title +' --- later');
    ctrl.once('init', function () {
        configureInheritedProperties();
        console.info( step.title +' --- now');

        ctrl.addStep(step);
    });
}

console.info( step.title +' --- later'); shows all steps being registered
however the --now is only getting called for steps 1,3,5

The html that I have tested with is the following

<div class="userProfile" ui-tour="userProfileTour" ui-tour-backdrop="true" ui-tour-placement="right">
    <div>
        <h1>Account Settings</h1>
    </div>
    <div class="form-horizontal">
        <div class="form-group" tour-step tour-step-title="Username" tour-step-order="0" tour-step-content="You will use this to log on with">
            <label class="col-sm-3 control-label">Username</label>
            <div class="col-sm-8">
                <input class="form-control" name="username" type="string" ng-model="user.username" ng-trim="true" />
            </div>
        </div>
        <div tour-step tour-step-title="Your Name" tour-step-order="1" tour-step-content="This is just so we know who you are">
            <div class="form-group">
                <label class="col-sm-3 control-label">First Name</label>
                <div class="col-sm-8">
                    <input class="form-control" name="firstName" type="string" ng-model="user.firstName" ng-trim="true" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">Last Name</label>
                <div class="col-sm-8">
                    <input class="form-control" name="lastName" type="string" ng-model="user.lastName" ng-trim="true" />
                </div>
            </div>
        </div>
        <div tour-step tour-step-title="Email And Organization" tour-step-order="2" tour-step-content="We need to know who are with, and your email. These are used to contact you and automatically add you to certain groups">
            <div class="form-group">
                <label class="col-sm-3 control-label">Email</label>
                <div class="col-sm-8">
                    <input class="form-control" name="email" type="string" ng-model="user.email" ng-trim="true" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">Organization</label>
                <div class="col-sm-8">
                    <input class="form-control" name="organization" type="string" ng-model="user.organization" ng-trim="true" />
                </div>
            </div>
        </div>
        <div tour-step tour-step-title="Reason" tour-step-order="3" tour-step-content="What do you use our site for">
            <div class="form-group">
                <label class="col-sm-3 control-label">Reason</label>
                <div class="col-sm-8">
                    <textarea class="form-control" name="reason" type="string" ng-model="user.reason" ng-trim="true"></textarea>
                </div>
            </div>
        </div>
        <div tour-step tour-step-title="Password" tour-step-order="4" tour-step-content="When you want to change your password, you will first need to enter your current password and then enter your new password twice.">
            <div class="form-group">
                <label class="col-sm-3" style="text-align: right;">Old Password</label>
                <div class="col-sm-8">
                    <input class="form-control" name="Password" type="password" ng-model="user.oldPassword" ng-model-options="{updateOn: 'default keyup'}" ng-change="validate()" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">New Password</label>
                <div class="col-sm-8">
                    <input class="form-control" name="Password" type="password" ng-model="user.password" ng-model-options="{updateOn: 'default keyup'}" ng-change="validate()" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">Password Confirmation</label>
                <div class="col-sm-8">
                    <input class="form-control" name="PasswordConfirmation" type="password" ng-model="passwordConfirmation" ng-model-options="{updateOn: 'default keyup'}" ng-change="validate()" />
                </div>
            </div>
        </div>
    </div>
    <div tour-step tour-step-title="Save or Cancel" tour-step-order="5" tour-step-content="Don't forget to save your changes">
        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-8">
                <button class="btn btn-default cancel" ng-click="cancel()">Cancel</button>
                <button class="btn btn-primary save" ng-click="saveUser()" ng-disabled="!validForm">Save</button>
            </div>
        </div>
    </div>
</div>

What is the recommended way to start tour programmatically?

For example if I want to start the tour 1 or two second after the page loads?

Hello;

How we can remove pause button?

Hi;

scope.$eval(attrs[TourHelpers.getAttrName('templateUrl', 'uiTour')]); 

is undefined. My code is:

ui-tour-template-url="myTooltipTemplate.html" and temaplate is:

    <script type="text/ng-template" id="myTooltipTemplate.html">
          <span>Special Tooltip with <strong>markup</strong> and {{ dynamicTooltipText }}</span>
    </script>

Where am I wrong?

I'm trying to set this functionality with local storage variables by this way:

<div ui-tour ui-tour-on-ready="onTourReady(tour)" ui-tour-on-show="onTourStep(tour)" ui-tour-on-end="onTourEnd()" ui-tour-popup-delay="1000"></div>

$scope.onTourReady = function (tour) {
  $scope.$on('startTour', function () {
    $state.go('app.dashboard');
    tour.start();
    $window.localStorage.setItem('tour_ended', 'false');
  });

  if ($window.localStorage.getItem('tour_ended') === 'false' && $window.localStorage.getItem('tour_current_step')){
    tour._setCurrentStep($window.localStorage.getItem('tour_current_step'));
    tour.start();
  }
};

$scope.onTourStep = function (tour) {
  $window.localStorage.setItem('tour_current_step', tour._getCurrentStep().stepId);
};

$scope.onTourEnd = function () {
  $window.localStorage.removeItem('tour_current_step');
  $window.localStorage.removeItem('tour_ended');
};

Is that possible?
Edit: The tour initiates from the start if I try to start and I'm getting error at self.showStep (angular-ui-tour.js:373) and at angular-ui-tour.js:546 if I try to resume.

Other thing I tested was backdrop, for me it's not working so well. Sometimes the backdrop is overriding the screen and the backdropped element is staying on the screen after going to other step.

Hi,
I try to use goTo function,so i am calling below code within onNext function provided by API.
uiTourService.getTour().goTo('lastStepId').......
last step is shown as expected but End tour button is not working...
Observation : When we click on end tour in last step,tour is getting terminated and started again at step mentioned in goTo function?
PFA screenshot of error.

which are all necessary requirements to use the library? the "ezNg" can not find it.

Thank you

I put a step with backdrop and prevent scrolling in a input field that has a model to apply a search filter in a ng-repeat and the filter was not working anymore. If I remove the step the filter works.

The ng-model works, the data is passing, but it's not being filtered. And I tried to put the step on a wrap of the input field also, didn't work.

Hi,
I have a SPA which I'm trying to put the tour system into.

We have multiple controllers active at on time so I was hoping to broadcast the onEnd event so all controllers can pick up on it.

Have you got any pointers of how to go about this?

Hi,
I am not able to get any info. in code about element on which tour step is activated currently.If you can

1. provide an option to add class dynamically to currently active host element in tour step or add static class to current host element.
2. can provide a host element object in callbacks mentioned in API i.e onNext,onPrev, onStart,onEnd, onShow, onShown etc,,,so that i can made changes as required in my code w.r.t acitve host element.

Hello,

Can you create a new bower package with only dist folder? Having sources in production is not really needed, and whoever needs sources to work on them, should just git clone `em anyway.

http://bob.yexley.net/creating-and-maintaining-your-own-bower-package/

Thanks

This issue has several work arounds, but its weird behavior.

I have a toolbar that has the shape of something like the following ascii art

     __     
__|     |__

Theres a menu button to the right of the 'bump' that will always be clickable, and needs to be on the same-ish level to fit design. To fit this I have the parent toolbar have no pointer-events and the child has pointer events, The mouse will ignore the toolbar when the menu button is pressed.

My problem is adding a tour-step around the toolbar eats the mouse events. I have tried ignoring the pointer events in the css

tour-step{
    pointer-events: none;
}

but this does not work unless I also set the display property. Any value seems to work for it, but that means it effects the css of its children.

I have never seen the pointer events fail, but then again, I've never tried to do it on an element without a display. I have tested this in Chrome and Firefox.

Feature Request

Our site will have several tours, and instead of of duplicating the code to tracking each of their pause or ended states, it would be awesome if I could safely use _getCurrentStep ( or something like it ) to see if I need to call start or resume when the tour is requested.

edit: Actually... could there just be an option to hide the pause button?