/**
* jQuery wizard v0.4.3
* https://github.com/amazingSurge/jquery-wizard
*
* Copyright (c) amazingSurge
* Released under the LGPL-3.0 license
*/
(function(global, factory) {
if (typeof define === "function" && define.amd) {
define(['jquery'], factory);
} else if (typeof exports !== "undefined") {
factory(require('jquery'));
} else {
var mod = {
exports: {}
};
factory(global.jQuery);
global.jqueryWizardEs = mod.exports;
}
})(this,
function(_jquery) {
'use strict';
var _jquery2 = _interopRequireDefault(_jquery);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _toConsumableArray(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
arr2[i] = arr[i];
}
return arr2;
} else {
return Array.from(arr);
}
}
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ?
function(obj) {
return typeof obj;
}
:
function(obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj;
};
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var _createClass = function() {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor)
descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function(Constructor, protoProps, staticProps) {
if (protoProps)
defineProperties(Constructor.prototype, protoProps);
if (staticProps)
defineProperties(Constructor, staticProps);
return Constructor;
};
}();
/*eslint no-unused-vars: "off"*/
/*eslint no-empty-function: "off"*/
var DEFAULTS = {
step: '.wizard-steps > li',
getPane: function getPane(index, step) {
return this.$element.find('.wizard-content').children().eq(index);
},
buttonsAppendTo: 'this',
templates: {
buttons: function buttons() {
var options = this.options;
return '
';
}
},
classes: {
step: {
done: 'done',
error: 'error',
active: 'current',
disabled: 'disabled',
activing: 'activing',
loading: 'loading'
},
pane: {
active: 'active',
activing: 'activing'
},
button: {
hide: 'hide',
disabled: 'disabled'
}
},
autoFocus: true,
keyboard: true,
enableWhenVisited: false,
buttonLabels: {
next: 'Next',
back: 'Back',
finish: 'Finish'
},
loading: {
show: function show(step) {},
hide: function hide(step) {},
fail: function fail(step) {}
},
cacheContent: false,
validator: function validator(step) {
return true;
},
onInit: null,
onNext: null,
onBack: null,
onReset: null,
onBeforeShow: null,
onAfterShow: null,
onBeforeHide: null,
onAfterHide: null,
onBeforeLoad: null,
onAfterLoad: null,
onBeforeChange: null,
onAfterChange: null,
onStateChange: null,
onFinish: null
};
/**
* Css features detect
**/
var support = {};
(function(support) {
/**
* Borrowed from Owl carousel
**/
var events = {
transition: {
end: {
WebkitTransition: 'webkitTransitionEnd',
MozTransition: 'transitionend',
OTransition: 'oTransitionEnd',
transition: 'transitionend'
}
},
animation: {
end: {
WebkitAnimation: 'webkitAnimationEnd',
MozAnimation: 'animationend',
OAnimation: 'oAnimationEnd',
animation: 'animationend'
}
}
},
prefixes = ['webkit', 'Moz', 'O', 'ms'],
style = (0, _jquery2.default)('').get(0).style,
tests = {
csstransitions: function csstransitions() {
return Boolean(test('transition'));
},
cssanimations: function cssanimations() {
return Boolean(test('animation'));
}
};
var test = function test(property, prefixed) {
var result = false,
upper = property.charAt(0).toUpperCase() + property.slice(1);
if (style[property] !== undefined) {
result = property;
}
if (!result) {
_jquery2.default.each(prefixes,
function(i, prefix) {
if (style[prefix + upper] !== undefined) {
result = '-' + prefix.toLowerCase() + '-' + upper;
return false;
}
return true;
}
);
}
if (prefixed) {
return result;
}
if (result) {
return true;
}
return false;
};
var prefixed = function prefixed(property) {
return test(property, true);
};
if (tests.csstransitions()) {
/*eslint no-new-wrappers: "off"*/
support.transition = new String(prefixed('transition'));
support.transition.end = events.transition.end[support.transition];
}
if (tests.cssanimations()) {
/*eslint no-new-wrappers: "off"*/
support.animation = new String(prefixed('animation'));
support.animation.end = events.animation.end[support.animation];
}
})(support);
function emulateTransitionEnd($el, duration) {
'use strict';
var called = false;
$el.one(support.transition.end,
function() {
called = true;
}
);
var callback = function callback() {
if (!called) {
$el.trigger(support.transition.end);
}
};
setTimeout(callback, duration);
}
var Step = function() {
function Step(element, wizard, index) {
_classCallCheck(this, Step);
this.TRANSITION_DURATION = 200;
this.initialize(element, wizard, index);
}
_createClass(Step, [{
key: 'initialize',
value: function initialize(element, wizard, index) {
this.$element = (0, _jquery2.default)(element);
this.wizard = wizard;
this.events = {};
this.loader = null;
this.loaded = false;
this.validator = this.wizard.options.validator;
this.states = {
done: false,
error: false,
active: false,
disabled: false,
activing: false
};
this.index = index;
this.$element.data('wizard-index', index);
this.$pane = this.getPaneFromTarget();
if (!this.$pane) {
this.$pane = this.wizard.options.getPane.call(this.wizard, index, element);
}
this.setValidatorFromData();
this.setLoaderFromData();
}
}, {
key: 'getPaneFromTarget',
value: function getPaneFromTarget() {
var selector = this.$element.data('target');
if (!selector) {
selector = this.$element.attr('href');
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '');
}
if (selector) {
return (0, _jquery2.default)(selector);
}
return null;
}
}, {
key: 'setup',
value: function setup() {
var current = this.wizard.currentIndex();
if (this.index === current) {
this.enter('active');
if (this.loader) {
this.load();
}
} else if (this.index > current) {
this.enter('disabled');
}
this.$element.attr('aria-expanded', this.is('active'));
this.$pane.attr('aria-expanded', this.is('active'));
var classes = this.wizard.options.classes;
if (this.is('active')) {
this.$pane.addClass(classes.pane.active);
} else {
this.$pane.removeClass(classes.pane.active);
}
}
}, {
key: 'show',
value: function show(callback) {
if (this.is('activing') || this.is('active')) {
return;
}
this.trigger('beforeShow');
this.enter('activing');
var classes = this.wizard.options.classes;
this.$element.attr('aria-expanded', true);
this.$pane.addClass(classes.pane.activing).addClass(classes.pane.active).attr('aria-expanded', true);
var complete = function complete() {
this.$pane.removeClass(classes.pane.activing);
this.leave('activing');
this.enter('active');
this.trigger('afterShow');
if (_jquery2.default.isFunction(callback)) {
callback.call(this);
}
};
if (!support.transition) {
complete.call(this);
return;
}
this.$pane.one(support.transition.end, _jquery2.default.proxy(complete, this));
emulateTransitionEnd(this.$pane, this.TRANSITION_DURATION);
}
}, {
key: 'hide',
value: function hide(callback) {
if (this.is('activing') || !this.is('active')) {
return;
}
this.trigger('beforeHide');
this.enter('activing');
var classes = this.wizard.options.classes;
this.$element.attr('aria-expanded', false);
this.$pane.addClass(classes.pane.activing).removeClass(classes.pane.active).attr('aria-expanded', false);
var complete = function complete() {
this.$pane.removeClass(classes.pane.activing);
this.leave('activing');
this.leave('active');
this.trigger('afterHide');
if (_jquery2.default.isFunction(callback)) {
callback.call(this);
}
};
if (!support.transition) {
complete.call(this);
return;
}
this.$pane.one(support.transition.end, _jquery2.default.proxy(complete, this));
emulateTransitionEnd(this.$pane, this.TRANSITION_DURATION);
}
}, {
key: 'empty',
value: function empty() {
this.$pane.empty();
}
}, {
key: 'load',
value: function load(callback) {
var that = this;
var loader = this.loader;
if (_jquery2.default.isFunction(loader)) {
loader = loader.call(this.wizard, this);
}
if (this.wizard.options.cacheContent && this.loaded) {
if (_jquery2.default.isFunction(callback)) {
callback.call(this);
}
return;
}
this.trigger('beforeLoad');
this.enter('loading');
function setContent(content) {
that.$pane.html(content);
that.leave('loading');
that.loaded = true;
that.trigger('afterLoad');
if (_jquery2.default.isFunction(callback)) {
callback.call(that);
}
}
if (typeof loader === 'string') {
setContent(loader);
} else if ((typeof loader === 'undefined' ? 'undefined' : _typeof(loader)) === 'object' && loader.hasOwnProperty('url')) {
that.wizard.options.loading.show.call(that.wizard, that);
_jquery2.default.ajax(loader.url, loader.settings || {}).done(
function(data) {
setContent(data);
that.wizard.options.loading.hide.call(that.wizard, that);
}
).fail(
function() {
that.wizard.options.loading.fail.call(that.wizard, that);
}
);
} else {
setContent('');
}
}
}, {
key: 'trigger',
value: function trigger(event) {
var _wizard;
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
if (_jquery2.default.isArray(this.events[event])) {
for (var i in this.events[event]) {
if ({}.hasOwnProperty.call(this.events[event], i)) {
var _events$event;
(_events$event = this.events[event])[i].apply(_events$event, args);
}
}
}
(_wizard = this.wizard).trigger.apply(_wizard, _toConsumableArray([event, this].concat(args)));
}
}, {
key: 'enter',
value: function enter(state) {
this.states[state] = true;
var classes = this.wizard.options.classes;
this.$element.addClass(classes.step[state]);
this.trigger('stateChange', true, state);
}
}, {
key: 'leave',
value: function leave(state) {
if (this.states[state]) {
this.states[state] = false;
var classes = this.wizard.options.classes;
this.$element.removeClass(classes.step[state]);
this.trigger('stateChange', false, state);
}
}
}, {
key: 'setValidatorFromData',
value: function setValidatorFromData() {
var validator = this.$pane.data('validator');
if (validator && _jquery2.default.isFunction(window[validator])) {
this.validator = window[validator];
}
}
}, {
key: 'setLoaderFromData',
value: function setLoaderFromData() {
var loader = this.$pane.data('loader');
if (loader) {
if (_jquery2.default.isFunction(window[loader])) {
this.loader = window[loader];
}
} else {
var url = this.$pane.data('loader-url');
if (url) {
this.loader = {
url: url,
settings: this.$pane.data('settings') || {}
};
}
}
}
}, {
key: 'active',
value: function active() {
return this.wizard.goTo(this.index);
}
}, {
key: 'on',
value: function on(event, handler) {
if (_jquery2.default.isFunction(handler)) {
if (_jquery2.default.isArray(this.events[event])) {
this.events[event].push(handler);
} else {
this.events[event] = [handler];
}
}
return this;
}
}, {
key: 'off',
value: function off(event, handler) {
if (_jquery2.default.isFunction(handler) && _jquery2.default.isArray(this.events[event])) {
_jquery2.default.each(this.events[event],
function(i, f) {
/*eslint consistent-return: "off"*/
if (f === handler) {
delete this.events[event][i];
return false;
}
}
);
}
return this;
}
}, {
key: 'is',
value: function is(state) {
return this.states[state] && this.states[state] === true;
}
}, {
key: 'reset',
value: function reset() {
for (var state in this.states) {
if ({}.hasOwnProperty.call(this.states, state)) {
this.leave(state);
}
}
this.setup();
return this;
}
}, {
key: 'setLoader',
value: function setLoader(loader) {
this.loader = loader;
if (this.is('active')) {
this.load();
}
return this;
}
}, {
key: 'setValidator',
value: function setValidator(validator) {
if (_jquery2.default.isFunction(validator)) {
this.validator = validator;
}
return this;
}
}, {
key: 'validate',
value: function validate() {
return this.validator.call(this.$pane.get(0), this);
}
}]);
return Step;
}();
var counter = 0;
var NAMESPACE$1 = 'wizard';
var wizard = function() {
function wizard(element) {
var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
_classCallCheck(this, wizard);
this.$element = (0, _jquery2.default)(element);
this.options = _jquery2.default.extend(true, {}, DEFAULTS, options);
this.$steps = this.$element.find(this.options.step);
this.id = this.$element.attr('id');
if (!this.id) {
this.id = 'wizard-' + ++counter;
this.$element.attr('id', this.id);
}
this.trigger('init');
this.initialize();
}
_createClass(wizard, [{
key: 'initialize',
value: function initialize() {
this.steps = [];
var that = this;
this.$steps.each(
function(index) {
that.steps.push(new Step(this, that, index));
}
);
this._current = 0;
this.transitioning = null;
_jquery2.default.each(this.steps,
function(i, step) {
step.setup();
}
);
this.setup();
this.$element.on('click', this.options.step,
function(e) {
var index = (0, _jquery2.default)(this).data('wizard-index');
if (!that.get(index).is('disabled')) {
that.goTo(index);
}
e.preventDefault();
e.stopPropagation();
}
);
if (this.options.keyboard) {
(0, _jquery2.default)(document).on('keyup', _jquery2.default.proxy(this.keydown, this));
}
this.trigger('ready');
}
}, {
key: 'setup',
value: function setup() {
this.$buttons = (0, _jquery2.default)(this.options.templates.buttons.call(this));
this.updateButtons();
var buttonsAppendTo = this.options.buttonsAppendTo;
var $to = void 0;
if (buttonsAppendTo === 'this') {
$to = this.$element;
} else if (_jquery2.default.isFunction(buttonsAppendTo)) {
$to = buttonsAppendTo.call(this);
} else {
$to = this.$element.find(buttonsAppendTo);
}
this.$buttons = this.$buttons.appendTo($to);
}
}, {
key: 'updateButtons',
value: function updateButtons() {
var classes = this.options.classes.button;
var $back = this.$buttons.find('[data-wizard="back"]');
var $next = this.$buttons.find('[data-wizard="next"]');
var $finish = this.$buttons.find('[data-wizard="finish"]');
if (this._current === 0) {
$back.addClass(classes.disabled);
} else {
$back.removeClass(classes.disabled);
}
if (this._current === this.lastIndex()) {
$next.addClass(classes.hide);
$finish.removeClass(classes.hide);
} else {
$next.removeClass(classes.hide);
$finish.addClass(classes.hide);
}
}
}, {
key: 'updateSteps',
value: function updateSteps() {
var _this = this;
_jquery2.default.each(this.steps,
function(i, step) {
if (i > _this._current) {
step.leave('error');
step.leave('active');
step.leave('done');
if (!_this.options.enableWhenVisited) {
step.enter('disabled');
}
}
}
);
}
}, {
key: 'keydown',
value: function keydown(e) {
if (/input|textarea/i.test(e.target.tagName)) {
return;
}
switch (e.which) {
case 37:
this.back();
break;
case 39:
this.next();
break;
default:
return;
}
e.preventDefault();
}
}, {
key: 'trigger',
value: function trigger(eventType) {
for (var _len2 = arguments.length, params = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
params[_key2 - 1] = arguments[_key2];
}
var data = [this].concat(params);
// event
this.$element.trigger(NAMESPACE$1 + '::' + eventType, data);
// callback
eventType = eventType.replace(/\b\w+\b/g,
function(word) {
return word.substring(0, 1).toUpperCase() + word.substring(1);
}
);
var onFunction = 'on' + eventType;
if (typeof this.options[onFunction] === 'function') {
this.options[onFunction].apply(this, params);
}
}
}, {
key: 'get',
value: function get(index) {
if (typeof index === 'string' && index.substring(0, 1) === '#') {
var id = index.substring(1);
for (var i in this.steps) {
if (this.steps[i].$pane.attr('id') === id) {
return this.steps[i];
}
}
}
if (index < this.length() && this.steps[index]) {
return this.steps[index];
}
return null;
}
}, {
key: 'goTo',
value: function goTo(index, callback) {
if (index === this._current || this.transitioning === true) {
return false;
}
var current = this.current();
var to = this.get(index);
if (index > this._current) {
if (!current.validate()) {
current.leave('done');
current.enter('error');
return -1;
}
current.leave('error');
if (index > this._current) {
current.enter('done');
}
}
var that = this;
var process = function process() {
that.trigger('beforeChange', current, to);
that.transitioning = true;
current.hide();
to.show(
function() {
that._current = index;
that.transitioning = false;
this.leave('disabled');
that.updateButtons();
that.updateSteps();
if (that.options.autoFocus) {
var $input = this.$pane.find(':input');
if ($input.length > 0) {
$input.eq(0).focus();
} else {
this.$pane.focus();
}
}
if (_jquery2.default.isFunction(callback)) {
callback.call(that);
}
that.trigger('afterChange', current, to);
}
);
};
if (to.loader) {
to.load(
function() {
process();
}
);
} else {
process();
}
return true;
}
}, {
key: 'length',
value: function length() {
return this.steps.length;
}
}, {
key: 'current',
value: function current() {
return this.get(this._current);
}
}, {
key: 'currentIndex',
value: function currentIndex() {
return this._current;
}
}, {
key: 'lastIndex',
value: function lastIndex() {
return this.length() - 1;
}
}, {
key: 'next',
value: function next() {
var _this2 = this;
if (this._current < this.lastIndex()) {
(function() {
var from = _this2._current,
to = _this2._current + 1;
_this2.goTo(to,
function() {
this.trigger('next', this.get(from), this.get(to));
}
);
})();
}
return false;
}
}, {
key: 'back',
value: function back() {
var _this3 = this;
if (this._current > 0) {
(function() {
var from = _this3._current,
to = _this3._current - 1;
_this3.goTo(to,
function() {
this.trigger('back', this.get(from), this.get(to));
}
);
})();
}
return false;
}
}, {
key: 'first',
value: function first() {
return this.goTo(0);
}
}, {
key: 'finish',
value: function finish() {
if (this._current === this.lastIndex()) {
var current = this.current();
if (current.validate()) {
this.trigger('finish');
current.leave('error');
current.enter('done');
} else {
current.enter('error');
}
}
}
}, {
key: 'reset',
value: function reset() {
this._current = 0;
_jquery2.default.each(this.steps,
function(i, step) {
step.reset();
}
);
this.trigger('reset');
}
}], [{
key: 'setDefaults',
value: function setDefaults(options) {
_jquery2.default.extend(true, DEFAULTS, _jquery2.default.isPlainObject(options) && options);
}
}]);
return wizard;
}();
(0, _jquery2.default)(document).on('click', '[data-wizard]',
function(e) {
'use strict';
var href = void 0;
var $this = (0, _jquery2.default)(this);
var $target = (0, _jquery2.default)($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''));
var wizard = $target.data(NAMESPACE$1);
if (!wizard) {
return;
}
var method = $this.data(NAMESPACE$1);
if (/^(back|next|first|finish|reset)$/.test(method)) {
wizard[method]();
}
e.preventDefault();
}
);
var info = {
version: '0.4.3'
};
var NAMESPACE = 'wizard';
var OtherWizard = _jquery2.default.fn.wizard;
var jQueryWizard = function jQueryWizard(options) {
var _this4 = this;
for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
args[_key3 - 1] = arguments[_key3];
}
if (typeof options === 'string') {
var _ret3 = function() {
var method = options;
if (/^_/.test(method)) {
return {
v: false
};
} else if (/^(get)/.test(method)) {
var instance = _this4.first().data(NAMESPACE);
if (instance && typeof instance[method] === 'function') {
return {
v: instance[method].apply(instance, args)
};
}
} else {
return {
v: _this4.each(
function() {
var instance = _jquery2.default.data(this, NAMESPACE);
if (instance && typeof instance[method] === 'function') {
instance[method].apply(instance, args);
}
}
)
};
}
}();
if ((typeof _ret3 === 'undefined' ? 'undefined' : _typeof(_ret3)) === "object")
return _ret3.v;
}
return this.each(
function() {
if (!(0, _jquery2.default)(this).data(NAMESPACE)) {
(0, _jquery2.default)(this).data(NAMESPACE, new wizard(this, options));
}
}
);
};
_jquery2.default.fn.wizard = jQueryWizard;
_jquery2.default.wizard = _jquery2.default.extend({
setDefaults: wizard.setDefaults,
noConflict: function noConflict() {
_jquery2.default.fn.wizard = OtherWizard;
return jQueryWizard;
}
}, info);
}
);