'
target: $('#something-to-point-at')
closeButton: true
highlightTarget: true
setup: (tour, options) ->
# do stuff in the interface/bind
teardown: (tour, options) ->
# remove stuff/unbind
}
Basic Step object options:
content - a string of html to put into the step.
target - jquery object or absolute point: [10, 30]
highlightTarget - optional bool, true will outline the target with a bright color.
container - optional jquery element that should contain the step flyout.
default: $('body')
viewport - optional jquery element that the step flyout should stay within.
$(window) is commonly used. default: false
my - string position of the pointer on the tip. default: 'left center'
at - string position on the element the tip points to. default: 'right center'
see http://craigsworks.com/projects/qtip2/docs/position/#basics
Step object button options:
okButton - optional bool, true will show a red ok button
closeButton - optional bool, true will show a grey close button
skipButton - optional bool, true will show a grey skip button
nextButton - optional bool, true will show a red next button
Step object function options:
All functions on the step will have the signature '(tour, options) ->'
tour - the Draw.Tour object. Handy to call tour.next()
options - the step options. An object passed into the tour when created.
It has the environment that the fns can use to manipulate the
interface, bind to events, etc. The same object is passed to all
of a step object's functions, so it is handy for passing data
between steps.
setup - called before step is shown. Use to scroll to your target, hide/show things, ...
'this' is the step object itself.
MUST return an object. Properties in the returned object will override
properties in the step object.
i.e. the target might be dynamic so you would specify:
setup: (tour, options) ->
return { target: $('#point-to-me') }
teardown - function called right before hiding the step. Use to unbind from
things you bound to in setup().
'this' is the step object itself.
Return nothing.
bind - an array of function names to bind. Use this for event handlers you use in setup().
Will bind functions to the step object as this, and the first 2 args as tour and options.
i.e.
bind: ['onChangeSomething']
setup: (tour, options) ->
options.document.bind('change:something', @onChangeSomething)
onChangeSomething: (tour, options, model, value) ->
tour.next()
teardown: (tour, options) ->
options.document.unbind('change:something', @onChangeSomething)
*/
Tourist.Tour = (function() {
_.extend(Tour.prototype, Backbone.Events);
function Tour(options) {
var defs, tipOptions;
this.options = options != null ? options : {};
this.onChangeCurrentStep = __bind(this.onChangeCurrentStep, this);
this.next = __bind(this.next, this);
defs = {
tipClass: 'Bootstrap'
};
this.options = _.extend(defs, this.options);
this.model = new Tourist.Model({
current_step: null
});
tipOptions = _.extend({
model: this.model
}, this.options.tipOptions);
this.view = new Tourist.Tip[this.options.tipClass](tipOptions);
this.view.bind('click:close', _.bind(this.stop, this, true));
this.view.bind('click:next', this.next);
this.model.bind('change:current_step', this.onChangeCurrentStep);
}
/*
Public
*/
Tour.prototype.start = function() {
this.trigger('start', this);
return this.next();
};
Tour.prototype.stop = function(doFinalStep) {
if (doFinalStep) {
return this._showCancelFinalStep();
} else {
return this._stop();
}
};
Tour.prototype.next = function() {
var currentStep, index;
currentStep = this._teardownCurrentStep();
index = 0;
if (currentStep) {
index = currentStep.index + 1;
}
if (index < this.options.steps.length) {
return this._showStep(this.options.steps[index], index);
} else if (index === this.options.steps.length) {
return this._showSuccessFinalStep();
} else {
return this._stop();
}
};
Tour.prototype.setStepOptions = function(stepOptions) {
return this.options.stepOptions = stepOptions;
};
/*
Handlers
*/
Tour.prototype.onChangeCurrentStep = function(model, step) {
return this.view.render(step);
};
/*
Private
*/
Tour.prototype._showCancelFinalStep = function() {
return this._showFinalStep(false);
};
Tour.prototype._showSuccessFinalStep = function() {
return this._showFinalStep(true);
};
Tour.prototype._teardownCurrentStep = function() {
var currentStep;
currentStep = this.model.get('current_step');
this._teardownStep(currentStep);
return currentStep;
};
Tour.prototype._stop = function() {
this._teardownCurrentStep();
this.model.set({
current_step: null
});
return this.trigger('stop', this);
};
Tour.prototype._showFinalStep = function(success) {
var currentStep, finalStep;
currentStep = this._teardownCurrentStep();
finalStep = success ? this.options.successStep : this.options.cancelStep;
if (_.isFunction(finalStep)) {
finalStep.call(this, this, this.options.stepOptions);
finalStep = null;
}
if (!finalStep) {
return this._stop();
}
if (currentStep && currentStep.final) {
return this._stop();
}
finalStep.final = true;
return this._showStep(finalStep, this.options.steps.length);
};
Tour.prototype._showStep = function(step, index) {
if (!step) {
return;
}
step = _.clone(step);
step.index = index;
step.total = this.options.steps.length;
if (!step.final) {
step.final = this.options.steps.length === index + 1 && !this.options.successStep;
}
step = _.extend(step, this._setupStep(step));
return this.model.set({
current_step: step
});
};
Tour.prototype._setupStep = function(step) {
var fn, _i, _len, _ref4;
if (!(step && step.setup)) {
return {};
}
if (step.bind) {
_ref4 = step.bind;
for (_i = 0, _len = _ref4.length; _i < _len; _i++) {
fn = _ref4[_i];
step[fn] = _.bind(step[fn], step, this, this.options.stepOptions);
}
}
return step.setup.call(step, this, this.options.stepOptions) || {};
};
Tour.prototype._teardownStep = function(step) {
if (step && step.teardown) {
step.teardown.call(step, this, this.options.stepOptions);
}
return this.view.cleanupCurrentTarget();
};
return Tour;
})();
}).call(this);