materialize-stepper - npm Package Compare versions

Comparing version 3.0.0-beta.1 to 3.0.0-beta.1.0.1

CHANGELOG.md

 Date format: d/m/y
 
-### 3.0.0-beta.1 (?/?/?)
+### 3.0.0-beta.1.0.1 (13/11/18)
+* Fixed the incorrect utilization of forEach in some cases (like in HTMLCollections, for example);
+* Fixed binding of added/removed steps through activate/deactivateStep functions;
+* Fixed the tabbing issue on horizontal steppers (https://github.com/Kinark/Materialize-stepper/issues/49);
+* Fixed the submitting, now it calls the formValidation (if any) before submitting the form;
+* Fixed some other code issues.
+
+### 3.0.0-beta.1 (05/11/18)
 In this version a master refactoring was made. Total modularization of CSS (with SASS), refacoring of all the javascript,
@@ -5,0 +12,0 @@ * Total modularization and partial refactoring of CSS:

dist/js/mstepper.js

 /**
  * Materialize Stepper - A little plugin that implements a stepper to Materializecss framework.
- * @version v3.0.0-beta.1
+ * @version v3.0.0-beta.1.0.1
  * @author Igor Marcossi (Kinark) <[e-mail]>.
@@ -49,21 +49,54 @@ * @link https://github.com/Kinark/Materialize-stepper
           classes = _this.classes,
+          _methodsBindingManager = _this._methodsBindingManager,
+          _openAction = _this._openAction; // Calls the _formWrapperManager
+
+      _this.form = _formWrapperManager(); // Opens the first step (or other specified in the constructor)
+
+      _openAction(getSteps().steps[options.firstActive]); // Gathers the steps and send them to the methodsBinder
+
+
+      _methodsBindingManager(stepper.querySelectorAll(".".concat(classes.STEP)));
+    });
+
+    _defineProperty(this, "_methodsBindingManager", function (steps) {
+      var unbind = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var classes = _this.classes,
+          _formSubmitHandler = _this._formSubmitHandler,
           _nextStepProxy = _this._nextStepProxy,
           _prevStepProxy = _this._prevStepProxy,
           _stepTitleClickHandler = _this._stepTitleClickHandler,
-          _openAction = _this._openAction;
-      var addMultipleEventListeners = MStepper.addMultipleEventListeners; // Calls the _formWrapperManager
+          form = _this.form,
+          options = _this.options;
+      var addMultipleEventListeners = MStepper.addMultipleEventListeners,
+          removeMultipleEventListeners = MStepper.removeMultipleEventListeners,
+          nodesIterator = MStepper.nodesIterator,
+          tabbingDisabler = MStepper.tabbingDisabler;
+      var bindOrUnbind = unbind ? removeMultipleEventListeners : addMultipleEventListeners; // Sets the binding function
 
-      _this.form = _formWrapperManager(); // Opens the first step (or other specified in the constructor)
+      var bindEvents = function bindEvents(step) {
+        var nextBtns = step.getElementsByClassName(classes.NEXTSTEPBTN);
+        var prevBtns = step.getElementsByClassName(classes.PREVSTEPBTN);
+        var stepsTitle = step.getElementsByClassName(classes.STEPTITLE);
+        var inputs = step.querySelectorAll('input, select, button');
+        var submitButtons = step.querySelectorAll('button[type="submit"]');
+        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)
 
-      _openAction(getSteps().steps[options.firstActive]); // Gathers some divs and binds the right methods to them
+        if (inputs.length) bindOrUnbind(inputs[inputs.length - 1], 'keydown', tabbingDisabler); // Binds to the submit button an internal handler to manage validation
 
+        if (submitButtons && form && options.validationFunction) bindOrUnbind(submitButtons, 'keydown', _formSubmitHandler);
+        return step;
+      }; // Calls the binder function in the right way (if it's a unique step or multiple ones)
 
-      var nextBtns = stepper.getElementsByClassName(classes.NEXTSTEPBTN);
-      var prevBtns = stepper.getElementsByClassName(classes.PREVSTEPBTN);
-      var stepsTitles = stepper.getElementsByClassName(classes.STEPTITLE);
-      addMultipleEventListeners(nextBtns, 'click', _nextStepProxy, false);
-      addMultipleEventListeners(prevBtns, 'click', _prevStepProxy, false);
-      addMultipleEventListeners(stepsTitles, 'click', _stepTitleClickHandler);
+
+      if (steps instanceof Element) bindEvents(steps);else nodesIterator(steps, function (step) {
+        return bindEvents(step);
+      });
     });
 
+    _defineProperty(this, "_formSubmitHandler", function (e) {
+      if (!_this._validationFunctionCaller()) e.preventDefault();
+    });
+
     _defineProperty(this, "_openAction", function (step, cb) {
@@ -194,3 +227,4 @@ var closeActiveStep = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
           events = _this.events,
-          destroyFeedback = _this.destroyFeedback;
+          destroyFeedback = _this.destroyFeedback,
+          _validationFunctionCaller = _this._validationFunctionCaller;
       var showFeedbackPreloader = options.showFeedbackPreloader,
@@ -211,6 +245,6 @@ validationFunction = options.validationFunction;
 
-        window[feedbackFunction](destroyFeedback, form, active.step.querySelector('.step-content')); // Returns to prevent the nextStep method from being called
+        window[feedbackFunction](destroyFeedback, form, active.step.querySelector(".".concat(classes.STEPCONTENT))); // Returns to prevent the nextStep method from being called
 
         return;
-      } else if (validationFunction && !validationFunction(form, active.step.querySelector('.step-content'))) {
+      } else if (validationFunction && _validationFunctionCaller()) {
         // There's a validation function and no feedback function
@@ -345,3 +379,5 @@ // The validation function was already called in the if statement and it retuerned false, so returns the calling of the wrongStep method
           _slideDown = _this._slideDown,
-          stepper = _this.stepper;
+          stepper = _this.stepper,
+          _methodsBindingManager = _this._methodsBindingManager;
+      var nodesIterator = MStepper.nodesIterator;
       var currentSteps = getSteps();
@@ -373,3 +409,3 @@ var nextStep = currentSteps.steps[index]; // Stores a let variable to return the right element after the activation
         });
-      } else if (elements instanceof Element || elements instanceof HTMLCollection) {
+      } else if (elements instanceof Element || elements instanceof HTMLCollection || elements instanceof NodeList) {
         // The element is an HTMLElement or an HTMLCollection
@@ -379,8 +415,10 @@ // Insert it/them with the insertBefore function and sets the returnableElement
 
-        if (elements instanceof Element) _slideDown(returnableElement);else returnableElement.forEach(function (appendedElement) {
+        if (elements instanceof Element) _slideDown(returnableElement);else nodesIterator(returnableElement, function (appendedElement) {
           return _slideDown(appendedElement);
         });
-      } // Returns the added/activated elements
+      } // Do the bidings to the new step(s)
 
 
+      if (returnableElement) _methodsBindingManager(returnableElement); // Returns the added/activated elements
+
       return returnableElement;
@@ -391,12 +429,22 @@ });
       var _slideUp = _this._slideUp,
-          stepper = _this.stepper; // Sets a function to group the orders to deactivate and remove the steps
+          stepper = _this.stepper,
+          _methodsBindingManager = _this._methodsBindingManager;
+      var nodesIterator = MStepper.nodesIterator; // Sets a function to group the orders to deactivate and remove the steps
 
       var doIt = function doIt(element) {
-        if (stepper.contains(elements)) _slideUp(element, undefined, undefined, function () {
-          return stepper.removeChild(element);
-        });
+        // Checks if the step really exists in the stepper
+        if (stepper.contains(elements)) {
+          // Yeah, it does exist
+          // Unbinds the listeners previously binded to the step
+          _methodsBindingManager(element); // Slides up and removes afterwards
+
+
+          _slideUp(element, undefined, undefined, function () {
+            return stepper.removeChild(element);
+          });
+        }
       }; // Checks if the elements is an HTMLElement or an HTMLCollection and calls the function doIt in the right way
 
 
-      if (elements instanceof Element) doIt(elements);else if (elements instanceof HTMLCollection) elements.forEach(function (element) {
+      if (elements instanceof Element) doIt(elements);else if (elements instanceof HTMLCollection || elements instanceof NodeList) nodesIterator(elements, function (element) {
         return doIt(element);
@@ -528,2 +576,10 @@ }); // Returns the step(s), in case you want to activate it/them again.
 
+    _defineProperty(this, "_validationFunctionCaller", function () {
+      var options = _this.options,
+          getSteps = _this.getSteps,
+          form = _this.form,
+          classes = _this.classes;
+      return options.validationFunction(form, getSteps().active.step.querySelector(".".concat(classes.STEPCONTENT)));
+    });
+
     _defineProperty(this, "_smartListenerBind", function (el, event, fn) {
@@ -629,3 +685,3 @@ var similar = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
      * Util function to simplify the binding of functions to nodelists.
-     * @param {HTMLElement} elements - Elements to bind a listener to.
+     * @param {(HTMLCollection|NodeList|HTMLElement)} elements - Elements to bind a listener to.
      * @param {string} event - Event name, like 'click'.
@@ -637,2 +693,3 @@ * @param {function} fn - Function to bind to elements.
       var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+      if (elements instanceof Element) return elements.addEventListener(event, fn, passive);
 
@@ -645,3 +702,3 @@ for (var i = 0, len = elements.length; i < len; i++) {
      * Util function to simplify the unbinding of functions to nodelists.
-     * @param {HTMLElement} elements - Elements from which the listeners will be unbind.
+     * @param {(HTMLCollection|NodeList|HTMLElement)} elements - Elements from which the listeners will be unbind.
      * @param {string} event - Event name, like 'click'.
@@ -656,2 +713,3 @@ * @param {function} fn - Function to unbind from elements.
       var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+      if (elements instanceof Element) return elements.removeEventListener(event, fn, passive);
 
@@ -678,2 +736,18 @@ for (var i = 0, len = elements.length; i < len; i++) {
     /**
+     * Util function to itarate through HTMLCollections and NodeList using the same command.
+     * @param {(HTMLCollection | NodeList)} nodes - List of elements to loop through.
+     * @param {function} fn - Function to call for each element inside the nodes list.
+     * @returns {(HTMLCollection | NodeList)} - The original nodes to enable chain functions
+     */
+
+  }, {
+    key: "nodesIterator",
+    value: function nodesIterator(nodes, fn) {
+      for (var i = 0; i < nodes.length; i++) {
+        fn(nodes[i]);
+      }
+
+      return nodes;
+    }
+    /**
      * Util function to find the height of a hidden DOM object.
@@ -707,2 +781,12 @@ * @param {HTMLElement} el - Hidden HTML element (node).
     }
+    /**
+     * Util bindable tabbing disabler.
+     * @returns {void}
+     */
+
+  }, {
+    key: "tabbingDisabler",
+    value: function tabbingDisabler(e) {
+      if (e.keyCode === 9) e.preventDefault();
+    }
   }]);
