daftmonk / angular-tour Goto Github PK

the demo page has an error and the tour is not visible

Error: [$compile:ctreq] http://errors.angularjs.org/1.4.7/$compile/ctreq?p0=tour&p1=tourtip
at Error (native)
at http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:6:416
at t (http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:59:233)
at K (http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:62:78)
at g (http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:54:410)
at K (http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:61:488)
at g (http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:54:410)
at http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:53:480
at http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:20:103
at n.$eval (http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:133:221)(anonymous function) @ angular-1.4.7.min.js:107(anonymous function) @ angular-1.4.7.min.js:80n.$apply @ angular-1.4.7.min.js:133(anonymous function) @ angular-1.4.7.min.js:20e @ angular-1.4.7.min.js:39d @ angular-1.4.7.min.js:19zc @ angular-1.4.7.min.js:20Zd @ angular-1.4.7.min.js:19(anonymous function) @ angular-1.4.7.min.js:293j @ jquery-2.1.4.min.js:2k.fireWith @ jquery-2.1.4.min.js:2n.extend.ready @ jquery-2.1.4.min.js:2I @ jquery-2.1.4.min.js:2
2(index):42 Tour - Update Step 0
ping?
client_id=1388192094757549&domain=daftmonk.github.io&origin=1&redirect_uri=http%3A%2F%2Fstatic…:1 URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs.

I noticed that the directive does not work if the Angular loading before JQuery (which is the case in my app). Is there a way not to change load ordering in my app and still get directive to work?

H i
When MAKE GRNUT BUILD ,FROM DIST PRODUCT TOUR DO NOT START.
Please tell me what is correct way to make dist from grunt for product tour

Hi,
I am using this library in my application. Getting the tourtips properly. But the position is not correct. There is some error happening in the function to calculate position. On analyzing it was found that tourtip.width() is failing ttwidth is not calculated properly.
Should we set any width for tourtip? Please help me to understand the issue

In my app i am having different html files, i want to make the tour flow on those pages that is /path1 to /path2 at the same time need to maintain the flow.

Is this is possible with angular-tour? if possible means explain that with simple example.

Hi, I got bad flickering and unsuccessful scroll when tour tries to scroll on iOS (iPhone 5s iOS 7).
I found out that the cause is the:
line 305: scrollLeft: target.offset().left + offsetX

Removing that line and just leaving scrollTop solved it.

TourSteps (demoTour.json)

[
    {
        "textKey": "test1",
        "placement": "bottom",
        "element": "#element1"
    },
    {
        "textKey": "test2",
        "placement": "bottom",
        "element": "#element2"
    },
    {
        "textKey": "test3",
        "placement": "bottom",
        "element": "#element3"
    }
]

Directive (demoTourDirective.js)

[...]
        restrict: 'A',
        scope: true,
        template: $templateCache.get('demoTourDirective.html'),

        link: function (scope) {

            scope.currentStep = 0;

            scope.tourSteps = [];

           // retrieves demoTour.json
            DemoTourService.get().then(function (tourSteps) {
                scope.tourSteps = tourSteps;
            });
        }
[...]

Template (demoTourDirective.html)

[...]
<tour step="currentStep" post-step="stepComplete()">
    <virtual-step data-ng-repeat="step in tourSteps"
        data-ng-attr-tourtip="{{ step.textKey | translate }}"
        data-ng-attr-tourtip-step="{{ $index }}"
        data-ng-attr-tourtip-placement="{{ step.placement || undefined }}"
        data-ng-attr-tourtip-element="{{ step.element || undefined }}">
    </virtual-step>
</tour>
[...]

I've tried to:

