/*!
* jQuery Stepy - A Wizard Plugin
* --------------------------------------------------------------
*
* jQuery Stepy is a plugin that generates a customizable wizard.
*
* Licensed under The MIT License
*
* @version 1.1.0
* @since 2010-07-03
* @author Washington Botelho
* @documentation wbotelhos.com/stepy
*
* --------------------------------------------------------------
*
* <form>
* <fieldset title="Step 1">
* <legend>description one</legend>
* <!-- inputs -->
* </fieldset>
*
* <fieldset title="Step 2">
* <legend>description two</legend>
* <!-- inputs -->
* </fieldset>
*
* <input type="submit" />
* </form>
*
* $('form').stepy();
*
*/
;(function($) {
var methods = {
init: function(settings) {
return this.each(function() {
methods.destroy.call(this);
this.opt = $.extend({}, $.fn.stepy.defaults, settings);
var self = this,
that = $(this),
id = that.attr('id');
if (id === undefined || id === '') {
var id = methods._hash.call(self);
that.attr('id', id);
}
// Remove Validator...
if (self.opt.validate) {
jQuery.validator.setDefaults({ ignore: self.opt.ignore });
that.append('<div class="stepy-errors" />');
}
self.header = methods._header.call(self);
self.steps = that.children('fieldset');
self.steps.each(function(index) {
methods._createHead.call(self, this, index);
methods._createButtons.call(self, this, index);
});
self.heads = self.header.children('li');
self.heads.first().addClass('stepy-active');
if (self.opt.finishButton) {
methods._bindFinish.call(self);
}
// WIP...
if (self.opt.titleClick) {
self.heads.click(function() {
var array = self.heads.filter('.stepy-active').attr('id').split('-'), // TODO: try keep the number in an attribute.
current = parseInt(array[array.length - 1], 10),
clicked = $(this).index();
if (clicked > current) {
if (self.opt.next && !methods._execute.call(that, self.opt.next, clicked)) {
return false;
}
} else if (clicked < current) {
if (self.opt.back && !methods._execute.call(that, self.opt.back, clicked)) {
return false;
}
}
if (clicked != current) {
methods.step.call(self, (clicked) + 1);
}
});
} else {
self.heads.css('cursor', 'default');
}
if (self.opt.enter) {
methods._bindEnter.call(self);
}
self.steps.first().find(':input:visible:enabled').first().select().focus();
that.data({ 'settings': this.opt, 'stepy': true });
});
}, _bindEnter: function() {
var self = this;
self.steps.delegate('input[type="text"], input[type="password"]', 'keypress', function(evt) {
var key = (evt.keyCode ? evt.keyCode : evt.which);
if (key == 13) {
evt.preventDefault();
var buttons = $(this).closest('fieldset').find('.stepy-navigator');
if (buttons.length) {
var next = buttons.children('.button-next');
if (next.length) {
next.click();
} else if (self.finish) {
self.finish.click();
}
}
}
});
}, _bindFinish: function() {
var self = this,
that = $(this),
finish = that.children('input[type="submit"]');
self.finish = (finish.length === 1) ? finish : that.children('.btn .btn-succes .stepy-finish');
if (self.finish.length) {
var isForm = that.is('form'),
onSubmit = undefined;
if (isForm && self.opt.finish) {
onSubmit = that.attr('onsubmit');
that.attr('onsubmit', 'return false;');
}
self.finish.on('click.stepy', function(evt) {
if (self.opt.finish && !methods._execute.call(that, self.opt.finish, self.steps.length - 1)) {
evt.preventDefault();
} else if (isForm) {
if (onSubmit) {
that.attr('onsubmit', onSubmit);
} else {
that.removeAttr('onsubmit');
}
var isSubmit = self.finish.attr('type') === 'submit';
if (!isSubmit && (!self.opt.validate || methods.validate.call(that, self.steps.length - 1))) {
that.submit();
}
}
});
self.steps.last().children('.stepy-navigator').append(self.finish);
} else {
$.error('Submit button or element with class "stepy-finish" missing!');
}
}, _createBackButton: function(nav, index) {
var self = this,
that = $(this),
attributes = { href: '#', 'class': 'btn btn-default', html: self.opt.backLabel };
$('<a />', attributes).on('click.stepy', function(e) {
e.preventDefault();
if (!self.opt.back || methods._execute.call(self, self.opt.back, index - 1)) {
methods.step.call(self, (index - 1) + 1);
}
}).appendTo(nav);
}, _createButtons: function(step, index) {
var nav = methods._navigator.call(this).appendTo(step);
if (index === 0) {
if (this.steps.length > 1) {
methods._createNextButton.call(this, nav, index);
}
} else {
$(step).hide();
methods._createBackButton.call(this, nav, index);
if (index < this.steps.length - 1) {
methods._createNextButton.call(this, nav, index);
}
}
}, _createHead: function(step, index) {
var step = $(step).attr('id', $(this).attr('id') + '-step-' + index).addClass('stepy-step'),
head = methods._head.call(this, index);
head.append(methods._title.call(this, step));
if (this.opt.description) {
head.append(methods._description.call(this, step));
}
this.header.append(head);
}, _createNextButton: function(nav, index) {
var self = this,
that = $(this),
attributes = { href: '#', 'class': 'btn btn-primary', html: self.opt.nextLabel };
$('<a/>', attributes).on('click.stepy', function(e) {
e.preventDefault();
if (!self.opt.next || methods._execute.call(that, self.opt.next, index + 1)) {
methods.step.call(self, (index + 1) + 1);
}
}).appendTo(nav);
}, _description: function(step) {
var legend = step.children('legend');
if (!this.opt.legend) {
legend.hide();
}
if (legend.length) {
return $('<span />', { html: legend.html() });
}
methods._error.call(this, '<legend /> element missing!');
}, _error: function(message) {
$(this).html(message);
$.error(message);
}, _execute: function(callback, index) {
var isValid = callback.call(this, index + 1);
return isValid || isValid === undefined;
}, _hash: function() {
this.hash = 'stepy-' + Math.random().toString().substring(2)
return this.hash;
}, _head: function(index) {
return $('<li />', { id: $(this).attr('id') + '-head-' + index });
}, _header: function() {
var header = $('<ul />', { id: $(this).attr('id') + '-header', 'class': 'stepy-header' });
if (this.opt.titleTarget) {
header.appendTo(this.opt.titleTarget);
} else {
header.insertBefore(this);
}
return header;
}, _navigator: function(index) {
return $('<div class="stepy-navigator panel-footer" />');
}, _title: function(step) {
return $('<div />', { html: step.attr('title') || '--' });
}, destroy: function() {
return $(this).each(function() {
var that = $(this);
if (that.data('stepy')) {
var steps = that.data('stepy', false).children('fieldset').css('display', '');
that.children('.stepy-errors').remove();
this.finish.appendTo(steps.last());
steps.find('.stepy-navigator').remove();
}
});
}, step: function(index) {
var self = this
that = $(this),
opt = that[0].opt;
index--;
var steps = that.children('fieldset');
if (index > steps.length - 1) {
index = steps.length - 1;
}
var max = index;
// Remove Validator...
if (opt.validate) {
var isValid = true;
for (var i = 0; i < index; i++) {
isValid &= methods.validate.call(this, i);
if (opt.block && !isValid) {
max = i;
break;
}
}
}
// WIP...
var stepsCount = steps.length;
if (opt.transition == 'fade') {
steps.fadeOut(opt.duration, function() {
if (--stepsCount > 0) {
return;
}
steps.eq(max).fadeIn(opt.duration);
});
} else if (opt.transition == 'slide') {
steps.slideUp(opt.duration, function() {
if (--stepsCount > 0) {
return;
}
steps.eq(max).slideDown(opt.duration);
});
} else {
steps.hide(opt.duration).eq(max).show(opt.duration);
}
that[0].heads.removeClass('stepy-active').eq(max).addClass('stepy-active');
if (that.is('form')) {
var $fields = undefined;
if (max == index) {
$fields = steps.eq(max).find(':input:enabled:visible');
} else {
$fields = steps.eq(max).find('.error').select().focus();
}
$fields.first().select().focus();
}
if (opt.select) {
opt.select.call(this, max + 1);
}
return that;
}, validate: function(index) { // WIP...
var that = $(this);
if (!that.is('form')) {
return true;
}
var self = this,
step = that.children('fieldset').eq(index),
isValid = true,
$title = $('#' + that.attr('id') + '-header').children().eq(index),
$validate = that.validate();
$(step.find(':input:enabled').get().reverse()).each(function() {
var fieldIsValid = $validate.element($(this));
if (fieldIsValid === undefined) {
fieldIsValid = true;
}
isValid &= fieldIsValid;
if (isValid) {
if (self.opt.errorImage) {
$title.removeClass('stepy-error');
}
} else {
if (self.opt.errorImage) {
$title.addClass('stepy-error');
}
$validate.focusInvalid();
}
});
return isValid;
}
};
$.fn.stepy = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist!');
}
};
$.fn.stepy.defaults = {
back : undefined,
backLabel : '<i class="fa fa-long-arrow-left"></i> Back',
block : false, // WIP...
description : true,
duration : undefined,
enter : true,
errorImage : false, // WIP...
finish : undefined,
finishButton : true,
ignore : '', // WIP...
legend : true,
next : undefined,
nextLabel : 'Next <i class="fa fa-long-arrow-right"></i>',
select : undefined,
titleClick : false,
titleTarget : undefined,
transition : undefined,
validate : false // WIP...
};
})(jQuery);
@KyuuKazami