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