• move ng-repeat to a parent wrapper: doesn't work
• remove data-ng-attr- prefix: doesn't work
• change step order (hardcoded and by $index): doesn't work
• add a 'hardcoded' step after the ng-repeat loop: doesn't work
• add a 'hardcoded' step before the ng-repeat: tour works ! (yet I don't want any unnecessary steps in my template and besides that it does not work trying to skip this step by default)

It really seems like angular-tour is consuming the template before the ng-repeat loops is compiled by angular. Though, when I place a hardcoded step in front of the ng-repeat loop it works.

Some other possible solutions have crossed my mind, but most of them are obscure and really not worth implementing since I would be better of hardcoding my steps instead.

Does this directive have any option to get back to the previous step?

First of all, thank you for the great directive.

I tried bower angular-tour install, I noticed the bower angular-tour-tpls.min.js is 5kb and doesn't work.

But when I clone your angular-repo, I noticed your angular-tour-tpls.min.js is 8kb and works.

Will it be possible for you to update your bower package please.

Does this Tour module have compatibility to span multiple pages (routes) and compatibility with the popular ui-router module?

I have a requirement for my tourtips to have different headings, content and other elements such as images (most with unique formatting). It would be great if there were some optional parameters in the "options" where you could just input text, then use the content when you customize the HTML template. I was able to do this pretty easily by editing the angular-tour.js file, but it would be great if it was a part of the original source code.

Hi!,
There no way to use this awesome plugin , without jQuery dependency?.

I was looking fast, the code in angular-tour.js, and, this not looks really jQuery dependant?

Thanks in advance.

Thank you for your great work & contribution!!! I'm using your tour in our system 👍

If I need to have two buttons (or even three) in the dialogue box, how can i do that?
2 buttons: (Back)(Next) for previous & next steps respectively
3 buttons: (Back)(Done)(Re-start) for previous step, next step (last step), and restarting the tour respectively?

Thank you very much :) Have a good day ahead!

Is it possible to have an action, eg a navigation link, on tour dialogues?

after configuring just like in the readme- I am getting error when I call 'opentour()' function? please help

Greetings! Good work.

While adding walkthrough to one of my projects, I noticed that when I close the tour when it first opens using closeTour() - openTour() no longer fires.

This is problematic as a user may want to close it immediately, but come back to it later.

I also tried keeping the tour from firing on page load, but that did not work either.

Your help is appreciated!

I have a tour set up that work great except for this issue.
I have a bunch of panels that are rendered using ng-repeat. The second step of the tour is for the first of these panels.
The step shows up in the right place, but the panel is not highlighted; it's behind the backdrop.
The rest of the steps work as expected.
Any ideas?

TIA,

Andrew

I installed and copy pasted the sample code in my project (jquery 2.1.1, angular 1.2.16). I get "undefined is not a function" error messages in the console, for the 'hide' and 'show' methods, where 'detach()' and 'fadein()' are applied to the tourtip variable. This var is the result of a $compile defined above, and is indeed non null.

I didn't investigate any further, and the error may well be on my side. Just in case others bump into the same issue.

I have jQuery 2.1 and depencies are not met :/

I have a project that I wish to add angular-tour to, and I want to compiled the SCSS and JS files as part of my project.

I am unable to do this, as the bower.json is set to ignore the src directory.

Hi for some reason I'm having trouble to start the tour to work.

HTML

<tour step="currentStep">
<header tourtip="tip 1" tourtip-next-label="Learn more" tourtip-placement="bottom" tourtip-offset="60" tourtip-step="0">
.
.
.
</header>
<aside tourtip="tip 2" tourtip-next-label="Learn more" tourtip-placement="right" tourtip-offset="60" tourtip-step="1">
.
.
.
</aisde>
</tour>

JS

$scope.currentStep = 0;

And nothing happens. What am I missing ?

i have tried it to implement in Ionic framework not working for me
what i have tried =>

`<body ng-app="starter"  ng-controller="DemoCtrl">
   <div> <span id="e0">Highlighted</span></br> </div>
  <div><span id="e1">Elements</span></div>
    <ion-nav-view>
     </ion-nav-view>

 
  <tour step="currentStep" post-tour="postTourCallback()" post-step="postStepCallback()" tour-complete="tourCompleteCallback()">
     <virtual-step
      tourtip="this is step first"
      tourtip-next-label="Continue"
      tourtip-placement="bottom"
      tourtip-step="1"
      tourtip-element="#e0"></virtual-step>
    <virtual-step
      tourtip="this is step 2"
      tourtip-next-label="Cool. How do I use it?"
      tourtip-placement="bottom"
      tourtip-step="2"
      tourtip-element="#e1"></virtual-step>
     
  </tour>`

I have an application where the bootstrap steps are distributed across several pages. In this case this plugin does not seems to work. Or am I missing something?

Here is the plunker link what I am trying for http://embed.plnkr.co/TRD9tI5Vh1PYZSlVYvoZ/script.js
angular-tour directive is not initializing and it does not show any popover neither does it show any errors console.

