abhikmitra / ng-joyride Goto Github PK

after performing tour, tooltip is not coming. i need to refresh the page then it shows tool tip

I have already using bootstrap popover in other part of the system, and initially, when I launch joyride on the first joyride item, I have 'previous' button. So when clicking on it I got:

Cannot read property 'type' of undefined at: if (previousStep.type === "location_change") {

This is the actual function:

function goToPrev() {
                    steps[currentStepCount].cleanUp();

                    var previousStep = steps[currentStepCount - 1];
                    if (previousStep.type === "location_change") {

I'm using Angular UI router also.

Hi,
I rely on the 'joyride:next' event in my code, and i found out that you didn't unbind the event when the tour is closed.
So every time I reopen the tour, it will always get stuck when i call the event since its calling it twice.

If your HTML places elements into stacking contexts, and you want to highlight an element whose parent has a z-index, it seems to be impossible for the joyride elements to be brought to front. See this article for a description of why:

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

The effect is that your chosen element, and the joyride popover, are behind the curtain and you cannot interact with them.

This is not a "bug" in ng-joyride, as such, but more just the way z-index works. It does prevent me from using joyride though, as my stacking context needs to be the way it is.

An alternative would be to avoid bringing the target element to the front and instead just use its bounding rectangle to create an SVG shape with a hole in it for the curtain and then put the joyride elements above that. I may take a stab at that in the new year if nobody else has looked at it then.

You could also add a margin to the bounding rectangle (make it bigger to show some context) or add rounded corners, or even use a circle or ellipse as the cutout shape.

This is either a feature request or a request for assistance.
I'm trying to add a "Don't show again" button to individual tooltips that would prevent them from being shown in the future. I tried to accomplish this by by adding an <input type="checkbox" name="tour_tooltip_1" id="tour_tooltip_1" ng-model="tooltip_1_dismissed"> to the text of each tooltip, and the checkbox renders correctly, but doesn't have access to any scopes, including $rootScope. The model doesn't get bound to anything, I can't output any values with (( myValue }} inside the tooltip. The tooltip content seems completely outside of my Angular app's scope.
Is there any way I can accomplish what I need done?

Thanks!

This is a feature request rather than an issue.

Use case:

1. Element type step points to a search input field.
2. User enters search query and hits enter.
3. Joyride goes to next step automatically.

Thank you for the awesome plug-in!

Is there a way to load config data dynamically? I want to send JSON from the server and refresh it depending on the screen user is located on.

hi,

i am using ng-joyride for my web application
i am facing two issue:

1. the "heading" option is being overridden by the title of the div.
2. I tried "attachtoBody" but still overlay is not coming.

Error: [$injector:modulerr] Failed to instantiate module ngJoyRide due to:
Error: [$injector:nomod] Module 'ngJoyRide' is not available! You either misspelled the module name or forgot to load it.

The same code works fine when I am running it through development (non-minified) version

Hello,

Is ng-joyride will support i18n for the text hard coding ?

I was forced to replace some text in the source code for use ng-joyride in my project.

Thanks

Starting the config object with type:element doesn't seem to add the joyride container to the page.

Hi Abhikmitra,

ngjoyride component is simply awesome. was able to playaround with it and use it as per my need. Currently I am facing an issue. I am highlighting a custom popover / dialog window which has some links. Those links are not accessible even after the joyride tour is over. Any clues? Your help is much appreciated. Only if i forcefully refresh the application the links are working else not.

Hi

I'm trying to integrate your module in my app but I get an error :
TypeError: undefined is not a function
at Object._generatePopover (http://127.0.0.1:9002/vendor/ng-joyride/ng-joyride.js:105:23)

On your demo I saw that you're loading bootstrap.js (I don't), but this should not be needed because in parallel you're loading angular-bootstrap module (ui-bootstrap-tpls.js) that already handle himself (the angular-way) all the JS needed to run bootstrap JS components.

Or am I missing something ?

By the way, thanks for this module that seems great ;)

Any chance of making the existence of the backdrop(curtain) a option on each step of the tour?

If two title steps occur in a row the second step closes immediately leaving the user with the curtain and no other modals to click through. I've confirmed this in the demo so I know it's not an issue my environment or project. Any ideas?

Tour panels width is sometimes too narrow when attached to narrow elements (i.e. button). Also, even when elements tour is attached to are not narrow, when there is a lot of text, tour panels tend to be too narrow and too height. Can you control the width depending on the amount of text in them or add bootstrap way of defining width (1-12 columns)?

Just started using ng-joyride, and it is very nice. However, I'm running into a problem with using the curtainClass property on an element. If I create a CSS class that should override some of the default properties (e.g., override the opacity or color of the curtain) it won't work because the defaults are set on a CSS id (#ng-curtain), and CSS gives precedence to ids over classes.

So trying to override any of the default properties with the curtainClass will never work. Am I missing something?

The returned object of the loadTemplate method is not always the same. Thus, its properties too.

I suggest to use always HttpPromise with the data property instead of promise.

This line of code:
$fkEl.popover('show');

Throws the exception:

angular.js:11594 TypeError: Cannot read property 'ownerDocument' of undefined (full stack at the end of this comment).

With a breakpoint on $fkEl.popover('show');, I can see that the selector has found my element, but for some reason is throwing this exception. What am I doing wrong?

The stack trace is as follows:

angular.js:11594 TypeError: Cannot read property 'ownerDocument' of undefined
at Function.gb.contains (http://localhost/bower_components/jquery/dist/jquery.min.js:2:12147)
at Function.n.extend.buildFragment (http://localhost/bower_components/jquery/dist/jquery.min.js:3:14212)
at n.fn.extend.domManip (http://localhost/bower_components/jquery/dist/jquery.min.js:3:16801)
at n.fn.extend.after (http://localhost/bower_components/jquery/dist/jquery.min.js:3:15338)
at n.each.n.fn.(anonymous function) as insertAfter
at c.show (http://localhost/bower_components/bootstrap/dist/js/bootstrap.min.js:6:22544)
at HTMLSpanElement. (http://localhost/bower_components/bootstrap/dist/js/bootstrap.min.js:6:27388)
at Function.n.extend.each (http://localhost/bower_components/jquery/dist/jquery.min.js:2:2882)
at n.fn.n.each (http://localhost/bower_components/jquery/dist/jquery.min.js:2:847)
at b as popover

Running ngAnnotate (https://github.com/olov/ng-annotate) to minify my code and use ng-joyride, I got:

Running "ngAnnotate:myApp" (ngAnnotate) task
Generating "client/build/app.annotate.js" from "client/build/app.annotate.js"...ERROR
>> error: couldn't process source due to parse error
>> Line 17217: Strict mode function may not have duplicate parameter names
Warning: Task "ngAnnotate:myApp" failed. Use --force to continue.

This means there is issue in the functions in strict mode.

Localization support is needed, static texts must be replaceable

It would be nice to see support for cookies to only display the joyride walkthrough the first time like in jQuery Joyride.

  'cookieMonster': true,           // true/false for whether cookies are used
  'cookieName': 'JoyRide',         // choose your own cookie name
  'cookieDomain': false,           // set to false or yoursite.com

From http://zurb.com/playground/jquery-joyride-feature-tour-plugin

Why change the background color of only static elements? I have some non-static elements that remain 'hidden' behind the backdrop because their color isn't' being changed.

Please, do make this NOT require bootstrap.

Hi,
I am using ng-joyride for my web application,it have html content which comes from backend ,I am facing issue like for static content it is fine but for dynamic content I am getting grey background which doesn't display html content only joyride modal gets displayed.

Hi Abhik,
trying to find the root cause for it, page loads curtain and title but the popup is empty.
No JS errors in console.

<div id="ng-curtain" class="ng-curtain-class" style="display: block;"></div>
<div class="ng-joyride-title" style=""></div>

Or is there a way to do this already?

Thanks!

When JSON comes from the server all values (except numbers and booleans) need to be enclosed in quotes. This prevents me from using functions. So, I cannot have the following:
{type: "function", fn: openModalDemo}.
It needs to be something like (difference is in quotes):
{type: "function", fn: "openModalDemo"}.

Any other syntax would do as long as it is a valid JSON.

Good library - only one bug is causing me to not use it (yet)!

Steps to reproduce:
Go to http://abhikmitra.github.io/ng-joyride-demo/#/
Click on Next until you are on "Home" link on nav - Instead of clicking Next, just click on "Home" (original link) - you will see that the tour disappears but the black backdrop doesn't and basically renders screen un-clickable. Can it be fixed? i.e detect click on the tour element and call endJoyRide() ?

Should setting $scope.startJoyRide to false clear open panels from the screen?

I need a way to end the joyride mid run.

The jQuery plugin allows you to send .joyride('end') to finish programatically

I expected setting the start attribute to false to have the same effect but this does not seem to trigger the onFinish method, or remove popovers from the screen. Am I missing something? or does ng-joyride not have this functionality?

Thanks

I would like to be able to remove the skip option from all the steps of the tour. I know I could remove it from the default template in the code, but at the next update I will have to manually remove it again.

Is there the posibility to add a show/hide option for skip?

Hi,
I need to add in the "nextBtn" the ng-disabled directive because that button need to stay disabled until a condition is true. Is it possible? The same thing is for ng-if or ng-class. I can't use them in the template and i don't know why.. This is my situation:

function elementTourTemplate(content, isEnd){
            return '<div class=\"row custom-color\">' +
                '<div id=\"pop-over-text\" class=\"col-md-12\">' +
                content +
                '</div>' +
                '</div>' +
                '<hr>' +
                + $scope.rFunction() +
                '<div class=\"row\">' +
                '<div class=\"col-md-8 qt-tmpl-footer-modal\">' +
                '<a class=\"skipBtn pull-left qt-margin-min\" type=\"button\">Skip</a>' +
                '<button id=\"prevBtn\" class=\"prevBtn uk-button uk-button-danger qt-margin-min\" type=\"button\">' +
                'Back</button>' +
                '<button ng-disabled=\"$scope.rFunction() == false\" id=\"nextBtn\" class=\"nextBtn uk-button uk-button-success\" type=\"button\">' +
                'Next&nbsp;<i class=\"glyphicon glyphicon-chevron-right\">'+
                '</button>'+
                '</div>' +
                '</div>'
        }

 $scope.config=[
            {  
                type: "element",
                selector: "#left-tree-folders",
                heading: "Test one",
                text: "Click here to go to the next step",
                placement: "right",
                scroll: true,
                elementTemplate: elementTourTemplate

            }, ....

Well, as you can see i've got a custom template in which i can show the value i need: $scope.rFunction()

When i try to stamp this function that returns a boolean value outside any element of the template it's working. But if i try to put it on a directive like ng-disabled or ng-if not. Any idea? Thanks

1. Open a modal window.
2. Start the tour
3. Get to the "element" step that points to some element within the modal.
4. Close the tour

Links (href) within the modal do not work (ng-click works fine). I'm not sure whether this is the only way to reproduce the problem.

Hi,
I was wondering if there is a reason your bower.json file specifies bootstrap version 3.2.0? I'm having issues because ng-joyride is requiring 3.2.0 (and I have other dependencies using a later version) - is it possible to change the bower.json to something like:

"bootstrap": "~3.2.0"

Thanks,
Steve

Hi,

I have some elements which are displayed based on some conditions,is there anyway to bypass the object property if not found as I am getting error if not found TypeError: Cannot read property 'top' of undefined at Object._scrollToElement in case it is not displayed.

When the "Skip" button is clicked on an element popover that has an advanceOn option set for a click event, the event click remains. So, after the curtain has disappeared and the tour has ended, if the user clicks the element registered with the advanceOn, the tour resumes without the curtain.

Is there a specific call necessary to clear all tour related event watchers?
Thanks

Hi, there!
Thanks for ng-joyride! I'm loving using it, but I'm afraid I have found another issue for which I would be grateful for any help.

Issue: Checkboxes during a tour fail to register a value change regardless of the click actually being detected (the checkbox flickers a darker grey).

Here's a plunker that reproduces the issue:
http://plnkr.co/8xsZvrhEAKaIJoJVphCj

Many thanks!

Feature suggestion:
At times I'd like to highlight a parent element while I point the popup at one of its children.

This would be particularly helpful for pointing to an element contained in a stacking context. You could highlight the stacking context's root element and point to a descendant element within it.

Currently, you can only point at the element you highlight and if that element is part of a stacking context, it will usually remain behind the curtain.

Title popover is always generated with either 'Finish' or "Next >" label for the nextBtn.
the machanism in _compilePopover(html) function overrides the content of used 'titleTemplate'

Forgive me but I am removing bower dependencies and I needed a version of this package provided by NPM as we are removing bower from our build system.

https://www.npmjs.com/package/ng-joyride

Please let me know your NPM username and I'll make you an owner of the npm package and remove myself from it ASAP. If for whatever reason you need the package to be unpublished, let me know and I will immediately.

hi,

i am using ng-joyride for my web application
i am facing two issue:

1. the "heading" option is being overridden by the title of the div.
2. I tried "attachtoBody" but still overlay is not coming.

Hi,
A couple of times I've set up joyride with misconfigured config (eg a bad/mistyped element name). When the user happens to get to the step, joyride just stops working - the curtain is down, but the user has no way of recovering out of the joyride (unless they F5)

You can see this in the plunkr: http://plnkr.co/edit/Yn7cqL8IpR1VoL1ky65R

I could see this happening on a largish project where element ids change, and the tour is mistakenly not updated.

Can I make a suggestion that for misconfigured configs, that ng-joyride either end the tour, or skip the step?

Thanks,
Steve

Hi

Is it somehow possible to skip non-present elements and jump to the next element that's present?

I'm trying to setup ng-joyride on a page where certain users don't have access to a specific element on the site. It's hidden from view (yes I know - not the most elegant solution).

When ng-joyride comes to the missing element only the curtain in shown.

See step 6 here: http://abhikmitra.github.io/ng-joyride-demo/#/

If you click in the greyed out background of the modal, both the modal and the joyride will stop, but the page will freeze with a greyed out background still.

It would be nice if you ever clicked outside the joyride, it would be the same as clicking "skip", but that the joyride was hidden to a specific predefined place where you could pick it up at any time.

Is it possible to dynamically trigger a joyride? We have some triggers that happen based on certain events so I'm dynamically setting startJoyRide and joyRideConfig but it doesn't seem to do anything.

Hi folks,

When i use firefox, the tour didn't work on page switch. Joyride didn't redirect the path assigned.
Can I ask if anyone has encountered this?

Thanks,
Josie

My initial popup works great, but there after they are behind the 'curtain' class and cannot be clicked.

Hello,
I am using ngjoyride in my ASP.NET application. I configured joyride and it works nicely. But the problem is that when joyride is completed then the event on page is not working.

The package compulsory want to have bootstrap for popover functionality.