New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

bootstrap-tour

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

bootstrap-tour - npm Package Compare versions

Comparing version

0.9.2
to
0.9.5

docs/api.json
docs/bootstrap-tour.js.html
docs/index.html
docs/template.jade

5

deps/example-tour.js

@@ -17,6 +17,3 @@

title: "Setup in four easy steps",
content: "Easy is better, right? Easy like Bootstrap.",
options: {
labels: {prev: "Go back", next: "Hey", end: "Stop"}
}
content: "Easy is better, right? Easy like Bootstrap."
});

@@ -23,0 +20,0 @@ tour.addStep({

19

grunt.js
/*global module:false*/
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-coffee');
grunt.loadNpmTasks('grunt-shell');

@@ -17,3 +18,3 @@ // Project configuration.

dist: {
src: ['<banner:meta.banner>', '<file_strip_banner:src/<%= pkg.name %>.js>'],
src: ['<banner:meta.banner>', 'lib/bootstrap-tour.js'],
dest: 'dist/<%= pkg.name %>.js'

@@ -47,2 +48,14 @@ }

},
shell: {
dox:{
command:'./node_modules/dox/bin/dox < lib/bootstrap-tour.js > docs/api.json',
stdout:true,
stderr:true
},
doxx:{//
command:'./node_modules/doxx/bin/doxx --template docs/template.jade --source lib --target docs',
stdout:true,
stderr:true
}
},
lint: {

@@ -52,4 +65,4 @@ files: ['grunt.js', 'src/**/*.js']

watch: {
files: ['src/*.coffee', 'test/*.coffee'],
tasks: 'coffee:lib coffee:test lint qunit'
files: ['docs/*.jade', 'src/*.coffee', 'test/*.coffee'], // lint qunit
tasks: 'coffee:lib coffee:test shell:doxx shell:dox'
},

@@ -56,0 +69,0 @@ jshint: {

1285

lib/bootstrap-tour.js

@@ -1,11 +0,17 @@

/* ============================================================
# bootstrap-tour.js v0.1
# http://sorich87.github.com/bootstrap-tour/
# ==============================================================
#
# Copyright (c) 2013 FG Ribreau
# Licensed under the MIT, GPL licenses.
/**
* Bootstrap Tour Extended
*
* Copyright (c) 2013 FG Ribreau (@fgribreau)
* Licensed under the MIT, GPL licenses.
* @ignore
*/
var __hasProp = {}.hasOwnProperty,
/**
* (only for CoffeeScript)
* @private
* @ignore
*/
var __slice = [].slice,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

@@ -16,95 +22,21 @@

document = window.document;
Backend = (function() {
function Backend() {}
Backend.prototype.setState = function(options, key, value) {};
Backend.prototype.getState = function(options, key) {};
return Backend;
})();
Memory = (function(_super) {
__extends(Memory, _super);
function Memory(options) {
this.ns = "__db_" + options.name + "__";
window[this.ns] = {};
}
Memory.prototype.setState = function(options, key, value) {
return window[this.ns][key] = value;
};
Memory.prototype.getState = function(options, key) {
return window[this.ns][key] || null;
};
return Memory;
})(Backend);
Cookie = (function(_super) {
__extends(Cookie, _super);
function Cookie(options) {
this.ns = "" + options.name + "_";
}
Cookie.prototype.setState = function(options, key, value) {
return $.cookie("" + this.ns + key, value, {
expires: 36500,
path: '/'
});
};
Cookie.prototype.getState = function(options, key) {
return $.cookie("" + this.ns + key);
};
return Cookie;
})(Backend);
LocalStorage = (function(_super) {
__extends(LocalStorage, _super);
function LocalStorage(options) {
this.ns = "" + options.name + "_";
}
LocalStorage.prototype.setState = function(options, key, value) {
return window.localStorage.setItem("" + this.ns + key, JSON.stringify(value));
};
LocalStorage.prototype.getState = function(options, key) {
try {
return JSON.parse(window.localStorage.getItem("" + this.ns + key));
} catch (err) {
console.error(err);
return null;
}
};
return LocalStorage;
})(Backend);
backend = {
Memory: Memory,
Cookie: Cookie,
LocalStorage: LocalStorage
};
Tour = (function() {
/**
* Create a tour
* @param {Object} options An optional option object (see #defaults)
* @see Tour.defaults
* @constructor
* @return {Tour}
*/
function Tour(options) {
var _this = this;
this._options = $.extend({}, Tour.defaults, options);
this._options = $.extend(true, {}, Tour.defaults, options);
this._setupEvents();
this.persistence = new backend[this._options.persistence in backend ? this._options.persistence : "Memory"](this._options);
this._steps = [];
this.setCurrentStep();
this._initCurrentStep();
this._onresize(function() {
if (!_this.ended) {
return _this.showStep(_this._current);
return _this._showStep(_this._current);
}

@@ -114,38 +46,51 @@ });

Tour.prototype.setState = function(key, value) {
this.persistence.setState(this._options, key, value);
return this._options.afterSetState(key, value);
};
/**
* Remove the Tour
*/
Tour.prototype.getState = function(key) {
var value;
value = this.persistence.getState(this._options, key);
this._options.afterGetState(key, value);
return value;
Tour.prototype.dispose = function() {
var _this = this;
this._setState("current_step", null);
this._setState("end", null);
if (this._steps) {
$.each(this._steps, function(i, s) {
if ((s.element != null) && (s.element.popover != null)) {
return s.element.popover("hide").removeData("popover");
}
});
}
$('.popover.bootstrap-tour, #bootstrap-tour-style, #bootstrap-tour-overlay').remove();
$(document).off("click.bootstrap-tour, keyup.bootstrap-tour");
this._evt.off();
this.persistence.dispose();
if (this._options.step) {
$.each(this._options.step, function(k) {
return _this._options.step[k] = null;
});
}
return $.each(this._options, function(k) {
return _this._options[k] = null;
});
};
/**
* Add a step to the tour
* @param {Object} step An optional object that describe the step (see #stepDefaults)
* @see Tour.stepDefaults
*/
Tour.prototype.addStep = function(step) {
return this._steps.push(step);
this._steps.push($.extend({}, Tour.stepDefaults, step));
return this;
};
Tour.prototype.getStep = function(i) {
if (this._steps[i] != null) {
return $.extend({
path: "",
element: null,
placement: "right",
title: "",
content: "",
next: i === this._steps.length - 1 ? -1 : i + 1,
prev: i - 1,
animation: true,
reflex: false,
addClass: "",
onShow: function(tour, event) {},
onShown: function(tour, event) {},
onHide: function(tour, event) {}
}, this._steps[i]);
}
};
/**
* Start tour from current step
* @param {Boolean} force If force is set to `true` the tour will be forced to start
* @return {Promise} Promise that will be resolved when the step is shown
*/
Tour.prototype.start = function(force) {

@@ -159,6 +104,9 @@ var def,

if (this.ended() && !force) {
return def.fail("Tour ended").promise();
return def.reject("Tour ended").promise();
}
$(document).off("click.bootstrap-tour", ".popover .next").on("click.bootstrap-tour", ".popover .next", function(e) {
$(document).off("click.bootstrap-tour", ".popover.bootstrap-tour .next").on("click.bootstrap-tour", ".popover.bootstrap-tour .next", function(e) {
e.preventDefault();
if (!$(e.currentTarget).is(':enabled')) {
return;
}
return _this.next({

@@ -168,4 +116,7 @@ trigger: 'popover'

});
$(document).off("click.bootstrap-tour", ".popover .prev").on("click.bootstrap-tour", ".popover .prev", function(e) {
$(document).off("click.bootstrap-tour", ".popover.bootstrap-tour .prev").on("click.bootstrap-tour", ".popover.bootstrap-tour .prev", function(e) {
e.preventDefault();
if (!$(e.currentTarget).is(':enabled')) {
return;
}
return _this.prev({

@@ -175,4 +126,7 @@ trigger: 'popover'

});
$(document).off("click.bootstrap-tour", ".popover .end").on("click.bootstrap-tour", ".popover .end", function(e) {
$(document).off("click.bootstrap-tour", ".popover.bootstrap-tour .end").on("click.bootstrap-tour", ".popover.bootstrap-tour .end", function(e) {
e.preventDefault();
if (!$(e.currentTarget).is(':enabled')) {
return;
}
return _this.end({

@@ -183,63 +137,208 @@ trigger: 'popover'

this._setupKeyboardNavigation();
this.showStep(this._current, def);
this._showStep(this._current, def);
return def.promise();
};
Tour.prototype._initEvent = function(e) {
var step;
/**
* Goto a step by its index
* @param {Number} index Step index
* @return {Deferred} The deferred will be resolved when the step `index` will be shown
*/
Tour.prototype.gotoStep = function(index) {
return this._when(this._mapTimes(index, this.next), this);
};
/**
* Attach an event handler function for one event.
* @param {String} event A string containing one Bootstrap-tour event types, it can be "hide", "hidden", "show", "shown" or "skip". Each event can have a `:step{index}` path appended. For instance the event "shown:step0" will be triggered when the first step will be shown on screen.
* @param {String} selector A selector string to filter the descendants of the selected elements that trigger the event.
* @optional
* @param {String} data Data to be passed to the handler in event.data when an event is triggered.
* @optional
* @param {Function} handler A function to execute when the event is triggered.
*/
Tour.prototype.on = function(event, selector, data, handler) {};
/**
* Attach a handler to an event. The handler is executed at most once.
* @param {String} name A string containing one Bootstrap-tour event types, such as "hide", "hidden", "show", "shown" or "skip".
* @param {Mixed} data Data to be passed to the handler in `event.data` when an event is triggered.
* @optional
* @param {Function} handler A function to execute at the time the event is triggered.
* @optional
* see: #on
*/
Tour.prototype.one = function(event, data, handler) {};
/**
* Remove an event handler.
* @param {String} event Event name
* @param {Function} handler A handler function previously attached for the event(s), or the special value false.
*/
Tour.prototype.off = function(event, handler) {};
/**
* Trigger an event on `Tour`
* @param {String} name Event name (e.g. "show", "shown", "hide", "hidden", "skip")
* @optional
* @param {Object} e Event object
*/
Tour.prototype.trigger = function(name, e) {
if (e == null) {
e = {};
}
if (!e.trigger) {
e.trigger = "api";
this._evt.triggerHandler(this._initEvent(name, e));
if (e.step) {
return this._evt.triggerHandler(this._initEvent("" + name + ":step" + e.step.index, e));
}
step = this.getStep(this._current);
if (e.element === false) {
delete e.element;
} else if (step) {
e.element = this.getElement(step.element);
}
return e;
};
/**
* Hide current step and show next step
* @param {Object} (optional) Event object
* @return {Promise} The promise will be resolved when the next step will be shown
*/
Tour.prototype.next = function(e) {
var def,
_this = this;
def = $.Deferred();
this.hideStep(this._current, this._initEvent(e));
setTimeout(function() {
return _this.showNextStep(def);
}, 0);
if (e == null) {
e = {};
}
def = e && e.def ? e.def : $.Deferred();
this._hideStep(this._current, {
trigger: e.trigger
}).always(function() {
return _this._showNextStep(def);
});
return def.promise();
};
Tour.prototype.prev = function(e) {
/**
* Hide current step and show previous step
* @param {Object} (optional) Event object
* @return {Promise} The promise will be resolved when the previous step will be shown
*/
Tour.prototype.prev = function(trigger) {
var def,
_this = this;
if (trigger == null) {
trigger = "api";
}
def = $.Deferred();
this.hideStep(this._current, this._initEvent(e));
setTimeout(function() {
return _this.showPrevStep(def);
}, 0);
this._hideStep(this._current, {
trigger: trigger
}).always(function() {
return _this._showPrevStep(def);
});
return def.promise();
};
Tour.prototype.end = function(e) {
this.hideStep(this._current, this._initEvent(e));
$(document).off(".bootstrap-tour");
return this.setState("end", "yes");
/**
* End the tour
* @param {String} (optional) trigger
* @return {Promise} The promise will be resolved when the tour ended
*/
Tour.prototype.end = function(trigger) {
var def, e, step,
_this = this;
if (trigger == null) {
trigger = "api";
}
def = $.Deferred();
step = this._getStep(this._current);
e = {
step: step,
trigger: trigger
};
this._hideStep(this._current, e).always(function() {
_this._setState("end", "yes");
$(document).off(".bootstrap-tour");
_this.trigger("end", e);
return def.resolve();
});
return def.promise();
};
/**
* Verify if tour is enabled
* @return {Boolean} true if the tour is ended
*/
Tour.prototype.ended = function() {
return !!this.getState("end");
return !!this._getState("end");
};
/**
* Restart the tour
*/
Tour.prototype.restart = function() {
this.setState("current_step", null);
this.setState("end", null);
this.setCurrentStep(0);
this._setState("current_step", null);
this._setState("end", null);
this._setCurrentStep(0);
return this.start();
};
Tour.prototype.getElement = function(el) {
/**
* Switch debug mode
* @param {Boolean} activated If true, all `Tour` emitted events will be displayed in console
*/
Tour.prototype.debugMode = function(activated) {
var evtName, _i, _len, _ref, _results;
_ref = ["show", "shown", "hide", "hidden", "end"];
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
evtName = _ref[_i];
_results.push(this.on(evtName, $.proxy(this._debug, this, evtName)));
}
return _results;
};
/**
* Get a step by its indice
* @param {Number} i
* @return {Object}
* @private
*/
Tour.prototype._getStep = function(i) {
if (this._steps[i] != null) {
return $.extend(this._steps[i], {
index: i,
next: i === this._steps.length - 1 ? -1 : i + 1,
prev: i - 1
});
}
};
/**
* Returns an element
* @param {Mixed} el element
* @return {jQuery} a jQuery object
* @private
*/
Tour.prototype._getElement = function(el) {
if (typeof el === 'function') {

@@ -257,70 +356,76 @@ el = el();

Tour.prototype.hideStep = function(i, e) {
var $el, step;
if (!e) {
e = this._initEvent();
}
step = this.getStep(i);
$el = this.getElement(step.element);
if (step.onHide != null) {
step.onHide(this, e);
}
if (this._options.onHide !== step.onHide) {
this._options.onHide(this, e);
}
if (step.reflex) {
$el.css("cursor", "auto").off("click.tour");
}
return $el.popover("hide");
/**
* Show the next step
* @param {Deferred} def the deferred will be resolved when the step is shown
* @private
*/
Tour.prototype._showNextStep = function(def) {
var step;
step = this._getStep(this._current);
return this._showStep(step.next, def);
};
Tour.prototype._deferred = function(d) {
if (d && d.done) {
return d;
}
return $.Deferred().resolve().promise();
/**
* Show the previous step
* @param {Deferred} def the deferred will be resolved when the step is shown
* @private
*/
Tour.prototype._showPrevStep = function(def) {
var step;
step = this._getStep(this._current);
return this._showStep(step.prev, def);
};
Tour.prototype.showStep = function(i, def) {
var defs, e, step,
/**
* Show the specified step
* @param {Number} i Step index
* @param {Deferred} def A deferred that will be resolved when the popover will be shown or reject if the step was not found
* @private
*/
Tour.prototype._showStep = function(i, def) {
var defs, step,
_this = this;
step = this.getStep(i);
step = this._getStep(i);
if (!step) {
if (def) {
def.reject();
def.reject("Step " + i + " undefined");
}
return;
}
this.setCurrentStep(i);
this._setCurrentStep(i);
if (step.path !== "" && document.location.pathname !== step.path && document.location.pathname.replace(/^.*[\\\/]/, '') !== step.path) {
debugger;
document.location.href = step.path;
return;
}
e = this._initEvent({
element: false
defs = [];
this.trigger("show", {
step: step,
element: false,
defs: defs
});
defs = [];
if (step.onShow != null) {
defs.push(this._deferred(step.onShow(this, e)));
}
if (this._options.onShow !== step.onShow) {
defs.push(this._deferred(this._options.onShow(this, e)));
}
return $.when.apply($, defs).always(function() {
var $el;
$el = _this.getElement(step.element);
e = _this._initEvent({
element: $el
});
if (!((step.element != null) && $el.length !== 0 && $el.is(":visible"))) {
_this.showNextStep(def);
$el = _this._getElement(step.element);
if ($el.length === 0 || !$el.is(":visible")) {
_this.trigger("skip", {
element: $el,
step: step
});
_this.next({
def: def
});
return;
}
_this._showPopover(step, i);
if (step.onShown != null) {
step.onShown(_this, e);
}
if (_this._options.onShown !== step.onShown) {
_this._options.onShown(_this, e);
}
_this.trigger("shown", {
step: step,
element: $el
});
if (def) {

@@ -332,37 +437,232 @@ return def.resolve();

Tour.prototype.setCurrentStep = function(value) {
if (value != null) {
this._current = value;
return this.setState("current_step", value);
/**
* Hide the specified step
* @param {Number} i Step index
* @param {Event} e Event
* @return {Promise}
* @optional
* @private
*/
Tour.prototype._hideStep = function(i, e) {
var $el, def, defs, step,
_this = this;
if (e == null) {
e = {};
}
def = $.Deferred();
step = e.step = this._getStep(i);
$el = e.element = this._getElement(step.element);
defs = [];
this.trigger("hide", $.extend(e, {
defs: defs
}));
$.when.apply($, defs).always(function() {
if (step.reflex) {
$el.css("cursor", "").off("click.tour");
}
$el.popover("hide");
_this._toggleOverlay($el, false);
_this.trigger("hidden", e);
return def.resolve();
});
return def.promise();
};
/**
* Debug callback
* @param {[type]} evtName [description]
* @param {[type]} e [description]
* @return {[type]} [description]
* @private
*/
Tour.prototype._debug = function(evtName, e) {
return console.log(evtName, e.step.index, {
details: e
});
};
/**
* Persist the state
* @param {String} key
* @param {Mixed} value
* @private
*/
Tour.prototype._setState = function(key, value) {
return this.persistence.setState(this._options, key, value);
};
/**
* Get the persisted state
* @param {String} key
* @private
*/
Tour.prototype._getState = function(key) {
var value;
value = this.persistence.getState(this._options, key);
return value;
};
/**
* Init the current step variable
* @private
*/
Tour.prototype._initCurrentStep = function() {
this._current = this._getState("current_step");
if (!this._current || this._current === "null") {
return this._current = 0;
} else {
this._current = this.getState("current_step");
if (!this._current || this._current === "null") {
return this._current = 0;
} else {
return this._current = parseInt(this._current, 10);
}
return this._current = parseInt(this._current, 10);
}
};
Tour.prototype.showNextStep = function(def) {
var step;
step = this.getStep(this._current);
return this.showStep(step.next, def);
/**
* Set and persist the current step
* @param {Number} stepIndex
* @ignore
*/
Tour.prototype._setCurrentStep = function(stepIndex) {
this._current = stepIndex;
return this._setState("current_step", stepIndex);
};
Tour.prototype.showPrevStep = function(def) {
var step;
step = this.getStep(this._current);
return this.showStep(step.prev, def);
/**
* [_setupEvents description]
* @return {[type]} [description]
* @private
*/
Tour.prototype._setupEvents = function() {
this._evt = $('<div/>');
this.on = this._chainable(this._evt.on, this._evt);
this.off = this._chainable(this._evt.off, this._evt);
return this.one = this._chainable(this._evt.one, this._evt);
};
/**
* Create a new (augmented) jQuery Event
*
* @description The augmented jQuery Event object contains:
* * `{String}` `trigger`: `api | popover | reflex | keyboard`
* * `{Object}` `step`: the current step
* * `{jQuery}` `element`: the current step element
* * `{Function}` `setPromise(promise)`: set the
* Note that `onShow` Event does not provides the `element` attribute use `onShown` instead)
* @private
* @see Tour.event
* @param {String} name Event name
* @param {Object} opt Event attributes
* @optional
* @return {jQuery.Event} Augmented jQuery.Event
*/
Tour.prototype._initEvent = function(name, opt) {
var defs, e, step;
if (name == null) {
name = "";
}
if (opt == null) {
opt = {};
}
e = jQuery.Event(name);
$.extend(e, opt);
if (e.defs) {
defs = e.defs;
e.setPromise = function(promise) {
return defs.push(promise);
};
delete e.defs;
}
if (!e.trigger) {
e.trigger = "api";
}
if (!e.step) {
step = e.step = this._getStep(this._current);
}
if (name === "show" || name.indexOf("show:") === 0) {
delete e.element;
} else if (step) {
e.element = this._getElement(step.element);
}
return e;
};
/**
* Toggle the overlay
* @param {[type]} $el [description]
* @param {[type]} display [description]
* @private
*/
Tour.prototype._toggleOverlay = function($el, display) {
var $overlay, pos;
this._injectOverlay();
$overlay = $('#bootstrap-tour-overlay');
if (!display) {
$el.removeClass('bootstrap-tour-expose').css('z-index', '1');
pos = $el.data('old-pos');
if (pos) {
$el.css('position', pos).removeData('old-pos');
}
$('.popover.bootstrap-tour').removeClass('expose');
$overlay.hide();
return;
}
$el.addClass('bootstrap-tour-expose').css('z-index', '99999');
pos = $el.css('position');
if (pos !== 'absolute') {
$el.data('old-pos', pos);
$el.css('position', 'relative');
}
$('.popover.bootstrap-tour').addClass('expose').css('z-index', '99999');
return $overlay.width($(document.body).outerWidth()).height(Math.max($(window).height(), $(document.body).outerHeight())).show();
};
/**
* Inject the overlay
* @private
* @return {[type]} [description]
*/
Tour.prototype._injectOverlay = function() {
if ($('style#bootstrap-tour-style').length > 0) {
return;
}
$("<style id='bootstrap-tour-style' type='text/css'>" + (this._options.style()) + "</style>").appendTo('head');
return $("<div id='bootstrap-tour-overlay'></div>").appendTo('body');
};
/**
* Show step popover
* @private
* @param {Object} step
* @param {Number} i step number
*/
Tour.prototype._showPopover = function(step, i) {
var $el, $nav, content, options, popover, tip,
var $el, $tmpl, options, popover, tip,
_this = this;
$el = this.getElement(step.element);
options = $.extend({}, this._options);
$el = this._getElement(step.element);
options = $.extend(true, {}, this._options);
step.content = this._getProp(step, options.step, "content", step);
if (step.options) {
$.extend(options, step.options);
}
if (step.reflex) {
if (this._getProp(step, options.step, "reflex", step)) {
$el.css("cursor", "pointer").on("click.tour", function(e) {

@@ -374,22 +674,25 @@ return _this.next({

}
$nav = $(options.template(step)).wrapAll('<div/>').parent();
if (step.prev === 0) {
$nav.find('.prev').remove();
step.content = this._getPropNotEmpty(step, options.step, "content", step);
step.title = this._getPropNotEmpty(step, options.step, "title", step);
$tmpl = $(this._getProp(step, options.step, "template", step)).wrapAll('<div/>').parent();
if (step.prev === -1) {
$tmpl.find('.prev').remove();
}
if (step.next === 0) {
$nav.find('.next').remove();
if (step.next === -1) {
$tmpl.find('.next').remove();
}
content = $nav.html();
$nav.remove();
$el.popover({
placement: step.placement,
trigger: "manual",
title: step.title,
content: content,
template: $tmpl.html(),
title: step.title || " ",
content: step.content || " ",
html: true,
animation: step.animation
});
$tmpl.remove();
popover = $el.data("popover");
tip = popover.tip().addClass("" + options.name + "-step" + i + " " + options.addClass + " " + step.addClass);
tip = popover.tip().addClass("bootstrap-tour " + options.name + "-step" + i + " " + options.step.addClass + " " + step.addClass);
popover.show();
this._toggleOverlay($el, this._getProp(step, options.step, "overlay", step));
this._reposition(tip);

@@ -399,2 +702,9 @@ return this._scrollIntoView(tip);

/**
* Prevent popups from crossing over the edge of the window
* @param {jQuery} tip popover tip
* @private
*/
Tour.prototype._reposition = function(tip) {

@@ -420,2 +730,9 @@ var offsetBottom, offsetRight, tipOffset;

/**
* Scroll to the popup if it is not in the viewport
* @param {jQuery} tip popover tip
* @private
*/
Tour.prototype._scrollIntoView = function(tip) {

@@ -429,52 +746,490 @@ var tipRect;

Tour.prototype._onresize = function(cb, timeout) {
/**
* When the user resize the window
* @private
* @param {Function} fn Callback function
* @param {Number} timeout How much time to wait after the last `resize` event before firing fn
*/
Tour.prototype._onresize = function(fn, timeout) {
return $(window).resize(function() {
clearTimeout(timeout);
return timeout = setTimeout(cb, 100);
return timeout = setTimeout(fn, 100);
});
};
/**
* Activate if necessary the keyboard navigation
* @private
*/
Tour.prototype._setupKeyboardNavigation = function() {
var _this = this;
if (this._options.keyboard) {
return $(document).on("keyup.bootstrap-tour", function(e) {
if (!e.which) {
return;
if (!this._options.keyboard) {
return;
}
return $(document).on("keyup.bootstrap-tour", $.proxy(this._onKeyUp, this));
};
/**
* When the key is up
* @param {Event} e jQuery event
* @todo Handle escape key -> end the tour
* @private
*/
Tour.prototype._onKeyUp = function(e) {
var step;
if (!e.which) {
return;
}
step = this._getStep(this._current);
if (!step) {
return;
}
switch (e.which) {
case 39:
e.preventDefault();
if (step.next !== -1 && this._current < this._steps.length - 1) {
return this.next({
trigger: "keyboard"
});
}
switch (e.which) {
case 39:
e.preventDefault();
if (_this._current < _this._steps.length - 1) {
return _this.next();
}
break;
case 37:
e.preventDefault();
if (_this._current > 0) {
return _this.prev();
}
break;
case 37:
e.preventDefault();
if (step.prev !== -1 && this._current > 0) {
return this.prev({
trigger: "keyboard"
});
}
});
}
};
/**
* Execute sequentially the array of function
* @param {Array} arr an array of function that return a promise
* @param {Object} ctx context
* @private
* @return {Deferred}
*/
Tour.prototype._when = function(arr, ctx) {
var def, next;
def = $.Deferred();
next = function() {
var fn;
fn = arr.shift();
if (!fn) {
return def.resolve();
}
return fn.call(ctx).then(next);
};
next();
return def.promise();
};
/**
* Returns an array of `ipt` `times` times
* @private
* @param {[type]} times [description]
* @param {[type]} ipt [description]
* @return {[type]} [description]
*/
Tour.prototype._mapTimes = function(times, ipt) {
var o;
o = [];
while (times--) {
o.push(ipt);
}
return o;
};
/**
* Get the a non `falsy` property `prop` from `obj1` if present or from obj2 otherwise and transfer
* arguments `args` if the property is a function
*
* @param {Object} obj1 First object
* @param {Object} obj2 Second Object
* @param {String} prop Property name
* @param {Array} args... Array of arguments
* @optional
* @private
* @return {Mixed}
*/
Tour.prototype._getPropNotEmpty = function() {
var args, obj1, obj2, prop, test;
obj1 = arguments[0], obj2 = arguments[1], prop = arguments[2], args = 4 <= arguments.length ? __slice.call(arguments, 3) : [];
test = function(o, prop) {
return o && o.hasOwnProperty(prop) && !!o[prop];
};
return this.__getPropFn.apply(this, [test, obj1, obj2, prop].concat(__slice.call(args)));
};
/**
* Get the a property `prop` from `obj1` if present or from obj2 otherwise and transfer
* arguments `args` if the property is a function
* @param {Object} obj1 First object
* @param {Object} obj2 Second Object
* @param {String} prop Property name
* @param {Array} args... Array of arguments
* @optional
* @private
* @return {Mixed}
*/
Tour.prototype._getProp = function() {
var args, obj1, obj2, prop, test;
obj1 = arguments[0], obj2 = arguments[1], prop = arguments[2], args = 4 <= arguments.length ? __slice.call(arguments, 3) : [];
test = function(o, prop) {
return o && o.hasOwnProperty(prop);
};
return this.__getPropFn.apply(this, [test, obj1, obj2, prop].concat(__slice.call(args)));
};
/**
* Get the a property `prop` from `obj1` if present or from obj2 otherwise and transfer
* arguments `args` if the property is a function
* @param {Function} fn The tester function
* @param {Object} obj1 First object
* @param {Object} obj2 Second Object
* @param {String} prop Property name
* @param {Array} args... Array of arguments
* @optional
* @private
* @return {Mixed}
*/
Tour.prototype.__getPropFn = function() {
var args, fn, obj1, obj2, prop;
fn = arguments[0], obj1 = arguments[1], obj2 = arguments[2], prop = arguments[3], args = 5 <= arguments.length ? __slice.call(arguments, 4) : [];
if (fn(obj1, prop)) {
return this._execOrGet.apply(this, [obj1[prop]].concat(__slice.call(args)));
} else if (fn(obj2, prop)) {
return this._execOrGet.apply(this, [obj2[prop]].concat(__slice.call(args)));
} else {
return null;
}
};
/**
* Get the value of `val`, it handles the case when `val` is a function
* @param {Mixed} val Value
* @param {Array} arg Array of arguments
* @optional
* @private
* @return {Mixed} `val` value
*/
Tour.prototype._execOrGet = function() {
var args, val;
val = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
if ($.isFunction(val)) {
return val.apply(null, args);
} else {
return val;
}
};
/**
* Make a function chainable inside `Tour`
* @param {Function} fn function
* @param {Object} ctx Context
* @return {Function} Chainable function that returns the current Tour instance
* @private
*/
Tour.prototype._chainable = function(fn, ctx) {
var _this = this;
return function() {
var args;
args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
fn.apply(ctx, args);
return _this;
};
};
/**
* `Tour` constructor `option` defaults
* @type {Object} defaults
*/
Tour.defaults = {
/**
* name
*
* @description This option is used to build the name of the cookie where the tour state is stored. You can initialize several tours with different names in the same page and application.
* @type {String} name
*/
name: "tour",
/**
* How to handle persistence
*
* @type {String} Backend name
* @description The value can be "Cookie" | "LocalStorage" | "Memory" (default "Memory")
* Note: the "Cookie" backend requires jquery.cookie.js
*/
persistence: "Memory",
/**
* Keyboard navigation
* @type {Boolean} keyboard true if activated, false otherwise
*/
keyboard: true,
addClass: "",
template: function(step) {
return '<p>#{step.content}</p>"\n<hr/>\n<p>\n <a href="#{step.prev}" class="prev">Previous</a>\n <a href="#{step.next}" class="next">Next</a>\n <a href="#" class="pull-right end">End tour</a>\n</p>';
/**
* Specify a function that return a css string
* @type {Function}
* @return {String} css code that will be injected if `overlay` is used
*/
style: function() {
return ".popover.bootstrap-tour.expose{z-index:99998;}\n#bootstrap-tour-overlay{background:rgba(0,0,0,0.5);display:none;width:100%;height:100%;position:absolute; top:0; left:0; z-index:99997;}";
},
onShow: function(tour, event) {},
onShown: function(tour, event) {},
onHide: function(tour, event) {},
afterSetState: function(key, value) {},
afterGetState: function(key, value) {}
/**
* # Global step parameters
*
* Each of the following parameters can be overriden at **each** step level.
* @type {Object}
*/
step: {
/**
* Default step title
* @type {String|Function(step)}
*/
title: null,
/**
* Default step content
* @type {String|Function(step)}
*/
content: null,
/**
* Css class to add to the .popover element
* @description Note: if `addClass` is defined at the step level.
* The two defined `addClass` will be taken into account in the popover
* @type {String}
*/
addClass: "",
/**
* Globally enable an overlay for each step element, `true` if activated, `false` otherwise
* @type {Boolean}
* @todo Handle Bootstrap modal, pull requests are welcome !
*/
overlay: false,
/**
* Globally enable the reflex mode, click on the element to continue the tour
* @type {Boolean}
*/
reflex: false,
/**
* Bootstrap Tour step-wide template
* @description The template should contain `.prev`, `.next` and `.end`
* will be removed at runtime by Bootstrap Tour if necessary.
* The template function can be an underscore template or $.tmpl ...
*
* @param {Object} step The step to render
* @type {Function}
* @return {String} A string containing the HTML that will be injected into the popover
*/
template: function(step) {
return "<div class=\"popover\">\n <div class=\"arrow\"></div>\n <div class=\"popover-inner\"><h3 class=\"popover-title\"></h3>\n <div class=\"popover-content\"></div>\n <div class=\"modal-footer\">\n <a href=\"#\" class=\"btn end\">End tour</a>\n <a href=\"" + step.prev + "\" class=\"btn pull-right prev\">Previous</a>\n <a href=\"" + step.next + "\" class=\"btn pull-right next\">Next</a>\n </div>\n </div>\n</div>";
}
}
};
/**
* addStep default parameters
* @type {Object}
*/
Tour.stepDefaults = {
/**
* Path to the page on which the step should be shown. this allows you
* to build tours that span several pages!
* @type {String}
*/
path: "",
/**
* HTML element on which the step popover should be shown.
* @type {jQuery-object|Css-Selector|Function()}
*/
element: null,
/**
* How to position the popover - top | bottom | left | right.
* @type {String}
*/
placement: "right",
/**
* Step title
* @type {String|Function(step)}
*/
title: "",
/**
* Step content
* @description Note: defining `step.title` and `step.content` functions at the tour level
* allow the developper to separate step title/content from the step behaviour.
* @type {String|Function(step)}
*/
content: "",
/**
* Apply a css fade transition to the tooltip.
* @type {Boolean}
*/
animation: true,
/**
* Enable the reflex mode, click on the element to continue the tour
* @type {Boolean}
*/
reflex: false,
/**
* Css class to add to the .popover element for this step only
* @type {String}
*/
addClass: ""
/**
* ...
* @ignore
*/
};
return Tour;
})();
/**
* Ignore backends
* @ignore
*/
Backend = (function() {
function Backend() {}
Backend.prototype.dispose = function() {};
Backend.prototype.setState = function(options, key, value) {};
Backend.prototype.getState = function(options, key) {};
return Backend;
})();
Memory = (function(_super) {
__extends(Memory, _super);
function Memory(options) {
this.ns = "__db_" + options.name + "__";
window[this.ns] = {};
}
Memory.prototype._avail = function() {
return window.hasOwnProperty(this.ns);
};
Memory.prototype.setState = function(options, key, value) {
if (!this._avail()) {
return;
}
return window[this.ns][key] = value;
};
Memory.prototype.getState = function(options, key) {
if (!this._avail()) {
return;
}
return window[this.ns][key] || null;
};
Memory.prototype.dispose = function() {
return delete window[this.ns];
};
return Memory;
})(Backend);
Cookie = (function(_super) {
__extends(Cookie, _super);
function Cookie(options) {
this.ns = "" + options.name + "_";
}
Cookie.prototype.setState = function(options, key, value) {
return $.cookie("" + this.ns + key, value, {
expires: 36500,
path: '/'
});
};
Cookie.prototype.getState = function(options, key) {
return $.cookie("" + this.ns + key);
};
return Cookie;
})(Backend);
LocalStorage = (function(_super) {
__extends(LocalStorage, _super);
function LocalStorage(options) {
this.ns = "" + options.name + "_";
}
LocalStorage.prototype.setState = function(options, key, value) {
return window.localStorage.setItem("" + this.ns + key, JSON.stringify(value));
};
LocalStorage.prototype.getState = function(options, key) {
var item;
item = null;
try {
item = window.localStorage.getItem("" + this.ns + key);
return JSON.parse(item);
} catch (err) {
console.error(err, item);
return null;
}
};
return LocalStorage;
})(Backend);
backend = {
Memory: Memory,
Cookie: Cookie,
LocalStorage: LocalStorage
};
return window.Tour = Tour;
})(jQuery, window);

12

package.json
{
"name": "bootstrap-tour",
"description": "Quick and easy product tours with Twitter Bootstrap Popovers",
"version": "0.9.2",
"version": "0.9.5",
"homepage": "https://github.com/FGRibreau/bootstrap-tour",
"author": {
"name": "FG Ribreau",
"email": "github@fgribreau.com"
},
"author": "Francois-Guillaume Ribreau <npm@fgribreau.com> (http://fgribreau.com)",
"repository": {

@@ -33,5 +30,8 @@ "type": "git",

"coffee-script": "~1.4.0",
"grunt-coffee": "0.0.6"
"grunt-coffee": "0.0.6",
"dox": "~0.4.1",
"grunt-shell": "~0.1.4",
"doxx": "~0.5.7"
},
"keywords": []
}

187

README.md

@@ -1,12 +0,9 @@

# Bootstrap Tour [![Build Status](https://travis-ci.org/FGRibreau/bootstrap-tour.png)](https://travis-ci.org/FGRibreau/bootstrap-tour)
Bootstrap Tour Extended
------------
Quick and easy product tours with Twitter Bootstrap Popovers.
## [Documentation](fgribreau.github.com/bootstrap-tour/docs/bootstrap-tour.js.html)
Fork of [sorich87 bootstrap-tour](http://sorich87.github.com/bootstrap-tour/).
Extra features
------------
### Improvement
- `Tour` constructor now accept a `template` attribute thus the `labels.*` attribute has been removed.
- `Tour` now emits an `skip(step)` event when skipping a step because the element is not visible.
- `next()` and `prev()` return promise that is resolved when the popover is shown and that all callbacks have been executed

@@ -23,2 +20,3 @@ - If `onShow` (at the `step` level or `Tour` level) returns a promise (see [$.Deferred()](http://api.jquery.com/category/deferred-object/)), Bootstrap-tour will wait until the completition of the promise(s) before displaying the popover

### Bug fix
- In `reflex` mode, leave the same css pointer as it was.
- Don't create unnecessary $() objects

@@ -28,177 +26,2 @@ - Remove event handlers after each step when `reflex:true`

## Getting Started
In your web page:
```html
<script src="jquery.js"></script>
<script src="bootstrap.tooltip.js"></script>
<script src="bootstrap.popover.js"></script>
<script src="bootstrap-tour.min.js"></script>
<script type="text/javascript">
// Initialize the tour
var tour = new Tour({
name:"myTour",
persistence:"Memory"
});
// Add steps
tour.addStep({
element: "", /* html element (or function) next to which the step popover should be shown */
title: "", /* title of the popover */
content: "" /* content of the popover */
});
// etc...
// Start the tour
tour.start();
// Now next() and prev() return a promise that is resolved when all callbacks are called
// and the popover is shown
tour.next().then(console.log.bind(console, "done"));
</script>
```
## Documentation
For the Tour instance API see [the original documentation](http://sorich87.github.com/bootstrap-tour/)
### `Tour` Constructor
The `Tour` constructor accepts an option object with the following optional attributes:
```coffeescript
#
# {String} This option is used to build the name of the cookie where the tour state is stored. You can initialize several tours with different names in the same page and application.
#
name: 'tour'
#
# {String} "Cookie" | "LocalStorage" | "Memory" (default "Memory")
# Note: persistence: "Cookie" requires jquery.cookie.js
persistence: 'Memory'
#
# {Boolean} Keyboard navigation
#
keyboard: true
#
# {String} Css class to add to the .popover element
#
addClass:""
#
# {Function} Navigation template, `.prev`, `.next` and `.end`
# will be removed at runtime if necessary
#
# The template can be an underscore template or $.tmpl ...
#
template:(step) ->
'''
<p>#{step.content}</p>"
<hr/>
<p>
<a href="#{step.prev}" class="prev">Previous</a>
<a href="#{step.next}" class="next">Next</a>
<a href="#" class="pull-right end">End tour</a>
</p>
'''
#
# {Function} Function to execute right before each step is shown.
# If onShow returns a promise (see $.Deferred() documentation), Bootstrap-tour will wait until
# completition of the promise before displaying the popover
#
onShow: (tour, event) ->
#
# {Function} Function to execute right after each step is shown.
#
onShown: (tour, event) ->
#
# {Function} Function to execute right before each step is hidden.
#
onHide: (tour, event) ->
afterSetState: (key, value) ->
afterGetState: (key, value) ->
```
### `.addStep(options)` options object
```coffeescript
#
# {String} Path to the page on which the step should be shown. this allows you
# to build tours that span several pages!
#
path: ""
#
# {jQuery | Css Selector | Function} HTML element on which the step popover
# should be shown.
#
element:null
#
# {String} How to position the popover - top | bottom | left | right.
#
placement: "right"
#
# {String} Step title
#
title: ""
#
# {String} Step content
#
content: ""
#
# {Number} Index of the step to show after this one, starting from 0 for the
# first step of the tour. -1 to not show the link to next step.
# By default, the next step (in the order you added them) will be shown.
#
next: if i == @_steps.length - 1 then -1 else i + 1
#
# {Number} Index of the step to show before this one, starting from 0 for
# the first step of the tour. -1 to not show the link to previous step.
# By default, the previous step (in the order you added them) will be shown.
#
prev: i - 1
#
# {Boolean} Apply a css fade transition to the tooltip.
#
animation: true
#
# {Boolean} Enable the reflex mode, click on the element to continue the tour
#
reflex: false
#
# {String} Css class to add to the .popover element for this step only
#
addClass:""
#
# {Function} Function to execute right before each step is shown.
# If onShow returns a promise (see $.Deferred() documentation), Bootstrap-tour will wait until
# completition of the promise before displaying the popover
#
onShow: (tour, event) ->
#
# {Function} Function to execute right after each step is shown.
#
onShown: (tour, event) ->
#
# {Function} Function to execute right before each step is hidden.
#
onHide: (tour, event) ->
```
## NPM

@@ -205,0 +28,0 @@ Install with `npm install bootstrap-tour`

544

test/tests.js

@@ -5,10 +5,5 @@ var _when;

teardown: function() {
this.tour.setState("current_step", null);
this.tour.setState("end", null);
$.each(this.tour._steps, function(i, s) {
if ((s.element != null) && (s.element.popover != null)) {
return s.element.popover("hide").removeData("popover");
}
});
return $('.popover').remove();
if (this.tour) {
return this.tour.dispose();
}
}

@@ -71,3 +66,3 @@ });

});
this.tour.setState("test", "yes");
this.tour._setState("test", "yes");
return strictEqual($.cookie("tour_test"), "yes", "tour saves state");

@@ -80,4 +75,4 @@ });

});
this.tour.setState("test", "yes");
strictEqual(this.tour.getState("test"), "yes", "tour gets state");
this.tour._setState("test", "yes");
strictEqual(this.tour._getState("test"), "yes", "tour gets state");
return $.cookie("tour_test", null);

@@ -90,3 +85,3 @@ });

});
this.tour.setState("test", "yes");
this.tour._setState("test", "yes");
return strictEqual(window.localStorage.getItem("tour_test"), "\"yes\"", "tour saves state");

@@ -99,3 +94,3 @@ });

});
return strictEqual(this.tour.getState("_heyhey_"), null, "null value if not found");
return strictEqual(this.tour._getState("_heyhey_"), null, "null value if not found");
});

@@ -107,3 +102,3 @@

});
return strictEqual(this.tour.getState("_heyhey_"), null, "null value if not found");
return strictEqual(this.tour._getState("_heyhey_"), null, "null value if not found");
});

@@ -115,3 +110,3 @@

});
return strictEqual(this.tour.getState("_heyhey_"), null, "null value if not found");
return strictEqual(this.tour._getState("_heyhey_"), null, "null value if not found");
});

@@ -123,4 +118,4 @@

});
this.tour.setState("test", "yes");
strictEqual(this.tour.getState("test"), "yes", "tour saves state");
this.tour._setState("test", "yes");
strictEqual(this.tour._getState("test"), "yes", "tour saves state");
return window.localStorage.setItem("tour_test", null);

@@ -133,3 +128,3 @@ });

});
this.tour.setState("test", "yes");
this.tour._setState("test", "yes");
return strictEqual(window["__db_tour__"]['test'], "yes", "tour saves state");

@@ -142,4 +137,4 @@ });

});
this.tour.setState("test", "yes");
strictEqual(this.tour.getState("test"), "yes", "tour saves state");
this.tour._setState("test", "yes");
strictEqual(this.tour._getState("test"), "yes", "tour saves state");
return window["__db_tour__"]['test'] = null;

@@ -155,3 +150,9 @@ });

this.tour.addStep(step);
return deepEqual(this.tour._steps, [step], "tour adds steps");
deepEqual(this.tour._steps[0].addClass, "", "tour adds steps");
deepEqual(this.tour._steps[0].animation, true, "tour adds steps");
deepEqual(this.tour._steps[0].element, step.element, "tour adds steps");
deepEqual(this.tour._steps[0].placement, "right", "tour adds steps");
deepEqual(this.tour._steps[0].reflex, false, "tour adds steps");
deepEqual(this.tour._steps[0].title, "", "tour adds steps");
return deepEqual(this.tour._steps[0].content, "", "tour adds steps");
});

@@ -169,3 +170,3 @@

this.tour.addStep(step);
deepEqual(this.tour._steps, [step], "tour adds steps");
deepEqual(this.tour._steps[0].element, step.element, "tour adds steps");
return this.tour.start();

@@ -175,5 +176,10 @@ });

test("Tour.addStep should support the addClass attribute", function() {
var _class;
this.tour = new Tour();
var _class, _gclass;
_gclass = 'testclass';
_class = 'testclass';
this.tour = new Tour({
step: {
addClass: _gclass
}
});
this.tour.addStep({

@@ -184,3 +190,4 @@ element: 'body',

this.tour.start();
return ok($('.popover').hasClass(_class), ".popover should now have the css class " + _class);
ok($('.popover').hasClass(_class), ".popover should now have the css class " + _class);
return ok($('.popover').hasClass(_gclass), ".popover should now have the global css class " + _class);
});

@@ -199,16 +206,16 @@

test("Tour.getElement(step) handle string as well as function and return a jQuery wrapper", function() {
test("Tour._getElement(step) handle string as well as function and return a jQuery wrapper", function() {
var $el;
this.tour = new Tour();
$el = this.tour.getElement(function() {
$el = this.tour._getElement(function() {
return $('body');
});
ok($el.is('body'));
$el = this.tour.getElement(function() {
$el = this.tour._getElement(function() {
return 'body';
});
ok($el.is('body'));
$el = this.tour.getElement('body');
$el = this.tour._getElement('body');
ok($el.is('body'));
$el = this.tour.getElement('notfound');
$el = this.tour._getElement('notfound');
ok($el.length === 0);

@@ -221,6 +228,5 @@ return equal($el.is(':visible'), false);

expect(2);
this.tour = new Tour({
onHide: function(tour, e) {
return equal(e.trigger, "reflex", "the next() call was triggered by the reflex feature");
}
this.tour = new Tour();
this.tour.on('hide', function(e) {
return equal(e.trigger, "reflex", "the next() call was triggered by the reflex feature");
});

@@ -234,3 +240,3 @@ $("<a id='ok'>hey</a>").appendTo("#qunit-fixture");

this.tour.next = function(e) {
this.hideStep(this._current, e);
this._hideStep(this._current, e);
return equal(true, true, "should only be called on time");

@@ -253,3 +259,3 @@ };

this.tour.next = function() {
this.hideStep(this._current);
this._hideStep(this._current);
return equal(true, true, "should be called one time");

@@ -265,6 +271,5 @@ };

tour_test = 0;
this.tour = new Tour({
onShow: function() {
return tour_test += 2;
}
this.tour = new Tour({});
this.tour.on('show', function(e) {
return tour_test += 2;
});

@@ -295,13 +300,13 @@ this.tour.addStep({

return ok(true);
},
onShow: function(tour, event) {
var def;
def = $.Deferred();
setTimeout(function() {
resolved = true;
return def.resolve();
}, 100);
return def.promise();
}
});
this.tour.on('show:step0', function(e) {
var def;
def = $.Deferred();
setTimeout(function() {
resolved = true;
return def.resolve();
}, 100);
return e.setPromise(def.promise());
});
QUnit.stop();

@@ -319,10 +324,14 @@ return this.tour.start();

return $div;
},
onShow: function(tour, event) {
return strictEqual(event.element, void 0, "element should not be specified");
},
onShown: function(tour, event) {
return ok(event.element.is($div));
}
});
this.tour.on('show', function(e) {
QUnit.start();
strictEqual(e.element, void 0, "element should not be specified");
return QUnit.stop();
});
this.tour.on('shown', function(e) {
QUnit.start();
return ok(e.element.is($div));
});
QUnit.stop();
return this.tour.start();

@@ -334,6 +343,5 @@ });

tour_test = 0;
this.tour = new Tour({
onShown: function() {
return tour_test += 2;
}
this.tour = new Tour();
this.tour.on('shown', function(e) {
return tour_test += 2;
});

@@ -351,3 +359,4 @@ this.tour.addStep({

test("Tour with onHide option should run the callback before hiding the step", function() {
var $el1, $el2, tour_test;
var $el1, $el2, tour_test,
_this = this;
expect(6);

@@ -357,8 +366,7 @@ tour_test = 0;

$el2 = $("<div></div>").appendTo("#qunit-fixture");
this.tour = new Tour({
onHide: function(tour, e) {
equal(e.trigger, "api");
ok(e.element.is($el1) || e.element.is($el2), "e.element should be specified");
return tour_test += 2;
}
this.tour = new Tour();
this.tour.on('hide', function(e) {
equal(e.trigger, "api");
ok(e.element.is($el1) || e.element.is($el2), "e.element should be specified");
return tour_test += 2;
});

@@ -372,6 +380,7 @@ this.tour.addStep({

this.tour.start();
this.tour.next();
strictEqual(tour_test, 2, "tour runs onHide when first step hidden");
this.tour.hideStep(1);
return strictEqual(tour_test, 4, "tour runs onHide when next step hidden");
return this.tour.next().always(function() {
strictEqual(tour_test, 2, "tour runs onHide when first step hidden");
_this.tour._hideStep(1);
return strictEqual(tour_test, 4, "tour runs onHide when next step hidden");
});
});

@@ -381,25 +390,24 @@

expect(6);
this.tour = new Tour({
onHide: function(tour, e) {
return ok(true, "onHide tour level called");
},
onShow: function(tour, e) {
return ok(true, "onShow tour level called");
},
onShown: function(tour, e) {
return ok(true, "onShown tour level called");
}
this.tour = new Tour();
this.tour.on('hide', function(e) {
return ok(true, "onHide tour level called");
});
this.tour.on('show', function(e) {
return ok(true, "onShow tour level called");
});
this.tour.on('shown', function(e) {
return ok(true, "onShown tour level called");
});
this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture"),
onHide: function(tour, e) {
return ok(true, "onHide step level called");
},
onShow: function(tour, e) {
return ok(true, "onShow step level called");
},
onShown: function(tour, e) {
return ok(true, "onShown step level called");
}
element: $("<div></div>").appendTo("#qunit-fixture")
});
this.tour.on('hide:step0', function(e) {
return ok(true, "onHide step level called");
});
this.tour.on('show:step0', function(e) {
return ok(true, "onShow step level called");
});
this.tour.on('shown:step0', function(e) {
return ok(true, "onShown step level called");
});
this.tour.start();

@@ -417,7 +425,7 @@ return this.tour.next();

this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture"),
onShow: function() {
return tour_test = 2;
}
element: $("<div></div>").appendTo("#qunit-fixture")
});
this.tour.on('show:step1', function(e) {
return tour_test = 2;
});
this.tour.start();

@@ -431,4 +439,3 @@ strictEqual(tour_test, 0, "tour does not run onShow when step not shown");

test("Tour.addStep with onHide option should run the callback before hiding the step", function() {
var tour_test;
tour_test = 0;
expect(1);
this.tour = new Tour();

@@ -439,15 +446,61 @@ this.tour.addStep({

this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture"),
onHide: function() {
return tour_test = 2;
}
element: $("<div></div>").appendTo("#qunit-fixture")
});
this.tour.on('hide:step0', function(e) {
QUnit.start();
return ok(true, "tour runs onHide when step hidden");
});
QUnit.stop();
this.tour.start();
this.tour.next();
strictEqual(tour_test, 0, "tour does not run onHide when step not hidden");
this.tour.hideStep(1);
return strictEqual(tour_test, 2, "tour runs onHide when step hidden");
return this.tour.next();
});
test("Tour.getStep should get a step", function() {
test("Tour.addStep", function() {
expect(2);
this.tour = new Tour();
this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture")
});
this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture")
});
equal(this.tour._getStep(0).index, 0);
return equal(this.tour._getStep(1).index, 1);
});
test("Tour.addStep with onHide option should wait (if necessary) for `hide` deferred to resolve before hiding the step", function() {
var resolved,
_this = this;
expect(2);
resolved = false;
this.tour = new Tour();
this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture")
});
this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture")
});
this.tour.on('hide:step0', function(e) {
var def,
_this = this;
def = $.Deferred();
setTimeout(function() {
resolved = true;
return def.resolve();
}, 100);
return e.setPromise(def.promise());
});
this.tour.on('show:step1', function(e) {
QUnit.start();
return ok(resolved, "the hide deferred should be resolved before show:step1 is triggered");
});
return this.tour.start().always(function() {
QUnit.start();
equal(_this.tour._current, 0);
QUnit.stop();
return _this.tour.next();
});
});
test("Tour._getStep should get a step", function() {
var step;

@@ -463,12 +516,10 @@ this.tour = new Tour();

prev: -1,
index: 0,
reflex: false,
next: 2,
next: -1,
end: false,
animation: false,
onShow: function(tour) {},
onHide: function(tour) {},
onShown: function(tour) {}
animation: false
};
this.tour.addStep(step);
return deepEqual(this.tour.getStep(0), step, "tour gets a step");
return deepEqual(this.tour._getStep(0), step, "tour gets a step");
});

@@ -490,3 +541,3 @@

});
this.tour.setState("end", "yes");
this.tour._setState("end", "yes");
this.tour.start();

@@ -501,3 +552,3 @@ return strictEqual($(".popover").length, 0, "previously ended tour don't start again");

});
this.tour.setState("end", "yes");
this.tour._setState("end", "yes");
this.tour.start(true);

@@ -507,21 +558,45 @@ return strictEqual($(".popover").length, 1, "previously ended tour starts again if forced to");

test("Tour `hidePrev should always add prev", function() {
this.tour = new Tour({
hidePrev: true
test("Tour should not go to the next step if .next is disabled", function() {
this.tour = new Tour();
this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture")
});
this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture"),
title: "ok",
content: "ok"
element: $("<div></div>").appendTo("#qunit-fixture")
});
this.tour.start();
equal(this.tour._current, 0, "current step should be 0");
$('.popover .next').attr('disabled', 'disabled').trigger('click');
return equal(this.tour._current, 0, "current step should still be 0");
});
test("Tour should not go to the next step if .prev is disabled", function() {
this.tour = new Tour();
this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture"),
title: "ok",
content: "ok"
element: $("<div></div>").appendTo("#qunit-fixture")
});
this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture")
});
this.tour.start();
this.tour.next();
return equal($('.popover .prev').length, 0, ".prev should be hidden");
equal(this.tour._current, 1, "current step should be 1");
$('.popover .prev').attr('disabled', 'disabled').trigger('click');
return equal(this.tour._current, 1, "current step should still be 1");
});
test("Tour should not end the tour if .end is disabled", function() {
this.tour = new Tour();
this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture")
});
this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture")
});
this.tour.start();
equal(this.tour.ended(), false, "tour should not be ended");
$('.popover .end').attr('disabled', 'disabled').trigger('click');
return equal(this.tour.ended(), false, "tour should not be ended");
});
test("Tour.next should hide current step and show next step", function() {

@@ -540,4 +615,4 @@ var _this = this;

QUnit.start();
strictEqual(_this.tour.getStep(0).element.data("popover").tip().filter(":visible").length, 0, "tour hides current step");
return strictEqual(_this.tour.getStep(1).element.data("popover").tip().filter(":visible").length, 1, "tour shows next step");
strictEqual(_this.tour._getStep(0).element.data("popover").tip().filter(":visible").length, 0, "tour hides current step");
return strictEqual(_this.tour._getStep(1).element.data("popover").tip().filter(":visible").length, 1, "tour shows next step");
});

@@ -547,19 +622,19 @@ });

test("Tour.next should return a promise", function() {
var _this = this;
expect(1);
this.tour = new Tour();
this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture"),
onShow: function() {
var def;
def = $.Deferred();
setTimeout(def.resolve, 10);
return def.promise();
}
element: $("<div></div>").appendTo("#qunit-fixture")
});
this.tour.on('show:step0', function(e) {
var def;
def = $.Deferred();
setTimeout(def.resolve, 10);
return e.setPromise(def.promise());
});
this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture")
});
this.tour.start();
QUnit.stop();
return this.tour.next().then(function() {
return _when([this.tour.start, this.tour.next], this.tour).then(function() {
QUnit.start();

@@ -574,10 +649,10 @@ return ok(true, "executed");

this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture"),
onShow: function() {
var def;
def = $.Deferred();
setTimeout(def.resolve, 10);
return def.promise();
}
element: $("<div></div>").appendTo("#qunit-fixture")
});
this.tour.on('show:step0', function(e) {
var def;
def = $.Deferred();
setTimeout(def.resolve, 10);
return e.setPromise(def.promise());
});
this.tour.addStep({

@@ -596,2 +671,3 @@ element: $("<div></div>").appendTo("#qunit-fixture")

test("Tour.end should hide current step and set end state", function() {
expect(6);
this.tour = new Tour();

@@ -602,5 +678,13 @@ this.tour.addStep({

this.tour.start();
this.tour.on("end", function(e) {
equal(e.step.index, 0);
return equal(e.trigger, "api");
});
this.tour.on("end:step0", function(e) {
equal(e.step.index, 0);
return equal(e.trigger, "api");
});
this.tour.end();
strictEqual(this.tour.getStep(0).element.data("popover").tip().filter(":visible").length, 0, "tour hides current step");
return strictEqual(this.tour.getState("end"), "yes", "tour sets end state");
strictEqual(this.tour._getStep(0).element.data("popover").tip().filter(":visible").length, 0, "tour hides current step");
return strictEqual(this.tour._getState("end"), "yes", "tour sets end state");
});

@@ -631,3 +715,3 @@

this.tour.restart();
strictEqual(this.tour.getState("end"), null, "tour sets end state");
strictEqual(this.tour._getState("end"), null, "tour sets end state");
strictEqual(this.tour._current, 0, "tour sets first step");

@@ -637,3 +721,3 @@ return strictEqual($(".popover").length, 1, "tour starts");

test("Tour.hideStep should hide a step", function() {
test("Tour._hideStep should hide a step", function() {
this.tour = new Tour();

@@ -644,7 +728,7 @@ this.tour.addStep({

this.tour.start();
this.tour.hideStep(0);
return strictEqual(this.tour.getStep(0).element.data("popover").tip().filter(":visible").length, 0, "tour hides step");
this.tour._hideStep(0);
return strictEqual(this.tour._getStep(0).element.data("popover").tip().filter(":visible").length, 0, "tour hides step");
});
test("Tour.showStep should set a step and show it", function() {
test("Tour._showStep should set a step and show it", function() {
this.tour = new Tour();

@@ -657,9 +741,9 @@ this.tour.addStep({

});
this.tour.showStep(1);
this.tour._showStep(1);
strictEqual(this.tour._current, 1, "tour sets step");
strictEqual($(".popover").length, 1, "tour shows one step");
return strictEqual(this.tour.getStep(1).element.data("popover").tip().filter(":visible").length, 1, "tour shows correct step");
return strictEqual(this.tour._getStep(1).element.data("popover").tip().filter(":visible").length, 1, "tour shows correct step");
});
test("Tour.showStep should not show anything when the step doesn't exist", function() {
test("Tour._showStep should not show anything when the step doesn't exist", function() {
this.tour = new Tour();

@@ -672,7 +756,7 @@ this.tour.addStep({

});
this.tour.showStep(2);
this.tour._showStep(2);
return strictEqual($(".popover").length, 0, "tour doesn't show any step");
});
test("Tour.showStep should skip step when no element is specified", function() {
test("Tour._showStep should skip step when no element is specified", function() {
this.tour = new Tour();

@@ -683,8 +767,13 @@ this.tour.addStep({});

});
this.tour.showStep(1);
return strictEqual(this.tour.getStep(1).element.data("popover").tip().filter(":visible").length, 1, "tour skips step with no element");
this.tour._showStep(1);
return strictEqual(this.tour._getStep(1).element.data("popover").tip().filter(":visible").length, 1, "tour skips step with no element");
});
test("Tour.showStep should skip step when element doesn't exist", function() {
test("Tour._showStep should skip step when element doesn't exist", function() {
expect(3);
this.tour = new Tour();
this.tour.one('skip', function(e) {
equal(e.type, "skip");
return deepEqual(e.step.index, 0);
});
this.tour.addStep({

@@ -696,10 +785,10 @@ element: "#tour-test"

});
this.tour.showStep(1);
return strictEqual(this.tour.getStep(1).element.data("popover").tip().filter(":visible").length, 1, "tour skips step with no element");
this.tour._showStep(0);
return strictEqual(this.tour._getStep(1).element.data("popover").tip().filter(":visible").length, 1, "tour skips step with no element");
});
test("Tour.showStep should skip step when element is invisible", function() {
test("Tour._showStep should skip step when element is invisible", function() {
this.tour = new Tour();
this.tour.addStep({
element: $("<div></div>").appendTo("#qunit-fixture").hide()
element: $("<div class='hidden-div'></div>").appendTo("#qunit-fixture").hide()
});

@@ -709,4 +798,4 @@ this.tour.addStep({

});
this.tour.showStep(1);
return strictEqual(this.tour.getStep(1).element.data("popover").tip().filter(":visible").length, 1, "tour skips step with no element");
this.tour._showStep(1);
return strictEqual(this.tour._getStep(1).element.data("popover").tip().filter(":visible").length, 1, "tour skips step with no element");
});

@@ -716,10 +805,10 @@

this.tour = new Tour();
this.tour.setCurrentStep(4);
this.tour._setCurrentStep(4);
strictEqual(this.tour._current, 4, "tour sets current step if passed a value");
this.tour.setState("current_step", 2);
this.tour.setCurrentStep();
this.tour._setState("current_step", 2);
this.tour._initCurrentStep();
return strictEqual(this.tour._current, 2, "tour reads current step state if not passed a value");
});
test("Tour.showNextStep should show the next step", function() {
test("Tour._showNextStep should show the next step", function() {
this.tour = new Tour();

@@ -733,7 +822,7 @@ this.tour.addStep({

this.tour.start();
this.tour.showNextStep();
return strictEqual(this.tour.getStep(1).element.data("popover").tip().filter(":visible").length, 1, "tour shows next step");
this.tour._showNextStep();
return strictEqual(this.tour._getStep(1).element.data("popover").tip().filter(":visible").length, 1, "tour shows next step");
});
test("Tour.showPrevStep should show the previous step", function() {
test("Tour._showPrevStep should show the previous step", function() {
this.tour = new Tour();

@@ -746,5 +835,116 @@ this.tour.addStep({

});
this.tour.showStep(1);
this.tour.showPrevStep();
return strictEqual(this.tour.getStep(0).element.data("popover").tip().filter(":visible").length, 1, "tour shows previous step");
this.tour._showStep(1);
this.tour._showPrevStep();
return strictEqual(this.tour._getStep(0).element.data("popover").tip().filter(":visible").length, 1, "tour shows previous step");
});
test(".initEvent with an element", function() {
var $div, e;
expect(1);
this.tour = new Tour();
$div = $("<div></div>").appendTo("#qunit-fixture");
e = this.tour._initEvent("plop", {
element: $div
});
return deepEqual(e.element, $div);
});
/**
* Overlay
*/
test("Should add the div/css for overlay if it was set to true", function() {
expect(2);
this.tour = new Tour({
step: {
overlay: true
}
});
this.tour.addStep({
element: $("<div id='a'></div>").appendTo("#qunit-fixture")
});
this.tour.start();
equal($('#bootstrap-tour-style').length, 1);
this.tour.dispose();
return equal($('#bootstrap-tour-style').length, 0);
});
test("Should not add the div/css for overlay if it was set to false", function() {
expect(1);
this.tour = new Tour({
step: {
overlay: false
}
});
return equal($('#bootstrap-tour-style').length, 0);
});
test("Should display an overlay for the element if it was set to true", function() {
expect(2);
this.tour = new Tour({
step: {
overlay: true
}
});
this.tour.addStep({
element: $("<div id='a'></div>").appendTo("#qunit-fixture")
});
this.tour.addStep({
element: $("<div id='b'></div>").appendTo("#qunit-fixture")
});
this.tour.start();
ok($('#a').hasClass('bootstrap-tour-expose'), "should have an expose class");
return ok($('#bootstrap-tour-overlay').is(':visible'), "overlay should be visible");
});
/**
* Private API
*/
test("_getProp handle null obj", function() {
expect(2);
deepEqual(new Tour()._getProp(null, {}, "template"), null);
return deepEqual(new Tour()._getProp({}, null, "template"), null);
});
test("_getProp should select the right value", function() {
var a, b;
expect(4);
this.tour = new Tour();
a = {
template: false
};
b = {};
deepEqual(this.tour._getProp(a, b, "template"), false);
deepEqual(this.tour._getProp(b, a, "template"), false);
a = {
template: true
};
b = {};
deepEqual(this.tour._getProp(a, b, "template"), true);
return deepEqual(this.tour._getProp(b, a, "template"), true);
});
test("_getProp should select the right function", function() {
var a, b;
expect(4);
this.tour = new Tour();
a = {
template: function() {
return false;
}
};
b = {};
deepEqual(this.tour._getProp(a, b, "template"), false);
deepEqual(this.tour._getProp(b, a, "template"), false);
a = {
template: function() {
return true;
}
};
b = {};
deepEqual(this.tour._getProp(a, b, "template"), true);
return deepEqual(this.tour._getProp(b, a, "template"), true);
});
page.html
.npmignore

Sorry, the diff of this file is not supported yet

index.html

Sorry, the diff of this file is not supported yet

src/bootstrap-tour.coffee

Sorry, the diff of this file is not supported yet

test/tests.coffee

Sorry, the diff of this file is not supported yet