It would be awesome being able to control either top offset and left offset despite step placement. I'd create two new attributes: tourtip-top-offset and tourtip-left-offset.

What do you think?

Hello,
intalling angular-tour version 0.2.5 with bower, the main property on
bower_components/angular-tour/bower.json is:

"main": "./dist/angular-tour-tpls.min.js"

missing the "./dist/angular-tour.css", present on master branch:

"main": [ "./dist/angular-tour-tpls.min.js", "./dist/angular-tour.css" ],

Is it normal or I miss something?

So if it is normal how do you link the css file in your application using grunt/bower js and css dependencies injections?

Thanks,
Daniele

I see that on bower.json it still requires angular 1.2.x, does the library works well with the more recent Angular 1.4.x?

hello,
if I use
tourtip-placement="center-top"

when I inspect the DOM, there is a ng-hide class added to classes: tour-arrow tt-center-top.
Why? Is there any way to control it?

Thanks in advance,
Daniele

Hi there,

In my app we already have a TourController, and angular-tour is not working because of it. Wrong controller gets injected. Is there a chance to rename your TourController without forking?

I am trying to implement this directive in a large sized angular app. However I am finding the documentation for the virtual steps to be confusing. Could anyone please clarify?

First of all, thanks for the work put into this. Can't wait to get it up and running on a few sites!

Is it possible to use ngCookies instead of jQuery cookies?

I have a couple of simple steps. I go from step 1 to step 2.
I injected tourConfig into the angular controller controlling the view where the tour steps are configured.
I overrode the backDrop to be true.

When the first step launches everything is good. But when you go from step 1 to step 2, the bacdrop dissappears for a second. The second step already has launched. And then the backdrop appears again. It almost seems like there is some type of calculation that occurs after which the backdrop divs are added to the dom. This calculation appears to take a solid half a second or so..so you can see the backdrop dissappear and appear.

Please let me know if this is a known issue or if i am doing something wrong.

Markup

<tour step="currentStep">
    <div class="item" style="text-align: right">
        <img ng-src={{exprecsrc}} ng-hide = "exprecsrc == ''" style="text-align: left; margin: 5px;">
        <a class="button button-icon icon ion-ios-upload positive" ng-click="photoOptions()" ng-hide = "exprecsrc != ''"
        tourtip="Click here to upload a photo"
            tourtip-step="1"
            tourtip-next-label="Next"
            tourtip-placement="left"
            tourtip-offset="60"></a> 
        <a class="button button-icon icon ion-close-circled assertive" ng-click="deletePhoto()" ng-hide="exprecsrc == ''" ></a> 
    </div>

    <button class="button button-block  button-positive" ng-click="submitExpense()" 
    tourtip="Click the submit button to upload your receipt to Verian"
            tourtip-step="2"
            tourtip-next-label="Next"
            tourtip-placement="bottom"
            tourtip-offset="60">Submit Expense</button>

    <button ng-click="currentStep=1; openTour()" class="button button-small button-positive">Take Tour</button>
</tour>

JavaSCript code in the controller.

// The tourconfig must be injected and the backdrop set on it.
tourConfig.backDrop = true;

Thanks
Pramod

Demo page on - http://daftmonk.github.io/angular-tour/ does not work. The following error appears in the console log. Tested on Chrome, Firefox, and Safari:

