diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index e1de8e4..613c6af 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,6 +1,6 @@ # These are supported funding model platforms -github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] +github: techlab patreon: # Replace with a single Patreon username open_collective: techlab ko_fi: # Replace with a single Ko-fi username diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d98174..4f44800 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,20 @@ CHANGELOG ========= + +v6.0.5 +----- +- **Fixed:** unDoneOnBackNavigation not working https://github.com/techlab/jquery-smartwizard/issues/146 + +v6.0.4 +----- +- **Changed:** Code optimizations + +v6.0.3 +----- +- **Fixed:** Navigation not properly maintained when navigate fast +- **Changed:** Code optimizations + v6.0.1 ----- - **Added:** Support for jQuery Slim version diff --git a/README.md b/README.md index 4c0d2ac..569dfc5 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,36 @@ Installation ``` +### Common JS/Webpack +```js +var $ = require( "jquery" ); +require( "smartwizard/dist/css/smart_wizard_all.css"); +const smartWizard = require("smartwizard"); + +$(function() { + $('#smartwizard').smartWizard(); +}); +``` +### ES6/Babel +```js +import $ from "jquery"; +import "smartwizard/dist/css/smart_wizard_all.css"; +import smartWizard from 'smartwizard'; + +$(function() { + $('#smartwizard').smartWizard(); +}); +``` + +#### Note: you may have to install the required dependencies +```bash +npm i jquery +npm i smartwizard + +// If you are using Webpack, install +npm i webpack webpack-cli style-loader css-loader --save-dev +``` + ### Download #### [Download from GitHub](https://github.com/techlab/jquery-smartwizard/archive/master.zip) @@ -169,14 +199,10 @@ Include SmartWizard plugin JavaScript ``` Initialize the SmartWizard -```html - ``` That's it! diff --git a/dist/js/jquery.smartWizard.js b/dist/js/jquery.smartWizard.js index 8c227e7..df0e293 100644 --- a/dist/js/jquery.smartWizard.js +++ b/dist/js/jquery.smartWizard.js @@ -9,7 +9,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } /*! -* jQuery SmartWizard v6.0.1 +* jQuery SmartWizard v6.0.5 * The awesome step wizard plugin for jQuery * http://www.techlaboratory.net/jquery-smartwizard * @@ -51,7 +51,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" = selected: 0, // Initial selected step, 0 = first step theme: 'basic', - // theme for the wizard, related css need to include for other than default theme + // Theme for the wizard, related css need to include for other than default theme justified: true, // Nav menu justification. true/false autoAdjustHeight: true, @@ -282,12 +282,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" = value: function _setElements() { var _this2 = this; - // Set the main element - this.main.addClass(this.options.style.mainCss); // Set theme option - + // Set the main element classes including theme css this.main.removeClass(function (i, className) { - return (className.match(/(^|\s)sw-theme-\S+/g) || []).join(' '); - }).addClass(this.options.style.themePrefixCss + this.options.theme); // Set justify option + return (className.match(new RegExp('(^|\\s)' + _this2.options.style.themePrefixCss + '\\S+', 'g')) || []).join(' '); + }).addClass(this.options.style.mainCss + ' ' + this.options.style.themePrefixCss + this.options.theme); // Set justify option this.main.toggleClass(this.options.style.justifiedCss, this.options.justified); // Set the anchor default style @@ -442,20 +440,20 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" = _this4._transit(selPage, curPage, stepDirection, function () { - // Update the current index - _this4.current_index = idx; // Fix height with content + // Fix height with content + _this4._fixHeight(idx); // Trigger "showStep" event - _this4._fixHeight(idx); // Set the buttons based on the step + _this4._triggerEvent("showStep", [selStep, idx, stepDirection, _this4._getStepPosition(idx)]); + }); // Update the current index - _this4._setButtons(idx); // Set the progressbar based on the step + _this4.current_index = idx; // Set the buttons based on the step - _this4._setProgressbar(idx); // Trigger "showStep" event + _this4._setButtons(idx); // Set the progressbar based on the step - _this4._triggerEvent("showStep", [selStep, idx, stepDirection, _this4._getStepPosition(idx)]); - }); + _this4._setProgressbar(idx); }); } }, { @@ -560,6 +558,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" = value: function _transit(elmToShow, elmToHide, stepDirection, callback) { var transitFn = $.fn.smartWizard.transitions[this.options.transition.animation]; + this._stopAnimations(); + if ($.isFunction(transitFn)) { transitFn(elmToShow, elmToHide, stepDirection, this, function (res) { if (res === false) { @@ -575,6 +575,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" = callback(); } } + }, { + key: "_stopAnimations", + value: function _stopAnimations() { + if ($.isFunction(this.container.finish)) { + this.pages.finish(); + this.container.finish(); + } + } }, { key: "_fixHeight", value: function _fixHeight(idx) { @@ -596,19 +604,23 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" = key: "_setAnchor", value: function _setAnchor(idx) { // Current step anchor > Remove other classes and add done class - this.steps.eq(this.current_index).removeClass(this.options.style.anchorActiveCss); + if (this.current_index !== null && this.current_index >= 0) { + var removeCss = this.options.style.anchorActiveCss; + var addCss = ''; - if (this.options.anchor.enableDoneState !== false && this.current_index !== null && this.current_index >= 0) { - this.steps.eq(this.current_index).addClass(this.options.style.anchorDoneCss); + if (this.options.anchor.enableDoneState !== false) { + addCss += this.options.style.anchorDoneCss; - if (this.options.anchor.unDoneOnBackNavigation !== false && this._getStepDirection(idx) === 'backward') { - this.steps.eq(this.current_index).removeClass(this.options.style.anchorDoneCss); + if (this.options.anchor.unDoneOnBackNavigation !== false && this._getStepDirection(idx) === 'backward') { + removeCss += ' ' + this.options.style.anchorDoneCss; + } } + + this.steps.eq(this.current_index).addClass(addCss).removeClass(removeCss); } // Next step anchor > Remove other classes and add active class - this.steps.eq(idx).removeClass(this.options.style.anchorDoneCss); - this.steps.eq(idx).addClass(this.options.style.anchorActiveCss); + this.steps.eq(idx).removeClass(this.options.style.anchorDoneCss).addClass(this.options.style.anchorActiveCss); } }, { key: "_setButtons", diff --git a/dist/js/jquery.smartWizard.min.js b/dist/js/jquery.smartWizard.min.js index 90a8c38..30d5aa8 100644 --- a/dist/js/jquery.smartWizard.min.js +++ b/dist/js/jquery.smartWizard.min.js @@ -1,6 +1,6 @@ "use strict";function _classCallCheck(t,s){if(!(t instanceof s))throw new TypeError("Cannot call a class as a function")}function _defineProperties(t,s){for(var e=0;e").addClass("sw-toolbar-elm "+this.options.style.toolbarCss+" "+this.options.style.toolbarPrefixCss+t).attr("role","toolbar"),e=!1!==this.options.toolbar.showNextButton?l("").text(this.options.lang.next).addClass("btn "+this.options.style.btnNextCss+" "+this.options.style.btnCss).attr("type","button"):null,n=!1!==this.options.toolbar.showPreviousButton?l("").text(this.options.lang.previous).addClass("btn "+this.options.style.btnPrevCss+" "+this.options.style.btnCss).attr("type","button"):null;return s.append(n,e,this.options.toolbar.extraHtml)}},{key:"_navigate",value:function(t){this._showStep(this._getShowable(this.current_index,t))}},{key:"_showStep",value:function(n){var i=this;if(-1===n||null===n)return!1;if(n==this.current_index)return!1;if(!this.steps.eq(n))return!1;if(!this._isEnabled(this.steps.eq(n)))return!1;var o=this._getStepDirection(n);if(-1!==this.current_index&&!1===this._triggerEvent("leaveStep",[this._getStepAnchor(this.current_index),this.current_index,n,o]))return!1;this._loadContent(n,function(){var t=i._getStepAnchor(n);i._setURLHash(t.attr("href")),i._setAnchor(n);var s=i._getStepPage(i.current_index),e=i._getStepPage(n);i._transit(e,s,o,function(){i.current_index=n,i._fixHeight(n),i._setButtons(n),i._setProgressbar(n),i._triggerEvent("showStep",[t,n,o,i._getStepPosition(n)])})})}},{key:"_getShowable",value:function(e,n){var i=this,o=null;return("prev"==n?l(this.steps.slice(0,e).get().reverse()):this.steps.slice(e+1)).each(function(t,s){if(i._isEnabled(l(s)))return o="prev"==n?e-(t+1):t+e+1,!1}),o}},{key:"_isShowable",value:function(t){if(!this._isEnabled(t))return!1;var s=t.hasClass(this.options.style.anchorDoneCss);return(!1!==this.options.anchor.enableDoneStateNavigation||!s)&&!(!1===this.options.anchor.enableNavigationAlways&&!s)}},{key:"_isEnabled",value:function(t){return!t.hasClass(this.options.style.anchorDisabledCss)&&!t.hasClass(this.options.style.anchorHiddenCss)}},{key:"_getStepDirection",value:function(t){return this.current_index").addClass("sw-toolbar-elm "+this.options.style.toolbarCss+" "+this.options.style.toolbarPrefixCss+t).attr("role","toolbar"),e=!1!==this.options.toolbar.showNextButton?l("").text(this.options.lang.next).addClass("btn "+this.options.style.btnNextCss+" "+this.options.style.btnCss).attr("type","button"):null,n=!1!==this.options.toolbar.showPreviousButton?l("").text(this.options.lang.previous).addClass("btn "+this.options.style.btnPrevCss+" "+this.options.style.btnCss).attr("type","button"):null;return s.append(n,e,this.options.toolbar.extraHtml)}},{key:"_navigate",value:function(t){this._showStep(this._getShowable(this.current_index,t))}},{key:"_showStep",value:function(n){var i=this;if(-1===n||null===n)return!1;if(n==this.current_index)return!1;if(!this.steps.eq(n))return!1;if(!this._isEnabled(this.steps.eq(n)))return!1;var o=this._getStepDirection(n);if(-1!==this.current_index&&!1===this._triggerEvent("leaveStep",[this._getStepAnchor(this.current_index),this.current_index,n,o]))return!1;this._loadContent(n,function(){var t=i._getStepAnchor(n);i._setURLHash(t.attr("href")),i._setAnchor(n);var s=i._getStepPage(i.current_index),e=i._getStepPage(n);i._transit(e,s,o,function(){i._fixHeight(n),i._triggerEvent("showStep",[t,n,o,i._getStepPosition(n)])}),i.current_index=n,i._setButtons(n),i._setProgressbar(n)})}},{key:"_getShowable",value:function(e,n){var i=this,o=null;return("prev"==n?l(this.steps.slice(0,e).get().reverse()):this.steps.slice(e+1)).each(function(t,s){if(i._isEnabled(l(s)))return o="prev"==n?e-(t+1):t+e+1,!1}),o}},{key:"_isShowable",value:function(t){if(!this._isEnabled(t))return!1;var s=t.hasClass(this.options.style.anchorDoneCss);return(!1!==this.options.anchor.enableDoneStateNavigation||!s)&&!(!1===this.options.anchor.enableNavigationAlways&&!s)}},{key:"_isEnabled",value:function(t){return!t.hasClass(this.options.style.anchorDisabledCss)&&!t.hasClass(this.options.style.anchorHiddenCss)}},{key:"_getStepDirection",value:function(t){return this.current_index { + return (className.match(new RegExp('(^|\\s)' + this.options.style.themePrefixCss + '\\S+','g')) || []).join(' '); + }).addClass(this.options.style.mainCss + ' ' + this.options.style.themePrefixCss + this.options.theme); + // Set justify option this.main.toggleClass(this.options.style.justifiedCss, this.options.justified); @@ -377,17 +374,18 @@ const selPage = this._getStepPage(idx); // transit the step this._transit(selPage, curPage, stepDirection, () => { - // Update the current index - this.current_index = idx; // Fix height with content this._fixHeight(idx); - // Set the buttons based on the step - this._setButtons(idx); - // Set the progressbar based on the step - this._setProgressbar(idx); // Trigger "showStep" event this._triggerEvent("showStep", [selStep, idx, stepDirection, this._getStepPosition(idx)]); }); + + // Update the current index + this.current_index = idx; + // Set the buttons based on the step + this._setButtons(idx); + // Set the progressbar based on the step + this._setProgressbar(idx); }); } @@ -468,6 +466,7 @@ _transit(elmToShow, elmToHide, stepDirection, callback) { const transitFn = $.fn.smartWizard.transitions[this.options.transition.animation]; + this._stopAnimations(); if ($.isFunction(transitFn)) { transitFn(elmToShow, elmToHide, stepDirection, this, (res) => { if (res === false) { @@ -483,6 +482,13 @@ } } + _stopAnimations() { + if ($.isFunction(this.container.finish)) { + this.pages.finish(); + this.container.finish(); + } + } + _fixHeight(idx) { if (this.options.autoAdjustHeight === false) return; // Auto adjust height of the container @@ -496,17 +502,22 @@ _setAnchor(idx) { // Current step anchor > Remove other classes and add done class - this.steps.eq(this.current_index).removeClass(this.options.style.anchorActiveCss); - if (this.options.anchor.enableDoneState !== false && this.current_index !== null && this.current_index >= 0) { - this.steps.eq(this.current_index).addClass(this.options.style.anchorDoneCss); - if (this.options.anchor.unDoneOnBackNavigation !== false && this._getStepDirection(idx) === 'backward') { - this.steps.eq(this.current_index).removeClass(this.options.style.anchorDoneCss); + if (this.current_index !== null && this.current_index >= 0) { + let removeCss = this.options.style.anchorActiveCss; + let addCss = ''; + + if (this.options.anchor.enableDoneState !== false) { + addCss += this.options.style.anchorDoneCss; + if (this.options.anchor.unDoneOnBackNavigation !== false && this._getStepDirection(idx) === 'backward') { + removeCss += ' ' + this.options.style.anchorDoneCss; + } } + + this.steps.eq(this.current_index).addClass(addCss).removeClass(removeCss); } // Next step anchor > Remove other classes and add active class - this.steps.eq(idx).removeClass(this.options.style.anchorDoneCss); - this.steps.eq(idx).addClass(this.options.style.anchorActiveCss); + this.steps.eq(idx).removeClass(this.options.style.anchorDoneCss).addClass(this.options.style.anchorActiveCss); } _setButtons(idx) { @@ -811,7 +822,7 @@ elmToShow.css(initCss2); callback(); }); - }, + }, css: (elmToShow, elmToHide, stepDirection, wizardObj, callback) => { if (wizardObj.options.transition.fwdHideCss.length == 0 || wizardObj.options.transition.bckHideCss.length == 0 ) { callback(false); return; }