/** * jQuery wizard v0.4.4 * 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 && obj !== Symbol.prototype ? '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 ( '
' + options.buttonLabels.back + '' + options.buttonLabels.next + '' + options.buttonLabels.finish + '
' ); } }, 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() { if (this._current < this.lastIndex()) { var from = this._current, to = this._current + 1; this.goTo(to, function() { this.trigger('next', this.get(from), this.get(to)); }); } return false; } }, { key: 'back', value: function back() { if (this._current > 0) { var from = this._current, to = this._current - 1; this.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.4' }; var NAMESPACE = 'wizard'; var OtherWizard = _jquery2.default.fn.wizard; var jQueryWizard = function jQueryWizard(options) { 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 method = options; if (/^_/.test(method)) { return false; } else if (/^(get)/.test(method)) { var instance = this.first().data(NAMESPACE); if (instance && typeof instance[method] === 'function') { return instance[method].apply(instance, args); } } else { return this.each(function() { var instance = _jquery2.default.data(this, NAMESPACE); if (instance && typeof instance[method] === 'function') { instance[method].apply(instance, args); } }); } } 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 ); });