Error: [$compile:ctreq] http://errors.angularjs.org/1.4.7/$compile/ctreq?p0=tour&p1=tourtip
at Error (native)
at http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:6:416
at t (http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:59:233)
at K (http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:62:78)
at g (http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:54:410)
at K (http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:61:488)
at g (http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:54:410)
at http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:53:480
at http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:20:103
at n.$eval (http://daftmonk.github.io/angular-tour/lib/angular-1.4.7.min.js:133:221)

In my app , I wanna set defaults of tourConfig. I'm doing like this...

angular.module('myProject',[...])
.config(['tourConfig',function(tourConfig){
tourConfig.setDefaults({
offset: 5,
backDrop:true
}])

But i am getting error?
Anything wrong?

I think a back button would definitely be good to have as an option like the next button, just like shepherd has here: Shepherd.

This would only occur where tourtip-step != 0

The scrolling is nice, but doesn't fit my use case currently as I have a few absolute-positioned elements such as a title bar and footer bar and the scrolling to tooltips moves them around on the screen. Is there currently a way to disable scrolling automatically?

To clarify, I could technically get around this by setting tourConfig.scrollSpeed = 1000000000 and hoping they close the browser before they notice any movement ;) But a proper solution would be nice

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?

Not sure why I would get this.

I have used below tour directive.

<tour step="currentStep" 
                <span tourtip="Few more steps to go."
                      tourtip-next-label="Close"
                      tourtip-placement="bottom"
                      tourtip-offset="80"
                      tourtip-step="0">
                </span>

Q 1: How can I make the whole item click able ? In other words if user clicks ,it should open a popup or something like that ?

Q 2: Clicking anywhere on the page should close the tour item if it is open ?

I just tried cloning and running npm install and get this error in npm-debug.log:

368 info postinstall [email protected]
369 info install [email protected]
370 info postinstall [email protected]
371 info prepublish [email protected]
372 error peerinvalid The package karma does not satisfy its siblings' peerDependencies requirements!
372 error peerinvalid Peer [email protected] wants karma@>=0.9.3
372 error peerinvalid Peer [email protected] wants karma@>=0.9
372 error peerinvalid Peer [email protected] wants karma@>=0.9
372 error peerinvalid Peer [email protected] wants karma@>=0.9
372 error peerinvalid Peer [email protected] wants karma@>=0.9
372 error peerinvalid Peer [email protected] wants karma@>=0.9
372 error peerinvalid Peer [email protected] wants karma@>=0.9
372 error peerinvalid Peer [email protected] wants karma@>=0.9
372 error peerinvalid Peer [email protected] wants karma@~0.12.0
372 error peerinvalid Peer [email protected] wants karma@>=0.9
372 error peerinvalid Peer [email protected] wants karma@>=0.9
373 error System Darwin 13.4.0
374 error command "node" "/usr/local/bin/npm" "install"
375 error cwd /Users/britztopher/projects/testing/clone/angular-tour
376 error node -v v0.10.30
377 error npm -v 2.0.0-alpha-5
378 error code EPEERINVALID
379 verbose exit [ 1, true ]

Looks like there is a problem with karma dependencies. Anyone else having this issue?

In a parent controller, I'm able to set the cookie to remember what step I was previously on, but I'm trying to not show the tour if it's already been viewed. Currently, I'm setting the cookie step to -1 when the tour completes. I'm trying the following:

if($cookies.myTour < 0){
  closeTour();
}

But it's saying closeTour is undefined, which makes sense because it's in the child scope. Is there any way to stop the tour from firing?

Hi,
I'd like to show the actual step and the total number of steps on each popup. Like "This is step 4 out of 9".

Is there any way to accomplish this?

Hi,

I have a global variable in my app that should control whether to show the tour or not (e.g. users returning from another page should not have the tour anymore).

How can I achieve that?

Ideally, there would be a pre-tour callback that could be fired that could return true / false.

This should be an easy fix. I'll try to do the PR myself. Essentially the bower.json file should be changed to

"main": [
  "./dist/angular-tour-tpls.min.js",
  "./dist/angular-tour.css"
],

as opposed to what it is now

"main": "./dist/angular-tour-tpls.min.js",

Why is this important? When you run automated tasks like Grunt's wiredep it looks at this attribute to automatically generate your link and script tags, and the absence of it forces you to manually add the missing link tag every time a task runs.

The "responsive" feature in your deafult layout it would be great

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

How can I get rid of the Next label on the last step?

Hello ! I want to confirm an issue I'm having I have a view with this (simpliefied) form

If I copy your example in this html, it works great....if I paste it either in the template of the directive or in the html I include with the ng-include tag, it does not....I tried putting the "tour" tag in this level, wrapping everything (its own html and the includes and the directive), and putting some tourtips inside the directive.....and nothing.
Is this what I should expect ?

I have several elements that have overflow hidden or contained within something with overflow hidden marked on them and if I add the tooltip-step to them angular-tour adds the tooltip popup as a child of that container and the popup is not visible hence the tour cannot be continued. Since you're going through the trouble to position the tooltip anyway there's no need to add it to that container. It could just be added globally or at least at the level of the tour element and moved into position using your existing positioning mechanism. Unfortunately because of this I can't use angular-tour