6
(function (global, factory) {
7
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
8
typeof define === 'function' && define.amd ? define(factory) :
9
(global = global || self, global.Stepper = factory());
10
}(this, function () { 'use strict';
13
_extends = Object.assign || function (target) {
14
for (var i = 1; i < arguments.length; i++) {
15
var source = arguments[i];
17
for (var key in source) {
18
if (Object.prototype.hasOwnProperty.call(source, key)) {
19
target[key] = source[key];
27
return _extends.apply(this, arguments);
30
var matches = window.Element.prototype.matches;
32
var closest = function closest(element, selector) {
33
return element.closest(selector);
36
var WinEvent = function WinEvent(inType, params) {
37
return new window.Event(inType, params);
40
var createCustomEvent = function createCustomEvent(eventName, params) {
41
var cEvent = new window.CustomEvent(eventName, params);
48
if (!window.Element.prototype.matches) {
49
matches = window.Element.prototype.msMatchesSelector || window.Element.prototype.webkitMatchesSelector;
52
if (!window.Element.prototype.closest) {
53
closest = function closest(element, selector) {
54
if (!document.documentElement.contains(element)) {
59
if (matches.call(element, selector)) {
63
element = element.parentElement || element.parentNode;
64
} while (element !== null && element.nodeType === 1);
70
if (!window.Event || typeof window.Event !== 'function') {
71
WinEvent = function WinEvent(inType, params) {
72
params = params || {};
73
var e = document.createEvent('Event');
74
e.initEvent(inType, Boolean(params.bubbles), Boolean(params.cancelable));
79
if (typeof window.CustomEvent !== 'function') {
80
var originPreventDefault = window.Event.prototype.preventDefault;
82
createCustomEvent = function createCustomEvent(eventName, params) {
83
var evt = document.createEvent('CustomEvent');
89
evt.initCustomEvent(eventName, params.bubbles, params.cancelable, params.detail);
91
evt.preventDefault = function () {
92
if (!this.cancelable) {
96
originPreventDefault.call(this);
97
Object.defineProperty(this, 'defaultPrevented', {
111
var MILLISECONDS_MULTIPLIER = 1000;
115
BLOCK: 'dstepper-block',
116
NONE: 'dstepper-none',
120
var transitionEndEvent = 'transitionend';
121
var customProperty = 'bsStepper';
123
var show = function show(stepperNode, indexStep, options, done) {
124
var stepper = stepperNode[customProperty];
126
if (stepper._steps[indexStep].classList.contains(ClassName.ACTIVE) || stepper._stepsContents[indexStep].classList.contains(ClassName.ACTIVE)) {
130
var showEvent = createCustomEvent('show.bs-stepper', {
133
from: stepper._currentIndex,
138
stepperNode.dispatchEvent(showEvent);
140
var activeStep = stepper._steps.filter(function (step) {
141
return step.classList.contains(ClassName.ACTIVE);
144
var activeContent = stepper._stepsContents.filter(function (content) {
145
return content.classList.contains(ClassName.ACTIVE);
148
if (showEvent.defaultPrevented) {
152
if (activeStep.length) {
153
activeStep[0].classList.remove(ClassName.ACTIVE);
156
if (activeContent.length) {
157
activeContent[0].classList.remove(ClassName.ACTIVE);
159
if (!stepperNode.classList.contains(ClassName.VERTICAL) && !stepper.options.animation) {
160
activeContent[0].classList.remove(ClassName.BLOCK);
164
showStep(stepperNode, stepper._steps[indexStep], stepper._steps, options);
165
showContent(stepperNode, stepper._stepsContents[indexStep], stepper._stepsContents, activeContent, done);
168
var showStep = function showStep(stepperNode, step, stepList, options) {
169
stepList.forEach(function (step) {
170
var trigger = step.querySelector(options.selectors.trigger);
171
trigger.setAttribute('aria-selected', 'false');
173
if (stepperNode.classList.contains(ClassName.LINEAR)) {
174
trigger.setAttribute('disabled', 'disabled');
177
step.classList.add(ClassName.ACTIVE);
178
var currentTrigger = step.querySelector(options.selectors.trigger);
179
currentTrigger.setAttribute('aria-selected', 'true');
181
if (stepperNode.classList.contains(ClassName.LINEAR)) {
182
currentTrigger.removeAttribute('disabled');
186
var showContent = function showContent(stepperNode, content, contentList, activeContent, done) {
187
var stepper = stepperNode[customProperty];
188
var toIndex = contentList.indexOf(content);
189
var shownEvent = createCustomEvent('shown.bs-stepper', {
192
from: stepper._currentIndex,
198
function complete() {
199
content.classList.add(ClassName.BLOCK);
200
content.removeEventListener(transitionEndEvent, complete);
201
stepperNode.dispatchEvent(shownEvent);
205
if (content.classList.contains(ClassName.FADE)) {
206
content.classList.remove(ClassName.NONE);
207
var duration = getTransitionDurationFromElement(content);
208
content.addEventListener(transitionEndEvent, complete);
210
if (activeContent.length) {
211
activeContent[0].classList.add(ClassName.NONE);
214
content.classList.add(ClassName.ACTIVE);
215
emulateTransitionEnd(content, duration);
217
content.classList.add(ClassName.ACTIVE);
218
content.classList.add(ClassName.BLOCK);
219
stepperNode.dispatchEvent(shownEvent);
224
var getTransitionDurationFromElement = function getTransitionDurationFromElement(element) {
230
var transitionDuration = window.getComputedStyle(element).transitionDuration;
231
var floatTransitionDuration = parseFloat(transitionDuration);
233
if (!floatTransitionDuration) {
238
transitionDuration = transitionDuration.split(',')[0];
239
return parseFloat(transitionDuration) * MILLISECONDS_MULTIPLIER;
242
var emulateTransitionEnd = function emulateTransitionEnd(element, duration) {
244
var durationPadding = 5;
245
var emulatedDuration = duration + durationPadding;
247
function listener() {
249
element.removeEventListener(transitionEndEvent, listener);
252
element.addEventListener(transitionEndEvent, listener);
253
window.setTimeout(function () {
255
element.dispatchEvent(WinEvent(transitionEndEvent));
258
element.removeEventListener(transitionEndEvent, listener);
259
}, emulatedDuration);
262
var detectAnimation = function detectAnimation(contentList, options) {
263
if (options.animation) {
264
contentList.forEach(function (content) {
265
content.classList.add(ClassName.FADE);
266
content.classList.add(ClassName.NONE);
271
var buildClickStepLinearListener = function buildClickStepLinearListener() {
272
return function clickStepLinearListener(event) {
273
event.preventDefault();
277
var buildClickStepNonLinearListener = function buildClickStepNonLinearListener(options) {
278
return function clickStepNonLinearListener(event) {
279
event.preventDefault();
280
var step = closest(event.target, options.selectors.steps);
281
var stepperNode = closest(step, options.selectors.stepper);
282
var stepper = stepperNode[customProperty];
284
var stepIndex = stepper._steps.indexOf(step);
286
show(stepperNode, stepIndex, options, function () {
287
stepper._currentIndex = stepIndex;
292
var DEFAULT_OPTIONS = {
297
trigger: '.step-trigger',
298
stepper: '.bs-stepper'
305
function Stepper(element, _options) {
308
if (_options === void 0) {
312
this._element = element;
313
this._currentIndex = 0;
314
this._stepsContents = [];
315
this.options = _extends({}, DEFAULT_OPTIONS, {}, _options);
316
this.options.selectors = _extends({}, DEFAULT_OPTIONS.selectors, {}, this.options.selectors);
318
if (this.options.linear) {
319
this._element.classList.add(ClassName.LINEAR);
322
this._steps = [].slice.call(this._element.querySelectorAll(this.options.selectors.steps));
324
this._steps.filter(function (step) {
325
return step.hasAttribute('data-target');
326
}).forEach(function (step) {
327
_this._stepsContents.push(_this._element.querySelector(step.getAttribute('data-target')));
330
detectAnimation(this._stepsContents, this.options);
332
this._setLinkListeners();
334
Object.defineProperty(this._element, customProperty, {
339
if (this._steps.length) {
340
show(this._element, this._currentIndex, this.options, function () {});
345
var _proto = Stepper.prototype;
347
_proto._setLinkListeners = function _setLinkListeners() {
350
this._steps.forEach(function (step) {
351
var trigger = step.querySelector(_this2.options.selectors.trigger);
353
if (_this2.options.linear) {
354
_this2._clickStepLinearListener = buildClickStepLinearListener(_this2.options);
355
trigger.addEventListener('click', _this2._clickStepLinearListener);
357
_this2._clickStepNonLinearListener = buildClickStepNonLinearListener(_this2.options);
358
trigger.addEventListener('click', _this2._clickStepNonLinearListener);
364
_proto.next = function next() {
367
var nextStep = this._currentIndex + 1 <= this._steps.length - 1 ? this._currentIndex + 1 : this._steps.length - 1;
368
show(this._element, nextStep, this.options, function () {
369
_this3._currentIndex = nextStep;
373
_proto.previous = function previous() {
376
var previousStep = this._currentIndex - 1 >= 0 ? this._currentIndex - 1 : 0;
377
show(this._element, previousStep, this.options, function () {
378
_this4._currentIndex = previousStep;
382
_proto.to = function to(stepNumber) {
385
var tempIndex = stepNumber - 1;
386
var nextStep = tempIndex >= 0 && tempIndex < this._steps.length ? tempIndex : 0;
387
show(this._element, nextStep, this.options, function () {
388
_this5._currentIndex = nextStep;
392
_proto.reset = function reset() {
395
show(this._element, 0, this.options, function () {
396
_this6._currentIndex = 0;
400
_proto.destroy = function destroy() {
403
this._steps.forEach(function (step) {
404
var trigger = step.querySelector(_this7.options.selectors.trigger);
406
if (_this7.options.linear) {
407
trigger.removeEventListener('click', _this7._clickStepLinearListener);
409
trigger.removeEventListener('click', _this7._clickStepNonLinearListener);
413
this._element[customProperty] = undefined;
414
this._element = undefined;
415
this._currentIndex = undefined;
416
this._steps = undefined;
417
this._stepsContents = undefined;
418
this._clickStepLinearListener = undefined;
419
this._clickStepNonLinearListener = undefined;