/*! * bsStepper v1.7.0 (https://github.com/Johann-S/bs-stepper) * Copyright 2018 - 2019 Johann-S * Licensed under MIT (https://github.com/Johann-S/bs-stepper/blob/master/LICENSE) */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global = global || self, global.Stepper = factory()); }(this, function () { 'use strict'; function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } var matches = window.Element.prototype.matches; var closest = function closest(element, selector) { return element.closest(selector); }; var WinEvent = function WinEvent(inType, params) { return new window.Event(inType, params); }; var createCustomEvent = function createCustomEvent(eventName, params) { var cEvent = new window.CustomEvent(eventName, params); return cEvent; }; /* istanbul ignore next */ function polyfill() { if (!window.Element.prototype.matches) { matches = window.Element.prototype.msMatchesSelector || window.Element.prototype.webkitMatchesSelector; } if (!window.Element.prototype.closest) { closest = function closest(element, selector) { if (!document.documentElement.contains(element)) { return null; } do { if (matches.call(element, selector)) { return element; } element = element.parentElement || element.parentNode; } while (element !== null && element.nodeType === 1); return null; }; } if (!window.Event || typeof window.Event !== 'function') { WinEvent = function WinEvent(inType, params) { params = params || {}; var e = document.createEvent('Event'); e.initEvent(inType, Boolean(params.bubbles), Boolean(params.cancelable)); return e; }; } if (typeof window.CustomEvent !== 'function') { var originPreventDefault = window.Event.prototype.preventDefault; createCustomEvent = function createCustomEvent(eventName, params) { var evt = document.createEvent('CustomEvent'); params = params || { bubbles: false, cancelable: false, detail: null }; evt.initCustomEvent(eventName, params.bubbles, params.cancelable, params.detail); evt.preventDefault = function () { if (!this.cancelable) { return; } originPreventDefault.call(this); Object.defineProperty(this, 'defaultPrevented', { get: function get() { return true; } }); }; return evt; }; } } polyfill(); var MILLISECONDS_MULTIPLIER = 1000; var ClassName = { ACTIVE: 'active', LINEAR: 'linear', BLOCK: 'dstepper-block', NONE: 'dstepper-none', FADE: 'fade', VERTICAL: 'vertical' }; var transitionEndEvent = 'transitionend'; var customProperty = 'bsStepper'; var show = function show(stepperNode, indexStep, options, done) { var stepper = stepperNode[customProperty]; if (stepper._steps[indexStep].classList.contains(ClassName.ACTIVE) || stepper._stepsContents[indexStep].classList.contains(ClassName.ACTIVE)) { return; } var showEvent = createCustomEvent('show.bs-stepper', { cancelable: true, detail: { from: stepper._currentIndex, to: indexStep, indexStep: indexStep } }); stepperNode.dispatchEvent(showEvent); var activeStep = stepper._steps.filter(function (step) { return step.classList.contains(ClassName.ACTIVE); }); var activeContent = stepper._stepsContents.filter(function (content) { return content.classList.contains(ClassName.ACTIVE); }); if (showEvent.defaultPrevented) { return; } if (activeStep.length) { activeStep[0].classList.remove(ClassName.ACTIVE); } if (activeContent.length) { activeContent[0].classList.remove(ClassName.ACTIVE); if (!stepperNode.classList.contains(ClassName.VERTICAL) && !stepper.options.animation) { activeContent[0].classList.remove(ClassName.BLOCK); } } showStep(stepperNode, stepper._steps[indexStep], stepper._steps, options); showContent(stepperNode, stepper._stepsContents[indexStep], stepper._stepsContents, activeContent, done); }; var showStep = function showStep(stepperNode, step, stepList, options) { stepList.forEach(function (step) { var trigger = step.querySelector(options.selectors.trigger); trigger.setAttribute('aria-selected', 'false'); // if stepper is in linear mode, set disabled attribute on the trigger if (stepperNode.classList.contains(ClassName.LINEAR)) { trigger.setAttribute('disabled', 'disabled'); } }); step.classList.add(ClassName.ACTIVE); var currentTrigger = step.querySelector(options.selectors.trigger); currentTrigger.setAttribute('aria-selected', 'true'); // if stepper is in linear mode, remove disabled attribute on current if (stepperNode.classList.contains(ClassName.LINEAR)) { currentTrigger.removeAttribute('disabled'); } }; var showContent = function showContent(stepperNode, content, contentList, activeContent, done) { var stepper = stepperNode[customProperty]; var toIndex = contentList.indexOf(content); var shownEvent = createCustomEvent('shown.bs-stepper', { cancelable: true, detail: { from: stepper._currentIndex, to: toIndex, indexStep: toIndex } }); function complete() { content.classList.add(ClassName.BLOCK); content.removeEventListener(transitionEndEvent, complete); stepperNode.dispatchEvent(shownEvent); done(); } if (content.classList.contains(ClassName.FADE)) { content.classList.remove(ClassName.NONE); var duration = getTransitionDurationFromElement(content); content.addEventListener(transitionEndEvent, complete); if (activeContent.length) { activeContent[0].classList.add(ClassName.NONE); } content.classList.add(ClassName.ACTIVE); emulateTransitionEnd(content, duration); } else { content.classList.add(ClassName.ACTIVE); content.classList.add(ClassName.BLOCK); stepperNode.dispatchEvent(shownEvent); done(); } }; var getTransitionDurationFromElement = function getTransitionDurationFromElement(element) { if (!element) { return 0; } // Get transition-duration of the element var transitionDuration = window.getComputedStyle(element).transitionDuration; var floatTransitionDuration = parseFloat(transitionDuration); // Return 0 if element or transition duration is not found if (!floatTransitionDuration) { return 0; } // If multiple durations are defined, take the first transitionDuration = transitionDuration.split(',')[0]; return parseFloat(transitionDuration) * MILLISECONDS_MULTIPLIER; }; var emulateTransitionEnd = function emulateTransitionEnd(element, duration) { var called = false; var durationPadding = 5; var emulatedDuration = duration + durationPadding; function listener() { called = true; element.removeEventListener(transitionEndEvent, listener); } element.addEventListener(transitionEndEvent, listener); window.setTimeout(function () { if (!called) { element.dispatchEvent(WinEvent(transitionEndEvent)); } element.removeEventListener(transitionEndEvent, listener); }, emulatedDuration); }; var detectAnimation = function detectAnimation(contentList, options) { if (options.animation) { contentList.forEach(function (content) { content.classList.add(ClassName.FADE); content.classList.add(ClassName.NONE); }); } }; var buildClickStepLinearListener = function buildClickStepLinearListener() { return function clickStepLinearListener(event) { event.preventDefault(); }; }; var buildClickStepNonLinearListener = function buildClickStepNonLinearListener(options) { return function clickStepNonLinearListener(event) { event.preventDefault(); var step = closest(event.target, options.selectors.steps); var stepperNode = closest(step, options.selectors.stepper); var stepper = stepperNode[customProperty]; var stepIndex = stepper._steps.indexOf(step); show(stepperNode, stepIndex, options, function () { stepper._currentIndex = stepIndex; }); }; }; var DEFAULT_OPTIONS = { linear: true, animation: false, selectors: { steps: '.step', trigger: '.step-trigger', stepper: '.bs-stepper' } }; var Stepper = /*#__PURE__*/ function () { function Stepper(element, _options) { var _this = this; if (_options === void 0) { _options = {}; } this._element = element; this._currentIndex = 0; this._stepsContents = []; this.options = _extends({}, DEFAULT_OPTIONS, {}, _options); this.options.selectors = _extends({}, DEFAULT_OPTIONS.selectors, {}, this.options.selectors); if (this.options.linear) { this._element.classList.add(ClassName.LINEAR); } this._steps = [].slice.call(this._element.querySelectorAll(this.options.selectors.steps)); this._steps.filter(function (step) { return step.hasAttribute('data-target'); }).forEach(function (step) { _this._stepsContents.push(_this._element.querySelector(step.getAttribute('data-target'))); }); detectAnimation(this._stepsContents, this.options); this._setLinkListeners(); Object.defineProperty(this._element, customProperty, { value: this, writable: true }); if (this._steps.length) { show(this._element, this._currentIndex, this.options, function () {}); } } // Private var _proto = Stepper.prototype; _proto._setLinkListeners = function _setLinkListeners() { var _this2 = this; this._steps.forEach(function (step) { var trigger = step.querySelector(_this2.options.selectors.trigger); if (_this2.options.linear) { _this2._clickStepLinearListener = buildClickStepLinearListener(_this2.options); trigger.addEventListener('click', _this2._clickStepLinearListener); } else { _this2._clickStepNonLinearListener = buildClickStepNonLinearListener(_this2.options); trigger.addEventListener('click', _this2._clickStepNonLinearListener); } }); } // Public ; _proto.next = function next() { var _this3 = this; var nextStep = this._currentIndex + 1 <= this._steps.length - 1 ? this._currentIndex + 1 : this._steps.length - 1; show(this._element, nextStep, this.options, function () { _this3._currentIndex = nextStep; }); }; _proto.previous = function previous() { var _this4 = this; var previousStep = this._currentIndex - 1 >= 0 ? this._currentIndex - 1 : 0; show(this._element, previousStep, this.options, function () { _this4._currentIndex = previousStep; }); }; _proto.to = function to(stepNumber) { var _this5 = this; var tempIndex = stepNumber - 1; var nextStep = tempIndex >= 0 && tempIndex < this._steps.length ? tempIndex : 0; show(this._element, nextStep, this.options, function () { _this5._currentIndex = nextStep; }); }; _proto.reset = function reset() { var _this6 = this; show(this._element, 0, this.options, function () { _this6._currentIndex = 0; }); }; _proto.destroy = function destroy() { var _this7 = this; this._steps.forEach(function (step) { var trigger = step.querySelector(_this7.options.selectors.trigger); if (_this7.options.linear) { trigger.removeEventListener('click', _this7._clickStepLinearListener); } else { trigger.removeEventListener('click', _this7._clickStepNonLinearListener); } }); this._element[customProperty] = undefined; this._element = undefined; this._currentIndex = undefined; this._steps = undefined; this._stepsContents = undefined; this._clickStepLinearListener = undefined; this._clickStepNonLinearListener = undefined; }; return Stepper; }(); return Stepper; })); //# sourceMappingURL=bs-stepper.js.map