@@ -709,0 +793,0 @@

dist/js/mstepper.min.js

 /**
  * Materialize Stepper - A little plugin that implements a stepper to Materializecss framework.
- * @version v3.0.0-beta.1
+ * @version v3.0.0-beta.1.0.1
  * @author Igor Marcossi (Kinark) <[e-mail]>.
@@ -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 f(e){var P=this,t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,f),_defineProperty(this,"_init",function(){var e=P._formWrapperManager,t=P.getSteps,n=P.options,i=P.stepper,s=P.classes,r=P._nextStepProxy,o=P._prevStepProxy,a=P._stepTitleClickHandler,l=P._openAction,p=f.addMultipleEventListeners;P.form=e(),l(t().steps[n.firstActive]);var c=i.getElementsByClassName(s.NEXTSTEPBTN),d=i.getElementsByClassName(s.PREVSTEPBTN),v=i.getElementsByClassName(s.STEPTITLE);p(c,"click",r,!1),p(d,"click",o,!1),p(v,"click",a)}),_defineProperty(this,"_openAction",function(e,t){var n=!(2<arguments.length&&void 0!==arguments[2])||arguments[2],i=P._slideDown,s=P.classes,r=P.getSteps,o=P._closeAction,a=P.stepper,l=(P.options,r().active.step);if(l&&l.isSameNode(e))return e;var p=e.getElementsByClassName(s.STEPCONTENT)[0];return e.classList.remove(s.DONESTEP),window.innerWidth<993||!a.classList.contains(s.HORIZONTALSTEPPER)?i(p,s.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,s=P.stepper,r=P._smartListenerUnbind,o=P._smartListenerBind,a=e.getElementsByClassName(i.STEPCONTENT)[0];if(window.innerWidth<993||!s.classList.contains(i.HORIZONTALSTEPPER))t(a,i.ACTIVESTEP,e,n);else{if(n){o(a,"transitionend",function e(t){"left"===t.propertyName&&(r(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,s=P.prevStep,r=P.stepper,o=P._openAction,a=t(),l=a.steps,p=a.active,c=e.target.closest(".".concat(n.STEP));if(r.classList.contains(n.LINEAR)){var d=Array.prototype.indexOf.call(l,c);d==p.index+1?i():d==p.index-1&&s()}else o(c)}),_defineProperty(this,"nextStep",function(e,t,n){n&&n.preventDefault&&n.preventDefault();var i=P.options,s=P.getSteps,r=P.activateFeedback,o=P.form,a=P.wrongStep,l=P.classes,p=P._openAction,c=P.stepper,d=P.events,v=P.destroyFeedback,f=i.showFeedbackPreloader,E=i.validationFunction,u=s().active,h=s().steps[u.index+1],y=n&&n.target?n.target.dataset.feedback:null;return y&&!t?(f&&!u.step.dataset.nopreloader&&r(),void window[y](v,o,u.step.querySelector(".step-content"))):E&&!E(o,u.step.querySelector(".step-content"))?a():(u.step.classList.add(l.DONESTEP),p(h,e),c.dispatchEvent(d.STEPCHANGE),void c.dispatchEvent(d.NEXTSTEP))}),_defineProperty(this,"prevStep",function(e,t){t&&t.preventDefault&&t.preventDefault();var n=P.getSteps,i=P._openAction,s=P.stepper,r=P.events,o=P.destroyFeedback,a=n().active,l=n().steps[a.index+-1];o(),i(l,e),s.dispatchEvent(r.STEPCHANGE),s.dispatchEvent(r.PREVSTEP)}),_defineProperty(this,"openStep",function(e,t){var n=P.getSteps,i=P._openAction,s=P.stepper,r=P.events,o=P.destroyFeedback,a=n().steps[e];o(),i(a,t),s.dispatchEvent(r.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 s=t().active.step.querySelectorAll("input, select");f.addMultipleEventListeners(s,"input",function e(){t().active.step.classList.remove(n.WRONGSTEP),f.removeMultipleEventListeners(s,"input",e)}),e.dispatchEvent(i.STEPERROR)}),_defineProperty(this,"activateFeedback",function(){var e=P.getSteps,t=P.classes,n=P.options,i=P.stepper,s=P.events,r=e().active.step;r.classList.add(t.FEEDBACKINGSTEP),r.getElementsByClassName(t.STEPCONTENT)[0].insertAdjacentHTML("afterBegin",'<div class="'.concat(t.PRELOADERWRAPPER,'">').concat(n.feedbackPreloader,"</div>")),i.dispatchEvent(s.FEEDBACKING)}),_defineProperty(this,"destroyFeedback",function(e){var t=P.getSteps,n=P.classes,i=P.nextStep,s=P.stepper,r=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),s.dispatchEvent(r.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,s=P.stepper,r=n().steps[t],o=null;return"string"==typeof e?(r.insertAdjacentHTML("beforeBegin",e),o=r.previousSibling,i(o)):Array.isArray(e)?(o=[],e.forEach(function(e){r.insertAdjacentHTML("beforeBegin",e),o.push(r.previousSibling),i(r.previousSibling)})):(e instanceof Element||e instanceof HTMLCollection)&&(o=s.insertBefore(e,r),e instanceof Element?i(o):o.forEach(function(e){return i(e)})),o}),_defineProperty(this,"deactivateStep",function(t){var n=P._slideUp,i=P.stepper,s=function(e){i.contains(t)&&n(e,void 0,void 0,function(){return i.removeChild(e)})};return t instanceof Element?s(t):t instanceof HTMLCollection&&t.forEach(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,s="".concat(f.getUnknownHeight(n),"px"),r=function e(t){"height"===t.propertyName&&(P._smartListenerUnbind(n,"transitionend",e),f.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",r),n.style.height=s,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,s="".concat(n.offsetHeight,"px"),r=function e(t){"height"===t.propertyName&&(P._smartListenerUnbind(n,"transitionend",e),n.style.display="none",f.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=s,requestAnimationFrame(function(){P._smartListenerBind(n,"transitionend",r),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||{},s=i.method||"GET",r=i.action||"?",o=document.createElement("form");return o.method=s,o.action=r,e.parentNode.insertBefore(o,e),o.appendChild(e),o}),_defineProperty(this,"_smartListenerBind",function(e,t,n){var i=!(3<arguments.length&&void 0!==arguments[3])||arguments[3],s=4<arguments.length&&void 0!==arguments[4]&&arguments[4],r=P.listenerStore,o={el:e,event:t,fn:n};if(i)for(var a=0;a<r.length;a++){var l=r[a];l.event===t&&l.el.isSameNode(e)&&l.el.removeEventListener(l.event,l.fn),s&&l.fn()}else{var p=r.indexOf(o);if(-1!==c){var c=r[p];c.el.removeEventListener(c.event,c.fn),s&&c[p].fn()}}e.addEventListener(t,n),r.push(o)}),_defineProperty(this,"_smartListenerUnbind",function(e,t,n){var i=P.listenerStore,s=i.indexOf({el:e,event:t,fn:n});e.removeEventListener(t,n),i.splice(s,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(f,null,[{key:"addMultipleEventListeners",value:function(e,t,n){for(var i=3<arguments.length&&void 0!==arguments[3]&&arguments[3],s=0,r=e.length;s<r;s++)e[s].addEventListener(t,n,i)}},{key:"removeMultipleEventListeners",value:function(e,t,n){for(var i=3<arguments.length&&void 0!==arguments[3]&&arguments[3],s=0,r=e.length;s<r;s++)e[s].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:"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";var n=e.parentNode.insertBefore(t,e),i=n.offsetHeight;return e.parentNode.removeChild(n),i}}]),f}();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]),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, 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){m._validationFunctionCaller()||e.preventDefault()}),_defineProperty(this,"_openAction",function(e,t){var n=!(2<arguments.length&&void 0!==arguments[2])||arguments[2],i=m._slideDown,r=m.classes,s=m.getSteps,o=m._closeAction,a=m.stepper,l=(m.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=m._slideUp,i=m.classes,r=m.stepper,s=m._smartListenerUnbind,o=m._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 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,h=r().active,y=r().steps[h.index+1],P=n&&n.target?n.target.dataset.feedback:null;return P&&!t?(u&&!h.step.dataset.nopreloader&&s(),void window[P](v,o,h.step.querySelector(".".concat(l.STEPCONTENT)))):E&&f()?a():(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=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.STEPCHANGE),r.dispatchEvent(s.PREVSTEP)}),_defineProperty(this,"openStep",function(e,t){var n=m.getSteps,i=m._openAction,r=m.stepper,s=m.events,o=m.destroyFeedback,a=n().steps[e];o(),i(a,t),r.dispatchEvent(s.STEPCHANGE)}),_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");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[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=m._slideUp,i=m.stepper,r=m._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&&(m._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(){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={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";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});

package.json

 {
    "name": "materialize-stepper",
-   "version": "3.0.0-beta.1",
+   "version": "3.0.0-beta.1.0.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",

README.md

@@ -16,9 +16,9 @@ ## IMPORTANT!
 Demo: https://kinark.github.io/Materialize-stepper/  
-Codepen Playground: http://codepen.io/Kinark/pen/VKrjJp
+Codepen Playground: https://codepen.io/Kinark/pen/VKrjJp
 
-## [Documentation](https://github.com/Kinark/Materialize-stepper)
+## [Documentation](https://kinark.github.io/Materialize-stepper/)
 
 The documentation once belonged to this readme, before the force's sleep. However, it's awaken once more, in the gh-pages this time.
 
-[Go check it out!](https://github.com/Kinark/Materialize-stepper)
+[Go check it out!](https://kinark.github.io/Materialize-stepper/)
 
@@ -34,4 +34,2 @@
 
-* "prevStep()" won't close the feedback loading screen.
-
 ## Changelog
@@ -59,5 +57,4 @@
 
-
 <p align="center">
-<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RZYQNQ394RE3S"><img src="https://coperni.design/files/coffe.svg" width="48" ></a>
+<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xlick&hosted_button_id=RZYQNQ394RE3S"><img src="https://coperni.design/files/coffe.svg" width="48" ></a>
 </p>
@@ -70,1 +67,2 @@ <p align="center">
 </p>
+<p align="center">Bitcoin addres:<br />1AE21GBjtQf5f7X3f1T2qdckgqcAhzxPdz</p>

src/js/mstepper.js

@@ -61,4 +61,3 @@ /** Class representing an MStepper */
    _init = () => {
-      const { _formWrapperManager, getSteps, options, stepper, classes, _nextStepProxy, _prevStepProxy, _stepTitleClickHandler, _openAction } = this;
-      const { addMultipleEventListeners } = MStepper;
+      const { _formWrapperManager, getSteps, options, stepper, classes, _methodsBindingManager, _openAction } = this;
       // Calls the _formWrapperManager
@@ -68,12 +67,44 @@ this.form = _formWrapperManager();
       _openAction(getSteps().steps[options.firstActive]);
-      // Gathers some divs and binds the right methods to them
-      const nextBtns = stepper.getElementsByClassName(classes.NEXTSTEPBTN);
-      const prevBtns = stepper.getElementsByClassName(classes.PREVSTEPBTN);
-      const stepsTitles = stepper.getElementsByClassName(classes.STEPTITLE);
-      addMultipleEventListeners(nextBtns, 'click', _nextStepProxy, false);
-      addMultipleEventListeners(prevBtns, 'click', _prevStepProxy, false);
-      addMultipleEventListeners(stepsTitles, 'click', _stepTitleClickHandler);
+      // Gathers the steps and send them to the methodsBinder
+      _methodsBindingManager(stepper.querySelectorAll(`.${classes.STEP}`));
    }
 
    /**
+    * A private method that manages the binding of the methods into the correct elements inside the stepper.
+    * @param {(HTMLElement|HTMLCollection|NodeList)} steps - The steps to find the bindable elements.
+    * @param {boolean} [unbind=false] - Should it unbind instead of bind?
+    * @returns {void}
+    */
+   _methodsBindingManager = (steps, unbind = false) => {
+      const { classes, _formSubmitHandler, _nextStepProxy, _prevStepProxy, _stepTitleClickHandler, form, options } = this;
+      const { addMultipleEventListeners, removeMultipleEventListeners, nodesIterator, tabbingDisabler } = MStepper;
+      const bindOrUnbind = unbind ? removeMultipleEventListeners : addMultipleEventListeners;
+
+      // Sets the binding function
+      const bindEvents = step => {
+         const nextBtns = step.getElementsByClassName(classes.NEXTSTEPBTN);
+         const prevBtns = step.getElementsByClassName(classes.PREVSTEPBTN);
+         const stepsTitle = step.getElementsByClassName(classes.STEPTITLE);
+         const inputs = step.querySelectorAll('input, select, button');
+         const submitButtons = step.querySelectorAll('button[type="submit"]');
+         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)
+         if (inputs.length) bindOrUnbind(inputs[inputs.length - 1], 'keydown', tabbingDisabler);
+         // Binds to the submit button an internal handler to manage validation
+         if (submitButtons && form && options.validationFunction) bindOrUnbind(submitButtons, 'keydown', _formSubmitHandler);
+         return step;
+      };
+      // Calls the binder function in the right way (if it's a unique step or multiple ones)
+      if (steps instanceof Element) bindEvents(steps); else nodesIterator(steps, step => bindEvents(step));
+   }
+
+   /**
+    * A private method that manages submit of the form (sends to validationFunction before).
+    * @returns {void}
+    */
+   _formSubmitHandler = e => { if (!this._validationFunctionCaller()) e.preventDefault(); }
+
+   /**
     * A private method to handle the opening of the steps.
@@ -195,3 +226,3 @@ * @param {HTMLElement} step - Step which will be opened.
       if (e && e.preventDefault) e.preventDefault();
-      const { options, getSteps, activateFeedback, form, wrongStep, classes, _openAction, stepper, events, destroyFeedback } = this;
+      const { options, getSteps, activateFeedback, form, wrongStep, classes, _openAction, stepper, events, destroyFeedback, _validationFunctionCaller } = this;
       const { showFeedbackPreloader, validationFunction } = options;
@@ -210,6 +241,6 @@ const { active } = getSteps();
          // Calls the feedbackFunction
-         window[feedbackFunction](destroyFeedback, form, active.step.querySelector('.step-content'));
+         window[feedbackFunction](destroyFeedback, form, active.step.querySelector(`.${classes.STEPCONTENT}`));
          // Returns to prevent the nextStep method from being called
          return;
-      } else if (validationFunction && !validationFunction(form, active.step.querySelector('.step-content'))) {
+      } else if (validationFunction && _validationFunctionCaller()) {
          // There's a validation function and no feedback function
@@ -361,8 +392,9 @@ // The validation function was already called in the if statement and it retuerned false, so returns the calling of the wrongStep method
     * Add and activate one or more steps.
-    * @param {(string|string[]|HTMLElement|HTMLCollection|)} elements - The step/steps to be added.
+    * @param {(string|string[]|HTMLElement|HTMLCollection|NodeList)} elements - The step/steps to be added.
     * @param {number} index - The index in which the steps will be added (zero based, so the first one is 0, not 1).
-    * @returns {HTMLElement|HTMLCollection} - The new added/activated step/steps.
+    * @returns {(HTMLElement|HTMLCollection|NodeList)} - The new added/activated step/steps.
     */
    activateStep = (elements, index) => {
-      const { getSteps, _slideDown, stepper } = this;
+      const { getSteps, _slideDown, stepper, _methodsBindingManager } = this;
+      const { nodesIterator } = MStepper;
       const currentSteps = getSteps();
@@ -395,3 +427,3 @@ const nextStep = currentSteps.steps[index];
          });
