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