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.1 to 3.0.0
| Date format: d/m/y | ||
| ### 3.0 (12/12/18) | ||
| #### Features | ||
| * Added `stepopen` and `stepclose` custom events; | ||
| * Added `stepTitleNavigation` option as suggested in [#62](https://github.com/Kinark/Materialize-stepper/issues/62); | ||
| * Added a default `validationFunction`. | ||
| #### Fixes | ||
| * Fixed [#54](https://github.com/Kinark/Materialize-stepper/issues/54) where you couldn't add a step to the end of the stepper; | ||
| * Fixed [#58](https://github.com/Kinark/Materialize-stepper/issues/58) where specified `false` options were ignored; | ||
| * Fixed [#60](https://github.com/Kinark/Materialize-stepper/issues/60) where `stepchange` event was not being fired when clicking on step-titles. | ||
| * Refactored getUnknownHeight method to fix some bugs and optimize stuff; | ||
| * Fixed animations issues; | ||
| * Full migration to yarn. | ||
| #### Docs | ||
| * Added demos to API docs; | ||
| * Updated sidebar with all sections. | ||
| ### 3.0.0-beta.1.1.1 (28/11/18) | ||
@@ -4,0 +22,0 @@ * Added textarea when inputs need to be queried (fixes some issues); |
| /** | ||
| * Materialize Stepper - A little plugin that implements a stepper to Materializecss framework. | ||
| * @version v3.0.0-beta.1.1.1 | ||
| * @version v3.0.0 | ||
| * @author Igor Marcossi (Kinark) <igormarcossi@gmail.com>. | ||
@@ -82,5 +82,6 @@ * @link https://github.com/Kinark/Materialize-stepper | ||
| bindOrUnbind(nextBtns, 'click', _nextStepProxy, false); | ||
| bindOrUnbind(prevBtns, 'click', _prevStepProxy, false); | ||
| bindOrUnbind(stepsTitle, 'click', _stepTitleClickHandler); // Prevents the tabbing issue (https://github.com/Kinark/Materialize-stepper/issues/49) | ||
| bindOrUnbind(prevBtns, 'click', _prevStepProxy, false); // Adding suggested feature in #62 | ||
| if (options.stepTitleNavigation) bindOrUnbind(stepsTitle, 'click', _stepTitleClickHandler); // Prevents the tabbing issue (https://github.com/Kinark/Materialize-stepper/issues/49) | ||
| if (inputs.length) bindOrUnbind(inputs[inputs.length - 1], 'keydown', tabbingDisabler); // Binds to the submit button an internal handler to manage validation | ||
@@ -118,2 +119,3 @@ | ||
| stepper = _this.stepper, | ||
| events = _this.events, | ||
| options = _this.options; // Gets the active step element | ||
@@ -131,3 +133,3 @@ | ||
| // Calls the slideDown private method if the stepper is vertical | ||
| _slideDown(stepContent, classes.ACTIVESTEP, step, cb); // Beginning of disabled autoFocusInput function due to issues with scroll | ||
| _slideDown(stepContent, classes.ACTIVESTEP, step, cb); // Beginning of autoFocusInput | ||
@@ -143,3 +145,3 @@ | ||
| }); | ||
| } // Enf of disabled autoFocusInput function due to issues with scroll | ||
| } // Enf of autoFocusInput | ||
@@ -153,3 +155,11 @@ } else { | ||
| if (activeStep && closeActiveStep) _closeAction(activeStep); | ||
| if (activeStep && closeActiveStep) { | ||
| _closeAction(activeStep); // We are changing steps, so dispatch the change event. | ||
| stepper.dispatchEvent(events.STEPCHANGE); | ||
| } // Dispatch OPEN Event | ||
| stepper.dispatchEvent(events.STEPOPEN); | ||
| return step; | ||
@@ -162,2 +172,3 @@ }); | ||
| stepper = _this.stepper, | ||
| events = _this.events, | ||
| _smartListenerUnbind = _this._smartListenerUnbind, | ||
@@ -193,4 +204,6 @@ _smartListenerBind = _this._smartListenerBind; // Gets the step content div inside the step | ||
| step.classList.remove('active'); | ||
| } | ||
| } // Dispatch Event | ||
| stepper.dispatchEvent(events.STEPCLOSE); | ||
| return step; | ||
@@ -277,6 +290,5 @@ }); | ||
| _openAction(nextStep, cb); // Dispatches the events | ||
| _openAction(nextStep, cb); // Dispatches the event | ||
| stepper.dispatchEvent(events.STEPCHANGE); | ||
| stepper.dispatchEvent(events.NEXTSTEP); | ||
@@ -297,6 +309,5 @@ }); | ||
| _openAction(prevStep, cb); // Dispatches the events | ||
| _openAction(prevStep, cb); // Dispatches the event | ||
| stepper.dispatchEvent(events.STEPCHANGE); | ||
| stepper.dispatchEvent(events.PREVSTEP); | ||
@@ -308,4 +319,2 @@ }); | ||
| _openAction = _this._openAction, | ||
| stepper = _this.stepper, | ||
| events = _this.events, | ||
| destroyFeedback = _this.destroyFeedback; | ||
@@ -316,6 +325,3 @@ var stepToOpen = getSteps().steps[index]; // Destroyes the feedback preloader, if any | ||
| _openAction(stepToOpen, cb); // Dispatches the events | ||
| stepper.dispatchEvent(events.STEPCHANGE); | ||
| _openAction(stepToOpen, cb); | ||
| }); | ||
@@ -405,5 +411,8 @@ | ||
| var nodesIterator = MStepper.nodesIterator; | ||
| var currentSteps = getSteps(); | ||
| var nextStep = currentSteps.steps[index]; // Stores a let variable to return the right element after the activation | ||
| var currentSteps = getSteps().steps; // Checks if the steps will be added at the end or in the middle of the stepper | ||
| var before = currentSteps.length > index; // Based on the previous check, sets the reference step | ||
| var referenceStep = before ? currentSteps[index] : currentSteps[currentSteps.length - 1]; // Stores a let variable to return the right element after the activation | ||
| var returnableElement = null; // Starts the checking of the elements parameter | ||
@@ -413,6 +422,6 @@ | ||
| // The element is in string format | ||
| // Insert it with the insertAdjacentHTML function | ||
| nextStep.insertAdjacentHTML('beforeBegin', elements); // Defines the inserted element as the returnableElement | ||
| // Insert it with the insertAdjacentHTML function (and trim the string to avoid errors) | ||
| referenceStep.insertAdjacentHTML(before ? 'beforeBegin' : 'afterEnd', elements.trim()); // Defines the inserted element as the returnableElement | ||
| returnableElement = nextStep.previousSibling; // Activates (slideDown) the step | ||
| returnableElement = before ? referenceStep.previousSibling : referenceStep.nextSibling; // Activates (slideDown) the step | ||
@@ -426,14 +435,18 @@ _slideDown(returnableElement); | ||
| elements.forEach(function (element) { | ||
| // Inserts each element with the insertAdjacentHTML function | ||
| nextStep.insertAdjacentHTML('beforeBegin', element); // Adds each element to the returnableElement array | ||
| // Inserts each element with the insertAdjacentHTML function (and trim the string to avoid errors) | ||
| referenceStep.insertAdjacentHTML(before ? 'beforeBegin' : 'afterEnd', element.trim()); // Gets the new added element | ||
| returnableElement.push(nextStep.previousSibling); // Activates (slideDown) each element | ||
| var addedStep = before ? referenceStep.previousSibling : referenceStep.nextSibling; // Adds each element to the returnableElement array | ||
| _slideDown(nextStep.previousSibling); | ||
| returnableElement.push(addedStep); // Activates (slideDown) each element | ||
| _slideDown(addedStep); | ||
| }); | ||
| } else if (elements instanceof Element || elements instanceof HTMLCollection || elements instanceof NodeList) { | ||
| // The element is an HTMLElement or an HTMLCollection | ||
| // Insert it/them with the insertBefore function and sets the returnableElement | ||
| returnableElement = stepper.insertBefore(elements, nextStep); // If it's and HTMLElement, activates (slideDown) it, if it's an HTMLCollection, activates (slideDown) each of them | ||
| // Sets the rigth function to add the new steps | ||
| var rigthFunction = before ? stepper.insertBefore : stepper.appendChild; // Insert it/them with the rigthFunction and sets the returnableElement | ||
| returnableElement = rigthFunction(elements, referenceStep); // If it's and HTMLElement, activates (slideDown) it, if it's an HTMLCollection, activates (slideDown) each of them | ||
| if (elements instanceof Element) _slideDown(returnableElement);else nodesIterator(returnableElement, function (appendedElement) { | ||
@@ -498,19 +511,23 @@ return _slideDown(appendedElement); | ||
| requestAnimationFrame(function () { | ||
| // Prepare the element for animation | ||
| element.style.overflow = 'hidden'; | ||
| element.style.paddingBottom = '0'; | ||
| element.style.height = '0'; | ||
| element.style.visibility = 'unset'; | ||
| element.style.display = 'block'; // Calls another animation frame to wait for the previous changes to take effect | ||
| element.style.display = 'none'; | ||
| requestAnimationFrame(function () { | ||
| // Binds the "conclusion" function to the event 'transitionend' | ||
| _this._smartListenerBind(element, 'transitionend', endSlideDown); // Sets the final height to the element to trigger the transition | ||
| // Prepare the element for animation | ||
| element.style.overflow = 'hidden'; | ||
| element.style.height = '0'; | ||
| element.style.paddingBottom = '0'; | ||
| element.style.visibility = 'unset'; | ||
| element.style.display = 'block'; // Calls another animation frame to wait for the previous changes to take effect | ||
| requestAnimationFrame(function () { | ||
| // Binds the "conclusion" function to the event 'transitionend' | ||
| _this._smartListenerBind(element, 'transitionend', endSlideDown); // Sets the final height to the element to trigger the transition | ||
| element.style.height = height; // Removes the 'padding-bottom: 0' setted previously to trigger it too | ||
| element.style.removeProperty('padding-bottom'); // If a className for the slided element is required, add it | ||
| element.style.height = height; // Removes the 'padding-bottom: 0' setted previously to trigger it too | ||
| if (className) classElement.classList.add(className); | ||
| element.style.removeProperty('padding-bottom'); // element.style.paddingBottom = '0'; | ||
| // If a className for the slided element is required, add it | ||
| if (className) classElement.classList.add(className); | ||
| }); | ||
| }); | ||
@@ -658,11 +675,12 @@ }); // Returns the original element to enable chain functions | ||
| this.stepper = elem; | ||
| this.options = { | ||
| firstActive: _options.firstActive || 0, | ||
| linearStepsNavigation: _options.linearStepsNavigation || true, | ||
| autoFocusInput: _options.autoFocusInput || true, | ||
| showFeedbackPreloader: _options.showFeedbackPreloader || true, | ||
| autoFormCreation: _options.autoFormCreation || true, | ||
| validationFunction: _options.validationFunction || null, | ||
| feedbackPreloader: _options.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.options = Object.assign({ | ||
| firstActive: 0, | ||
| linearStepsNavigation: true, | ||
| autoFocusInput: true, | ||
| showFeedbackPreloader: true, | ||
| autoFormCreation: true, | ||
| validationFunction: MStepper.defaultValidationFunction, | ||
| stepTitleNavigation: true, | ||
| 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>' | ||
| }, _options); | ||
| this.classes = { | ||
@@ -684,2 +702,4 @@ HORIZONTALSTEPPER: 'horizontal', | ||
| STEPCHANGE: new Event('stepchange'), | ||
| STEPOPEN: new Event('stepopen'), | ||
| STEPCLOSE: new Event('stepclose'), | ||
| NEXTSTEP: new Event('nextstep'), | ||
@@ -780,26 +800,32 @@ PREVSTEP: new Event('prevstep'), | ||
| value: function getUnknownHeight(el) { | ||
| // Clones the element to insert it invisible | ||
| var clone = el.cloneNode(true); // Defines some styles for it to be 100% invisible and unnoticeable | ||
| // Spawns the hidden element in stealth mode | ||
| el.style.position = 'fixed'; | ||
| el.style.display = 'block'; | ||
| el.style.top = '-999999px'; | ||
| el.style.left = '-999999px'; | ||
| el.style.height = 'auto'; | ||
| el.style.opacity = '0'; | ||
| el.style.zIndex = '-999999'; | ||
| el.style.pointerEvents = 'none'; // Gets it's height | ||
| clone.style.position = 'fixed'; | ||
| clone.style.display = 'block'; | ||
| clone.style.top = '-999999px'; | ||
| clone.style.left = '-999999px'; | ||
| clone.style.height = 'auto'; | ||
| clone.style.opacity = '0'; | ||
| clone.style.zIndex = '-999999'; | ||
| clone.style.pointerEvents = 'none'; // Rename the radio buttons in the cloned node as only 1 radio button is allowed to be selected with the same name in the DOM. | ||
| var height = el.offsetHeight; // Removes the stealth mode and hides the element again | ||
| var radios = clone.querySelectorAll('[type="radio"]'); | ||
| radios.forEach(function (radio) { | ||
| radio.name = "__" + radio.name + "__"; | ||
| }); // Inserts it before the hidden element | ||
| MStepper.removeMultipleProperties(el, 'position display top left height opacity z-index pointer-events'); | ||
| return height; | ||
| } | ||
| /** | ||
| * Default validation function. | ||
| * @returns {boolean} | ||
| */ | ||
| var insertedElement = el.parentNode.insertBefore(clone, el); // Gets it's height | ||
| }, { | ||
| key: "defaultValidationFunction", | ||
| value: function defaultValidationFunction(stepperForm, activeStepContent) { | ||
| var inputs = activeStepContent.querySelectorAll('input, textarea, select'); | ||
| var height = insertedElement.offsetHeight; // Removes it | ||
| for (var i = 0; i < inputs.length; i++) { | ||
| if (!inputs[i].checkValidity()) return false; | ||
| } | ||
| el.parentNode.removeChild(insertedElement); // Returns the height (without 'px') | ||
| return height; | ||
| return true; | ||
| } | ||
@@ -837,2 +863,39 @@ /** | ||
| }; | ||
| } // Polyfill by mozilla | ||
| // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign | ||
| if (typeof Object.assign != 'function') { | ||
| // Must be writable: true, enumerable: false, configurable: true | ||
| Object.defineProperty(Object, "assign", { | ||
| value: function assign(target, varArgs) { | ||
| // .length of function is 2 | ||
| 'use strict'; | ||
| if (target == null) { | ||
| // TypeError if undefined or null | ||
| throw new TypeError('Cannot convert undefined or null to object'); | ||
| } | ||
| var to = Object(target); | ||
| for (var index = 1; index < arguments.length; index++) { | ||
| var nextSource = arguments[index]; | ||
| if (nextSource != null) { | ||
| // Skip over if undefined or null | ||
| for (var nextKey in nextSource) { | ||
| // Avoid bugs when hasOwnProperty is shadowed | ||
| if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { | ||
| to[nextKey] = nextSource[nextKey]; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return to; | ||
| }, | ||
| writable: true, | ||
| configurable: true | ||
| }); | ||
| } |
| /** | ||
| * Materialize Stepper - A little plugin that implements a stepper to Materializecss framework. | ||
| * @version v3.0.0-beta.1.1.1 | ||
| * @version v3.0.0 | ||
| * @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],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}); | ||
| "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 m=this,t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,E),_defineProperty(this,"_init",function(){var e=m._formWrapperManager,t=m.getSteps,n=m.options,i=m.stepper,r=m.classes,s=m._methodsBindingManager,o=m._openAction;m.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=m.classes,a=m._formSubmitHandler,l=m._nextStepProxy,c=m._prevStepProxy,p=m._stepTitleClickHandler,d=m.form,v=m.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),v.stepTitleNavigation&&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){m._validationFunctionCaller()||e.preventDefault()}),_defineProperty(this,"resetStepper",function(){m.form&&(m.form.reset(),m.openStep(m.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=m._slideDown,s=m.classes,o=m.getSteps,a=m._closeAction,l=m.stepper,c=m.events,p=m.options,d=o().active.step;if(d&&d.isSameNode(e))return e;var v=e.getElementsByClassName(s.STEPCONTENT)[0];return e.classList.remove(s.DONESTEP),window.innerWidth<993||!l.classList.contains(s.HORIZONTALSTEPPER)?(r(v,s.ACTIVESTEP,e,t),i||r(v,s.ACTIVESTEP,e,function(){var e=v.querySelector("input, select, textarea");p.autoFocusInput&&e&&e.focus(),t&&"function"==typeof t&&t()})):e.classList.add("active"),d&&n&&(a(d),l.dispatchEvent(c.STEPCHANGE)),l.dispatchEvent(c.STEPOPEN),e}),_defineProperty(this,"_closeAction",function(e,n){var t=m._slideUp,i=m.classes,r=m.stepper,s=m.events,o=m._smartListenerUnbind,a=m._smartListenerBind,l=e.getElementsByClassName(i.STEPCONTENT)[0];if(window.innerWidth<993||!r.classList.contains(i.HORIZONTALSTEPPER))t(l,i.ACTIVESTEP,e,n);else{if(n){a(l,"transitionend",function e(t){"left"===t.propertyName&&(o(l,"transitionend",e),n())})}e.classList.remove("active")}return r.dispatchEvent(s.STEPCLOSE),e}),_defineProperty(this,"_nextStepProxy",function(e){return m.nextStep(void 0,void 0,e)}),_defineProperty(this,"_prevStepProxy",function(e){return m.prevStep(void 0,e)}),_defineProperty(this,"_stepTitleClickHandler",function(e){var t=m.getSteps,n=m.classes,i=m.nextStep,r=m.prevStep,s=m.stepper,o=m._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=m.options,r=m.getSteps,s=m.activateFeedback,o=m.form,a=m.wrongStep,l=m.classes,c=m._openAction,p=m.stepper,d=m.events,v=m.destroyFeedback,f=m._validationFunctionCaller,u=i.showFeedbackPreloader,E=i.validationFunction,y=r().active,h=r().steps[y.index+1],P=n&&n.target?n.target.dataset.feedback:null;return E&&!f()?a():P&&!t?(u&&!y.step.dataset.nopreloader&&s(),void window[P](v,o,y.step.querySelector(".".concat(l.STEPCONTENT)))):(y.step.classList.add(l.DONESTEP),c(h,e),void p.dispatchEvent(d.NEXTSTEP))}),_defineProperty(this,"prevStep",function(e,t){t&&t.preventDefault&&t.preventDefault();var n=m.getSteps,i=m._openAction,r=m.stepper,s=m.events,o=m.destroyFeedback,a=n().active,l=n().steps[a.index+-1];o(),i(l,e),r.dispatchEvent(s.PREVSTEP)}),_defineProperty(this,"openStep",function(e,t){var n=m.getSteps,i=m._openAction,r=m.destroyFeedback,s=n().steps[e];r(),i(s,t)}),_defineProperty(this,"wrongStep",function(){var t=m.getSteps,n=m.classes,e=m.stepper,i=m.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=m.getSteps,t=m.classes,n=m.options,i=m.stepper,r=m.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=m.getSteps,n=m.classes,i=m.nextStep,r=m.stepper,s=m.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=m.stepper,t=m.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=m.getSteps,i=m._slideDown,r=m.stepper,s=m._methodsBindingManager,o=E.nodesIterator,a=n().steps,l=a.length>t,c=l?a[t]:a[a.length-1],p=null;if("string"==typeof e)c.insertAdjacentHTML(l?"beforeBegin":"afterEnd",e.trim()),p=l?c.previousSibling:c.nextSibling,i(p);else if(Array.isArray(e))p=[],e.forEach(function(e){c.insertAdjacentHTML(l?"beforeBegin":"afterEnd",e.trim());var t=l?c.previousSibling:c.nextSibling;p.push(t),i(t)});else if(e instanceof Element||e instanceof HTMLCollection||e instanceof NodeList){var d=l?r.insertBefore:r.appendChild;p=d(e,c),e instanceof Element?i(p):o(p,function(e){return i(e)})}return p&&s(p),p}),_defineProperty(this,"deactivateStep",function(t){var n=m._slideUp,i=m.stepper,r=m._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&&(m._smartListenerUnbind(n,"transitionend",e),E.removeMultipleProperties(n,"visibility overflow height display"),i&&i())};return requestAnimationFrame(function(){n.style.display="none",requestAnimationFrame(function(){n.style.overflow="hidden",n.style.height="0",n.style.paddingBottom="0",n.style.visibility="unset",n.style.display="block",requestAnimationFrame(function(){m._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&&(m._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(){m._smartListenerBind(n,"transitionend",s),n.style.height="0",n.style.paddingBottom="0",e&&t.classList.remove(e)})}),n}),_defineProperty(this,"_formWrapperManager",function(){var e=m.stepper,t=m.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=m.options,t=m.getSteps,n=m.form,i=m.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=m.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=m.listenerStore,r=i.indexOf({el:e,event:t,fn:n});e.removeEventListener(t,n),i.splice(r,1)}),this.stepper=e,this.options=Object.assign({firstActive:0,linearStepsNavigation:!0,autoFocusInput:!0,showFeedbackPreloader:!0,autoFormCreation:!0,validationFunction:E.defaultValidationFunction,stepTitleNavigation:!0,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>'},t),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"),STEPOPEN:new Event("stepopen"),STEPCLOSE:new Event("stepclose"),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){e.style.position="fixed",e.style.display="block",e.style.top="-999999px",e.style.left="-999999px",e.style.height="auto",e.style.opacity="0",e.style.zIndex="-999999",e.style.pointerEvents="none";var t=e.offsetHeight;return E.removeMultipleProperties(e,"position display top left height opacity z-index pointer-events"),t}},{key:"defaultValidationFunction",value:function(e,t){for(var n=t.querySelectorAll("input, textarea, select"),i=0;i<n.length;i++)if(!n[i].checkValidity())return!1;return!0}},{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}),"function"!=typeof Object.assign&&Object.defineProperty(Object,"assign",{value:function(e,t){if(null==e)throw new TypeError("Cannot convert undefined or null to object");for(var n=Object(e),i=1;i<arguments.length;i++){var r=arguments[i];if(null!=r)for(var s in r)Object.prototype.hasOwnProperty.call(r,s)&&(n[s]=r[s])}return n},writable:!0,configurable:!0}); |
| { | ||
| "name": "materialize-stepper", | ||
| "version": "3.0.0-beta.1.1.1", | ||
| "version": "3.0.0", | ||
| "description": "A little plugin, inspired by MDL-Stepper, that implements a stepper to Materializecss framework.", | ||
@@ -5,0 +5,0 @@ "main": "dist/js/mstepper.js", |
@@ -17,11 +17,12 @@ /** Class representing an MStepper */ | ||
| this.stepper = elem; | ||
| this.options = { | ||
| firstActive: options.firstActive || 0, | ||
| linearStepsNavigation: options.linearStepsNavigation || true, | ||
| autoFocusInput: options.autoFocusInput || true, | ||
| showFeedbackPreloader: options.showFeedbackPreloader || true, | ||
| autoFormCreation: options.autoFormCreation || true, | ||
| validationFunction: options.validationFunction || null, | ||
| feedbackPreloader: options.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.options = Object.assign({ | ||
| firstActive: 0, | ||
| linearStepsNavigation: true, | ||
| autoFocusInput: true, | ||
| showFeedbackPreloader: true, | ||
| autoFormCreation: true, | ||
| validationFunction: MStepper.defaultValidationFunction, | ||
| stepTitleNavigation: true, | ||
| 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>' | ||
| }, options); | ||
| this.classes = { | ||
@@ -43,2 +44,4 @@ HORIZONTALSTEPPER: 'horizontal', | ||
| STEPCHANGE: new Event('stepchange'), | ||
| STEPOPEN: new Event('stepopen'), | ||
| STEPCLOSE: new Event('stepclose'), | ||
| NEXTSTEP: new Event('nextstep'), | ||
@@ -92,3 +95,4 @@ PREVSTEP: new Event('prevstep'), | ||
| bindOrUnbind(prevBtns, 'click', _prevStepProxy, false); | ||
| bindOrUnbind(stepsTitle, 'click', _stepTitleClickHandler); | ||
| // Adding suggested feature in #62 | ||
| if (options.stepTitleNavigation) bindOrUnbind(stepsTitle, 'click', _stepTitleClickHandler); | ||
| // Prevents the tabbing issue (https://github.com/Kinark/Materialize-stepper/issues/49) | ||
@@ -125,3 +129,3 @@ if (inputs.length) bindOrUnbind(inputs[inputs.length - 1], 'keydown', tabbingDisabler); | ||
| _openAction = (step, cb, closeActiveStep = true, skipAutoFocus) => { | ||
| const { _slideDown, classes, getSteps, _closeAction, stepper, options } = this; | ||
| const { _slideDown, classes, getSteps, _closeAction, stepper, events, options } = this; | ||
| // Gets the active step element | ||
@@ -141,3 +145,3 @@ const activeStep = getSteps().active.step; | ||
| // Beginning of disabled autoFocusInput function due to issues with scroll | ||
| // Beginning of autoFocusInput | ||
| if (!skipAutoFocus) { | ||
@@ -152,3 +156,3 @@ _slideDown(stepContent, classes.ACTIVESTEP, step, () => { | ||
| } | ||
| // Enf of disabled autoFocusInput function due to issues with scroll | ||
| // Enf of autoFocusInput | ||
@@ -161,3 +165,10 @@ } else { | ||
| // If it was requested to close the active step as well, does it (default=true) | ||
| if (activeStep && closeActiveStep) _closeAction(activeStep); | ||
| if (activeStep && closeActiveStep) { | ||
| _closeAction(activeStep); | ||
| // We are changing steps, so dispatch the change event. | ||
| stepper.dispatchEvent(events.STEPCHANGE); | ||
| } | ||
| // Dispatch OPEN Event | ||
| stepper.dispatchEvent(events.STEPOPEN); | ||
| return step; | ||
@@ -173,3 +184,3 @@ } | ||
| _closeAction = (step, cb) => { | ||
| const { _slideUp, classes, stepper, _smartListenerUnbind, _smartListenerBind } = this; | ||
| const { _slideUp, classes, stepper, events, _smartListenerUnbind, _smartListenerBind } = this; | ||
| // Gets the step content div inside the step | ||
@@ -202,2 +213,4 @@ const stepContent = step.getElementsByClassName(classes.STEPCONTENT)[0]; | ||
| } | ||
| // Dispatch Event | ||
| stepper.dispatchEvent(events.STEPCLOSE); | ||
| return step; | ||
@@ -274,4 +287,3 @@ } | ||
| // Dispatches the events | ||
| stepper.dispatchEvent(events.STEPCHANGE); | ||
| // Dispatches the event | ||
| stepper.dispatchEvent(events.NEXTSTEP); | ||
@@ -297,4 +309,3 @@ } | ||
| // Dispatches the events | ||
| stepper.dispatchEvent(events.STEPCHANGE); | ||
| // Dispatches the event | ||
| stepper.dispatchEvent(events.PREVSTEP); | ||
@@ -310,3 +321,3 @@ } | ||
| openStep = (index, cb) => { | ||
| const { getSteps, _openAction, stepper, events, destroyFeedback } = this; | ||
| const { getSteps, _openAction, destroyFeedback } = this; | ||
| const stepToOpen = getSteps().steps[index]; | ||
@@ -318,5 +329,2 @@ | ||
| _openAction(stepToOpen, cb); | ||
| // Dispatches the events | ||
| stepper.dispatchEvent(events.STEPCHANGE); | ||
| } | ||
@@ -421,5 +429,9 @@ | ||
| const { nodesIterator } = MStepper; | ||
| const currentSteps = getSteps(); | ||
| const nextStep = currentSteps.steps[index]; | ||
| const currentSteps = getSteps().steps; | ||
| // Checks if the steps will be added at the end or in the middle of the stepper | ||
| const before = currentSteps.length > index; | ||
| // Based on the previous check, sets the reference step | ||
| const referenceStep = before ? currentSteps[index] : currentSteps[currentSteps.length - 1]; | ||
| // Stores a let variable to return the right element after the activation | ||
@@ -430,6 +442,6 @@ let returnableElement = null; | ||
| // The element is in string format | ||
| // Insert it with the insertAdjacentHTML function | ||
| nextStep.insertAdjacentHTML('beforeBegin', elements); | ||
| // Insert it with the insertAdjacentHTML function (and trim the string to avoid errors) | ||
| referenceStep.insertAdjacentHTML(before ? 'beforeBegin' : 'afterEnd', elements.trim()); | ||
| // Defines the inserted element as the returnableElement | ||
| returnableElement = nextStep.previousSibling; | ||
| returnableElement = before ? referenceStep.previousSibling : referenceStep.nextSibling; | ||
| // Activates (slideDown) the step | ||
@@ -443,13 +455,17 @@ _slideDown(returnableElement); | ||
| elements.forEach(element => { | ||
| // Inserts each element with the insertAdjacentHTML function | ||
| nextStep.insertAdjacentHTML('beforeBegin', element); | ||
| // Inserts each element with the insertAdjacentHTML function (and trim the string to avoid errors) | ||
| referenceStep.insertAdjacentHTML(before ? 'beforeBegin' : 'afterEnd', element.trim()); | ||
| // Gets the new added element | ||
| const addedStep = before ? referenceStep.previousSibling : referenceStep.nextSibling; | ||
| // Adds each element to the returnableElement array | ||
| returnableElement.push(nextStep.previousSibling); | ||
| returnableElement.push(addedStep); | ||
| // Activates (slideDown) each element | ||
| _slideDown(nextStep.previousSibling); | ||
| _slideDown(addedStep); | ||
| }); | ||
| } else if (elements instanceof Element || elements instanceof HTMLCollection || elements instanceof NodeList) { | ||
| // The element is an HTMLElement or an HTMLCollection | ||
| // Insert it/them with the insertBefore function and sets the returnableElement | ||
| returnableElement = stepper.insertBefore(elements, nextStep); | ||
| // Sets the rigth function to add the new steps | ||
| const rigthFunction = before ? stepper.insertBefore : stepper.appendChild; | ||
| // Insert it/them with the rigthFunction and sets the returnableElement | ||
| returnableElement = rigthFunction(elements, referenceStep); | ||
| // If it's and HTMLElement, activates (slideDown) it, if it's an HTMLCollection, activates (slideDown) each of them | ||
@@ -519,18 +535,22 @@ if (elements instanceof Element) _slideDown(returnableElement); else nodesIterator(returnableElement, appendedElement => _slideDown(appendedElement)); | ||
| requestAnimationFrame(() => { | ||
| // Prepare the element for animation | ||
| element.style.overflow = 'hidden'; | ||
| element.style.paddingBottom = '0'; | ||
| element.style.height = '0'; | ||
| element.style.visibility = 'unset'; | ||
| element.style.display = 'block'; | ||
| // Calls another animation frame to wait for the previous changes to take effect | ||
| element.style.display = 'none'; | ||
| requestAnimationFrame(() => { | ||
| // Binds the "conclusion" function to the event 'transitionend' | ||
| this._smartListenerBind(element, 'transitionend', endSlideDown); | ||
| // Sets the final height to the element to trigger the transition | ||
| element.style.height = height; | ||
| // Removes the 'padding-bottom: 0' setted previously to trigger it too | ||
| element.style.removeProperty('padding-bottom'); | ||
| // If a className for the slided element is required, add it | ||
| if (className) classElement.classList.add(className); | ||
| // Prepare the element for animation | ||
| element.style.overflow = 'hidden'; | ||
| element.style.height = '0'; | ||
| element.style.paddingBottom = '0'; | ||
| element.style.visibility = 'unset'; | ||
| element.style.display = 'block'; | ||
| // Calls another animation frame to wait for the previous changes to take effect | ||
| requestAnimationFrame(() => { | ||
| // Binds the "conclusion" function to the event 'transitionend' | ||
| this._smartListenerBind(element, 'transitionend', endSlideDown); | ||
| // Sets the final height to the element to trigger the transition | ||
| element.style.height = height; | ||
| // Removes the 'padding-bottom: 0' setted previously to trigger it too | ||
| element.style.removeProperty('padding-bottom'); | ||
| // element.style.paddingBottom = '0'; | ||
| // If a className for the slided element is required, add it | ||
| if (className) classElement.classList.add(className); | ||
| }); | ||
| }); | ||
@@ -743,25 +763,15 @@ }); | ||
| static getUnknownHeight(el) { | ||
| // Clones the element to insert it invisible | ||
| const clone = el.cloneNode(true); | ||
| // Defines some styles for it to be 100% invisible and unnoticeable | ||
| clone.style.position = 'fixed'; | ||
| clone.style.display = 'block'; | ||
| clone.style.top = '-999999px'; | ||
| clone.style.left = '-999999px'; | ||
| clone.style.height = 'auto'; | ||
| clone.style.opacity = '0'; | ||
| clone.style.zIndex = '-999999'; | ||
| clone.style.pointerEvents = 'none'; | ||
| // Rename the radio buttons in the cloned node as only 1 radio button is allowed to be selected with the same name in the DOM. | ||
| const radios = clone.querySelectorAll('[type="radio"]'); | ||
| radios.forEach(radio => { | ||
| radio.name = "__" + radio.name + "__"; | ||
| }); | ||
| // Inserts it before the hidden element | ||
| const insertedElement = el.parentNode.insertBefore(clone, el); | ||
| // Spawns the hidden element in stealth mode | ||
| el.style.position = 'fixed'; | ||
| el.style.display = 'block'; | ||
| el.style.top = '-999999px'; | ||
| el.style.left = '-999999px'; | ||
| el.style.height = 'auto'; | ||
| el.style.opacity = '0'; | ||
| el.style.zIndex = '-999999'; | ||
| el.style.pointerEvents = 'none'; | ||
| // Gets it's height | ||
| const height = insertedElement.offsetHeight; | ||
| // Removes it | ||
| el.parentNode.removeChild(insertedElement); | ||
| // Returns the height (without 'px') | ||
| const height = el.offsetHeight; | ||
| // Removes the stealth mode and hides the element again | ||
| MStepper.removeMultipleProperties(el, 'position display top left height opacity z-index pointer-events'); | ||
| return height; | ||
@@ -771,2 +781,12 @@ } | ||
| /** | ||
| * Default validation function. | ||
| * @returns {boolean} | ||
| */ | ||
| static defaultValidationFunction(stepperForm, activeStepContent) { | ||
| var inputs = activeStepContent.querySelectorAll('input, textarea, select'); | ||
| for (let i = 0; i < inputs.length; i++) if (!inputs[i].checkValidity()) return false; | ||
| return true; | ||
| } | ||
| /** | ||
| * Util bindable tabbing disabler. | ||
@@ -773,0 +793,0 @@ * @returns {void} |
@@ -14,1 +14,33 @@ if (window.Element && !Element.prototype.closest) { | ||
| } | ||
| // Polyfill by mozilla | ||
| // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign | ||
| if (typeof Object.assign != 'function') { | ||
| // Must be writable: true, enumerable: false, configurable: true | ||
| Object.defineProperty(Object, "assign", { | ||
| value: function assign(target, varArgs) { // .length of function is 2 | ||
| 'use strict'; | ||
| if (target == null) { // TypeError if undefined or null | ||
| throw new TypeError('Cannot convert undefined or null to object'); | ||
| } | ||
| var to = Object(target); | ||
| for (var index = 1; index < arguments.length; index++) { | ||
| var nextSource = arguments[index]; | ||
| if (nextSource != null) { // Skip over if undefined or null | ||
| for (var nextKey in nextSource) { | ||
| // Avoid bugs when hasOwnProperty is shadowed | ||
| if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { | ||
| to[nextKey] = nextSource[nextKey]; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return to; | ||
| }, | ||
| writable: true, | ||
| configurable: true | ||
| }); | ||
| } |
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
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by4.28%
129951
- Lines of code
- increased by5.59%
1795
- Number of low quality alerts
- decreased by-50%
1
No dependency changes