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