123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889 |
- /**
- * jQuery wizard v0.4.4
- * https://github.com/amazingSurge/jquery-wizard
- *
- * Copyright (c) amazingSurge
- * Released under the LGPL-3.0 license
- */
- import $ from 'jquery';
- /*eslint no-unused-vars: "off"*/
- /*eslint no-empty-function: "off"*/
- var DEFAULTS = {
- step: '.wizard-steps > li',
- getPane: function(index, step) {
- return this.$element.find('.wizard-content').children().eq(index);
- },
- buttonsAppendTo: 'this',
- templates: {
- buttons: function() {
- const options = this.options;
- return `<div class="wizard-buttons"><a class="wizard-back" href="#${this.id}" data-wizard="back" role="button">${options.buttonLabels.back}</a><a class="wizard-next" href="#${this.id}" data-wizard="next" role="button">${options.buttonLabels.next}</a><a class="wizard-finish" href="#${this.id}" data-wizard="finish" role="button">${options.buttonLabels.finish}</a></div>`;
- }
- },
- 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(step) { },
- hide: function(step) { },
- fail: function(step) { }
- },
- cacheContent: false,
- validator: function(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
- **/
- let support = {};
- ((support) => {
- /**
- * Borrowed from Owl carousel
- **/
- const 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 = $('<support>').get(0).style,
- tests = {
- csstransitions() {
- return Boolean(test('transition'));
- },
- cssanimations() {
- return Boolean(test('animation'));
- }
- };
- const test = (property, prefixed) => {
- let result = false,
- upper = property.charAt(0).toUpperCase() + property.slice(1);
- if (style[property] !== undefined) {
- result = property;
- }
- if (!result) {
- $.each(prefixes, (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;
- };
- const 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';
- let called = false;
- $el.one(support.transition.end, () => {
- called = true;
- });
- const callback = () => {
- if (!called) {
- $el.trigger(support.transition.end);
- }
- };
- setTimeout(callback, duration);
- }
- class Step {
- constructor(element, wizard, index) {
- this.TRANSITION_DURATION = 200;
- this.initialize(element, wizard, index);
- }
- initialize(element, wizard, index) {
- this.$element = $(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();
- }
- getPaneFromTarget() {
- let selector = this.$element.data('target');
- if (!selector) {
- selector = this.$element.attr('href');
- selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '');
- }
- if (selector) {
- return $(selector);
- }
- return null;
- }
- setup() {
- const 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'));
- const classes = this.wizard.options.classes;
- if (this.is('active')) {
- this.$pane.addClass(classes.pane.active);
- } else {
- this.$pane.removeClass(classes.pane.active);
- }
- }
- show(callback) {
- if (this.is('activing') || this.is('active')) {
- return;
- }
- this.trigger('beforeShow');
- this.enter('activing');
- const 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);
- const complete = function () {
- this.$pane.removeClass(classes.pane.activing);
- this.leave('activing');
- this.enter('active');
- this.trigger('afterShow');
- if ($.isFunction(callback)) {
- callback.call(this);
- }
- };
- if (!support.transition) {
- complete.call(this);
- return;
- }
- this.$pane.one(support.transition.end, $.proxy(complete, this));
- emulateTransitionEnd(this.$pane, this.TRANSITION_DURATION);
- }
- hide(callback) {
- if (this.is('activing') || !this.is('active')) {
- return;
- }
- this.trigger('beforeHide');
- this.enter('activing');
- const 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);
- const complete = function () {
- this.$pane
- .removeClass(classes.pane.activing);
- this.leave('activing');
- this.leave('active');
- this.trigger('afterHide');
- if ($.isFunction(callback)) {
- callback.call(this);
- }
- };
- if (!support.transition) {
- complete.call(this);
- return;
- }
- this.$pane.one(support.transition.end, $.proxy(complete, this));
- emulateTransitionEnd(this.$pane, this.TRANSITION_DURATION);
- }
- empty() {
- this.$pane.empty();
- }
- load(callback) {
- const that = this;
- let loader = this.loader;
- if ($.isFunction(loader)) {
- loader = loader.call(this.wizard, this);
- }
- if (this.wizard.options.cacheContent && this.loaded) {
- if ($.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 ($.isFunction(callback)) {
- callback.call(that);
- }
- }
- if (typeof loader === 'string') {
- setContent(loader);
- } else if (typeof loader === 'object' && loader.hasOwnProperty('url')) {
- that.wizard.options.loading.show.call(that.wizard, that);
- $.ajax(loader.url, loader.settings || {}).done(data => {
- setContent(data);
- that.wizard.options.loading.hide.call(that.wizard, that);
- }).fail(() => {
- that.wizard.options.loading.fail.call(that.wizard, that);
- });
- } else {
- setContent('');
- }
- }
- trigger(event, ...args) {
- if ($.isArray(this.events[event])) {
- for (const i in this.events[event]) {
- if ({}.hasOwnProperty.call(this.events[event], i)) {
- this.events[event][i](...args);
- }
- }
- }
- this.wizard.trigger(...[event, this].concat(args));
- }
- enter(state) {
- this.states[state] = true;
- const classes = this.wizard.options.classes;
- this.$element.addClass(classes.step[state]);
- this.trigger('stateChange', true, state);
- }
- leave(state) {
- if (this.states[state]) {
- this.states[state] = false;
- const classes = this.wizard.options.classes;
- this.$element.removeClass(classes.step[state]);
- this.trigger('stateChange', false, state);
- }
- }
- setValidatorFromData() {
- const validator = this.$pane.data('validator');
- if (validator && $.isFunction(window[validator])) {
- this.validator = window[validator];
- }
- }
- setLoaderFromData() {
- const loader = this.$pane.data('loader');
- if (loader) {
- if ($.isFunction(window[loader])) {
- this.loader = window[loader];
- }
- } else {
- const url = this.$pane.data('loader-url');
- if (url) {
- this.loader = {
- url,
- settings: this.$pane.data('settings') || {}
- };
- }
- }
- }
- /*
- * Public methods below
- */
- active() {
- return this.wizard.goTo(this.index);
- }
- on(event, handler) {
- if ($.isFunction(handler)) {
- if ($.isArray(this.events[event])) {
- this.events[event].push(handler);
- } else {
- this.events[event] = [handler];
- }
- }
- return this;
- }
- off(event, handler) {
- if ($.isFunction(handler) && $.isArray(this.events[event])) {
- $.each(this.events[event], function (i, f) {
- /*eslint consistent-return: "off"*/
- if (f === handler) {
- delete this.events[event][i];
- return false;
- }
- });
- }
- return this;
- }
- is(state) {
- return this.states[state] && this.states[state] === true;
- }
- reset() {
- for (const state in this.states) {
- if ({}.hasOwnProperty.call(this.states, state)) {
- this.leave(state);
- }
- }
- this.setup();
- return this;
- }
- setLoader(loader) {
- this.loader = loader;
- if (this.is('active')) {
- this.load();
- }
- return this;
- }
- setValidator(validator) {
- if ($.isFunction(validator)) {
- this.validator = validator;
- }
- return this;
- }
- validate() {
- return this.validator.call(this.$pane.get(0), this);
- }
- }
- let counter = 0;
- const NAMESPACE$1 = 'wizard';
- class wizard {
- constructor(element, options = {}) {
- this.$element = $(element);
- this.options = $.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();
- }
- initialize() {
- this.steps = [];
- const that = this;
- this.$steps.each(function (index) {
- that.steps.push(new Step(this, that, index));
- });
- this._current = 0;
- this.transitioning = null;
- $.each(this.steps, (i, step) => {
- step.setup();
- });
- this.setup();
- this.$element.on('click', this.options.step, function (e) {
- const index = $(this).data('wizard-index');
- if (!that.get(index).is('disabled')) {
- that.goTo(index);
- }
- e.preventDefault();
- e.stopPropagation();
- });
- if (this.options.keyboard) {
- $(document).on('keyup', $.proxy(this.keydown, this));
- }
- this.trigger('ready');
- }
- setup() {
- this.$buttons = $(this.options.templates.buttons.call(this));
- this.updateButtons();
- const buttonsAppendTo = this.options.buttonsAppendTo;
- let $to;
- if (buttonsAppendTo === 'this') {
- $to = this.$element;
- } else if ($.isFunction(buttonsAppendTo)) {
- $to = buttonsAppendTo.call(this);
- } else {
- $to = this.$element.find(buttonsAppendTo);
- }
- this.$buttons = this.$buttons.appendTo($to);
- }
- updateButtons() {
- const classes = this.options.classes.button;
- const $back = this.$buttons.find('[data-wizard="back"]');
- const $next = this.$buttons.find('[data-wizard="next"]');
- const $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);
- }
- }
- updateSteps() {
- $.each(this.steps, (i, step) => {
- if (i > this._current) {
- step.leave('error');
- step.leave('active');
- step.leave('done');
- if (!this.options.enableWhenVisited) {
- step.enter('disabled');
- }
- }
- });
- }
- 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();
- }
- trigger(eventType, ...params) {
- let data = [this].concat(params);
- // event
- this.$element.trigger(`${NAMESPACE$1}::${eventType}`, data);
- // callback
- eventType = eventType.replace(/\b\w+\b/g, (word) => {
- return word.substring(0, 1).toUpperCase() + word.substring(1);
- });
- let onFunction = `on${eventType}`;
- if (typeof this.options[onFunction] === 'function') {
- this.options[onFunction].apply(this, params);
- }
- }
- get(index) {
- if (typeof index === 'string' && index.substring(0, 1) === '#') {
- const id = index.substring(1);
- for (const 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;
- }
- goTo(index, callback) {
- if (index === this._current || this.transitioning === true) {
- return false;
- }
- const current = this.current();
- const 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');
- }
- }
- const that = this;
- const 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) {
- const $input = this.$pane.find(':input');
- if ($input.length > 0) {
- $input.eq(0).focus();
- } else {
- this.$pane.focus();
- }
- }
- if ($.isFunction(callback)) {
- callback.call(that);
- }
- that.trigger('afterChange', current, to);
- });
- };
- if (to.loader) {
- to.load(() => {
- process();
- });
- } else {
- process();
- }
- return true;
- }
- length() {
- return this.steps.length;
- }
- current() {
- return this.get(this._current);
- }
- currentIndex() {
- return this._current;
- }
- lastIndex() {
- return this.length() - 1;
- }
- next() {
- if (this._current < this.lastIndex()) {
- const from = this._current,
- to = this._current + 1;
- this.goTo(to, function () {
- this.trigger('next', this.get(from), this.get(to));
- });
- }
- return false;
- }
- back() {
- if (this._current > 0) {
- const from = this._current,
- to = this._current - 1;
- this.goTo(to, function () {
- this.trigger('back', this.get(from), this.get(to));
- });
- }
- return false;
- }
- first() {
- return this.goTo(0);
- }
- finish() {
- if (this._current === this.lastIndex()) {
- const current = this.current();
- if (current.validate()) {
- this.trigger('finish');
- current.leave('error');
- current.enter('done');
- } else {
- current.enter('error');
- }
- }
- }
- reset() {
- this._current = 0;
- $.each(this.steps, (i, step) => {
- step.reset();
- });
- this.trigger('reset');
- }
- static setDefaults(options) {
- $.extend(true, DEFAULTS, $.isPlainObject(options) && options);
- }
- }
- $(document).on('click', '[data-wizard]', function (e) {
- 'use strict';
- let href;
- const $this = $(this);
- const $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''));
- const wizard = $target.data(NAMESPACE$1);
- if (!wizard) {
- return;
- }
- const method = $this.data(NAMESPACE$1);
- if (/^(back|next|first|finish|reset)$/.test(method)) {
- wizard[method]();
- }
- e.preventDefault();
- });
- var info = {
- version:'0.4.4'
- };
- const NAMESPACE = 'wizard';
- const OtherWizard = $.fn.wizard;
- const jQueryWizard = function(options, ...args) {
- if (typeof options === 'string') {
- const method = options;
- if (/^_/.test(method)) {
- return false;
- } else if ((/^(get)/.test(method))) {
- const instance = this.first().data(NAMESPACE);
- if (instance && typeof instance[method] === 'function') {
- return instance[method](...args);
- }
- } else {
- return this.each(function() {
- const instance = $.data(this, NAMESPACE);
- if (instance && typeof instance[method] === 'function') {
- instance[method](...args);
- }
- });
- }
- }
- return this.each(function() {
- if (!$(this).data(NAMESPACE)) {
- $(this).data(NAMESPACE, new wizard(this, options));
- }
- });
- };
- $.fn.wizard = jQueryWizard;
- $.wizard = $.extend({
- setDefaults: wizard.setDefaults,
- noConflict: function() {
- $.fn.wizard = OtherWizard;
- return jQueryWizard;
- }
- }, info);
|