Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
materialize-stepper
Advanced tools
materialize-stepper - npm Package Compare versions
Comparing version 3.0.0-beta.1.1.0 to 3.0.0-beta.1.1.1
| Date format: d/m/y | ||
| ### 3.0.0-beta.1.1.1 (28/11/18) | ||
| * Added textarea when inputs need to be queried (fixes some issues); | ||
| * Fix the listeners unbinding of steps that are being removed; | ||
| * Readded autoFocus option. | ||
| ### 3.0.0-beta.1.1 (26/11/18) | ||
@@ -4,0 +9,0 @@ * Validation function is now called before the feedback function; |
| /** | ||
| * Materialize Stepper - A little plugin that implements a stepper to Materializecss framework. | ||
| * @version v3.0.0-beta.1.1 | ||
| * @version v3.0.0-beta.1.1.1 | ||
| * @author Igor Marcossi (Kinark) <igormarcossi@gmail.com>. | ||
@@ -30,3 +30,3 @@ * @link https://github.com/Kinark/Materialize-stepper | ||
| * @param {boolean} [options.linearStepsNavigation=true] - Allow navigation by clicking on the next and previous steps on linear steppers. | ||
| * @param {boolean} [options.autoFocusInput=true] - Auto focus on first input of each step. | ||
| * @param {boolean} [options.autoFocusInput=false] - Auto focus on first input of each step. | ||
| * @param {boolean} [options.showFeedbackPreloader=true] - Set if a loading screen will appear while feedbacks functions are running. | ||
@@ -55,3 +55,3 @@ * @param {boolean} [options.autoFormCreation=true] - Auto generation of a form around the stepper. | ||
| _openAction(getSteps().steps[options.firstActive]); // Gathers the steps and send them to the methodsBinder | ||
| _openAction(getSteps().steps[options.firstActive], undefined, undefined, true); // Gathers the steps and send them to the methodsBinder | ||
@@ -81,3 +81,3 @@ | ||
| var stepsTitle = step.getElementsByClassName(classes.STEPTITLE); | ||
| var inputs = step.querySelectorAll('input, select, button'); | ||
| var inputs = step.querySelectorAll('input, select, textarea, button'); | ||
| var submitButtons = step.querySelectorAll('button[type="submit"]'); | ||
@@ -114,2 +114,3 @@ bindOrUnbind(nextBtns, 'click', _nextStepProxy, false); | ||
| var closeActiveStep = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true; | ||
| var skipAutoFocus = arguments.length > 3 ? arguments[3] : undefined; | ||
| var _slideDown = _this._slideDown, | ||
@@ -133,11 +134,14 @@ classes = _this.classes, | ||
| _slideDown(stepContent, classes.ACTIVESTEP, step, cb); // Beginning of disabled autoFocusInput function due to issues with scroll | ||
| // _slideDown(stepContent, classes.ACTIVESTEP, step, () => { | ||
| // // Gets the inputs from the nextStep to focus on the first one (temporarily disabled) | ||
| // const nextStepInputs = stepContent.querySelector('input, select'); | ||
| // // Focus on the first input of the next step (temporarily disabled) | ||
| // if (options.autoFocusInput && nextStepInputs) nextStepInputs.focus(); | ||
| // if(cb && typeof cb === 'function') cb(); | ||
| // }); | ||
| // Enf of disabled autoFocusInput function due to issues with scroll | ||
| if (!skipAutoFocus) { | ||
| _slideDown(stepContent, classes.ACTIVESTEP, step, function () { | ||
| // Gets the inputs from the nextStep to focus on the first one (temporarily disabled) | ||
| var nextStepInputs = stepContent.querySelector('input, select, textarea'); // Focus on the first input of the next step (temporarily disabled) | ||
| if (options.autoFocusInput && nextStepInputs) nextStepInputs.focus(); | ||
| if (cb && typeof cb === 'function') cb(); | ||
| }); | ||
| } // Enf of disabled autoFocusInput function due to issues with scroll | ||
| } else { | ||
@@ -321,3 +325,3 @@ // The stepper is running in horizontal mode | ||
| var inputs = getSteps().active.step.querySelectorAll('input, select'); // Defines a function to be binded to any change in any input | ||
| var inputs = getSteps().active.step.querySelectorAll('input, select, textarea'); // Defines a function to be binded to any change in any input | ||
@@ -449,3 +453,3 @@ var removeWrongOnInput = function removeWrongOnInput() { | ||
| // Unbinds the listeners previously binded to the step | ||
| _methodsBindingManager(element); // Slides up and removes afterwards | ||
| _methodsBindingManager(element, true); // Slides up and removes afterwards | ||
@@ -649,3 +653,3 @@ | ||
| linearStepsNavigation: _options.linearStepsNavigation || true, | ||
| // autoFocusInput: options.autoFocusInput || true, | ||
| autoFocusInput: _options.autoFocusInput || true, | ||
| showFeedbackPreloader: _options.showFeedbackPreloader || true, | ||
@@ -652,0 +656,0 @@ autoFormCreation: _options.autoFormCreation || true, |
| /** | ||
| * Materialize Stepper - A little plugin that implements a stepper to Materializecss framework. | ||
| * @version v3.0.0-beta.1.1 | ||
| * @version v3.0.0-beta.1.1.1 | ||
| * @author Igor Marcossi (Kinark) <igormarcossi@gmail.com>. | ||
@@ -10,2 +10,2 @@ * @link https://github.com/Kinark/Materialize-stepper | ||
| "use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function _createClass(e,t,n){return t&&_defineProperties(e.prototype,t),n&&_defineProperties(e,n),e}function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var MStepper=function(){function E(e){var P=this,t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,E),_defineProperty(this,"_init",function(){var e=P._formWrapperManager,t=P.getSteps,n=P.options,i=P.stepper,r=P.classes,s=P._methodsBindingManager,o=P._openAction;P.form=e(),o(t().steps[n.firstActive]),s(i.querySelectorAll(".".concat(r.STEP)))}),_defineProperty(this,"_methodsBindingManager",function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],o=P.classes,a=P._formSubmitHandler,l=P._nextStepProxy,c=P._prevStepProxy,p=P._stepTitleClickHandler,d=P.form,v=P.options,n=E.nodesIterator,f=E.tabbingDisabler,u=t?E.removeMultipleEventListeners:E.addMultipleEventListeners,i=function(e){var t=e.getElementsByClassName(o.NEXTSTEPBTN),n=e.getElementsByClassName(o.PREVSTEPBTN),i=e.getElementsByClassName(o.STEPTITLE),r=e.querySelectorAll("input, select, button"),s=e.querySelectorAll('button[type="submit"]');return u(t,"click",l,!1),u(n,"click",c,!1),u(i,"click",p),r.length&&u(r[r.length-1],"keydown",f),s&&d&&v.validationFunction&&u(s,"keydown",a),e};e instanceof Element?i(e):n(e,function(e){return i(e)})}),_defineProperty(this,"_formSubmitHandler",function(e){P._validationFunctionCaller()||e.preventDefault()}),_defineProperty(this,"resetStepper",function(){P.form&&(P.form.reset(),P.openStep(P.options.firstActive))}),_defineProperty(this,"_openAction",function(e,t){var n=!(2<arguments.length&&void 0!==arguments[2])||arguments[2],i=P._slideDown,r=P.classes,s=P.getSteps,o=P._closeAction,a=P.stepper,l=(P.options,s().active.step);if(l&&l.isSameNode(e))return e;var c=e.getElementsByClassName(r.STEPCONTENT)[0];return e.classList.remove(r.DONESTEP),window.innerWidth<993||!a.classList.contains(r.HORIZONTALSTEPPER)?i(c,r.ACTIVESTEP,e,t):e.classList.add("active"),l&&n&&o(l),e}),_defineProperty(this,"_closeAction",function(e,n){var t=P._slideUp,i=P.classes,r=P.stepper,s=P._smartListenerUnbind,o=P._smartListenerBind,a=e.getElementsByClassName(i.STEPCONTENT)[0];if(window.innerWidth<993||!r.classList.contains(i.HORIZONTALSTEPPER))t(a,i.ACTIVESTEP,e,n);else{if(n){o(a,"transitionend",function e(t){"left"===t.propertyName&&(s(a,"transitionend",e),n())})}e.classList.remove("active")}return e}),_defineProperty(this,"_nextStepProxy",function(e){return P.nextStep(void 0,void 0,e)}),_defineProperty(this,"_prevStepProxy",function(e){return P.prevStep(void 0,e)}),_defineProperty(this,"_stepTitleClickHandler",function(e){var t=P.getSteps,n=P.classes,i=P.nextStep,r=P.prevStep,s=P.stepper,o=P._openAction,a=t(),l=a.steps,c=a.active,p=e.target.closest(".".concat(n.STEP));if(s.classList.contains(n.LINEAR)){var d=Array.prototype.indexOf.call(l,p);d==c.index+1?i():d==c.index-1&&r()}else o(p)}),_defineProperty(this,"nextStep",function(e,t,n){n&&n.preventDefault&&n.preventDefault();var i=P.options,r=P.getSteps,s=P.activateFeedback,o=P.form,a=P.wrongStep,l=P.classes,c=P._openAction,p=P.stepper,d=P.events,v=P.destroyFeedback,f=P._validationFunctionCaller,u=i.showFeedbackPreloader,E=i.validationFunction,h=r().active,y=r().steps[h.index+1],m=n&&n.target?n.target.dataset.feedback:null;return E&&!f()?a():m&&!t?(u&&!h.step.dataset.nopreloader&&s(),void window[m](v,o,h.step.querySelector(".".concat(l.STEPCONTENT)))):(h.step.classList.add(l.DONESTEP),c(y,e),p.dispatchEvent(d.STEPCHANGE),void p.dispatchEvent(d.NEXTSTEP))}),_defineProperty(this,"prevStep",function(e,t){t&&t.preventDefault&&t.preventDefault();var n=P.getSteps,i=P._openAction,r=P.stepper,s=P.events,o=P.destroyFeedback,a=n().active,l=n().steps[a.index+-1];o(),i(l,e),r.dispatchEvent(s.STEPCHANGE),r.dispatchEvent(s.PREVSTEP)}),_defineProperty(this,"openStep",function(e,t){var n=P.getSteps,i=P._openAction,r=P.stepper,s=P.events,o=P.destroyFeedback,a=n().steps[e];o(),i(a,t),r.dispatchEvent(s.STEPCHANGE)}),_defineProperty(this,"wrongStep",function(){var t=P.getSteps,n=P.classes,e=P.stepper,i=P.events;t().active.step.classList.add(n.WRONGSTEP);var r=t().active.step.querySelectorAll("input, select");E.addMultipleEventListeners(r,"input",function e(){t().active.step.classList.remove(n.WRONGSTEP),E.removeMultipleEventListeners(r,"input",e)}),e.dispatchEvent(i.STEPERROR)}),_defineProperty(this,"activateFeedback",function(){var e=P.getSteps,t=P.classes,n=P.options,i=P.stepper,r=P.events,s=e().active.step;s.classList.add(t.FEEDBACKINGSTEP),s.getElementsByClassName(t.STEPCONTENT)[0].insertAdjacentHTML("afterBegin",'<div class="'.concat(t.PRELOADERWRAPPER,'">').concat(n.feedbackPreloader,"</div>")),i.dispatchEvent(r.FEEDBACKING)}),_defineProperty(this,"destroyFeedback",function(e){var t=P.getSteps,n=P.classes,i=P.nextStep,r=P.stepper,s=P.events,o=t().active.step;if(o&&o.classList.contains(n.FEEDBACKINGSTEP)){o.classList.remove(n.FEEDBACKINGSTEP);var a=o.getElementsByClassName(n.PRELOADERWRAPPER)[0];a.parentNode.removeChild(a),e&&i(void 0,!0),r.dispatchEvent(s.FEEDBACKDESTROYED)}}),_defineProperty(this,"getSteps",function(){var e=P.stepper,t=P.classes,n=e.querySelectorAll("li.".concat(t.STEP)),i=e.querySelector("li.".concat(t.ACTIVESTEP));return{steps:n,active:{step:i,index:Array.prototype.indexOf.call(n,i)}}}),_defineProperty(this,"activateStep",function(e,t){var n=P.getSteps,i=P._slideDown,r=P.stepper,s=P._methodsBindingManager,o=E.nodesIterator,a=n().steps[t],l=null;return"string"==typeof e?(a.insertAdjacentHTML("beforeBegin",e),l=a.previousSibling,i(l)):Array.isArray(e)?(l=[],e.forEach(function(e){a.insertAdjacentHTML("beforeBegin",e),l.push(a.previousSibling),i(a.previousSibling)})):(e instanceof Element||e instanceof HTMLCollection||e instanceof NodeList)&&(l=r.insertBefore(e,a),e instanceof Element?i(l):o(l,function(e){return i(e)})),l&&s(l),l}),_defineProperty(this,"deactivateStep",function(t){var n=P._slideUp,i=P.stepper,r=P._methodsBindingManager,e=E.nodesIterator,s=function(e){i.contains(t)&&(r(e),n(e,void 0,void 0,function(){return i.removeChild(e)}))};return t instanceof Element?s(t):(t instanceof HTMLCollection||t instanceof NodeList)&&e(t,function(e){return s(e)}),t}),_defineProperty(this,"_slideDown",function(n,e){var t=2<arguments.length&&void 0!==arguments[2]?arguments[2]:n,i=3<arguments.length?arguments[3]:void 0,r="".concat(E.getUnknownHeight(n),"px"),s=function e(t){"height"===t.propertyName&&(P._smartListenerUnbind(n,"transitionend",e),E.removeMultipleProperties(n,"visibility overflow height display"),i&&i())};return requestAnimationFrame(function(){n.style.overflow="hidden",n.style.paddingBottom="0",n.style.height="0",n.style.visibility="unset",n.style.display="block",requestAnimationFrame(function(){P._smartListenerBind(n,"transitionend",s),n.style.height=r,n.style.removeProperty("padding-bottom"),e&&t.classList.add(e)})}),n}),_defineProperty(this,"_slideUp",function(n,e){var t=2<arguments.length&&void 0!==arguments[2]?arguments[2]:n,i=3<arguments.length?arguments[3]:void 0,r="".concat(n.offsetHeight,"px"),s=function e(t){"height"===t.propertyName&&(P._smartListenerUnbind(n,"transitionend",e),n.style.display="none",E.removeMultipleProperties(n,"visibility overflow height padding-bottom"),i&&i())};return requestAnimationFrame(function(){n.style.overflow="hidden",n.style.visibility="unset",n.style.display="block",n.style.height=r,requestAnimationFrame(function(){P._smartListenerBind(n,"transitionend",s),n.style.height="0",n.style.paddingBottom="0",e&&t.classList.remove(e)})}),n}),_defineProperty(this,"_formWrapperManager",function(){var e=P.stepper,t=P.options,n=e.closest("form");if(n||!t.autoFormCreation)return n.length?n:null;var i=e.dataset||{},r=i.method||"GET",s=i.action||"?",o=document.createElement("form");return o.method=r,o.action=s,e.parentNode.insertBefore(o,e),o.appendChild(e),o}),_defineProperty(this,"_validationFunctionCaller",function(){var e=P.options,t=P.getSteps,n=P.form,i=P.classes;return e.validationFunction(n,t().active.step.querySelector(".".concat(i.STEPCONTENT)))}),_defineProperty(this,"_smartListenerBind",function(e,t,n){var i=!(3<arguments.length&&void 0!==arguments[3])||arguments[3],r=4<arguments.length&&void 0!==arguments[4]&&arguments[4],s=P.listenerStore,o={el:e,event:t,fn:n};if(i)for(var a=0;a<s.length;a++){var l=s[a];l.event===t&&l.el.isSameNode(e)&&l.el.removeEventListener(l.event,l.fn),r&&l.fn()}else{var c=s.indexOf(o);if(-1!==p){var p=s[c];p.el.removeEventListener(p.event,p.fn),r&&p[c].fn()}}e.addEventListener(t,n),s.push(o)}),_defineProperty(this,"_smartListenerUnbind",function(e,t,n){var i=P.listenerStore,r=i.indexOf({el:e,event:t,fn:n});e.removeEventListener(t,n),i.splice(r,1)}),this.stepper=e,this.options={firstActive:t.firstActive||0,linearStepsNavigation:t.linearStepsNavigation||!0,showFeedbackPreloader:t.showFeedbackPreloader||!0,autoFormCreation:t.autoFormCreation||!0,validationFunction:t.validationFunction||null,feedbackPreloader:t.feedbackPreloader||'<div class="preloader-wrapper active"> <div class="spinner-layer spinner-blue-only"> <div class="circle-clipper left"> <div class="circle"></div></div><div class="gap-patch"> <div class="circle"></div></div><div class="circle-clipper right"> <div class="circle"></div></div></div></div>'},this.classes={HORIZONTALSTEPPER:"horizontal",LINEAR:"linear",NEXTSTEPBTN:"next-step",PREVSTEPBTN:"previous-step",STEPTITLE:"step-title",STEP:"step",STEPCONTENT:"step-content",PRELOADERWRAPPER:"wait-feedback",FEEDBACKINGSTEP:"feedbacking",ACTIVESTEP:"active",WRONGSTEP:"wrong",DONESTEP:"done"},this.events={STEPCHANGE:new Event("stepchange"),NEXTSTEP:new Event("nextstep"),PREVSTEP:new Event("prevstep"),STEPERROR:new Event("steperror"),FEEDBACKING:new Event("feedbacking"),FEEDBACKDESTROYED:new Event("feedbackdestroyed")},this.listenerStore=[],this.form=null,this._init()}return _createClass(E,null,[{key:"addMultipleEventListeners",value:function(e,t,n){var i=3<arguments.length&&void 0!==arguments[3]&&arguments[3];if(e instanceof Element)return e.addEventListener(t,n,i);for(var r=0,s=e.length;r<s;r++)e[r].addEventListener(t,n,i)}},{key:"removeMultipleEventListeners",value:function(e,t,n){var i=3<arguments.length&&void 0!==arguments[3]&&arguments[3];if(e instanceof Element)return e.removeEventListener(t,n,i);for(var r=0,s=e.length;r<s;r++)e[r].removeEventListener(t,n,i)}},{key:"removeMultipleProperties",value:function(e,t){for(var n=t.split(" "),i=0;i<n.length;i++)e.style.removeProperty(n[i])}},{key:"nodesIterator",value:function(e,t){for(var n=0;n<e.length;n++)t(e[n]);return e}},{key:"getUnknownHeight",value:function(e){var t=e.cloneNode(!0);t.style.position="fixed",t.style.display="block",t.style.top="-999999px",t.style.left="-999999px",t.style.height="auto",t.style.opacity="0",t.style.zIndex="-999999",t.style.pointerEvents="none",t.querySelectorAll('[type="radio"]').forEach(function(e){e.name="__"+e.name+"__"});var n=e.parentNode.insertBefore(t,e),i=n.offsetHeight;return e.parentNode.removeChild(n),i}},{key:"tabbingDisabler",value:function(e){9===e.keyCode&&e.preventDefault()}}]),E}();window.Element&&!Element.prototype.closest&&(Element.prototype.closest=function(e){var t,n=(this.document||this.ownerDocument).querySelectorAll(e),i=this;do{for(t=n.length;0<=--t&&n.item(t)!==i;);}while(t<0&&(i=i.parentElement));return i}); | ||
| "use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function _createClass(e,t,n){return t&&_defineProperties(e.prototype,t),n&&_defineProperties(e,n),e}function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var MStepper=function(){function E(e){var P=this,t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,E),_defineProperty(this,"_init",function(){var e=P._formWrapperManager,t=P.getSteps,n=P.options,i=P.stepper,r=P.classes,s=P._methodsBindingManager,o=P._openAction;P.form=e(),o(t().steps[n.firstActive],void 0,void 0,!0),s(i.querySelectorAll(".".concat(r.STEP)))}),_defineProperty(this,"_methodsBindingManager",function(e){var t=1<arguments.length&&void 0!==arguments[1]&&arguments[1],o=P.classes,a=P._formSubmitHandler,l=P._nextStepProxy,c=P._prevStepProxy,p=P._stepTitleClickHandler,d=P.form,v=P.options,n=E.nodesIterator,f=E.tabbingDisabler,u=t?E.removeMultipleEventListeners:E.addMultipleEventListeners,i=function(e){var t=e.getElementsByClassName(o.NEXTSTEPBTN),n=e.getElementsByClassName(o.PREVSTEPBTN),i=e.getElementsByClassName(o.STEPTITLE),r=e.querySelectorAll("input, select, textarea, button"),s=e.querySelectorAll('button[type="submit"]');return u(t,"click",l,!1),u(n,"click",c,!1),u(i,"click",p),r.length&&u(r[r.length-1],"keydown",f),s&&d&&v.validationFunction&&u(s,"keydown",a),e};e instanceof Element?i(e):n(e,function(e){return i(e)})}),_defineProperty(this,"_formSubmitHandler",function(e){P._validationFunctionCaller()||e.preventDefault()}),_defineProperty(this,"resetStepper",function(){P.form&&(P.form.reset(),P.openStep(P.options.firstActive))}),_defineProperty(this,"_openAction",function(e,t){var n=!(2<arguments.length&&void 0!==arguments[2])||arguments[2],i=3<arguments.length?arguments[3]:void 0,r=P._slideDown,s=P.classes,o=P.getSteps,a=P._closeAction,l=P.stepper,c=P.options,p=o().active.step;if(p&&p.isSameNode(e))return e;var d=e.getElementsByClassName(s.STEPCONTENT)[0];return e.classList.remove(s.DONESTEP),window.innerWidth<993||!l.classList.contains(s.HORIZONTALSTEPPER)?(r(d,s.ACTIVESTEP,e,t),i||r(d,s.ACTIVESTEP,e,function(){var e=d.querySelector("input, select, textarea");c.autoFocusInput&&e&&e.focus(),t&&"function"==typeof t&&t()})):e.classList.add("active"),p&&n&&a(p),e}),_defineProperty(this,"_closeAction",function(e,n){var t=P._slideUp,i=P.classes,r=P.stepper,s=P._smartListenerUnbind,o=P._smartListenerBind,a=e.getElementsByClassName(i.STEPCONTENT)[0];if(window.innerWidth<993||!r.classList.contains(i.HORIZONTALSTEPPER))t(a,i.ACTIVESTEP,e,n);else{if(n){o(a,"transitionend",function e(t){"left"===t.propertyName&&(s(a,"transitionend",e),n())})}e.classList.remove("active")}return e}),_defineProperty(this,"_nextStepProxy",function(e){return P.nextStep(void 0,void 0,e)}),_defineProperty(this,"_prevStepProxy",function(e){return P.prevStep(void 0,e)}),_defineProperty(this,"_stepTitleClickHandler",function(e){var t=P.getSteps,n=P.classes,i=P.nextStep,r=P.prevStep,s=P.stepper,o=P._openAction,a=t(),l=a.steps,c=a.active,p=e.target.closest(".".concat(n.STEP));if(s.classList.contains(n.LINEAR)){var d=Array.prototype.indexOf.call(l,p);d==c.index+1?i():d==c.index-1&&r()}else o(p)}),_defineProperty(this,"nextStep",function(e,t,n){n&&n.preventDefault&&n.preventDefault();var i=P.options,r=P.getSteps,s=P.activateFeedback,o=P.form,a=P.wrongStep,l=P.classes,c=P._openAction,p=P.stepper,d=P.events,v=P.destroyFeedback,f=P._validationFunctionCaller,u=i.showFeedbackPreloader,E=i.validationFunction,y=r().active,h=r().steps[y.index+1],m=n&&n.target?n.target.dataset.feedback:null;return E&&!f()?a():m&&!t?(u&&!y.step.dataset.nopreloader&&s(),void window[m](v,o,y.step.querySelector(".".concat(l.STEPCONTENT)))):(y.step.classList.add(l.DONESTEP),c(h,e),p.dispatchEvent(d.STEPCHANGE),void p.dispatchEvent(d.NEXTSTEP))}),_defineProperty(this,"prevStep",function(e,t){t&&t.preventDefault&&t.preventDefault();var n=P.getSteps,i=P._openAction,r=P.stepper,s=P.events,o=P.destroyFeedback,a=n().active,l=n().steps[a.index+-1];o(),i(l,e),r.dispatchEvent(s.STEPCHANGE),r.dispatchEvent(s.PREVSTEP)}),_defineProperty(this,"openStep",function(e,t){var n=P.getSteps,i=P._openAction,r=P.stepper,s=P.events,o=P.destroyFeedback,a=n().steps[e];o(),i(a,t),r.dispatchEvent(s.STEPCHANGE)}),_defineProperty(this,"wrongStep",function(){var t=P.getSteps,n=P.classes,e=P.stepper,i=P.events;t().active.step.classList.add(n.WRONGSTEP);var r=t().active.step.querySelectorAll("input, select, textarea");E.addMultipleEventListeners(r,"input",function e(){t().active.step.classList.remove(n.WRONGSTEP),E.removeMultipleEventListeners(r,"input",e)}),e.dispatchEvent(i.STEPERROR)}),_defineProperty(this,"activateFeedback",function(){var e=P.getSteps,t=P.classes,n=P.options,i=P.stepper,r=P.events,s=e().active.step;s.classList.add(t.FEEDBACKINGSTEP),s.getElementsByClassName(t.STEPCONTENT)[0].insertAdjacentHTML("afterBegin",'<div class="'.concat(t.PRELOADERWRAPPER,'">').concat(n.feedbackPreloader,"</div>")),i.dispatchEvent(r.FEEDBACKING)}),_defineProperty(this,"destroyFeedback",function(e){var t=P.getSteps,n=P.classes,i=P.nextStep,r=P.stepper,s=P.events,o=t().active.step;if(o&&o.classList.contains(n.FEEDBACKINGSTEP)){o.classList.remove(n.FEEDBACKINGSTEP);var a=o.getElementsByClassName(n.PRELOADERWRAPPER)[0];a.parentNode.removeChild(a),e&&i(void 0,!0),r.dispatchEvent(s.FEEDBACKDESTROYED)}}),_defineProperty(this,"getSteps",function(){var e=P.stepper,t=P.classes,n=e.querySelectorAll("li.".concat(t.STEP)),i=e.querySelector("li.".concat(t.ACTIVESTEP));return{steps:n,active:{step:i,index:Array.prototype.indexOf.call(n,i)}}}),_defineProperty(this,"activateStep",function(e,t){var n=P.getSteps,i=P._slideDown,r=P.stepper,s=P._methodsBindingManager,o=E.nodesIterator,a=n().steps[t],l=null;return"string"==typeof e?(a.insertAdjacentHTML("beforeBegin",e),l=a.previousSibling,i(l)):Array.isArray(e)?(l=[],e.forEach(function(e){a.insertAdjacentHTML("beforeBegin",e),l.push(a.previousSibling),i(a.previousSibling)})):(e instanceof Element||e instanceof HTMLCollection||e instanceof NodeList)&&(l=r.insertBefore(e,a),e instanceof Element?i(l):o(l,function(e){return i(e)})),l&&s(l),l}),_defineProperty(this,"deactivateStep",function(t){var n=P._slideUp,i=P.stepper,r=P._methodsBindingManager,e=E.nodesIterator,s=function(e){i.contains(t)&&(r(e,!0),n(e,void 0,void 0,function(){return i.removeChild(e)}))};return t instanceof Element?s(t):(t instanceof HTMLCollection||t instanceof NodeList)&&e(t,function(e){return s(e)}),t}),_defineProperty(this,"_slideDown",function(n,e){var t=2<arguments.length&&void 0!==arguments[2]?arguments[2]:n,i=3<arguments.length?arguments[3]:void 0,r="".concat(E.getUnknownHeight(n),"px"),s=function e(t){"height"===t.propertyName&&(P._smartListenerUnbind(n,"transitionend",e),E.removeMultipleProperties(n,"visibility overflow height display"),i&&i())};return requestAnimationFrame(function(){n.style.overflow="hidden",n.style.paddingBottom="0",n.style.height="0",n.style.visibility="unset",n.style.display="block",requestAnimationFrame(function(){P._smartListenerBind(n,"transitionend",s),n.style.height=r,n.style.removeProperty("padding-bottom"),e&&t.classList.add(e)})}),n}),_defineProperty(this,"_slideUp",function(n,e){var t=2<arguments.length&&void 0!==arguments[2]?arguments[2]:n,i=3<arguments.length?arguments[3]:void 0,r="".concat(n.offsetHeight,"px"),s=function e(t){"height"===t.propertyName&&(P._smartListenerUnbind(n,"transitionend",e),n.style.display="none",E.removeMultipleProperties(n,"visibility overflow height padding-bottom"),i&&i())};return requestAnimationFrame(function(){n.style.overflow="hidden",n.style.visibility="unset",n.style.display="block",n.style.height=r,requestAnimationFrame(function(){P._smartListenerBind(n,"transitionend",s),n.style.height="0",n.style.paddingBottom="0",e&&t.classList.remove(e)})}),n}),_defineProperty(this,"_formWrapperManager",function(){var e=P.stepper,t=P.options,n=e.closest("form");if(n||!t.autoFormCreation)return n.length?n:null;var i=e.dataset||{},r=i.method||"GET",s=i.action||"?",o=document.createElement("form");return o.method=r,o.action=s,e.parentNode.insertBefore(o,e),o.appendChild(e),o}),_defineProperty(this,"_validationFunctionCaller",function(){var e=P.options,t=P.getSteps,n=P.form,i=P.classes;return e.validationFunction(n,t().active.step.querySelector(".".concat(i.STEPCONTENT)))}),_defineProperty(this,"_smartListenerBind",function(e,t,n){var i=!(3<arguments.length&&void 0!==arguments[3])||arguments[3],r=4<arguments.length&&void 0!==arguments[4]&&arguments[4],s=P.listenerStore,o={el:e,event:t,fn:n};if(i)for(var a=0;a<s.length;a++){var l=s[a];l.event===t&&l.el.isSameNode(e)&&l.el.removeEventListener(l.event,l.fn),r&&l.fn()}else{var c=s.indexOf(o);if(-1!==p){var p=s[c];p.el.removeEventListener(p.event,p.fn),r&&p[c].fn()}}e.addEventListener(t,n),s.push(o)}),_defineProperty(this,"_smartListenerUnbind",function(e,t,n){var i=P.listenerStore,r=i.indexOf({el:e,event:t,fn:n});e.removeEventListener(t,n),i.splice(r,1)}),this.stepper=e,this.options={firstActive:t.firstActive||0,linearStepsNavigation:t.linearStepsNavigation||!0,autoFocusInput:t.autoFocusInput||!0,showFeedbackPreloader:t.showFeedbackPreloader||!0,autoFormCreation:t.autoFormCreation||!0,validationFunction:t.validationFunction||null,feedbackPreloader:t.feedbackPreloader||'<div class="preloader-wrapper active"> <div class="spinner-layer spinner-blue-only"> <div class="circle-clipper left"> <div class="circle"></div></div><div class="gap-patch"> <div class="circle"></div></div><div class="circle-clipper right"> <div class="circle"></div></div></div></div>'},this.classes={HORIZONTALSTEPPER:"horizontal",LINEAR:"linear",NEXTSTEPBTN:"next-step",PREVSTEPBTN:"previous-step",STEPTITLE:"step-title",STEP:"step",STEPCONTENT:"step-content",PRELOADERWRAPPER:"wait-feedback",FEEDBACKINGSTEP:"feedbacking",ACTIVESTEP:"active",WRONGSTEP:"wrong",DONESTEP:"done"},this.events={STEPCHANGE:new Event("stepchange"),NEXTSTEP:new Event("nextstep"),PREVSTEP:new Event("prevstep"),STEPERROR:new Event("steperror"),FEEDBACKING:new Event("feedbacking"),FEEDBACKDESTROYED:new Event("feedbackdestroyed")},this.listenerStore=[],this.form=null,this._init()}return _createClass(E,null,[{key:"addMultipleEventListeners",value:function(e,t,n){var i=3<arguments.length&&void 0!==arguments[3]&&arguments[3];if(e instanceof Element)return e.addEventListener(t,n,i);for(var r=0,s=e.length;r<s;r++)e[r].addEventListener(t,n,i)}},{key:"removeMultipleEventListeners",value:function(e,t,n){var i=3<arguments.length&&void 0!==arguments[3]&&arguments[3];if(e instanceof Element)return e.removeEventListener(t,n,i);for(var r=0,s=e.length;r<s;r++)e[r].removeEventListener(t,n,i)}},{key:"removeMultipleProperties",value:function(e,t){for(var n=t.split(" "),i=0;i<n.length;i++)e.style.removeProperty(n[i])}},{key:"nodesIterator",value:function(e,t){for(var n=0;n<e.length;n++)t(e[n]);return e}},{key:"getUnknownHeight",value:function(e){var t=e.cloneNode(!0);t.style.position="fixed",t.style.display="block",t.style.top="-999999px",t.style.left="-999999px",t.style.height="auto",t.style.opacity="0",t.style.zIndex="-999999",t.style.pointerEvents="none",t.querySelectorAll('[type="radio"]').forEach(function(e){e.name="__"+e.name+"__"});var n=e.parentNode.insertBefore(t,e),i=n.offsetHeight;return e.parentNode.removeChild(n),i}},{key:"tabbingDisabler",value:function(e){9===e.keyCode&&e.preventDefault()}}]),E}();window.Element&&!Element.prototype.closest&&(Element.prototype.closest=function(e){var t,n=(this.document||this.ownerDocument).querySelectorAll(e),i=this;do{for(t=n.length;0<=--t&&n.item(t)!==i;);}while(t<0&&(i=i.parentElement));return i}); |
| { | ||
| "name": "materialize-stepper", | ||
| "version": "3.0.0-beta.1.1.0", | ||
| "version": "3.0.0-beta.1.1.1", | ||
| "description": "A little plugin, inspired by MDL-Stepper, that implements a stepper to Materializecss framework.", | ||
@@ -5,0 +5,0 @@ "main": "dist/js/mstepper.js", |
@@ -9,3 +9,3 @@ /** Class representing an MStepper */ | ||
| * @param {boolean} [options.linearStepsNavigation=true] - Allow navigation by clicking on the next and previous steps on linear steppers. | ||
| * @param {boolean} [options.autoFocusInput=true] - Auto focus on first input of each step. | ||
| * @param {boolean} [options.autoFocusInput=false] - Auto focus on first input of each step. | ||
| * @param {boolean} [options.showFeedbackPreloader=true] - Set if a loading screen will appear while feedbacks functions are running. | ||
@@ -21,3 +21,3 @@ * @param {boolean} [options.autoFormCreation=true] - Auto generation of a form around the stepper. | ||
| linearStepsNavigation: options.linearStepsNavigation || true, | ||
| // autoFocusInput: options.autoFocusInput || true, | ||
| autoFocusInput: options.autoFocusInput || true, | ||
| showFeedbackPreloader: options.showFeedbackPreloader || true, | ||
@@ -67,3 +67,3 @@ autoFormCreation: options.autoFormCreation || true, | ||
| // Opens the first step (or other specified in the constructor) | ||
| _openAction(getSteps().steps[options.firstActive]); | ||
| _openAction(getSteps().steps[options.firstActive], undefined, undefined, true); | ||
| // Gathers the steps and send them to the methodsBinder | ||
@@ -89,3 +89,3 @@ _methodsBindingManager(stepper.querySelectorAll(`.${classes.STEP}`)); | ||
| const stepsTitle = step.getElementsByClassName(classes.STEPTITLE); | ||
| const inputs = step.querySelectorAll('input, select, button'); | ||
| const inputs = step.querySelectorAll('input, select, textarea, button'); | ||
| const submitButtons = step.querySelectorAll('button[type="submit"]'); | ||
@@ -121,5 +121,7 @@ bindOrUnbind(nextBtns, 'click', _nextStepProxy, false); | ||
| * @param {function} cb - Callback to be executed after the transition ends. | ||
| * @param {boolean} [closeActiveStep=true] - Should it close the active (open) step while opening the new one? | ||
| * @param {boolean} [skipAutoFocus] - Should it skip autofocus on the first input of the next step? | ||
| * @returns {HTMLElement} - The original received step. | ||
| */ | ||
| _openAction = (step, cb, closeActiveStep = true) => { | ||
| _openAction = (step, cb, closeActiveStep = true, skipAutoFocus) => { | ||
| const { _slideDown, classes, getSteps, _closeAction, stepper, options } = this; | ||
@@ -141,9 +143,11 @@ // Gets the active step element | ||
| // Beginning of disabled autoFocusInput function due to issues with scroll | ||
| // _slideDown(stepContent, classes.ACTIVESTEP, step, () => { | ||
| // // Gets the inputs from the nextStep to focus on the first one (temporarily disabled) | ||
| // const nextStepInputs = stepContent.querySelector('input, select'); | ||
| // // Focus on the first input of the next step (temporarily disabled) | ||
| // if (options.autoFocusInput && nextStepInputs) nextStepInputs.focus(); | ||
| // if(cb && typeof cb === 'function') cb(); | ||
| // }); | ||
| if (!skipAutoFocus) { | ||
| _slideDown(stepContent, classes.ACTIVESTEP, step, () => { | ||
| // Gets the inputs from the nextStep to focus on the first one (temporarily disabled) | ||
| const nextStepInputs = stepContent.querySelector('input, select, textarea'); | ||
| // Focus on the first input of the next step (temporarily disabled) | ||
| if (options.autoFocusInput && nextStepInputs) nextStepInputs.focus(); | ||
| if (cb && typeof cb === 'function') cb(); | ||
| }); | ||
| } | ||
| // Enf of disabled autoFocusInput function due to issues with scroll | ||
@@ -323,3 +327,3 @@ | ||
| // Gets all the inputs from the active step | ||
| const inputs = getSteps().active.step.querySelectorAll('input, select'); | ||
| const inputs = getSteps().active.step.querySelectorAll('input, select, textarea'); | ||
| // Defines a function to be binded to any change in any input | ||
@@ -466,3 +470,3 @@ const removeWrongOnInput = () => { | ||
| // Unbinds the listeners previously binded to the step | ||
| _methodsBindingManager(element); | ||
| _methodsBindingManager(element, true); | ||
| // Slides up and removes afterwards | ||
@@ -469,0 +473,0 @@ _slideUp(element, undefined, undefined, () => stepper.removeChild(element)); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.78%
124621
- Lines of code
- increased by0.29%
1700
No dependency changes