You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
428 lines
13 KiB
428 lines
13 KiB
/*! |
|
* bsStepper v1.7.0 (https://github.com/Johann-S/bs-stepper) |
|
* Copyright 2018 - 2019 Johann-S <johann.servoire@gmail.com> |
|
* 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
|
|
|