-      } else if (elements instanceof Element || elements instanceof HTMLCollection) {
+      } else if (elements instanceof Element || elements instanceof HTMLCollection || elements instanceof NodeList) {
          // The element is an HTMLElement or an HTMLCollection
@@ -401,4 +433,6 @@ // Insert it/them with the insertBefore function and sets the returnableElement
          // 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 returnableElement.forEach(appendedElement => _slideDown(appendedElement));
+         if (elements instanceof Element) _slideDown(returnableElement); else nodesIterator(returnableElement, appendedElement => _slideDown(appendedElement));
       }
+      // Do the bidings to the new step(s)
+      if (returnableElement) _methodsBindingManager(returnableElement);
       // Returns the added/activated elements
@@ -410,12 +444,25 @@ return returnableElement;
     * Deactivate and remove one or more steps.
-    * @param {(HTMLElement|HTMLCollection)} elements - The step/steps to be removed.
-    * @returns {HTMLElement|HTMLCollection} - The step(s) that has been deactivated, in case you want to activate it again.
+    * @param {(HTMLElement|HTMLCollection|NodeList)} elements - The step/steps to be removed.
+    * @returns {(HTMLElement|HTMLCollection|NodeList)} - The step(s) that has been deactivated, in case you want to activate it again.
     */
    deactivateStep = elements => {
-      const { _slideUp, stepper } = this;
+      const { _slideUp, stepper, _methodsBindingManager } = this;
+      const { nodesIterator } = MStepper;
 
       // Sets a function to group the orders to deactivate and remove the steps
-      const doIt = element => { if (stepper.contains(elements)) _slideUp(element, undefined, undefined, () => stepper.removeChild(element)); };
+      const doIt = element => {
+         // Checks if the step really exists in the stepper
+         if (stepper.contains(elements)) {
+            // Yeah, it does exist
+            // Unbinds the listeners previously binded to the step
+            _methodsBindingManager(element);
+            // Slides up and removes afterwards
+            _slideUp(element, undefined, undefined, () => stepper.removeChild(element));
+         }
+      };
       // Checks if the elements is an HTMLElement or an HTMLCollection and calls the function doIt in the right way
-      if (elements instanceof Element) doIt(elements); else if (elements instanceof HTMLCollection) elements.forEach(element => doIt(element));
+      if (elements instanceof Element)
+         doIt(elements);
+      else if (elements instanceof HTMLCollection || elements instanceof NodeList)
+         nodesIterator(elements, element => doIt(element));
       // Returns the step(s), in case you want to activate it/them again.
@@ -559,2 +606,11 @@ return elements;
    /**
+    * An util method to make easy the task of calling the validationFunction.
+    * @returns {boolean} - The validation function result.
+    */
+   _validationFunctionCaller = () => {
+      const { options, getSteps, form, classes } = this;
+      return options.validationFunction(form, getSteps().active.step.querySelector(`.${classes.STEPCONTENT}`))
+   }
+
+   /**
      * An util method to manage binded eventListeners and avoid duplicates. This is the opposite of "_smartListenerUnbind".
@@ -614,3 +670,3 @@ * @param {HTMLElement} el - Target element in which the listener will be binded.
     * Util function to simplify the binding of functions to nodelists.
-    * @param {HTMLElement} elements - Elements to bind a listener to.
+    * @param {(HTMLCollection|NodeList|HTMLElement)} elements - Elements to bind a listener to.
     * @param {string} event - Event name, like 'click'.
@@ -621,2 +677,3 @@ * @param {function} fn - Function to bind to elements.
    static addMultipleEventListeners(elements, event, fn, passive = false) {
+      if (elements instanceof Element) return elements.addEventListener(event, fn, passive);
       for (var i = 0, len = elements.length; i < len; i++) {
@@ -629,3 +686,3 @@ elements[i].addEventListener(event, fn, passive);
     * Util function to simplify the unbinding of functions to nodelists.
-    * @param {HTMLElement} elements - Elements from which the listeners will be unbind.
+    * @param {(HTMLCollection|NodeList|HTMLElement)} elements - Elements from which the listeners will be unbind.
     * @param {string} event - Event name, like 'click'.
@@ -636,2 +693,3 @@ * @param {function} fn - Function to unbind from elements.
    static removeMultipleEventListeners(elements, event, fn, passive = false) {
+      if (elements instanceof Element) return elements.removeEventListener(event, fn, passive);
       for (var i = 0, len = elements.length; i < len; i++) {
@@ -655,2 +713,10 @@ elements[i].removeEventListener(event, fn, passive);
    /**
+    * Util function to itarate through HTMLCollections and NodeList using the same command.
+    * @param {(HTMLCollection | NodeList)} nodes - List of elements to loop through.
+    * @param {function} fn - Function to call for each element inside the nodes list.
+    * @returns {(HTMLCollection | NodeList)} - The original nodes to enable chain functions
+    */
+   static nodesIterator(nodes, fn) { for (let i = 0; i < nodes.length; i++) fn(nodes[i]); return nodes; }
+
+   /**
     * Util function to find the height of a hidden DOM object.
@@ -681,2 +747,8 @@ * @param {HTMLElement} el - Hidden HTML element (node).
    }
+
+   /**
+    * Util bindable tabbing disabler.
+    * @returns {void}
+    */
+   static tabbingDisabler(e) { if (e.keyCode === 9) e.preventDefault(); }
 }

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

122072

increased by9.3%

Lines of code

1672

increased by8.85%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

65

decreased by-2.99%

No dependency changes