easelinc/tourist

Simple, flexible tours for your app

tourist's Issues

Provide minimized js file without inline documentation

It would be nice to provide a production-ready version of the script so that users don't have to minimize it themselves.

Adding a step back btn

Hi Team,

Any chance there is a step back button for going to the previous step in the current tutorial?
If not, is there any easy way to add one?

Thanks!

What browsers do you support?

Just curious what browsers you are targeting.

Thanks

CloseButton does not work

I set the value for closeButton = true in all of my steps, but the close button doesn't show, and the user can't close the turorial until the end, Am I wrong with something?

Would it be possible to have a build with only the base tip ?

I think the basic build should not include Bootstrap and QTip.
In almost every use case, you'll only use one of them and the other will be loaded and never used.
Solutions:

• Create a simple build with only the base logic and let the developer include its own custom tip (or use onle Bootstrap or QTip)
• Creates one build with everything (the current one)

Your thoughts ?

Darkened content below the popup

Can we add a step object option that would darken the content below the popup. This helps block out the distracting noise of the content and shift visual focus on the popup.

Close Button does not display

I see this locally as well as on http://easelinc.github.io/tourist/

I am using Chrome Version 32.0.1700.102

Dependency on backboneJS

I am looking to use this for my meteorJS based application which technically isn't an SPA but I am wondering if backbone is a hard set requirement, I am trying to avoid adding a dependency to it and still use this package if possible ?

Don't overwrite default styling for Bootstrap popovers

Currently tourist.css is overwriting the default styling of bootstrap popovers.

This breaks the design of the popovers which are used without tourist. Especially the line which removes the default padding is causing issues, as it's non-specific.

Instead I propose that the popovers generated by tourist should be created with a tourist-popover class, and all styling should be applied to only these popovers.

Reposition step popovers on window/document resize.

Couldn't find this information in your documentation. Would be a nice addition.

Prevent popover from closing on body click.

Recently been trying to detect if the user clicks out of the tour by clicking outside of the popover to let them know that they can restart the tour.

I was unable to find a way to:

1. Detect when the user accidentally closed the popover
2. Keep the popover from closing when clicking outside the popover

Is that functionality built in or is that something that isn't possible?

Thanks!

What is the status of tourist?

With the shut down of easel, what is the status of this project? There doesn't seem to be much active development. Is there a development community still active behind this?

option to set the next button text

Add support to set the next button text of each step.

This is a pretty basic option that I can't find on the documentation. Also this is needed to support I18N provided by the system.

teardown for last step is called 3 times

in next https://github.com/easelinc/tourist/blob/master/src/tour.coffee#L141
in showFinalStep https://github.com/easelinc/tourist/blob/master/src/tour.coffee#L206
in stop https://github.com/easelinc/tourist/blob/master/src/tour.coffee#L193

Not sure how we can fix that.
Deleting the callback after using it does not look right.
Given the current state, I guess a small revamp of the flow is necessary here.

Multilingual support

At the moment, the buttons and step-counter are English only, because it's hardcoded at https://github.com/easelinc/tourist/blob/master/tourist.js#L45 .

Would you mind making this a setting?

Skipping steps that correspond to non visible elements

I added some generic custom code to ensure that I do not send steps that correspond to non visible elements to tourist constructor. I need to do this since I have a dynamic layout and some elements may be hidden depending on current data values.

Else the tour simply stops when it is the invisible element's turn. I think that touristjs should skip such elements anyway.

TypeError: undefined is not a constructor

TypeError: undefined is not a constructor (evaluating 'new Tourist.Tip[this.options.tipClass](tipOptions)')

The example website works form me but for some reason when I moved it over and added more steps it was not working anymore.

TypeError: Cannot read property 'getBoundingClientRect' of undefined when used with AngularJS routes

When tourist.js is used with AngularJS routes, selecting an element as target fails if the target is contained in an external route resource that is loaded on demand.

Example step definition:

{
content: "Instructions",
highlightTarget: true,
nextButton: true,
target: $("#someid"),
my: "top center",
at: "bottom center"
}

When the tour is started from the AngularJS framework page and $("#someid") is not loaded yet (it is loaded when the route is selected, causing Angular to GET the html from the server and dynamically inserting it into the DOM), starting the step fails at the following lines in tourist.js:

BootstrapTip.prototype._getTargetBounds = function(target) {
var el, size;
el = target[0];
if (typeof el.getBoundingClientRect === 'function') {
...

el is undefined. I suppose this is caused by evaluating $("#someid") when the tour is created rather than when the step is created/shown. I added a delay in the previous step to make sure $("#someid") is defined when the step is created:

(in teardown() in previous step:)
setTimeout(function() { tour.next(); }, 2000);

The behaviour is that the tour pauses, the browser displays the new screen (loading the route fragment from server, inserting it into the DOM), 2 seconds later, the error is shown in the console:

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined tourist.js:559
Tourist.Tip.BootstrapTip.BootstrapTip._getTargetBounds tourist.js:559
Tourist.Tip.BootstrapTip.BootstrapTip._caculateTargetPosition tourist.js:477
Tourist.Tip.BootstrapTip.BootstrapTip._setPosition tourist.js:460
Tourist.Tip.BootstrapTip.BootstrapTip.setTarget tourist.js:389
Tourist.Tip.Bootstrap.Bootstrap._setTarget tourist.js:290
Tourist.Tip.Base.Base.render tourist.js:78
Tourist.Tour.Tour.onChangeCurrentStep tourist.js:939
(anonymous function) tourist.js:5
triggerEvents backbone.js:209
Backbone.Events.trigger backbone.js:148
_.extend.set backbone.js:357
Tourist.Tour.Tour._showStep tourist.js:999
Tourist.Tour.Tour.next tourist.js:921
(anonymous function) tourist.js:5
(anonymous function) tours.js:84

Keyboard navigation?

I didn't look into the code, but what I noticed from your demo is, that you cannot use your keyboard arrows to navigate. Maybe it's just turned of in your demo?, but if not, this is something that is really missing...