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