bootstrap 4.6.2 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.travis.yml +2 -1
- data/README.md +7 -4
- data/assets/javascripts/bootstrap/alert.js +192 -115
- data/assets/javascripts/bootstrap/base-component.js +63 -0
- data/assets/javascripts/bootstrap/button.js +96 -179
- data/assets/javascripts/bootstrap/carousel.js +472 -359
- data/assets/javascripts/bootstrap/collapse.js +379 -225
- data/assets/javascripts/bootstrap/dom/data.js +68 -0
- data/assets/javascripts/bootstrap/dom/event-handler.js +322 -0
- data/assets/javascripts/bootstrap/dom/manipulator.js +88 -0
- data/assets/javascripts/bootstrap/dom/selector-engine.js +85 -0
- data/assets/javascripts/bootstrap/dropdown.js +472 -355
- data/assets/javascripts/bootstrap/modal.js +612 -438
- data/assets/javascripts/bootstrap/offcanvas.js +671 -0
- data/assets/javascripts/bootstrap/popover.js +138 -167
- data/assets/javascripts/bootstrap/scrollspy.js +250 -192
- data/assets/javascripts/bootstrap/tab.js +241 -144
- data/assets/javascripts/bootstrap/toast.js +223 -157
- data/assets/javascripts/bootstrap/tooltip.js +651 -487
- data/assets/javascripts/bootstrap-global-this-define.js +6 -0
- data/assets/javascripts/bootstrap-global-this-undefine.js +2 -0
- data/assets/javascripts/bootstrap-sprockets.js +8 -1
- data/assets/javascripts/bootstrap.js +3277 -2590
- data/assets/javascripts/bootstrap.min.js +3 -3
- data/assets/stylesheets/_bootstrap-grid.scss +53 -18
- data/assets/stylesheets/_bootstrap-reboot.scss +6 -3
- data/assets/stylesheets/_bootstrap.scss +18 -10
- data/assets/stylesheets/bootstrap/_accordion.scss +118 -0
- data/assets/stylesheets/bootstrap/_alert.scss +15 -10
- data/assets/stylesheets/bootstrap/_badge.scss +2 -27
- data/assets/stylesheets/bootstrap/_breadcrumb.scss +3 -17
- data/assets/stylesheets/bootstrap/_button-group.scss +21 -45
- data/assets/stylesheets/bootstrap/_buttons.scss +29 -60
- data/assets/stylesheets/bootstrap/_card.scss +20 -91
- data/assets/stylesheets/bootstrap/_carousel.scss +64 -35
- data/assets/stylesheets/bootstrap/_close.scss +30 -30
- data/assets/stylesheets/bootstrap/_containers.scss +41 -0
- data/assets/stylesheets/bootstrap/_dropdown.scss +84 -36
- data/assets/stylesheets/bootstrap/_forms.scss +9 -347
- data/assets/stylesheets/bootstrap/_functions.scss +84 -69
- data/assets/stylesheets/bootstrap/_grid.scss +3 -54
- data/assets/stylesheets/bootstrap/_helpers.scss +7 -0
- data/assets/stylesheets/bootstrap/_images.scss +1 -1
- data/assets/stylesheets/bootstrap/_list-group.scss +28 -8
- data/assets/stylesheets/bootstrap/_mixins.scss +8 -13
- data/assets/stylesheets/bootstrap/_modal.scss +45 -57
- data/assets/stylesheets/bootstrap/_nav.scss +20 -6
- data/assets/stylesheets/bootstrap/_navbar.scss +45 -71
- data/assets/stylesheets/bootstrap/_offcanvas.scss +77 -0
- data/assets/stylesheets/bootstrap/_pagination.scss +10 -20
- data/assets/stylesheets/bootstrap/_popover.scss +24 -36
- data/assets/stylesheets/bootstrap/_progress.scss +5 -4
- data/assets/stylesheets/bootstrap/_reboot.scss +316 -179
- data/assets/stylesheets/bootstrap/_root.scss +5 -8
- data/assets/stylesheets/bootstrap/_spinners.scss +11 -7
- data/assets/stylesheets/bootstrap/_tables.scss +79 -114
- data/assets/stylesheets/bootstrap/_toasts.scss +20 -15
- data/assets/stylesheets/bootstrap/_tooltip.scss +21 -21
- data/assets/stylesheets/bootstrap/_transitions.scss +2 -7
- data/assets/stylesheets/bootstrap/_type.scss +38 -59
- data/assets/stylesheets/bootstrap/_utilities.scss +594 -18
- data/assets/stylesheets/bootstrap/_variables.scss +800 -485
- data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +18 -0
- data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +61 -0
- data/assets/stylesheets/bootstrap/forms/_form-check.scss +152 -0
- data/assets/stylesheets/bootstrap/forms/_form-control.scss +219 -0
- data/assets/stylesheets/bootstrap/forms/_form-range.scss +91 -0
- data/assets/stylesheets/bootstrap/forms/_form-select.scss +67 -0
- data/assets/stylesheets/bootstrap/forms/_form-text.scss +11 -0
- data/assets/stylesheets/bootstrap/forms/_input-group.scss +121 -0
- data/assets/stylesheets/bootstrap/forms/_labels.scss +36 -0
- data/assets/stylesheets/bootstrap/forms/_validation.scss +12 -0
- data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +12 -0
- data/assets/stylesheets/bootstrap/helpers/_position.scss +30 -0
- data/assets/stylesheets/bootstrap/helpers/_ratio.scss +26 -0
- data/assets/stylesheets/bootstrap/helpers/_stretched-link.scss +15 -0
- data/assets/stylesheets/bootstrap/helpers/_text-truncation.scss +7 -0
- data/assets/stylesheets/bootstrap/helpers/_visually-hidden.scss +8 -0
- data/assets/stylesheets/bootstrap/mixins/_alert.scss +3 -5
- data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +10 -8
- data/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +7 -9
- data/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +14 -10
- data/assets/stylesheets/bootstrap/mixins/_buttons.scss +71 -48
- data/assets/stylesheets/bootstrap/mixins/_caret.scss +10 -8
- data/assets/stylesheets/bootstrap/mixins/_clearfix.scss +2 -0
- data/assets/stylesheets/bootstrap/mixins/_color-scheme.scss +7 -0
- data/assets/stylesheets/bootstrap/mixins/_container.scss +9 -0
- data/assets/stylesheets/bootstrap/mixins/_forms.scss +39 -97
- data/assets/stylesheets/bootstrap/mixins/_gradients.scss +13 -11
- data/assets/stylesheets/bootstrap/mixins/_grid.scss +90 -34
- data/assets/stylesheets/bootstrap/mixins/_image.scss +1 -21
- data/assets/stylesheets/bootstrap/mixins/_list-group.scss +5 -2
- data/assets/stylesheets/bootstrap/mixins/_lists.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_pagination.scss +17 -8
- data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +3 -3
- data/assets/stylesheets/bootstrap/mixins/_table-variants.scss +21 -0
- data/assets/stylesheets/bootstrap/mixins/_transition.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_utilities.scss +68 -0
- data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +29 -0
- data/assets/stylesheets/bootstrap/utilities/_api.scss +47 -0
- data/assets/stylesheets/bootstrap/vendor/_rfs.scss +214 -130
- data/bootstrap.gemspec +1 -3
- data/lib/bootstrap/version.rb +2 -2
- data/tasks/updater/js.rb +19 -16
- data/test/dummy_rails/app/assets/javascripts/application.js +4 -3
- data/test/dummy_rails/app/views/layouts/application.html.erb +3 -1
- data/test/dummy_rails/app/views/pages/root.html +89 -0
- data/test/dummy_rails/config/application.rb +0 -3
- data/test/gemfiles/rails_6_1.gemfile +7 -0
- metadata +45 -73
- data/assets/javascripts/bootstrap/util.js +0 -189
- data/assets/stylesheets/bootstrap/_code.scss +0 -48
- data/assets/stylesheets/bootstrap/_custom-forms.scss +0 -526
- data/assets/stylesheets/bootstrap/_input-group.scss +0 -211
- data/assets/stylesheets/bootstrap/_jumbotron.scss +0 -17
- data/assets/stylesheets/bootstrap/_media.scss +0 -8
- data/assets/stylesheets/bootstrap/_print.scss +0 -132
- data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -23
- data/assets/stylesheets/bootstrap/mixins/_badge.scss +0 -17
- data/assets/stylesheets/bootstrap/mixins/_float.scss +0 -14
- data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -80
- data/assets/stylesheets/bootstrap/mixins/_hover.scss +0 -37
- data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -11
- data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +0 -34
- data/assets/stylesheets/bootstrap/mixins/_size.scss +0 -7
- data/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -39
- data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -17
- data/assets/stylesheets/bootstrap/mixins/_text-hide.scss +0 -11
- data/assets/stylesheets/bootstrap/mixins/_visibility.scss +0 -8
- data/assets/stylesheets/bootstrap/utilities/_align.scss +0 -8
- data/assets/stylesheets/bootstrap/utilities/_background.scss +0 -19
- data/assets/stylesheets/bootstrap/utilities/_borders.scss +0 -75
- data/assets/stylesheets/bootstrap/utilities/_display.scss +0 -26
- data/assets/stylesheets/bootstrap/utilities/_embed.scss +0 -39
- data/assets/stylesheets/bootstrap/utilities/_flex.scss +0 -51
- data/assets/stylesheets/bootstrap/utilities/_float.scss +0 -11
- data/assets/stylesheets/bootstrap/utilities/_interactions.scss +0 -5
- data/assets/stylesheets/bootstrap/utilities/_overflow.scss +0 -5
- data/assets/stylesheets/bootstrap/utilities/_position.scss +0 -32
- data/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +0 -11
- data/assets/stylesheets/bootstrap/utilities/_shadows.scss +0 -6
- data/assets/stylesheets/bootstrap/utilities/_sizing.scss +0 -20
- data/assets/stylesheets/bootstrap/utilities/_spacing.scss +0 -73
- data/assets/stylesheets/bootstrap/utilities/_stretched-link.scss +0 -19
- data/assets/stylesheets/bootstrap/utilities/_text.scss +0 -72
- data/assets/stylesheets/bootstrap/utilities/_visibility.scss +0 -13
- data/test/dummy_rails/app/views/pages/root.html.slim +0 -58
- /data/assets/stylesheets/bootstrap/{utilities → helpers}/_clearfix.scss +0 -0
|
@@ -1,106 +1,205 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Bootstrap carousel.js
|
|
3
|
-
* Copyright 2011-
|
|
2
|
+
* Bootstrap carousel.js v5.0.0 (https://getbootstrap.com/)
|
|
3
|
+
* Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
|
|
4
4
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
5
5
|
*/
|
|
6
6
|
(function (global, factory) {
|
|
7
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('
|
|
8
|
-
typeof define === 'function' && define.amd ? define(['
|
|
9
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Carousel = factory(global.
|
|
10
|
-
}
|
|
7
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/data.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./dom/selector-engine.js'), require('./base-component.js')) :
|
|
8
|
+
typeof define === 'function' && define.amd ? define(['./dom/data', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './base-component'], factory) :
|
|
9
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Carousel = factory(global.Data, global.EventHandler, global.Manipulator, global.SelectorEngine, global.Base));
|
|
10
|
+
}(this, (function (Data, EventHandler, Manipulator, SelectorEngine, BaseComponent) { 'use strict';
|
|
11
11
|
|
|
12
12
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
13
|
|
|
14
|
-
var
|
|
15
|
-
var
|
|
14
|
+
var Data__default = /*#__PURE__*/_interopDefaultLegacy(Data);
|
|
15
|
+
var EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
|
|
16
|
+
var Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator);
|
|
17
|
+
var SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine);
|
|
18
|
+
var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
|
|
16
19
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
/**
|
|
21
|
+
* --------------------------------------------------------------------------
|
|
22
|
+
* Bootstrap (v5.0.0): util/index.js
|
|
23
|
+
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
24
|
+
* --------------------------------------------------------------------------
|
|
25
|
+
*/
|
|
26
|
+
const MILLISECONDS_MULTIPLIER = 1000;
|
|
27
|
+
const TRANSITION_END = 'transitionend'; // Shoutout AngusCroll (https://goo.gl/pxwQGp)
|
|
28
|
+
|
|
29
|
+
const toType = obj => {
|
|
30
|
+
if (obj === null || obj === undefined) {
|
|
31
|
+
return `${obj}`;
|
|
24
32
|
}
|
|
25
|
-
}
|
|
26
33
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
if (staticProps) _defineProperties(Constructor, staticProps);
|
|
30
|
-
Object.defineProperty(Constructor, "prototype", {
|
|
31
|
-
writable: false
|
|
32
|
-
});
|
|
33
|
-
return Constructor;
|
|
34
|
-
}
|
|
34
|
+
return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase();
|
|
35
|
+
};
|
|
35
36
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
39
|
-
var source = arguments[i];
|
|
37
|
+
const getSelector = element => {
|
|
38
|
+
let selector = element.getAttribute('data-bs-target');
|
|
40
39
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
40
|
+
if (!selector || selector === '#') {
|
|
41
|
+
let hrefAttr = element.getAttribute('href'); // The only valid content that could double as a selector are IDs or classes,
|
|
42
|
+
// so everything starting with `#` or `.`. If a "real" URL is used as the selector,
|
|
43
|
+
// `document.querySelector` will rightfully complain it is invalid.
|
|
44
|
+
// See https://github.com/twbs/bootstrap/issues/32273
|
|
45
|
+
|
|
46
|
+
if (!hrefAttr || !hrefAttr.includes('#') && !hrefAttr.startsWith('.')) {
|
|
47
|
+
return null;
|
|
48
|
+
} // Just in case some CMS puts out a full URL with the anchor appended
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
if (hrefAttr.includes('#') && !hrefAttr.startsWith('#')) {
|
|
52
|
+
hrefAttr = `#${hrefAttr.split('#')[1]}`;
|
|
46
53
|
}
|
|
47
54
|
|
|
48
|
-
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
|
|
55
|
+
selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
return selector;
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
const getElementFromSelector = element => {
|
|
62
|
+
const selector = getSelector(element);
|
|
63
|
+
return selector ? document.querySelector(selector) : null;
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
const getTransitionDurationFromElement = element => {
|
|
67
|
+
if (!element) {
|
|
68
|
+
return 0;
|
|
69
|
+
} // Get transition-duration of the element
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
let {
|
|
73
|
+
transitionDuration,
|
|
74
|
+
transitionDelay
|
|
75
|
+
} = window.getComputedStyle(element);
|
|
76
|
+
const floatTransitionDuration = Number.parseFloat(transitionDuration);
|
|
77
|
+
const floatTransitionDelay = Number.parseFloat(transitionDelay); // Return 0 if element or transition duration is not found
|
|
78
|
+
|
|
79
|
+
if (!floatTransitionDuration && !floatTransitionDelay) {
|
|
80
|
+
return 0;
|
|
81
|
+
} // If multiple durations are defined, take the first
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
transitionDuration = transitionDuration.split(',')[0];
|
|
85
|
+
transitionDelay = transitionDelay.split(',')[0];
|
|
86
|
+
return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * MILLISECONDS_MULTIPLIER;
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
const triggerTransitionEnd = element => {
|
|
90
|
+
element.dispatchEvent(new Event(TRANSITION_END));
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
const isElement = obj => (obj[0] || obj).nodeType;
|
|
94
|
+
|
|
95
|
+
const emulateTransitionEnd = (element, duration) => {
|
|
96
|
+
let called = false;
|
|
97
|
+
const durationPadding = 5;
|
|
98
|
+
const emulatedDuration = duration + durationPadding;
|
|
99
|
+
|
|
100
|
+
function listener() {
|
|
101
|
+
called = true;
|
|
102
|
+
element.removeEventListener(TRANSITION_END, listener);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
element.addEventListener(TRANSITION_END, listener);
|
|
106
|
+
setTimeout(() => {
|
|
107
|
+
if (!called) {
|
|
108
|
+
triggerTransitionEnd(element);
|
|
109
|
+
}
|
|
110
|
+
}, emulatedDuration);
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
const typeCheckConfig = (componentName, config, configTypes) => {
|
|
114
|
+
Object.keys(configTypes).forEach(property => {
|
|
115
|
+
const expectedTypes = configTypes[property];
|
|
116
|
+
const value = config[property];
|
|
117
|
+
const valueType = value && isElement(value) ? 'element' : toType(value);
|
|
118
|
+
|
|
119
|
+
if (!new RegExp(expectedTypes).test(valueType)) {
|
|
120
|
+
throw new TypeError(`${componentName.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".`);
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
};
|
|
52
124
|
|
|
125
|
+
const isVisible = element => {
|
|
126
|
+
if (!element) {
|
|
127
|
+
return false;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
if (element.style && element.parentNode && element.parentNode.style) {
|
|
131
|
+
const elementStyle = getComputedStyle(element);
|
|
132
|
+
const parentNodeStyle = getComputedStyle(element.parentNode);
|
|
133
|
+
return elementStyle.display !== 'none' && parentNodeStyle.display !== 'none' && elementStyle.visibility !== 'hidden';
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
return false;
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
const reflow = element => element.offsetHeight;
|
|
140
|
+
|
|
141
|
+
const getjQuery = () => {
|
|
142
|
+
const {
|
|
143
|
+
jQuery
|
|
144
|
+
} = window;
|
|
145
|
+
|
|
146
|
+
if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
|
|
147
|
+
return jQuery;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
return null;
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
const onDOMContentLoaded = callback => {
|
|
154
|
+
if (document.readyState === 'loading') {
|
|
155
|
+
document.addEventListener('DOMContentLoaded', callback);
|
|
156
|
+
} else {
|
|
157
|
+
callback();
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
const isRTL = () => document.documentElement.dir === 'rtl';
|
|
162
|
+
|
|
163
|
+
const defineJQueryPlugin = (name, plugin) => {
|
|
164
|
+
onDOMContentLoaded(() => {
|
|
165
|
+
const $ = getjQuery();
|
|
166
|
+
/* istanbul ignore if */
|
|
167
|
+
|
|
168
|
+
if ($) {
|
|
169
|
+
const JQUERY_NO_CONFLICT = $.fn[name];
|
|
170
|
+
$.fn[name] = plugin.jQueryInterface;
|
|
171
|
+
$.fn[name].Constructor = plugin;
|
|
172
|
+
|
|
173
|
+
$.fn[name].noConflict = () => {
|
|
174
|
+
$.fn[name] = JQUERY_NO_CONFLICT;
|
|
175
|
+
return plugin.jQueryInterface;
|
|
176
|
+
};
|
|
177
|
+
}
|
|
178
|
+
});
|
|
179
|
+
};
|
|
180
|
+
|
|
181
|
+
/**
|
|
182
|
+
* --------------------------------------------------------------------------
|
|
183
|
+
* Bootstrap (v5.0.0): carousel.js
|
|
184
|
+
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
185
|
+
* --------------------------------------------------------------------------
|
|
186
|
+
*/
|
|
53
187
|
/**
|
|
188
|
+
* ------------------------------------------------------------------------
|
|
54
189
|
* Constants
|
|
190
|
+
* ------------------------------------------------------------------------
|
|
55
191
|
*/
|
|
56
192
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
var TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch
|
|
68
|
-
|
|
69
|
-
var SWIPE_THRESHOLD = 40;
|
|
70
|
-
var CLASS_NAME_CAROUSEL = 'carousel';
|
|
71
|
-
var CLASS_NAME_ACTIVE = 'active';
|
|
72
|
-
var CLASS_NAME_SLIDE = 'slide';
|
|
73
|
-
var CLASS_NAME_RIGHT = 'carousel-item-right';
|
|
74
|
-
var CLASS_NAME_LEFT = 'carousel-item-left';
|
|
75
|
-
var CLASS_NAME_NEXT = 'carousel-item-next';
|
|
76
|
-
var CLASS_NAME_PREV = 'carousel-item-prev';
|
|
77
|
-
var CLASS_NAME_POINTER_EVENT = 'pointer-event';
|
|
78
|
-
var DIRECTION_NEXT = 'next';
|
|
79
|
-
var DIRECTION_PREV = 'prev';
|
|
80
|
-
var DIRECTION_LEFT = 'left';
|
|
81
|
-
var DIRECTION_RIGHT = 'right';
|
|
82
|
-
var EVENT_SLIDE = "slide" + EVENT_KEY;
|
|
83
|
-
var EVENT_SLID = "slid" + EVENT_KEY;
|
|
84
|
-
var EVENT_KEYDOWN = "keydown" + EVENT_KEY;
|
|
85
|
-
var EVENT_MOUSEENTER = "mouseenter" + EVENT_KEY;
|
|
86
|
-
var EVENT_MOUSELEAVE = "mouseleave" + EVENT_KEY;
|
|
87
|
-
var EVENT_TOUCHSTART = "touchstart" + EVENT_KEY;
|
|
88
|
-
var EVENT_TOUCHMOVE = "touchmove" + EVENT_KEY;
|
|
89
|
-
var EVENT_TOUCHEND = "touchend" + EVENT_KEY;
|
|
90
|
-
var EVENT_POINTERDOWN = "pointerdown" + EVENT_KEY;
|
|
91
|
-
var EVENT_POINTERUP = "pointerup" + EVENT_KEY;
|
|
92
|
-
var EVENT_DRAG_START = "dragstart" + EVENT_KEY;
|
|
93
|
-
var EVENT_LOAD_DATA_API = "load" + EVENT_KEY + DATA_API_KEY;
|
|
94
|
-
var EVENT_CLICK_DATA_API = "click" + EVENT_KEY + DATA_API_KEY;
|
|
95
|
-
var SELECTOR_ACTIVE = '.active';
|
|
96
|
-
var SELECTOR_ACTIVE_ITEM = '.active.carousel-item';
|
|
97
|
-
var SELECTOR_ITEM = '.carousel-item';
|
|
98
|
-
var SELECTOR_ITEM_IMG = '.carousel-item img';
|
|
99
|
-
var SELECTOR_NEXT_PREV = '.carousel-item-next, .carousel-item-prev';
|
|
100
|
-
var SELECTOR_INDICATORS = '.carousel-indicators';
|
|
101
|
-
var SELECTOR_DATA_SLIDE = '[data-slide], [data-slide-to]';
|
|
102
|
-
var SELECTOR_DATA_RIDE = '[data-ride="carousel"]';
|
|
103
|
-
var Default = {
|
|
193
|
+
const NAME = 'carousel';
|
|
194
|
+
const DATA_KEY = 'bs.carousel';
|
|
195
|
+
const EVENT_KEY = `.${DATA_KEY}`;
|
|
196
|
+
const DATA_API_KEY = '.data-api';
|
|
197
|
+
const ARROW_LEFT_KEY = 'ArrowLeft';
|
|
198
|
+
const ARROW_RIGHT_KEY = 'ArrowRight';
|
|
199
|
+
const TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch
|
|
200
|
+
|
|
201
|
+
const SWIPE_THRESHOLD = 40;
|
|
202
|
+
const Default = {
|
|
104
203
|
interval: 5000,
|
|
105
204
|
keyboard: true,
|
|
106
205
|
slide: false,
|
|
@@ -108,7 +207,7 @@
|
|
|
108
207
|
wrap: true,
|
|
109
208
|
touch: true
|
|
110
209
|
};
|
|
111
|
-
|
|
210
|
+
const DefaultType = {
|
|
112
211
|
interval: '(number|boolean)',
|
|
113
212
|
keyboard: 'boolean',
|
|
114
213
|
slide: '(boolean|string)',
|
|
@@ -116,16 +215,51 @@
|
|
|
116
215
|
wrap: 'boolean',
|
|
117
216
|
touch: 'boolean'
|
|
118
217
|
};
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
218
|
+
const ORDER_NEXT = 'next';
|
|
219
|
+
const ORDER_PREV = 'prev';
|
|
220
|
+
const DIRECTION_LEFT = 'left';
|
|
221
|
+
const DIRECTION_RIGHT = 'right';
|
|
222
|
+
const EVENT_SLIDE = `slide${EVENT_KEY}`;
|
|
223
|
+
const EVENT_SLID = `slid${EVENT_KEY}`;
|
|
224
|
+
const EVENT_KEYDOWN = `keydown${EVENT_KEY}`;
|
|
225
|
+
const EVENT_MOUSEENTER = `mouseenter${EVENT_KEY}`;
|
|
226
|
+
const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY}`;
|
|
227
|
+
const EVENT_TOUCHSTART = `touchstart${EVENT_KEY}`;
|
|
228
|
+
const EVENT_TOUCHMOVE = `touchmove${EVENT_KEY}`;
|
|
229
|
+
const EVENT_TOUCHEND = `touchend${EVENT_KEY}`;
|
|
230
|
+
const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY}`;
|
|
231
|
+
const EVENT_POINTERUP = `pointerup${EVENT_KEY}`;
|
|
232
|
+
const EVENT_DRAG_START = `dragstart${EVENT_KEY}`;
|
|
233
|
+
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;
|
|
234
|
+
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
|
|
235
|
+
const CLASS_NAME_CAROUSEL = 'carousel';
|
|
236
|
+
const CLASS_NAME_ACTIVE = 'active';
|
|
237
|
+
const CLASS_NAME_SLIDE = 'slide';
|
|
238
|
+
const CLASS_NAME_END = 'carousel-item-end';
|
|
239
|
+
const CLASS_NAME_START = 'carousel-item-start';
|
|
240
|
+
const CLASS_NAME_NEXT = 'carousel-item-next';
|
|
241
|
+
const CLASS_NAME_PREV = 'carousel-item-prev';
|
|
242
|
+
const CLASS_NAME_POINTER_EVENT = 'pointer-event';
|
|
243
|
+
const SELECTOR_ACTIVE = '.active';
|
|
244
|
+
const SELECTOR_ACTIVE_ITEM = '.active.carousel-item';
|
|
245
|
+
const SELECTOR_ITEM = '.carousel-item';
|
|
246
|
+
const SELECTOR_ITEM_IMG = '.carousel-item img';
|
|
247
|
+
const SELECTOR_NEXT_PREV = '.carousel-item-next, .carousel-item-prev';
|
|
248
|
+
const SELECTOR_INDICATORS = '.carousel-indicators';
|
|
249
|
+
const SELECTOR_INDICATOR = '[data-bs-target]';
|
|
250
|
+
const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]';
|
|
251
|
+
const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]';
|
|
252
|
+
const POINTER_TYPE_TOUCH = 'touch';
|
|
253
|
+
const POINTER_TYPE_PEN = 'pen';
|
|
123
254
|
/**
|
|
124
|
-
*
|
|
255
|
+
* ------------------------------------------------------------------------
|
|
256
|
+
* Class Definition
|
|
257
|
+
* ------------------------------------------------------------------------
|
|
125
258
|
*/
|
|
126
259
|
|
|
127
|
-
|
|
128
|
-
|
|
260
|
+
class Carousel extends BaseComponent__default['default'] {
|
|
261
|
+
constructor(element, config) {
|
|
262
|
+
super(element);
|
|
129
263
|
this._items = null;
|
|
130
264
|
this._interval = null;
|
|
131
265
|
this._activeElement = null;
|
|
@@ -135,54 +269,58 @@
|
|
|
135
269
|
this.touchStartX = 0;
|
|
136
270
|
this.touchDeltaX = 0;
|
|
137
271
|
this._config = this._getConfig(config);
|
|
138
|
-
this.
|
|
139
|
-
this._indicatorsElement = this._element.querySelector(SELECTOR_INDICATORS);
|
|
272
|
+
this._indicatorsElement = SelectorEngine__default['default'].findOne(SELECTOR_INDICATORS, this._element);
|
|
140
273
|
this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0;
|
|
141
|
-
this._pointerEvent = Boolean(window.PointerEvent
|
|
274
|
+
this._pointerEvent = Boolean(window.PointerEvent);
|
|
142
275
|
|
|
143
276
|
this._addEventListeners();
|
|
144
277
|
} // Getters
|
|
145
278
|
|
|
146
279
|
|
|
147
|
-
|
|
280
|
+
static get Default() {
|
|
281
|
+
return Default;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
static get DATA_KEY() {
|
|
285
|
+
return DATA_KEY;
|
|
286
|
+
} // Public
|
|
287
|
+
|
|
148
288
|
|
|
149
|
-
|
|
150
|
-
_proto.next = function next() {
|
|
289
|
+
next() {
|
|
151
290
|
if (!this._isSliding) {
|
|
152
|
-
this._slide(
|
|
291
|
+
this._slide(ORDER_NEXT);
|
|
153
292
|
}
|
|
154
|
-
}
|
|
293
|
+
}
|
|
155
294
|
|
|
156
|
-
|
|
157
|
-
|
|
295
|
+
nextWhenVisible() {
|
|
296
|
+
// Don't call next when the page isn't visible
|
|
158
297
|
// or the carousel or its parent isn't visible
|
|
159
|
-
|
|
160
|
-
if (!document.hidden && $element.is(':visible') && $element.css('visibility') !== 'hidden') {
|
|
298
|
+
if (!document.hidden && isVisible(this._element)) {
|
|
161
299
|
this.next();
|
|
162
300
|
}
|
|
163
|
-
}
|
|
301
|
+
}
|
|
164
302
|
|
|
165
|
-
|
|
303
|
+
prev() {
|
|
166
304
|
if (!this._isSliding) {
|
|
167
|
-
this._slide(
|
|
305
|
+
this._slide(ORDER_PREV);
|
|
168
306
|
}
|
|
169
|
-
}
|
|
307
|
+
}
|
|
170
308
|
|
|
171
|
-
|
|
309
|
+
pause(event) {
|
|
172
310
|
if (!event) {
|
|
173
311
|
this._isPaused = true;
|
|
174
312
|
}
|
|
175
313
|
|
|
176
|
-
if (this._element
|
|
177
|
-
|
|
314
|
+
if (SelectorEngine__default['default'].findOne(SELECTOR_NEXT_PREV, this._element)) {
|
|
315
|
+
triggerTransitionEnd(this._element);
|
|
178
316
|
this.cycle(true);
|
|
179
317
|
}
|
|
180
318
|
|
|
181
319
|
clearInterval(this._interval);
|
|
182
320
|
this._interval = null;
|
|
183
|
-
}
|
|
321
|
+
}
|
|
184
322
|
|
|
185
|
-
|
|
323
|
+
cycle(event) {
|
|
186
324
|
if (!event) {
|
|
187
325
|
this._isPaused = false;
|
|
188
326
|
}
|
|
@@ -192,28 +330,24 @@
|
|
|
192
330
|
this._interval = null;
|
|
193
331
|
}
|
|
194
332
|
|
|
195
|
-
if (this._config.interval && !this._isPaused) {
|
|
333
|
+
if (this._config && this._config.interval && !this._isPaused) {
|
|
196
334
|
this._updateInterval();
|
|
197
335
|
|
|
198
336
|
this._interval = setInterval((document.visibilityState ? this.nextWhenVisible : this.next).bind(this), this._config.interval);
|
|
199
337
|
}
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
_proto.to = function to(index) {
|
|
203
|
-
var _this = this;
|
|
338
|
+
}
|
|
204
339
|
|
|
205
|
-
|
|
340
|
+
to(index) {
|
|
341
|
+
this._activeElement = SelectorEngine__default['default'].findOne(SELECTOR_ACTIVE_ITEM, this._element);
|
|
206
342
|
|
|
207
|
-
|
|
343
|
+
const activeIndex = this._getItemIndex(this._activeElement);
|
|
208
344
|
|
|
209
345
|
if (index > this._items.length - 1 || index < 0) {
|
|
210
346
|
return;
|
|
211
347
|
}
|
|
212
348
|
|
|
213
349
|
if (this._isSliding) {
|
|
214
|
-
|
|
215
|
-
return _this.to(index);
|
|
216
|
-
});
|
|
350
|
+
EventHandler__default['default'].one(this._element, EVENT_SLID, () => this.to(index));
|
|
217
351
|
return;
|
|
218
352
|
}
|
|
219
353
|
|
|
@@ -223,101 +357,85 @@
|
|
|
223
357
|
return;
|
|
224
358
|
}
|
|
225
359
|
|
|
226
|
-
|
|
360
|
+
const order = index > activeIndex ? ORDER_NEXT : ORDER_PREV;
|
|
227
361
|
|
|
228
|
-
this._slide(
|
|
229
|
-
}
|
|
362
|
+
this._slide(order, this._items[index]);
|
|
363
|
+
}
|
|
230
364
|
|
|
231
|
-
|
|
232
|
-
$__default["default"](this._element).off(EVENT_KEY);
|
|
233
|
-
$__default["default"].removeData(this._element, DATA_KEY);
|
|
365
|
+
dispose() {
|
|
234
366
|
this._items = null;
|
|
235
367
|
this._config = null;
|
|
236
|
-
this._element = null;
|
|
237
368
|
this._interval = null;
|
|
238
369
|
this._isPaused = null;
|
|
239
370
|
this._isSliding = null;
|
|
240
371
|
this._activeElement = null;
|
|
241
372
|
this._indicatorsElement = null;
|
|
373
|
+
super.dispose();
|
|
242
374
|
} // Private
|
|
243
|
-
;
|
|
244
375
|
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
376
|
+
|
|
377
|
+
_getConfig(config) {
|
|
378
|
+
config = { ...Default,
|
|
379
|
+
...config
|
|
380
|
+
};
|
|
381
|
+
typeCheckConfig(NAME, config, DefaultType);
|
|
248
382
|
return config;
|
|
249
|
-
}
|
|
383
|
+
}
|
|
250
384
|
|
|
251
|
-
|
|
252
|
-
|
|
385
|
+
_handleSwipe() {
|
|
386
|
+
const absDeltax = Math.abs(this.touchDeltaX);
|
|
253
387
|
|
|
254
388
|
if (absDeltax <= SWIPE_THRESHOLD) {
|
|
255
389
|
return;
|
|
256
390
|
}
|
|
257
391
|
|
|
258
|
-
|
|
259
|
-
this.touchDeltaX = 0;
|
|
260
|
-
|
|
261
|
-
if (direction > 0) {
|
|
262
|
-
this.prev();
|
|
263
|
-
} // swipe right
|
|
264
|
-
|
|
392
|
+
const direction = absDeltax / this.touchDeltaX;
|
|
393
|
+
this.touchDeltaX = 0;
|
|
265
394
|
|
|
266
|
-
if (direction
|
|
267
|
-
|
|
395
|
+
if (!direction) {
|
|
396
|
+
return;
|
|
268
397
|
}
|
|
269
|
-
};
|
|
270
398
|
|
|
271
|
-
|
|
272
|
-
|
|
399
|
+
this._slide(direction > 0 ? DIRECTION_RIGHT : DIRECTION_LEFT);
|
|
400
|
+
}
|
|
273
401
|
|
|
402
|
+
_addEventListeners() {
|
|
274
403
|
if (this._config.keyboard) {
|
|
275
|
-
|
|
276
|
-
return _this2._keydown(event);
|
|
277
|
-
});
|
|
404
|
+
EventHandler__default['default'].on(this._element, EVENT_KEYDOWN, event => this._keydown(event));
|
|
278
405
|
}
|
|
279
406
|
|
|
280
407
|
if (this._config.pause === 'hover') {
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
}).on(EVENT_MOUSELEAVE, function (event) {
|
|
284
|
-
return _this2.cycle(event);
|
|
285
|
-
});
|
|
408
|
+
EventHandler__default['default'].on(this._element, EVENT_MOUSEENTER, event => this.pause(event));
|
|
409
|
+
EventHandler__default['default'].on(this._element, EVENT_MOUSELEAVE, event => this.cycle(event));
|
|
286
410
|
}
|
|
287
411
|
|
|
288
|
-
if (this._config.touch) {
|
|
412
|
+
if (this._config.touch && this._touchSupported) {
|
|
289
413
|
this._addTouchEventListeners();
|
|
290
414
|
}
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
_proto._addTouchEventListeners = function _addTouchEventListeners() {
|
|
294
|
-
var _this3 = this;
|
|
295
|
-
|
|
296
|
-
if (!this._touchSupported) {
|
|
297
|
-
return;
|
|
298
|
-
}
|
|
415
|
+
}
|
|
299
416
|
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
417
|
+
_addTouchEventListeners() {
|
|
418
|
+
const start = event => {
|
|
419
|
+
if (this._pointerEvent && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)) {
|
|
420
|
+
this.touchStartX = event.clientX;
|
|
421
|
+
} else if (!this._pointerEvent) {
|
|
422
|
+
this.touchStartX = event.touches[0].clientX;
|
|
305
423
|
}
|
|
306
424
|
};
|
|
307
425
|
|
|
308
|
-
|
|
426
|
+
const move = event => {
|
|
309
427
|
// ensure swiping with one touch and not pinching
|
|
310
|
-
|
|
428
|
+
this.touchDeltaX = event.touches && event.touches.length > 1 ? 0 : event.touches[0].clientX - this.touchStartX;
|
|
311
429
|
};
|
|
312
430
|
|
|
313
|
-
|
|
314
|
-
if (
|
|
315
|
-
|
|
431
|
+
const end = event => {
|
|
432
|
+
if (this._pointerEvent && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)) {
|
|
433
|
+
this.touchDeltaX = event.clientX - this.touchStartX;
|
|
316
434
|
}
|
|
317
435
|
|
|
318
|
-
|
|
436
|
+
this._handleSwipe();
|
|
319
437
|
|
|
320
|
-
if (
|
|
438
|
+
if (this._config.pause === 'hover') {
|
|
321
439
|
// If it's a touch-enabled device, mouseenter/leave are fired as
|
|
322
440
|
// part of the mouse compatibility events on first tap - the carousel
|
|
323
441
|
// would stop cycling until user tapped out of it;
|
|
@@ -325,121 +443,109 @@
|
|
|
325
443
|
// (as if it's the second time we tap on it, mouseenter compat event
|
|
326
444
|
// is NOT fired) and after a timeout (to allow for mouse compatibility
|
|
327
445
|
// events to fire) we explicitly restart cycling
|
|
328
|
-
|
|
446
|
+
this.pause();
|
|
329
447
|
|
|
330
|
-
if (
|
|
331
|
-
clearTimeout(
|
|
448
|
+
if (this.touchTimeout) {
|
|
449
|
+
clearTimeout(this.touchTimeout);
|
|
332
450
|
}
|
|
333
451
|
|
|
334
|
-
|
|
335
|
-
return _this3.cycle(event);
|
|
336
|
-
}, TOUCHEVENT_COMPAT_WAIT + _this3._config.interval);
|
|
452
|
+
this.touchTimeout = setTimeout(event => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval);
|
|
337
453
|
}
|
|
338
454
|
};
|
|
339
455
|
|
|
340
|
-
|
|
341
|
-
|
|
456
|
+
SelectorEngine__default['default'].find(SELECTOR_ITEM_IMG, this._element).forEach(itemImg => {
|
|
457
|
+
EventHandler__default['default'].on(itemImg, EVENT_DRAG_START, e => e.preventDefault());
|
|
342
458
|
});
|
|
343
459
|
|
|
344
460
|
if (this._pointerEvent) {
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
});
|
|
348
|
-
$__default["default"](this._element).on(EVENT_POINTERUP, function (event) {
|
|
349
|
-
return end(event);
|
|
350
|
-
});
|
|
461
|
+
EventHandler__default['default'].on(this._element, EVENT_POINTERDOWN, event => start(event));
|
|
462
|
+
EventHandler__default['default'].on(this._element, EVENT_POINTERUP, event => end(event));
|
|
351
463
|
|
|
352
464
|
this._element.classList.add(CLASS_NAME_POINTER_EVENT);
|
|
353
465
|
} else {
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
$__default["default"](this._element).on(EVENT_TOUCHMOVE, function (event) {
|
|
358
|
-
return move(event);
|
|
359
|
-
});
|
|
360
|
-
$__default["default"](this._element).on(EVENT_TOUCHEND, function (event) {
|
|
361
|
-
return end(event);
|
|
362
|
-
});
|
|
466
|
+
EventHandler__default['default'].on(this._element, EVENT_TOUCHSTART, event => start(event));
|
|
467
|
+
EventHandler__default['default'].on(this._element, EVENT_TOUCHMOVE, event => move(event));
|
|
468
|
+
EventHandler__default['default'].on(this._element, EVENT_TOUCHEND, event => end(event));
|
|
363
469
|
}
|
|
364
|
-
}
|
|
470
|
+
}
|
|
365
471
|
|
|
366
|
-
|
|
472
|
+
_keydown(event) {
|
|
367
473
|
if (/input|textarea/i.test(event.target.tagName)) {
|
|
368
474
|
return;
|
|
369
475
|
}
|
|
370
476
|
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
event.preventDefault();
|
|
374
|
-
this.prev();
|
|
375
|
-
break;
|
|
477
|
+
if (event.key === ARROW_LEFT_KEY) {
|
|
478
|
+
event.preventDefault();
|
|
376
479
|
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
480
|
+
this._slide(DIRECTION_RIGHT);
|
|
481
|
+
} else if (event.key === ARROW_RIGHT_KEY) {
|
|
482
|
+
event.preventDefault();
|
|
483
|
+
|
|
484
|
+
this._slide(DIRECTION_LEFT);
|
|
381
485
|
}
|
|
382
|
-
}
|
|
486
|
+
}
|
|
383
487
|
|
|
384
|
-
|
|
385
|
-
this._items = element && element.parentNode ? [].
|
|
488
|
+
_getItemIndex(element) {
|
|
489
|
+
this._items = element && element.parentNode ? SelectorEngine__default['default'].find(SELECTOR_ITEM, element.parentNode) : [];
|
|
386
490
|
return this._items.indexOf(element);
|
|
387
|
-
}
|
|
491
|
+
}
|
|
388
492
|
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
493
|
+
_getItemByOrder(order, activeElement) {
|
|
494
|
+
const isNext = order === ORDER_NEXT;
|
|
495
|
+
const isPrev = order === ORDER_PREV;
|
|
392
496
|
|
|
393
|
-
|
|
497
|
+
const activeIndex = this._getItemIndex(activeElement);
|
|
394
498
|
|
|
395
|
-
|
|
396
|
-
|
|
499
|
+
const lastItemIndex = this._items.length - 1;
|
|
500
|
+
const isGoingToWrap = isPrev && activeIndex === 0 || isNext && activeIndex === lastItemIndex;
|
|
397
501
|
|
|
398
502
|
if (isGoingToWrap && !this._config.wrap) {
|
|
399
503
|
return activeElement;
|
|
400
504
|
}
|
|
401
505
|
|
|
402
|
-
|
|
403
|
-
|
|
506
|
+
const delta = isPrev ? -1 : 1;
|
|
507
|
+
const itemIndex = (activeIndex + delta) % this._items.length;
|
|
404
508
|
return itemIndex === -1 ? this._items[this._items.length - 1] : this._items[itemIndex];
|
|
405
|
-
}
|
|
509
|
+
}
|
|
406
510
|
|
|
407
|
-
|
|
408
|
-
|
|
511
|
+
_triggerSlideEvent(relatedTarget, eventDirectionName) {
|
|
512
|
+
const targetIndex = this._getItemIndex(relatedTarget);
|
|
409
513
|
|
|
410
|
-
|
|
514
|
+
const fromIndex = this._getItemIndex(SelectorEngine__default['default'].findOne(SELECTOR_ACTIVE_ITEM, this._element));
|
|
411
515
|
|
|
412
|
-
|
|
413
|
-
relatedTarget
|
|
516
|
+
return EventHandler__default['default'].trigger(this._element, EVENT_SLIDE, {
|
|
517
|
+
relatedTarget,
|
|
414
518
|
direction: eventDirectionName,
|
|
415
519
|
from: fromIndex,
|
|
416
520
|
to: targetIndex
|
|
417
521
|
});
|
|
418
|
-
|
|
419
|
-
return slideEvent;
|
|
420
|
-
};
|
|
522
|
+
}
|
|
421
523
|
|
|
422
|
-
|
|
524
|
+
_setActiveIndicatorElement(element) {
|
|
423
525
|
if (this._indicatorsElement) {
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
526
|
+
const activeIndicator = SelectorEngine__default['default'].findOne(SELECTOR_ACTIVE, this._indicatorsElement);
|
|
527
|
+
activeIndicator.classList.remove(CLASS_NAME_ACTIVE);
|
|
528
|
+
activeIndicator.removeAttribute('aria-current');
|
|
529
|
+
const indicators = SelectorEngine__default['default'].find(SELECTOR_INDICATOR, this._indicatorsElement);
|
|
530
|
+
|
|
531
|
+
for (let i = 0; i < indicators.length; i++) {
|
|
532
|
+
if (Number.parseInt(indicators[i].getAttribute('data-bs-slide-to'), 10) === this._getItemIndex(element)) {
|
|
533
|
+
indicators[i].classList.add(CLASS_NAME_ACTIVE);
|
|
534
|
+
indicators[i].setAttribute('aria-current', 'true');
|
|
535
|
+
break;
|
|
536
|
+
}
|
|
431
537
|
}
|
|
432
538
|
}
|
|
433
|
-
}
|
|
539
|
+
}
|
|
434
540
|
|
|
435
|
-
|
|
436
|
-
|
|
541
|
+
_updateInterval() {
|
|
542
|
+
const element = this._activeElement || SelectorEngine__default['default'].findOne(SELECTOR_ACTIVE_ITEM, this._element);
|
|
437
543
|
|
|
438
544
|
if (!element) {
|
|
439
545
|
return;
|
|
440
546
|
}
|
|
441
547
|
|
|
442
|
-
|
|
548
|
+
const elementInterval = Number.parseInt(element.getAttribute('data-bs-interval'), 10);
|
|
443
549
|
|
|
444
550
|
if (elementInterval) {
|
|
445
551
|
this._config.defaultInterval = this._config.defaultInterval || this._config.interval;
|
|
@@ -447,42 +553,34 @@
|
|
|
447
553
|
} else {
|
|
448
554
|
this._config.interval = this._config.defaultInterval || this._config.interval;
|
|
449
555
|
}
|
|
450
|
-
}
|
|
556
|
+
}
|
|
451
557
|
|
|
452
|
-
|
|
453
|
-
|
|
558
|
+
_slide(directionOrOrder, element) {
|
|
559
|
+
const order = this._directionToOrder(directionOrOrder);
|
|
454
560
|
|
|
455
|
-
|
|
561
|
+
const activeElement = SelectorEngine__default['default'].findOne(SELECTOR_ACTIVE_ITEM, this._element);
|
|
456
562
|
|
|
457
|
-
|
|
563
|
+
const activeElementIndex = this._getItemIndex(activeElement);
|
|
458
564
|
|
|
459
|
-
|
|
565
|
+
const nextElement = element || this._getItemByOrder(order, activeElement);
|
|
460
566
|
|
|
461
|
-
|
|
567
|
+
const nextElementIndex = this._getItemIndex(nextElement);
|
|
462
568
|
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
569
|
+
const isCycling = Boolean(this._interval);
|
|
570
|
+
const isNext = order === ORDER_NEXT;
|
|
571
|
+
const directionalClassName = isNext ? CLASS_NAME_START : CLASS_NAME_END;
|
|
572
|
+
const orderClassName = isNext ? CLASS_NAME_NEXT : CLASS_NAME_PREV;
|
|
467
573
|
|
|
468
|
-
|
|
469
|
-
directionalClassName = CLASS_NAME_LEFT;
|
|
470
|
-
orderClassName = CLASS_NAME_NEXT;
|
|
471
|
-
eventDirectionName = DIRECTION_LEFT;
|
|
472
|
-
} else {
|
|
473
|
-
directionalClassName = CLASS_NAME_RIGHT;
|
|
474
|
-
orderClassName = CLASS_NAME_PREV;
|
|
475
|
-
eventDirectionName = DIRECTION_RIGHT;
|
|
476
|
-
}
|
|
574
|
+
const eventDirectionName = this._orderToDirection(order);
|
|
477
575
|
|
|
478
|
-
if (nextElement &&
|
|
576
|
+
if (nextElement && nextElement.classList.contains(CLASS_NAME_ACTIVE)) {
|
|
479
577
|
this._isSliding = false;
|
|
480
578
|
return;
|
|
481
579
|
}
|
|
482
580
|
|
|
483
|
-
|
|
581
|
+
const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName);
|
|
484
582
|
|
|
485
|
-
if (slideEvent.
|
|
583
|
+
if (slideEvent.defaultPrevented) {
|
|
486
584
|
return;
|
|
487
585
|
}
|
|
488
586
|
|
|
@@ -500,143 +598,158 @@
|
|
|
500
598
|
this._setActiveIndicatorElement(nextElement);
|
|
501
599
|
|
|
502
600
|
this._activeElement = nextElement;
|
|
503
|
-
var slidEvent = $__default["default"].Event(EVENT_SLID, {
|
|
504
|
-
relatedTarget: nextElement,
|
|
505
|
-
direction: eventDirectionName,
|
|
506
|
-
from: activeElementIndex,
|
|
507
|
-
to: nextElementIndex
|
|
508
|
-
});
|
|
509
601
|
|
|
510
|
-
if (
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
602
|
+
if (this._element.classList.contains(CLASS_NAME_SLIDE)) {
|
|
603
|
+
nextElement.classList.add(orderClassName);
|
|
604
|
+
reflow(nextElement);
|
|
605
|
+
activeElement.classList.add(directionalClassName);
|
|
606
|
+
nextElement.classList.add(directionalClassName);
|
|
607
|
+
const transitionDuration = getTransitionDurationFromElement(activeElement);
|
|
608
|
+
EventHandler__default['default'].one(activeElement, 'transitionend', () => {
|
|
609
|
+
nextElement.classList.remove(directionalClassName, orderClassName);
|
|
610
|
+
nextElement.classList.add(CLASS_NAME_ACTIVE);
|
|
611
|
+
activeElement.classList.remove(CLASS_NAME_ACTIVE, orderClassName, directionalClassName);
|
|
612
|
+
this._isSliding = false;
|
|
613
|
+
setTimeout(() => {
|
|
614
|
+
EventHandler__default['default'].trigger(this._element, EVENT_SLID, {
|
|
615
|
+
relatedTarget: nextElement,
|
|
616
|
+
direction: eventDirectionName,
|
|
617
|
+
from: activeElementIndex,
|
|
618
|
+
to: nextElementIndex
|
|
619
|
+
});
|
|
522
620
|
}, 0);
|
|
523
|
-
})
|
|
621
|
+
});
|
|
622
|
+
emulateTransitionEnd(activeElement, transitionDuration);
|
|
524
623
|
} else {
|
|
525
|
-
|
|
526
|
-
|
|
624
|
+
activeElement.classList.remove(CLASS_NAME_ACTIVE);
|
|
625
|
+
nextElement.classList.add(CLASS_NAME_ACTIVE);
|
|
527
626
|
this._isSliding = false;
|
|
528
|
-
|
|
627
|
+
EventHandler__default['default'].trigger(this._element, EVENT_SLID, {
|
|
628
|
+
relatedTarget: nextElement,
|
|
629
|
+
direction: eventDirectionName,
|
|
630
|
+
from: activeElementIndex,
|
|
631
|
+
to: nextElementIndex
|
|
632
|
+
});
|
|
529
633
|
}
|
|
530
634
|
|
|
531
635
|
if (isCycling) {
|
|
532
636
|
this.cycle();
|
|
533
637
|
}
|
|
534
|
-
}
|
|
535
|
-
;
|
|
638
|
+
}
|
|
536
639
|
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
640
|
+
_directionToOrder(direction) {
|
|
641
|
+
if (![DIRECTION_RIGHT, DIRECTION_LEFT].includes(direction)) {
|
|
642
|
+
return direction;
|
|
643
|
+
}
|
|
540
644
|
|
|
541
|
-
|
|
645
|
+
if (isRTL()) {
|
|
646
|
+
return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT;
|
|
647
|
+
}
|
|
542
648
|
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
}
|
|
649
|
+
return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV;
|
|
650
|
+
}
|
|
546
651
|
|
|
547
|
-
|
|
652
|
+
_orderToDirection(order) {
|
|
653
|
+
if (![ORDER_NEXT, ORDER_PREV].includes(order)) {
|
|
654
|
+
return order;
|
|
655
|
+
}
|
|
548
656
|
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
}
|
|
657
|
+
if (isRTL()) {
|
|
658
|
+
return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT;
|
|
659
|
+
}
|
|
553
660
|
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
} else if (typeof action === 'string') {
|
|
557
|
-
if (typeof data[action] === 'undefined') {
|
|
558
|
-
throw new TypeError("No method named \"" + action + "\"");
|
|
559
|
-
}
|
|
661
|
+
return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT;
|
|
662
|
+
} // Static
|
|
560
663
|
|
|
561
|
-
data[action]();
|
|
562
|
-
} else if (_config.interval && _config.ride) {
|
|
563
|
-
data.pause();
|
|
564
|
-
data.cycle();
|
|
565
|
-
}
|
|
566
|
-
});
|
|
567
|
-
};
|
|
568
664
|
|
|
569
|
-
|
|
570
|
-
|
|
665
|
+
static carouselInterface(element, config) {
|
|
666
|
+
let data = Data__default['default'].get(element, DATA_KEY);
|
|
667
|
+
let _config = { ...Default,
|
|
668
|
+
...Manipulator__default['default'].getDataAttributes(element)
|
|
669
|
+
};
|
|
571
670
|
|
|
572
|
-
if (
|
|
573
|
-
|
|
671
|
+
if (typeof config === 'object') {
|
|
672
|
+
_config = { ..._config,
|
|
673
|
+
...config
|
|
674
|
+
};
|
|
574
675
|
}
|
|
575
676
|
|
|
576
|
-
|
|
677
|
+
const action = typeof config === 'string' ? config : _config.slide;
|
|
577
678
|
|
|
578
|
-
if (!
|
|
579
|
-
|
|
679
|
+
if (!data) {
|
|
680
|
+
data = new Carousel(element, _config);
|
|
681
|
+
}
|
|
682
|
+
|
|
683
|
+
if (typeof config === 'number') {
|
|
684
|
+
data.to(config);
|
|
685
|
+
} else if (typeof action === 'string') {
|
|
686
|
+
if (typeof data[action] === 'undefined') {
|
|
687
|
+
throw new TypeError(`No method named "${action}"`);
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
data[action]();
|
|
691
|
+
} else if (_config.interval && _config.ride) {
|
|
692
|
+
data.pause();
|
|
693
|
+
data.cycle();
|
|
580
694
|
}
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
static jQueryInterface(config) {
|
|
698
|
+
return this.each(function () {
|
|
699
|
+
Carousel.carouselInterface(this, config);
|
|
700
|
+
});
|
|
701
|
+
}
|
|
581
702
|
|
|
582
|
-
|
|
703
|
+
static dataApiClickHandler(event) {
|
|
704
|
+
const target = getElementFromSelector(this);
|
|
583
705
|
|
|
584
|
-
|
|
706
|
+
if (!target || !target.classList.contains(CLASS_NAME_CAROUSEL)) {
|
|
707
|
+
return;
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
const config = { ...Manipulator__default['default'].getDataAttributes(target),
|
|
711
|
+
...Manipulator__default['default'].getDataAttributes(this)
|
|
712
|
+
};
|
|
713
|
+
const slideIndex = this.getAttribute('data-bs-slide-to');
|
|
585
714
|
|
|
586
715
|
if (slideIndex) {
|
|
587
716
|
config.interval = false;
|
|
588
717
|
}
|
|
589
718
|
|
|
590
|
-
Carousel.
|
|
719
|
+
Carousel.carouselInterface(target, config);
|
|
591
720
|
|
|
592
721
|
if (slideIndex) {
|
|
593
|
-
|
|
722
|
+
Data__default['default'].get(target, DATA_KEY).to(slideIndex);
|
|
594
723
|
}
|
|
595
724
|
|
|
596
725
|
event.preventDefault();
|
|
597
|
-
}
|
|
598
|
-
|
|
599
|
-
_createClass(Carousel, null, [{
|
|
600
|
-
key: "VERSION",
|
|
601
|
-
get: function get() {
|
|
602
|
-
return VERSION;
|
|
603
|
-
}
|
|
604
|
-
}, {
|
|
605
|
-
key: "Default",
|
|
606
|
-
get: function get() {
|
|
607
|
-
return Default;
|
|
608
|
-
}
|
|
609
|
-
}]);
|
|
726
|
+
}
|
|
610
727
|
|
|
611
|
-
|
|
612
|
-
}();
|
|
728
|
+
}
|
|
613
729
|
/**
|
|
614
|
-
*
|
|
730
|
+
* ------------------------------------------------------------------------
|
|
731
|
+
* Data Api implementation
|
|
732
|
+
* ------------------------------------------------------------------------
|
|
615
733
|
*/
|
|
616
734
|
|
|
617
735
|
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
for (var i = 0, len = carousels.length; i < len; i++) {
|
|
623
|
-
var $carousel = $__default["default"](carousels[i]);
|
|
736
|
+
EventHandler__default['default'].on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, Carousel.dataApiClickHandler);
|
|
737
|
+
EventHandler__default['default'].on(window, EVENT_LOAD_DATA_API, () => {
|
|
738
|
+
const carousels = SelectorEngine__default['default'].find(SELECTOR_DATA_RIDE);
|
|
624
739
|
|
|
625
|
-
|
|
740
|
+
for (let i = 0, len = carousels.length; i < len; i++) {
|
|
741
|
+
Carousel.carouselInterface(carousels[i], Data__default['default'].get(carousels[i], DATA_KEY));
|
|
626
742
|
}
|
|
627
743
|
});
|
|
628
744
|
/**
|
|
745
|
+
* ------------------------------------------------------------------------
|
|
629
746
|
* jQuery
|
|
747
|
+
* ------------------------------------------------------------------------
|
|
748
|
+
* add .Carousel to jQuery only if jQuery is present
|
|
630
749
|
*/
|
|
631
750
|
|
|
632
|
-
|
|
633
|
-
$__default["default"].fn[NAME].Constructor = Carousel;
|
|
634
|
-
|
|
635
|
-
$__default["default"].fn[NAME].noConflict = function () {
|
|
636
|
-
$__default["default"].fn[NAME] = JQUERY_NO_CONFLICT;
|
|
637
|
-
return Carousel._jQueryInterface;
|
|
638
|
-
};
|
|
751
|
+
defineJQueryPlugin(NAME, Carousel);
|
|
639
752
|
|
|
640
753
|
return Carousel;
|
|
641
754
|
|
|
642
|
-
}));
|
|
755
|
+
})));
|