jquery-wizard.es.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889
  1. /**
  2. * jQuery wizard v0.4.4
  3. * https://github.com/amazingSurge/jquery-wizard
  4. *
  5. * Copyright (c) amazingSurge
  6. * Released under the LGPL-3.0 license
  7. */
  8. import $ from 'jquery';
  9. /*eslint no-unused-vars: "off"*/
  10. /*eslint no-empty-function: "off"*/
  11. var DEFAULTS = {
  12. step: '.wizard-steps > li',
  13. getPane: function(index, step) {
  14. return this.$element.find('.wizard-content').children().eq(index);
  15. },
  16. buttonsAppendTo: 'this',
  17. templates: {
  18. buttons: function() {
  19. const options = this.options;
  20. 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>`;
  21. }
  22. },
  23. classes: {
  24. step: {
  25. done: 'done',
  26. error: 'error',
  27. active: 'current',
  28. disabled: 'disabled',
  29. activing: 'activing',
  30. loading: 'loading'
  31. },
  32. pane: {
  33. active: 'active',
  34. activing: 'activing'
  35. },
  36. button: {
  37. hide: 'hide',
  38. disabled: 'disabled'
  39. }
  40. },
  41. autoFocus: true,
  42. keyboard: true,
  43. enableWhenVisited: false,
  44. buttonLabels: {
  45. next: 'Next',
  46. back: 'Back',
  47. finish: 'Finish'
  48. },
  49. loading: {
  50. show: function(step) { },
  51. hide: function(step) { },
  52. fail: function(step) { }
  53. },
  54. cacheContent: false,
  55. validator: function(step) {
  56. return true;
  57. },
  58. onInit: null,
  59. onNext: null,
  60. onBack: null,
  61. onReset: null,
  62. onBeforeShow: null,
  63. onAfterShow: null,
  64. onBeforeHide: null,
  65. onAfterHide: null,
  66. onBeforeLoad: null,
  67. onAfterLoad: null,
  68. onBeforeChange: null,
  69. onAfterChange: null,
  70. onStateChange: null,
  71. onFinish: null
  72. };
  73. /**
  74. * Css features detect
  75. **/
  76. let support = {};
  77. ((support) => {
  78. /**
  79. * Borrowed from Owl carousel
  80. **/
  81. const events = {
  82. transition: {
  83. end: {
  84. WebkitTransition: 'webkitTransitionEnd',
  85. MozTransition: 'transitionend',
  86. OTransition: 'oTransitionEnd',
  87. transition: 'transitionend'
  88. }
  89. },
  90. animation: {
  91. end: {
  92. WebkitAnimation: 'webkitAnimationEnd',
  93. MozAnimation: 'animationend',
  94. OAnimation: 'oAnimationEnd',
  95. animation: 'animationend'
  96. }
  97. }
  98. },
  99. prefixes = ['webkit', 'Moz', 'O', 'ms'],
  100. style = $('<support>').get(0).style,
  101. tests = {
  102. csstransitions() {
  103. return Boolean(test('transition'));
  104. },
  105. cssanimations() {
  106. return Boolean(test('animation'));
  107. }
  108. };
  109. const test = (property, prefixed) => {
  110. let result = false,
  111. upper = property.charAt(0).toUpperCase() + property.slice(1);
  112. if (style[property] !== undefined) {
  113. result = property;
  114. }
  115. if (!result) {
  116. $.each(prefixes, (i, prefix) => {
  117. if (style[prefix + upper] !== undefined) {
  118. result = `-${prefix.toLowerCase()}-${upper}`;
  119. return false;
  120. }
  121. return true;
  122. });
  123. }
  124. if (prefixed) {
  125. return result;
  126. }
  127. if (result) {
  128. return true;
  129. }
  130. return false;
  131. };
  132. const prefixed = (property) => {
  133. return test(property, true);
  134. };
  135. if (tests.csstransitions()) {
  136. /*eslint no-new-wrappers: "off"*/
  137. support.transition = new String(prefixed('transition'));
  138. support.transition.end = events.transition.end[support.transition];
  139. }
  140. if (tests.cssanimations()) {
  141. /*eslint no-new-wrappers: "off"*/
  142. support.animation = new String(prefixed('animation'));
  143. support.animation.end = events.animation.end[support.animation];
  144. }
  145. })(support);
  146. function emulateTransitionEnd ($el, duration) {
  147. 'use strict';
  148. let called = false;
  149. $el.one(support.transition.end, () => {
  150. called = true;
  151. });
  152. const callback = () => {
  153. if (!called) {
  154. $el.trigger(support.transition.end);
  155. }
  156. };
  157. setTimeout(callback, duration);
  158. }
  159. class Step {
  160. constructor(element, wizard, index) {
  161. this.TRANSITION_DURATION = 200;
  162. this.initialize(element, wizard, index);
  163. }
  164. initialize(element, wizard, index) {
  165. this.$element = $(element);
  166. this.wizard = wizard;
  167. this.events = {};
  168. this.loader = null;
  169. this.loaded = false;
  170. this.validator = this.wizard.options.validator;
  171. this.states = {
  172. done: false,
  173. error: false,
  174. active: false,
  175. disabled: false,
  176. activing: false
  177. };
  178. this.index = index;
  179. this.$element.data('wizard-index', index);
  180. this.$pane = this.getPaneFromTarget();
  181. if (!this.$pane) {
  182. this.$pane = this.wizard.options.getPane.call(this.wizard, index, element);
  183. }
  184. this.setValidatorFromData();
  185. this.setLoaderFromData();
  186. }
  187. getPaneFromTarget() {
  188. let selector = this.$element.data('target');
  189. if (!selector) {
  190. selector = this.$element.attr('href');
  191. selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '');
  192. }
  193. if (selector) {
  194. return $(selector);
  195. }
  196. return null;
  197. }
  198. setup() {
  199. const current = this.wizard.currentIndex();
  200. if (this.index === current) {
  201. this.enter('active');
  202. if (this.loader) {
  203. this.load();
  204. }
  205. } else if (this.index > current) {
  206. this.enter('disabled');
  207. }
  208. this.$element.attr('aria-expanded', this.is('active'));
  209. this.$pane.attr('aria-expanded', this.is('active'));
  210. const classes = this.wizard.options.classes;
  211. if (this.is('active')) {
  212. this.$pane.addClass(classes.pane.active);
  213. } else {
  214. this.$pane.removeClass(classes.pane.active);
  215. }
  216. }
  217. show(callback) {
  218. if (this.is('activing') || this.is('active')) {
  219. return;
  220. }
  221. this.trigger('beforeShow');
  222. this.enter('activing');
  223. const classes = this.wizard.options.classes;
  224. this.$element
  225. .attr('aria-expanded', true);
  226. this.$pane
  227. .addClass(classes.pane.activing)
  228. .addClass(classes.pane.active)
  229. .attr('aria-expanded', true);
  230. const complete = function () {
  231. this.$pane.removeClass(classes.pane.activing);
  232. this.leave('activing');
  233. this.enter('active');
  234. this.trigger('afterShow');
  235. if ($.isFunction(callback)) {
  236. callback.call(this);
  237. }
  238. };
  239. if (!support.transition) {
  240. complete.call(this);
  241. return;
  242. }
  243. this.$pane.one(support.transition.end, $.proxy(complete, this));
  244. emulateTransitionEnd(this.$pane, this.TRANSITION_DURATION);
  245. }
  246. hide(callback) {
  247. if (this.is('activing') || !this.is('active')) {
  248. return;
  249. }
  250. this.trigger('beforeHide');
  251. this.enter('activing');
  252. const classes = this.wizard.options.classes;
  253. this.$element
  254. .attr('aria-expanded', false);
  255. this.$pane
  256. .addClass(classes.pane.activing)
  257. .removeClass(classes.pane.active)
  258. .attr('aria-expanded', false);
  259. const complete = function () {
  260. this.$pane
  261. .removeClass(classes.pane.activing);
  262. this.leave('activing');
  263. this.leave('active');
  264. this.trigger('afterHide');
  265. if ($.isFunction(callback)) {
  266. callback.call(this);
  267. }
  268. };
  269. if (!support.transition) {
  270. complete.call(this);
  271. return;
  272. }
  273. this.$pane.one(support.transition.end, $.proxy(complete, this));
  274. emulateTransitionEnd(this.$pane, this.TRANSITION_DURATION);
  275. }
  276. empty() {
  277. this.$pane.empty();
  278. }
  279. load(callback) {
  280. const that = this;
  281. let loader = this.loader;
  282. if ($.isFunction(loader)) {
  283. loader = loader.call(this.wizard, this);
  284. }
  285. if (this.wizard.options.cacheContent && this.loaded) {
  286. if ($.isFunction(callback)) {
  287. callback.call(this);
  288. }
  289. return;
  290. }
  291. this.trigger('beforeLoad');
  292. this.enter('loading');
  293. function setContent(content) {
  294. that.$pane.html(content);
  295. that.leave('loading');
  296. that.loaded = true;
  297. that.trigger('afterLoad');
  298. if ($.isFunction(callback)) {
  299. callback.call(that);
  300. }
  301. }
  302. if (typeof loader === 'string') {
  303. setContent(loader);
  304. } else if (typeof loader === 'object' && loader.hasOwnProperty('url')) {
  305. that.wizard.options.loading.show.call(that.wizard, that);
  306. $.ajax(loader.url, loader.settings || {}).done(data => {
  307. setContent(data);
  308. that.wizard.options.loading.hide.call(that.wizard, that);
  309. }).fail(() => {
  310. that.wizard.options.loading.fail.call(that.wizard, that);
  311. });
  312. } else {
  313. setContent('');
  314. }
  315. }
  316. trigger(event, ...args) {
  317. if ($.isArray(this.events[event])) {
  318. for (const i in this.events[event]) {
  319. if ({}.hasOwnProperty.call(this.events[event], i)) {
  320. this.events[event][i](...args);
  321. }
  322. }
  323. }
  324. this.wizard.trigger(...[event, this].concat(args));
  325. }
  326. enter(state) {
  327. this.states[state] = true;
  328. const classes = this.wizard.options.classes;
  329. this.$element.addClass(classes.step[state]);
  330. this.trigger('stateChange', true, state);
  331. }
  332. leave(state) {
  333. if (this.states[state]) {
  334. this.states[state] = false;
  335. const classes = this.wizard.options.classes;
  336. this.$element.removeClass(classes.step[state]);
  337. this.trigger('stateChange', false, state);
  338. }
  339. }
  340. setValidatorFromData() {
  341. const validator = this.$pane.data('validator');
  342. if (validator && $.isFunction(window[validator])) {
  343. this.validator = window[validator];
  344. }
  345. }
  346. setLoaderFromData() {
  347. const loader = this.$pane.data('loader');
  348. if (loader) {
  349. if ($.isFunction(window[loader])) {
  350. this.loader = window[loader];
  351. }
  352. } else {
  353. const url = this.$pane.data('loader-url');
  354. if (url) {
  355. this.loader = {
  356. url,
  357. settings: this.$pane.data('settings') || {}
  358. };
  359. }
  360. }
  361. }
  362. /*
  363. * Public methods below
  364. */
  365. active() {
  366. return this.wizard.goTo(this.index);
  367. }
  368. on(event, handler) {
  369. if ($.isFunction(handler)) {
  370. if ($.isArray(this.events[event])) {
  371. this.events[event].push(handler);
  372. } else {
  373. this.events[event] = [handler];
  374. }
  375. }
  376. return this;
  377. }
  378. off(event, handler) {
  379. if ($.isFunction(handler) && $.isArray(this.events[event])) {
  380. $.each(this.events[event], function (i, f) {
  381. /*eslint consistent-return: "off"*/
  382. if (f === handler) {
  383. delete this.events[event][i];
  384. return false;
  385. }
  386. });
  387. }
  388. return this;
  389. }
  390. is(state) {
  391. return this.states[state] && this.states[state] === true;
  392. }
  393. reset() {
  394. for (const state in this.states) {
  395. if ({}.hasOwnProperty.call(this.states, state)) {
  396. this.leave(state);
  397. }
  398. }
  399. this.setup();
  400. return this;
  401. }
  402. setLoader(loader) {
  403. this.loader = loader;
  404. if (this.is('active')) {
  405. this.load();
  406. }
  407. return this;
  408. }
  409. setValidator(validator) {
  410. if ($.isFunction(validator)) {
  411. this.validator = validator;
  412. }
  413. return this;
  414. }
  415. validate() {
  416. return this.validator.call(this.$pane.get(0), this);
  417. }
  418. }
  419. let counter = 0;
  420. const NAMESPACE$1 = 'wizard';
  421. class wizard {
  422. constructor(element, options = {}) {
  423. this.$element = $(element);
  424. this.options = $.extend(true, {}, DEFAULTS, options);
  425. this.$steps = this.$element.find(this.options.step);
  426. this.id = this.$element.attr('id');
  427. if (!this.id) {
  428. this.id = `wizard-${++counter}`;
  429. this.$element.attr('id', this.id);
  430. }
  431. this.trigger('init');
  432. this.initialize();
  433. }
  434. initialize() {
  435. this.steps = [];
  436. const that = this;
  437. this.$steps.each(function (index) {
  438. that.steps.push(new Step(this, that, index));
  439. });
  440. this._current = 0;
  441. this.transitioning = null;
  442. $.each(this.steps, (i, step) => {
  443. step.setup();
  444. });
  445. this.setup();
  446. this.$element.on('click', this.options.step, function (e) {
  447. const index = $(this).data('wizard-index');
  448. if (!that.get(index).is('disabled')) {
  449. that.goTo(index);
  450. }
  451. e.preventDefault();
  452. e.stopPropagation();
  453. });
  454. if (this.options.keyboard) {
  455. $(document).on('keyup', $.proxy(this.keydown, this));
  456. }
  457. this.trigger('ready');
  458. }
  459. setup() {
  460. this.$buttons = $(this.options.templates.buttons.call(this));
  461. this.updateButtons();
  462. const buttonsAppendTo = this.options.buttonsAppendTo;
  463. let $to;
  464. if (buttonsAppendTo === 'this') {
  465. $to = this.$element;
  466. } else if ($.isFunction(buttonsAppendTo)) {
  467. $to = buttonsAppendTo.call(this);
  468. } else {
  469. $to = this.$element.find(buttonsAppendTo);
  470. }
  471. this.$buttons = this.$buttons.appendTo($to);
  472. }
  473. updateButtons() {
  474. const classes = this.options.classes.button;
  475. const $back = this.$buttons.find('[data-wizard="back"]');
  476. const $next = this.$buttons.find('[data-wizard="next"]');
  477. const $finish = this.$buttons.find('[data-wizard="finish"]');
  478. if (this._current === 0) {
  479. $back.addClass(classes.disabled);
  480. } else {
  481. $back.removeClass(classes.disabled);
  482. }
  483. if (this._current === this.lastIndex()) {
  484. $next.addClass(classes.hide);
  485. $finish.removeClass(classes.hide);
  486. } else {
  487. $next.removeClass(classes.hide);
  488. $finish.addClass(classes.hide);
  489. }
  490. }
  491. updateSteps() {
  492. $.each(this.steps, (i, step) => {
  493. if (i > this._current) {
  494. step.leave('error');
  495. step.leave('active');
  496. step.leave('done');
  497. if (!this.options.enableWhenVisited) {
  498. step.enter('disabled');
  499. }
  500. }
  501. });
  502. }
  503. keydown(e) {
  504. if (/input|textarea/i.test(e.target.tagName)) {
  505. return;
  506. }
  507. switch (e.which) {
  508. case 37:
  509. this.back();
  510. break;
  511. case 39:
  512. this.next();
  513. break;
  514. default:
  515. return;
  516. }
  517. e.preventDefault();
  518. }
  519. trigger(eventType, ...params) {
  520. let data = [this].concat(params);
  521. // event
  522. this.$element.trigger(`${NAMESPACE$1}::${eventType}`, data);
  523. // callback
  524. eventType = eventType.replace(/\b\w+\b/g, (word) => {
  525. return word.substring(0, 1).toUpperCase() + word.substring(1);
  526. });
  527. let onFunction = `on${eventType}`;
  528. if (typeof this.options[onFunction] === 'function') {
  529. this.options[onFunction].apply(this, params);
  530. }
  531. }
  532. get(index) {
  533. if (typeof index === 'string' && index.substring(0, 1) === '#') {
  534. const id = index.substring(1);
  535. for (const i in this.steps) {
  536. if (this.steps[i].$pane.attr('id') === id) {
  537. return this.steps[i];
  538. }
  539. }
  540. }
  541. if (index < this.length() && this.steps[index]) {
  542. return this.steps[index];
  543. }
  544. return null;
  545. }
  546. goTo(index, callback) {
  547. if (index === this._current || this.transitioning === true) {
  548. return false;
  549. }
  550. const current = this.current();
  551. const to = this.get(index);
  552. if (index > this._current) {
  553. if (!current.validate()) {
  554. current.leave('done');
  555. current.enter('error');
  556. return -1;
  557. }
  558. current.leave('error');
  559. if (index > this._current) {
  560. current.enter('done');
  561. }
  562. }
  563. const that = this;
  564. const process = () => {
  565. that.trigger('beforeChange', current, to);
  566. that.transitioning = true;
  567. current.hide();
  568. to.show(function () {
  569. that._current = index;
  570. that.transitioning = false;
  571. this.leave('disabled');
  572. that.updateButtons();
  573. that.updateSteps();
  574. if (that.options.autoFocus) {
  575. const $input = this.$pane.find(':input');
  576. if ($input.length > 0) {
  577. $input.eq(0).focus();
  578. } else {
  579. this.$pane.focus();
  580. }
  581. }
  582. if ($.isFunction(callback)) {
  583. callback.call(that);
  584. }
  585. that.trigger('afterChange', current, to);
  586. });
  587. };
  588. if (to.loader) {
  589. to.load(() => {
  590. process();
  591. });
  592. } else {
  593. process();
  594. }
  595. return true;
  596. }
  597. length() {
  598. return this.steps.length;
  599. }
  600. current() {
  601. return this.get(this._current);
  602. }
  603. currentIndex() {
  604. return this._current;
  605. }
  606. lastIndex() {
  607. return this.length() - 1;
  608. }
  609. next() {
  610. if (this._current < this.lastIndex()) {
  611. const from = this._current,
  612. to = this._current + 1;
  613. this.goTo(to, function () {
  614. this.trigger('next', this.get(from), this.get(to));
  615. });
  616. }
  617. return false;
  618. }
  619. back() {
  620. if (this._current > 0) {
  621. const from = this._current,
  622. to = this._current - 1;
  623. this.goTo(to, function () {
  624. this.trigger('back', this.get(from), this.get(to));
  625. });
  626. }
  627. return false;
  628. }
  629. first() {
  630. return this.goTo(0);
  631. }
  632. finish() {
  633. if (this._current === this.lastIndex()) {
  634. const current = this.current();
  635. if (current.validate()) {
  636. this.trigger('finish');
  637. current.leave('error');
  638. current.enter('done');
  639. } else {
  640. current.enter('error');
  641. }
  642. }
  643. }
  644. reset() {
  645. this._current = 0;
  646. $.each(this.steps, (i, step) => {
  647. step.reset();
  648. });
  649. this.trigger('reset');
  650. }
  651. static setDefaults(options) {
  652. $.extend(true, DEFAULTS, $.isPlainObject(options) && options);
  653. }
  654. }
  655. $(document).on('click', '[data-wizard]', function (e) {
  656. 'use strict';
  657. let href;
  658. const $this = $(this);
  659. const $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''));
  660. const wizard = $target.data(NAMESPACE$1);
  661. if (!wizard) {
  662. return;
  663. }
  664. const method = $this.data(NAMESPACE$1);
  665. if (/^(back|next|first|finish|reset)$/.test(method)) {
  666. wizard[method]();
  667. }
  668. e.preventDefault();
  669. });
  670. var info = {
  671. version:'0.4.4'
  672. };
  673. const NAMESPACE = 'wizard';
  674. const OtherWizard = $.fn.wizard;
  675. const jQueryWizard = function(options, ...args) {
  676. if (typeof options === 'string') {
  677. const method = options;
  678. if (/^_/.test(method)) {
  679. return false;
  680. } else if ((/^(get)/.test(method))) {
  681. const instance = this.first().data(NAMESPACE);
  682. if (instance && typeof instance[method] === 'function') {
  683. return instance[method](...args);
  684. }
  685. } else {
  686. return this.each(function() {
  687. const instance = $.data(this, NAMESPACE);
  688. if (instance && typeof instance[method] === 'function') {
  689. instance[method](...args);
  690. }
  691. });
  692. }
  693. }
  694. return this.each(function() {
  695. if (!$(this).data(NAMESPACE)) {
  696. $(this).data(NAMESPACE, new wizard(this, options));
  697. }
  698. });
  699. };
  700. $.fn.wizard = jQueryWizard;
  701. $.wizard = $.extend({
  702. setDefaults: wizard.setDefaults,
  703. noConflict: function() {
  704. $.fn.wizard = OtherWizard;
  705. return jQueryWizard;
  706. }
  707. }, info);