bootstrap 4.3.1 → 5.1.3
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 +172 -136
- data/assets/javascripts/bootstrap/base-component.js +182 -0
- data/assets/javascripts/bootstrap/button.js +101 -142
- data/assets/javascripts/bootstrap/carousel.js +483 -408
- data/assets/javascripts/bootstrap/collapse.js +340 -273
- data/assets/javascripts/bootstrap/dom/data.js +68 -0
- data/assets/javascripts/bootstrap/dom/event-handler.js +321 -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 +491 -399
- data/assets/javascripts/bootstrap/modal.js +841 -449
- data/assets/javascripts/bootstrap/offcanvas.js +866 -0
- data/assets/javascripts/bootstrap/popover.js +121 -198
- data/assets/javascripts/bootstrap/scrollspy.js +256 -240
- data/assets/javascripts/bootstrap/tab.js +218 -154
- data/assets/javascripts/bootstrap/toast.js +329 -189
- data/assets/javascripts/bootstrap/tooltip.js +651 -552
- 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 +3503 -2892
- data/assets/javascripts/bootstrap.min.js +4 -4
- data/assets/stylesheets/_bootstrap-grid.scss +56 -18
- data/assets/stylesheets/_bootstrap-reboot.scss +5 -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 +243 -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 +43 -8
- data/assets/stylesheets/bootstrap/_spinners.scss +21 -7
- data/assets/stylesheets/bootstrap/_tables.scss +84 -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 +1007 -489
- 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 +72 -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 +132 -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 +278 -128
- 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.3 (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
|
+
const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
|
|
13
|
+
|
|
14
|
+
const EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
|
|
15
|
+
const Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator);
|
|
16
|
+
const SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine);
|
|
17
|
+
const BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* --------------------------------------------------------------------------
|
|
21
|
+
* Bootstrap (v5.1.3): 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.3): 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 (
|
|
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,79 @@
|
|
|
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;
|
|
415
|
+
}
|
|
319
416
|
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
417
|
+
_addTouchEventListeners() {
|
|
418
|
+
const hasPointerPenTouch = event => {
|
|
419
|
+
return this._pointerEvent && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH);
|
|
420
|
+
};
|
|
323
421
|
|
|
324
|
-
|
|
325
|
-
if (
|
|
326
|
-
|
|
327
|
-
} else if (!
|
|
328
|
-
|
|
422
|
+
const start = event => {
|
|
423
|
+
if (hasPointerPenTouch(event)) {
|
|
424
|
+
this.touchStartX = event.clientX;
|
|
425
|
+
} else if (!this._pointerEvent) {
|
|
426
|
+
this.touchStartX = event.touches[0].clientX;
|
|
329
427
|
}
|
|
330
428
|
};
|
|
331
429
|
|
|
332
|
-
|
|
430
|
+
const move = event => {
|
|
333
431
|
// 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
|
-
}
|
|
432
|
+
this.touchDeltaX = event.touches && event.touches.length > 1 ? 0 : event.touches[0].clientX - this.touchStartX;
|
|
339
433
|
};
|
|
340
434
|
|
|
341
|
-
|
|
342
|
-
if (
|
|
343
|
-
|
|
435
|
+
const end = event => {
|
|
436
|
+
if (hasPointerPenTouch(event)) {
|
|
437
|
+
this.touchDeltaX = event.clientX - this.touchStartX;
|
|
344
438
|
}
|
|
345
439
|
|
|
346
|
-
|
|
440
|
+
this._handleSwipe();
|
|
347
441
|
|
|
348
|
-
if (
|
|
442
|
+
if (this._config.pause === 'hover') {
|
|
349
443
|
// If it's a touch-enabled device, mouseenter/leave are fired as
|
|
350
444
|
// part of the mouse compatibility events on first tap - the carousel
|
|
351
445
|
// would stop cycling until user tapped out of it;
|
|
@@ -353,149 +447,133 @@
|
|
|
353
447
|
// (as if it's the second time we tap on it, mouseenter compat event
|
|
354
448
|
// is NOT fired) and after a timeout (to allow for mouse compatibility
|
|
355
449
|
// events to fire) we explicitly restart cycling
|
|
356
|
-
|
|
450
|
+
this.pause();
|
|
357
451
|
|
|
358
|
-
if (
|
|
359
|
-
clearTimeout(
|
|
452
|
+
if (this.touchTimeout) {
|
|
453
|
+
clearTimeout(this.touchTimeout);
|
|
360
454
|
}
|
|
361
455
|
|
|
362
|
-
|
|
363
|
-
return _this3.cycle(event);
|
|
364
|
-
}, TOUCHEVENT_COMPAT_WAIT + _this3._config.interval);
|
|
456
|
+
this.touchTimeout = setTimeout(event => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval);
|
|
365
457
|
}
|
|
366
458
|
};
|
|
367
459
|
|
|
368
|
-
|
|
369
|
-
|
|
460
|
+
SelectorEngine__default.default.find(SELECTOR_ITEM_IMG, this._element).forEach(itemImg => {
|
|
461
|
+
EventHandler__default.default.on(itemImg, EVENT_DRAG_START, event => event.preventDefault());
|
|
370
462
|
});
|
|
371
463
|
|
|
372
464
|
if (this._pointerEvent) {
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
});
|
|
376
|
-
$(this._element).on(Event.POINTERUP, function (event) {
|
|
377
|
-
return end(event);
|
|
378
|
-
});
|
|
465
|
+
EventHandler__default.default.on(this._element, EVENT_POINTERDOWN, event => start(event));
|
|
466
|
+
EventHandler__default.default.on(this._element, EVENT_POINTERUP, event => end(event));
|
|
379
467
|
|
|
380
|
-
this._element.classList.add(
|
|
468
|
+
this._element.classList.add(CLASS_NAME_POINTER_EVENT);
|
|
381
469
|
} 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
|
-
});
|
|
470
|
+
EventHandler__default.default.on(this._element, EVENT_TOUCHSTART, event => start(event));
|
|
471
|
+
EventHandler__default.default.on(this._element, EVENT_TOUCHMOVE, event => move(event));
|
|
472
|
+
EventHandler__default.default.on(this._element, EVENT_TOUCHEND, event => end(event));
|
|
391
473
|
}
|
|
392
|
-
}
|
|
474
|
+
}
|
|
393
475
|
|
|
394
|
-
|
|
476
|
+
_keydown(event) {
|
|
395
477
|
if (/input|textarea/i.test(event.target.tagName)) {
|
|
396
478
|
return;
|
|
397
479
|
}
|
|
398
480
|
|
|
399
|
-
|
|
400
|
-
case ARROW_LEFT_KEYCODE:
|
|
401
|
-
event.preventDefault();
|
|
402
|
-
this.prev();
|
|
403
|
-
break;
|
|
481
|
+
const direction = KEY_TO_DIRECTION[event.key];
|
|
404
482
|
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
this.next();
|
|
408
|
-
break;
|
|
483
|
+
if (direction) {
|
|
484
|
+
event.preventDefault();
|
|
409
485
|
|
|
410
|
-
|
|
486
|
+
this._slide(direction);
|
|
411
487
|
}
|
|
412
|
-
}
|
|
488
|
+
}
|
|
413
489
|
|
|
414
|
-
|
|
415
|
-
this._items = element && element.parentNode ?
|
|
490
|
+
_getItemIndex(element) {
|
|
491
|
+
this._items = element && element.parentNode ? SelectorEngine__default.default.find(SELECTOR_ITEM, element.parentNode) : [];
|
|
416
492
|
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
|
-
}
|
|
493
|
+
}
|
|
431
494
|
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
return
|
|
435
|
-
}
|
|
495
|
+
_getItemByOrder(order, activeElement) {
|
|
496
|
+
const isNext = order === ORDER_NEXT;
|
|
497
|
+
return getNextActiveElement(this._items, activeElement, isNext, this._config.wrap);
|
|
498
|
+
}
|
|
436
499
|
|
|
437
|
-
|
|
438
|
-
|
|
500
|
+
_triggerSlideEvent(relatedTarget, eventDirectionName) {
|
|
501
|
+
const targetIndex = this._getItemIndex(relatedTarget);
|
|
439
502
|
|
|
440
|
-
|
|
503
|
+
const fromIndex = this._getItemIndex(SelectorEngine__default.default.findOne(SELECTOR_ACTIVE_ITEM, this._element));
|
|
441
504
|
|
|
442
|
-
|
|
443
|
-
relatedTarget
|
|
505
|
+
return EventHandler__default.default.trigger(this._element, EVENT_SLIDE, {
|
|
506
|
+
relatedTarget,
|
|
444
507
|
direction: eventDirectionName,
|
|
445
508
|
from: fromIndex,
|
|
446
509
|
to: targetIndex
|
|
447
510
|
});
|
|
448
|
-
|
|
449
|
-
return slideEvent;
|
|
450
|
-
};
|
|
511
|
+
}
|
|
451
512
|
|
|
452
|
-
|
|
513
|
+
_setActiveIndicatorElement(element) {
|
|
453
514
|
if (this._indicatorsElement) {
|
|
454
|
-
|
|
455
|
-
|
|
515
|
+
const activeIndicator = SelectorEngine__default.default.findOne(SELECTOR_ACTIVE, this._indicatorsElement);
|
|
516
|
+
activeIndicator.classList.remove(CLASS_NAME_ACTIVE);
|
|
517
|
+
activeIndicator.removeAttribute('aria-current');
|
|
518
|
+
const indicators = SelectorEngine__default.default.find(SELECTOR_INDICATOR, this._indicatorsElement);
|
|
519
|
+
|
|
520
|
+
for (let i = 0; i < indicators.length; i++) {
|
|
521
|
+
if (Number.parseInt(indicators[i].getAttribute('data-bs-slide-to'), 10) === this._getItemIndex(element)) {
|
|
522
|
+
indicators[i].classList.add(CLASS_NAME_ACTIVE);
|
|
523
|
+
indicators[i].setAttribute('aria-current', 'true');
|
|
524
|
+
break;
|
|
525
|
+
}
|
|
526
|
+
}
|
|
527
|
+
}
|
|
528
|
+
}
|
|
456
529
|
|
|
457
|
-
|
|
530
|
+
_updateInterval() {
|
|
531
|
+
const element = this._activeElement || SelectorEngine__default.default.findOne(SELECTOR_ACTIVE_ITEM, this._element);
|
|
458
532
|
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
}
|
|
533
|
+
if (!element) {
|
|
534
|
+
return;
|
|
462
535
|
}
|
|
463
|
-
};
|
|
464
536
|
|
|
465
|
-
|
|
466
|
-
var _this4 = this;
|
|
537
|
+
const elementInterval = Number.parseInt(element.getAttribute('data-bs-interval'), 10);
|
|
467
538
|
|
|
468
|
-
|
|
539
|
+
if (elementInterval) {
|
|
540
|
+
this._config.defaultInterval = this._config.defaultInterval || this._config.interval;
|
|
541
|
+
this._config.interval = elementInterval;
|
|
542
|
+
} else {
|
|
543
|
+
this._config.interval = this._config.defaultInterval || this._config.interval;
|
|
544
|
+
}
|
|
545
|
+
}
|
|
469
546
|
|
|
470
|
-
|
|
547
|
+
_slide(directionOrOrder, element) {
|
|
548
|
+
const order = this._directionToOrder(directionOrOrder);
|
|
471
549
|
|
|
472
|
-
|
|
550
|
+
const activeElement = SelectorEngine__default.default.findOne(SELECTOR_ACTIVE_ITEM, this._element);
|
|
473
551
|
|
|
474
|
-
|
|
552
|
+
const activeElementIndex = this._getItemIndex(activeElement);
|
|
475
553
|
|
|
476
|
-
|
|
477
|
-
var directionalClassName;
|
|
478
|
-
var orderClassName;
|
|
479
|
-
var eventDirectionName;
|
|
554
|
+
const nextElement = element || this._getItemByOrder(order, activeElement);
|
|
480
555
|
|
|
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
|
-
}
|
|
556
|
+
const nextElementIndex = this._getItemIndex(nextElement);
|
|
490
557
|
|
|
491
|
-
|
|
558
|
+
const isCycling = Boolean(this._interval);
|
|
559
|
+
const isNext = order === ORDER_NEXT;
|
|
560
|
+
const directionalClassName = isNext ? CLASS_NAME_START : CLASS_NAME_END;
|
|
561
|
+
const orderClassName = isNext ? CLASS_NAME_NEXT : CLASS_NAME_PREV;
|
|
562
|
+
|
|
563
|
+
const eventDirectionName = this._orderToDirection(order);
|
|
564
|
+
|
|
565
|
+
if (nextElement && nextElement.classList.contains(CLASS_NAME_ACTIVE)) {
|
|
492
566
|
this._isSliding = false;
|
|
493
567
|
return;
|
|
494
568
|
}
|
|
495
569
|
|
|
496
|
-
|
|
570
|
+
if (this._isSliding) {
|
|
571
|
+
return;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName);
|
|
497
575
|
|
|
498
|
-
if (slideEvent.
|
|
576
|
+
if (slideEvent.defaultPrevented) {
|
|
499
577
|
return;
|
|
500
578
|
}
|
|
501
579
|
|
|
@@ -512,125 +590,129 @@
|
|
|
512
590
|
|
|
513
591
|
this._setActiveIndicatorElement(nextElement);
|
|
514
592
|
|
|
515
|
-
|
|
516
|
-
relatedTarget: nextElement,
|
|
517
|
-
direction: eventDirectionName,
|
|
518
|
-
from: activeElementIndex,
|
|
519
|
-
to: nextElementIndex
|
|
520
|
-
});
|
|
593
|
+
this._activeElement = nextElement;
|
|
521
594
|
|
|
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
|
-
}
|
|
595
|
+
const triggerSlidEvent = () => {
|
|
596
|
+
EventHandler__default.default.trigger(this._element, EVENT_SLID, {
|
|
597
|
+
relatedTarget: nextElement,
|
|
598
|
+
direction: eventDirectionName,
|
|
599
|
+
from: activeElementIndex,
|
|
600
|
+
to: nextElementIndex
|
|
601
|
+
});
|
|
602
|
+
};
|
|
535
603
|
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
604
|
+
if (this._element.classList.contains(CLASS_NAME_SLIDE)) {
|
|
605
|
+
nextElement.classList.add(orderClassName);
|
|
606
|
+
reflow(nextElement);
|
|
607
|
+
activeElement.classList.add(directionalClassName);
|
|
608
|
+
nextElement.classList.add(directionalClassName);
|
|
609
|
+
|
|
610
|
+
const completeCallBack = () => {
|
|
611
|
+
nextElement.classList.remove(directionalClassName, orderClassName);
|
|
612
|
+
nextElement.classList.add(CLASS_NAME_ACTIVE);
|
|
613
|
+
activeElement.classList.remove(CLASS_NAME_ACTIVE, orderClassName, directionalClassName);
|
|
614
|
+
this._isSliding = false;
|
|
615
|
+
setTimeout(triggerSlidEvent, 0);
|
|
616
|
+
};
|
|
617
|
+
|
|
618
|
+
this._queueCallback(completeCallBack, activeElement, true);
|
|
545
619
|
} else {
|
|
546
|
-
|
|
547
|
-
|
|
620
|
+
activeElement.classList.remove(CLASS_NAME_ACTIVE);
|
|
621
|
+
nextElement.classList.add(CLASS_NAME_ACTIVE);
|
|
548
622
|
this._isSliding = false;
|
|
549
|
-
|
|
623
|
+
triggerSlidEvent();
|
|
550
624
|
}
|
|
551
625
|
|
|
552
626
|
if (isCycling) {
|
|
553
627
|
this.cycle();
|
|
554
628
|
}
|
|
555
|
-
}
|
|
556
|
-
;
|
|
629
|
+
}
|
|
557
630
|
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
631
|
+
_directionToOrder(direction) {
|
|
632
|
+
if (![DIRECTION_RIGHT, DIRECTION_LEFT].includes(direction)) {
|
|
633
|
+
return direction;
|
|
634
|
+
}
|
|
561
635
|
|
|
562
|
-
|
|
636
|
+
if (isRTL()) {
|
|
637
|
+
return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT;
|
|
638
|
+
}
|
|
563
639
|
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
}
|
|
640
|
+
return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV;
|
|
641
|
+
}
|
|
567
642
|
|
|
568
|
-
|
|
643
|
+
_orderToDirection(order) {
|
|
644
|
+
if (![ORDER_NEXT, ORDER_PREV].includes(order)) {
|
|
645
|
+
return order;
|
|
646
|
+
}
|
|
569
647
|
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
}
|
|
648
|
+
if (isRTL()) {
|
|
649
|
+
return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT;
|
|
650
|
+
}
|
|
574
651
|
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
} else if (typeof action === 'string') {
|
|
578
|
-
if (typeof data[action] === 'undefined') {
|
|
579
|
-
throw new TypeError("No method named \"" + action + "\"");
|
|
580
|
-
}
|
|
652
|
+
return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT;
|
|
653
|
+
} // Static
|
|
581
654
|
|
|
582
|
-
data[action]();
|
|
583
|
-
} else if (_config.interval && _config.ride) {
|
|
584
|
-
data.pause();
|
|
585
|
-
data.cycle();
|
|
586
|
-
}
|
|
587
|
-
});
|
|
588
|
-
};
|
|
589
655
|
|
|
590
|
-
|
|
591
|
-
|
|
656
|
+
static carouselInterface(element, config) {
|
|
657
|
+
const data = Carousel.getOrCreateInstance(element, config);
|
|
658
|
+
let {
|
|
659
|
+
_config
|
|
660
|
+
} = data;
|
|
592
661
|
|
|
593
|
-
if (
|
|
594
|
-
|
|
662
|
+
if (typeof config === 'object') {
|
|
663
|
+
_config = { ..._config,
|
|
664
|
+
...config
|
|
665
|
+
};
|
|
595
666
|
}
|
|
596
667
|
|
|
597
|
-
|
|
668
|
+
const action = typeof config === 'string' ? config : _config.slide;
|
|
598
669
|
|
|
599
|
-
if (
|
|
600
|
-
|
|
670
|
+
if (typeof config === 'number') {
|
|
671
|
+
data.to(config);
|
|
672
|
+
} else if (typeof action === 'string') {
|
|
673
|
+
if (typeof data[action] === 'undefined') {
|
|
674
|
+
throw new TypeError(`No method named "${action}"`);
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
data[action]();
|
|
678
|
+
} else if (_config.interval && _config.ride) {
|
|
679
|
+
data.pause();
|
|
680
|
+
data.cycle();
|
|
601
681
|
}
|
|
682
|
+
}
|
|
602
683
|
|
|
603
|
-
|
|
684
|
+
static jQueryInterface(config) {
|
|
685
|
+
return this.each(function () {
|
|
686
|
+
Carousel.carouselInterface(this, config);
|
|
687
|
+
});
|
|
688
|
+
}
|
|
604
689
|
|
|
605
|
-
|
|
690
|
+
static dataApiClickHandler(event) {
|
|
691
|
+
const target = getElementFromSelector(this);
|
|
692
|
+
|
|
693
|
+
if (!target || !target.classList.contains(CLASS_NAME_CAROUSEL)) {
|
|
694
|
+
return;
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
const config = { ...Manipulator__default.default.getDataAttributes(target),
|
|
698
|
+
...Manipulator__default.default.getDataAttributes(this)
|
|
699
|
+
};
|
|
700
|
+
const slideIndex = this.getAttribute('data-bs-slide-to');
|
|
606
701
|
|
|
607
702
|
if (slideIndex) {
|
|
608
703
|
config.interval = false;
|
|
609
704
|
}
|
|
610
705
|
|
|
611
|
-
Carousel.
|
|
706
|
+
Carousel.carouselInterface(target, config);
|
|
612
707
|
|
|
613
708
|
if (slideIndex) {
|
|
614
|
-
|
|
709
|
+
Carousel.getInstance(target).to(slideIndex);
|
|
615
710
|
}
|
|
616
711
|
|
|
617
712
|
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
|
-
}]);
|
|
713
|
+
}
|
|
631
714
|
|
|
632
|
-
|
|
633
|
-
}();
|
|
715
|
+
}
|
|
634
716
|
/**
|
|
635
717
|
* ------------------------------------------------------------------------
|
|
636
718
|
* Data Api implementation
|
|
@@ -638,29 +720,22 @@
|
|
|
638
720
|
*/
|
|
639
721
|
|
|
640
722
|
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
for (var i = 0, len = carousels.length; i < len; i++) {
|
|
646
|
-
var $carousel = $(carousels[i]);
|
|
723
|
+
EventHandler__default.default.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, Carousel.dataApiClickHandler);
|
|
724
|
+
EventHandler__default.default.on(window, EVENT_LOAD_DATA_API, () => {
|
|
725
|
+
const carousels = SelectorEngine__default.default.find(SELECTOR_DATA_RIDE);
|
|
647
726
|
|
|
648
|
-
|
|
727
|
+
for (let i = 0, len = carousels.length; i < len; i++) {
|
|
728
|
+
Carousel.carouselInterface(carousels[i], Carousel.getInstance(carousels[i]));
|
|
649
729
|
}
|
|
650
730
|
});
|
|
651
731
|
/**
|
|
652
732
|
* ------------------------------------------------------------------------
|
|
653
733
|
* jQuery
|
|
654
734
|
* ------------------------------------------------------------------------
|
|
735
|
+
* add .Carousel to jQuery only if jQuery is present
|
|
655
736
|
*/
|
|
656
737
|
|
|
657
|
-
|
|
658
|
-
$.fn[NAME].Constructor = Carousel;
|
|
659
|
-
|
|
660
|
-
$.fn[NAME].noConflict = function () {
|
|
661
|
-
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
|
662
|
-
return Carousel._jQueryInterface;
|
|
663
|
-
};
|
|
738
|
+
defineJQueryPlugin(Carousel);
|
|
664
739
|
|
|
665
740
|
return Carousel;
|
|
666
741
|
|