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