materialize-stepper
Version:
A little plugin, inspired by MDL-Stepper, that implements a stepper to Materializecss framework.
896 lines (682 loc) • 38.5 kB
JavaScript
/**
* Materialize Stepper - A little plugin that implements a stepper to Materializecss framework.
* @version v3.1.0
* @author Igor Marcossi (Kinark) <igormarcossi@gmail.com>.
* @link https://github.com/Kinark/Materialize-stepper
*
* Licensed under the MIT License (https://github.com/Kinark/Materialize-stepper/blob/master/LICENSE).
*/
;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
/** Class representing an MStepper */
var MStepper =
/*#__PURE__*/
function () {
/**
* Constructor for Materialize Stepper.
* @param {HTMLElement} elem - Element in which stepper will be initialized.
* @param {object} [options] - Stepper options.
* @param {number} [options.firstActive=0] - Default active step.
* @param {boolean} [options.autoFocusInput=false] - Auto focus on first input of each step.
* @param {boolean} [options.showFeedbackPreloader=true] - Set if a loading screen will appear while feedbacks functions are running.
* @param {boolean} [options.autoFormCreation=true] - Auto generation of a form around the stepper.
* @param {function} [options.validationFunction=null] - Function to be called everytime a nextstep occurs. It receives 2 arguments, in this sequece: stepperForm, activeStep.
* @param {string} [options.feedbackPreloader] - Preloader used when step is waiting for feedback function. If not defined, Materializecss spinner-blue-only will be used.
*/
function MStepper(elem) {
var _this = this;
var _options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
_classCallCheck(this, MStepper);
_defineProperty(this, "_init", function () {
var _formWrapperManager = _this._formWrapperManager,
getSteps = _this.getSteps,
options = _this.options,
_methodsBindingManager = _this._methodsBindingManager,
_openAction = _this._openAction;
var _getSteps = getSteps(),
steps = _getSteps.steps; // Calls the _formWrapperManager
_this.form = _formWrapperManager(); // Opens the first step (or other specified in the constructor)
_openAction(steps[options.firstActive], undefined, undefined, true); // Gathers the steps and send them to the methodsBinder
_methodsBindingManager(steps);
});
_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,
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
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, textarea, button');
var submitButtons = step.querySelectorAll('button[type="submit"]');
bindOrUnbind(nextBtns, 'click', _nextStepProxy, false);
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
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, function (step) {
return bindEvents(step);
});
});
_defineProperty(this, "_formSubmitHandler", function (e) {
if (!_this._validationFunctionCaller()) e.preventDefault();
});
_defineProperty(this, "resetStepper", function () {
if (_this.form) {
_this.form.reset();
_this.openStep(_this.options.firstActive);
}
});
_defineProperty(this, "updateStepper", function () {
var getSteps = _this.getSteps,
_methodsBindingManager = _this._methodsBindingManager; // Gathers the current steps from the stepper
var _getSteps2 = getSteps(),
steps = _getSteps2.steps; // Removes any bound methods
_methodsBindingManager(steps, true); // Send the steps again to the methodsBindingManager
_methodsBindingManager(steps);
});
_defineProperty(this, "_openAction", function (step, cb) {
var closeActiveStep = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var skipAutoFocus = arguments.length > 3 ? arguments[3] : undefined;
var _slideDown = _this._slideDown,
classes = _this.classes,
getSteps = _this.getSteps,
_closeAction = _this._closeAction,
stepper = _this.stepper,
events = _this.events,
options = _this.options; // Gets the active step element
var activeStep = getSteps().active.step; // If the active step is the same as the one that has been asked to be opened, returns the step
if (activeStep && activeStep.isSameNode(step)) return step; // Gets the step content div inside the step
var stepContent = step.getElementsByClassName(classes.STEPCONTENT)[0];
step.classList.remove(classes.DONESTEP); // Checks if the step is currently horizontal or vertical
if (window.innerWidth < 993 || !stepper.classList.contains(classes.HORIZONTALSTEPPER)) {
// The stepper is running in vertical mode
// Calls the slideDown private method if the stepper is vertical
_slideDown(stepContent, classes.ACTIVESTEP, step, cb); // Beginning of autoFocusInput
if (!skipAutoFocus) {
_slideDown(stepContent, classes.ACTIVESTEP, step, function () {
// Gets the inputs from the nextStep to focus on the first one (temporarily disabled)
var nextStepInputs = stepContent.querySelector('input, select, textarea'); // Focus on the first input of the next step (temporarily disabled)
if (options.autoFocusInput && nextStepInputs) nextStepInputs.focus();
if (cb && typeof cb === 'function') cb();
});
} // Enf of autoFocusInput
} else {
// The stepper is running in horizontal mode
// Adds the class 'active' from the step, since all the animation is made by the CSS
step.classList.add(classes.ACTIVESTEP);
} // If it was requested to close the active step as well, does it (default=true)
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;
});
_defineProperty(this, "_closeAction", function (step, cb) {
var _slideUp = _this._slideUp,
classes = _this.classes,
stepper = _this.stepper,
events = _this.events,
_smartListenerUnbind = _this._smartListenerUnbind,
_smartListenerBind = _this._smartListenerBind; // Gets the step content div inside the step
var stepContent = step.getElementsByClassName(classes.STEPCONTENT)[0]; // Checks if the step is currently horizontal or vertical
if (window.innerWidth < 993 || !stepper.classList.contains(classes.HORIZONTALSTEPPER)) {
// The stepper is running in vertical mode
// Calls the slideUp private method on the step
_slideUp(stepContent, classes.ACTIVESTEP, step, cb);
} else {
// The stepper is running in horizontal mode
// If there's a callback, handles it
if (cb) {
// Defines a function to be called after the transition's end
var waitForTransitionToCb = function waitForTransitionToCb(e) {
// If the transition is not 'left', returns
if (e.propertyName !== 'left') return; // Unbinds the listener from the element
_smartListenerUnbind(stepContent, 'transitionend', waitForTransitionToCb); // Calls the callback
cb();
}; // Binds the callback caller function to the event 'transitionend'
_smartListenerBind(stepContent, 'transitionend', waitForTransitionToCb);
} // Removes the class 'active' from the step, since all the animation is made by the CSS
step.classList.remove(classes.ACTIVESTEP);
} // Dispatch Event
stepper.dispatchEvent(events.STEPCLOSE);
return step;
});
_defineProperty(this, "_nextStepProxy", function (e) {
return _this.nextStep(undefined, undefined, e);
});
_defineProperty(this, "_prevStepProxy", function (e) {
return _this.prevStep(undefined, e);
});
_defineProperty(this, "_stepTitleClickHandler", function (e) {
var getSteps = _this.getSteps,
classes = _this.classes,
nextStep = _this.nextStep,
prevStep = _this.prevStep,
stepper = _this.stepper,
_openAction = _this._openAction;
var _getSteps3 = getSteps(),
steps = _getSteps3.steps,
active = _getSteps3.active;
var clickedStep = e.target.closest(".".concat(classes.STEP)); // Checks if the stepper is linear or not
if (stepper.classList.contains(classes.LINEAR)) {
// Linear stepper detected
// Get the index of the active step
var clickedStepIndex = Array.prototype.indexOf.call(steps, clickedStep); // If the step clicked is the next one, calls nextStep(), if it's the previous one, calls prevStep(), otherwise do nothing
if (clickedStepIndex == active.index + 1) nextStep();else if (clickedStepIndex == active.index - 1) prevStep();
} else {
// Non-linear stepper detected
// Opens the step clicked
_openAction(clickedStep);
}
});
_defineProperty(this, "nextStep", function (cb, skipFeedback, e) {
if (e && e.preventDefault) e.preventDefault();
var options = _this.options,
getSteps = _this.getSteps,
activateFeedback = _this.activateFeedback,
form = _this.form,
wrongStep = _this.wrongStep,
classes = _this.classes,
_openAction = _this._openAction,
stepper = _this.stepper,
events = _this.events,
destroyFeedback = _this.destroyFeedback,
_validationFunctionCaller = _this._validationFunctionCaller;
var showFeedbackPreloader = options.showFeedbackPreloader,
validationFunction = options.validationFunction;
var _getSteps4 = getSteps(),
active = _getSteps4.active;
var nextStep = getSteps().steps[active.index + 1]; // Gets the feedback function (if any) from the button
var feedbackFunction = e && e.target ? e.target.dataset.feedback : null; // Checks if there's a validation function defined
if (validationFunction && !_validationFunctionCaller()) {
// There's a validation function and no feedback function
// The validation function was already called in the if statement and it retuerned false, so returns the calling of the wrongStep method
return wrongStep();
} // Checks if there's a feedback function
if (feedbackFunction && !skipFeedback) {
// There's a feedback function and it wasn't requested to skip it
// If showFeedbackPreloader is true (default=true), activates it
if (showFeedbackPreloader && !active.step.dataset.nopreloader) activateFeedback(); // Calls the feedbackFunction
window[feedbackFunction](destroyFeedback, form, active.step.querySelector(".".concat(classes.STEPCONTENT))); // Returns to prevent the nextStep method from being called
return;
} // Adds the class 'done' to the current step
active.step.classList.add(classes.DONESTEP); // Opens the next one
_openAction(nextStep, cb); // Dispatches the event
stepper.dispatchEvent(events.NEXTSTEP);
});
_defineProperty(this, "prevStep", function (cb, e) {
if (e && e.preventDefault) e.preventDefault();
var getSteps = _this.getSteps,
_openAction = _this._openAction,
stepper = _this.stepper,
events = _this.events,
destroyFeedback = _this.destroyFeedback;
var activeStep = getSteps().active;
var prevStep = getSteps().steps[activeStep.index + -1]; // Destroyes the feedback preloader, if any
destroyFeedback(); // Opens the previous step
_openAction(prevStep, cb); // Dispatches the event
stepper.dispatchEvent(events.PREVSTEP);
});
_defineProperty(this, "openStep", function (index, cb) {
var getSteps = _this.getSteps,
_openAction = _this._openAction,
destroyFeedback = _this.destroyFeedback;
var stepToOpen = getSteps().steps[index]; // Destroyes the feedback preloader, if any
destroyFeedback(); // Opens the requested step
_openAction(stepToOpen, cb);
});
_defineProperty(this, "wrongStep", function () {
var getSteps = _this.getSteps,
classes = _this.classes,
stepper = _this.stepper,
events = _this.events; // Add the WRONGSTEP class to the step
getSteps().active.step.classList.add(classes.WRONGSTEP); // Gets all the inputs from the active step
var inputs = getSteps().active.step.querySelectorAll('input, select, textarea'); // Defines a function to be binded to any change in any input
var removeWrongOnInput = function removeWrongOnInput() {
// If there's a change, removes the WRONGSTEP class
getSteps().active.step.classList.remove(classes.WRONGSTEP); // Unbinds the listener from the element
MStepper.removeMultipleEventListeners(inputs, 'input', removeWrongOnInput);
}; // Binds the removeWrongOnInput function to the inputs, listening to the event 'input'
MStepper.addMultipleEventListeners(inputs, 'input', removeWrongOnInput); // Dispatches the event
stepper.dispatchEvent(events.STEPERROR);
});
_defineProperty(this, "activateFeedback", function () {
var getSteps = _this.getSteps,
classes = _this.classes,
options = _this.options,
stepper = _this.stepper,
events = _this.events;
var activeStep = getSteps().active.step; // Adds the FEEDBACKINGSTEP class to the step
activeStep.classList.add(classes.FEEDBACKINGSTEP); // Gets the step content div inside the step
var content = activeStep.getElementsByClassName(classes.STEPCONTENT)[0]; // Inserts the predefined prealoder in the step content div
content.insertAdjacentHTML('afterBegin', "<div class=\"".concat(classes.PRELOADERWRAPPER, "\">").concat(options.feedbackPreloader, "</div>")); // Dispatches the event
stepper.dispatchEvent(events.FEEDBACKING);
});
_defineProperty(this, "destroyFeedback", function (triggerNextStep) {
var getSteps = _this.getSteps,
classes = _this.classes,
nextStep = _this.nextStep,
stepper = _this.stepper,
events = _this.events;
var activeStep = getSteps().active.step; // If there's no activeStep or preloader, returns
if (!activeStep || !activeStep.classList.contains(classes.FEEDBACKINGSTEP)) return; // Removes the FEEDBACKINGSTEP class from the step
activeStep.classList.remove(classes.FEEDBACKINGSTEP); // Gets the preloader div
var fbDiv = activeStep.getElementsByClassName(classes.PRELOADERWRAPPER)[0]; // Removes the preloader div
fbDiv.parentNode.removeChild(fbDiv); // Calls nextStep if requested (default=false)
if (triggerNextStep) nextStep(undefined, true); // Dispatches the event
stepper.dispatchEvent(events.FEEDBACKDESTROYED);
});
_defineProperty(this, "getSteps", function () {
var stepper = _this.stepper,
classes = _this.classes;
var steps = stepper.children;
var activeStep = stepper.querySelector("li.".concat(classes.STEP, ".").concat(classes.ACTIVESTEP));
var activeStepIndex = Array.prototype.indexOf.call(steps, activeStep);
return {
steps: steps,
active: {
step: activeStep,
index: activeStepIndex
}
};
});
_defineProperty(this, "activateStep", function (elements, index) {
var getSteps = _this.getSteps,
_slideDown = _this._slideDown,
stepper = _this.stepper,
_methodsBindingManager = _this._methodsBindingManager;
var nodesIterator = MStepper.nodesIterator;
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
if (typeof elements === 'string') {
// The element is in string format
// 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 = before ? referenceStep.previousSibling : referenceStep.nextSibling; // Activates (slideDown) the step
_slideDown(returnableElement);
} else if (Array.isArray(elements)) {
// The element is in array format, probably an array of strings
// Sets the returnableElement to be an empty array
returnableElement = []; // Loops through the array
elements.forEach(function (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
var addedStep = before ? referenceStep.previousSibling : referenceStep.nextSibling; // Adds each element to the returnableElement array
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
// 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) {
return _slideDown(appendedElement);
});
} // Do the bidings to the new step(s)
if (returnableElement) _methodsBindingManager(returnableElement); // Returns the added/activated elements
return returnableElement;
});
_defineProperty(this, "deactivateStep", function (elements) {
var _slideUp = _this._slideUp,
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) {
// 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, true); // 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 instanceof NodeList) nodesIterator(elements, function (element) {
return doIt(element);
}); // Returns the step(s), in case you want to activate it/them again.
return elements;
});
_defineProperty(this, "_slideDown", function (element, className) {
var classElement = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : element;
var cb = arguments.length > 3 ? arguments[3] : undefined;
// Gets the height of the element when it's already visible
var height = "".concat(MStepper.getUnknownHeight(element), "px"); // Defines a function to be called after the transition's end
var endSlideDown = function endSlideDown(e) {
// If the transition is not 'height', returns
if (e.propertyName !== 'height') return; // Unbinds the listener from the element
_this._smartListenerUnbind(element, 'transitionend', endSlideDown); // Removes properties needed for the transition to occur
MStepper.removeMultipleProperties(element, 'visibility overflow height display'); // Calls the callback() if any
if (cb) cb();
}; // Calls an animation frame to avoid async weird stuff
requestAnimationFrame(function () {
element.style.display = 'none';
requestAnimationFrame(function () {
// 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'); // element.style.paddingBottom = '0';
// If a className for the slided element is required, add it
if (className) classElement.classList.add(className);
});
});
}); // Returns the original element to enable chain functions
return element;
});
_defineProperty(this, "_slideUp", function (element, className) {
var classElement = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : element;
var cb = arguments.length > 3 ? arguments[3] : undefined;
// Gets the element's height
var height = "".concat(element.offsetHeight, "px"); // Defines a function to be called after the transition's end
var endSlideUp = function endSlideUp(e) {
// If the transition is not 'height', returns
if (e.propertyName !== 'height') return; // Unbinds the listener from the element
_this._smartListenerUnbind(element, 'transitionend', endSlideUp); // Sets display none for the slided element
element.style.display = 'none'; // Removes properties needed for the transition to occur
MStepper.removeMultipleProperties(element, 'visibility overflow height padding-bottom'); // Calls the callback() if any
if (cb) cb();
}; // Calls an animation frame to avoid async weird stuff
requestAnimationFrame(function () {
// Prepare the element for animation
element.style.overflow = 'hidden';
element.style.visibility = 'unset';
element.style.display = 'block';
element.style.height = height; // 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', endSlideUp); // Sets the height to 0 the element to trigger the transition
element.style.height = '0'; // Sets the 'padding-bottom: 0' to transition the padding
element.style.paddingBottom = '0'; // If a removal of a className for the slided element is required, remove it
if (className) classElement.classList.remove(className);
});
}); // Returns the original element to enable chain functions
return element;
});
_defineProperty(this, "_formWrapperManager", function () {
var stepper = _this.stepper,
options = _this.options; // Checks if there's a form wrapping the stepper and gets it
var form = stepper.closest('form'); // Checks if the form doesn't exist and the autoFormCreation option is true (default=true)
if (!form && options.autoFormCreation) {
// The form doesn't exist and the autoFormCreation is true
// Gathers the form settings from the dataset of the stepper
var dataAttrs = stepper.dataset || {};
var method = dataAttrs.method || 'GET';
var action = dataAttrs.action || '?'; // Creates a form element
var wrapper = document.createElement('form'); // Defines the form's settings
wrapper.method = method;
wrapper.action = action; // Wraps the stepper with it
stepper.parentNode.insertBefore(wrapper, stepper);
wrapper.appendChild(stepper); // Returns the wrapper (the form)
return wrapper;
} else if (form && form.length) {
// The form exists
// Returns the form
return form;
} else {
// The form doesn't exist and autoFormCreation is false
// Returns null
return null;
}
});
_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) {
var similar = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
var callFn = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
var listenerStore = _this.listenerStore; // Builds an object with the element, event and function.
var newListener = {
el: el,
event: event,
fn: fn
}; // Checks if similar listeners will be unbinded before the binding
if (similar) {
// Loops through the store searching for functions binded to the same element listening for the same event
for (var i = 0; i < listenerStore.length; i++) {
var listener = listenerStore[i]; // Unbind if found
if (listener.event === event && listener.el.isSameNode(el)) listener.el.removeEventListener(listener.event, listener.fn); // Calls the binded function if requested
if (callFn) listener.fn();
}
} else {
// If similar listeners won't be unbinded, unbind duplicates
var existentOneIndex = listenerStore.indexOf(newListener);
if (existentOne !== -1) {
var existentOne = listenerStore[existentOneIndex];
existentOne.el.removeEventListener(existentOne.event, existentOne.fn);
if (callFn) existentOne[existentOneIndex].fn();
}
} // Finally, binds the listener
el.addEventListener(event, fn);
listenerStore.push(newListener);
});
_defineProperty(this, "_smartListenerUnbind", function (el, event, fn) {
var listenerStore = _this.listenerStore; // Gets the index of the listener in the stepper listenerStore
var existentOneIndex = listenerStore.indexOf({
el: el,
event: event,
fn: fn
}); // Remove the even listener from the element
el.removeEventListener(event, fn); // Remove the listener reference in the listenerStore
listenerStore.splice(existentOneIndex, 1);
});
this.stepper = elem;
this.options = Object.assign({
firstActive: 0,
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 = {
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')
}; // Creates an empty array to power the methods _smartListenerBind/Unbind
this.listenerStore = []; // Creates an empty variable to store the form (or not) afterwards
this.form = null; // Calls the initialization method
this._init();
}
/**
* Init private method. Will be called on the creating of a new instance of MStepper.
* @returns {void}
*/
_createClass(MStepper, null, [{
key: "addMultipleEventListeners",
/**
* Util function to simplify the binding of functions to nodelists.
* @param {(HTMLCollection|NodeList|HTMLElement)} elements - Elements to bind a listener to.
* @param {string} event - Event name, like 'click'.
* @param {function} fn - Function to bind to elements.
* @returns {void}
*/
value: function addMultipleEventListeners(elements, event, fn) {
var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
if (elements instanceof Element) return elements.addEventListener(event, fn, passive);
for (var i = 0, len = elements.length; i < len; i++) {
elements[i].addEventListener(event, fn, passive);
}
}
/**
* Util function to simplify the unbinding of functions to nodelists.
* @param {(HTMLCollection|NodeList|HTMLElement)} elements - Elements from which the listeners will be unbind.
* @param {string} event - Event name, like 'click'.
* @param {function} fn - Function to unbind from elements.
* @returns {void}
*/
}, {
key: "removeMultipleEventListeners",
value: function removeMultipleEventListeners(elements, event, fn) {
var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
if (elements instanceof Element) return elements.removeEventListener(event, fn, passive);
for (var i = 0, len = elements.length; i < len; i++) {
elements[i].removeEventListener(event, fn, passive);
}
}
/**
* An util function to simplify the removal of multiple properties.
* @param {HTMLElement} el - Element target from which the properties will me removed.
* @param {string} properties - Properties to be removed, separated by spaces, like 'height margin padding-top'.
*/
}, {
key: "removeMultipleProperties",
value: function removeMultipleProperties(el, properties) {
var propArray = properties.split(' ');
for (var i = 0; i < propArray.length; i++) {
el.style.removeProperty(propArray[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.
* @param {HTMLElement} el - Hidden HTML element (node).
* @returns {number} - The height without "px".
*/
}, {
key: "getUnknownHeight",
value: function getUnknownHeight(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
var 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;
}
/**
* Default validation function.
* @returns {boolean}
*/
}, {
key: "defaultValidationFunction",
value: function defaultValidationFunction(stepperForm, activeStepContent) {
var inputs = activeStepContent.querySelectorAll('input, textarea, select');
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].checkValidity()) return false;
}
return true;
}
/**
* Util bindable tabbing disabler.
* @returns {void}
*/
}, {
key: "tabbingDisabler",
value: function tabbingDisabler(e) {
if (e.keyCode === 9) e.preventDefault();
}
}]);
return MStepper;
}();
if (window.Element && !Element.prototype.closest) {
Element.prototype.closest = function (s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i,
el = this;
do {
i = matches.length;
while (--i >= 0 && matches.item(i) !== el) {}
;
} while (i < 0 && (el = el.parentElement));
return el;
};
} // 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
});
}