You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

388 lines
13 KiB

8 months ago
  1. /*!
  2. * Bootstrap carousel.js v5.3.3 (https://getbootstrap.com/)
  3. * Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
  4. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  5. */
  6. (function (global, factory) {
  7. typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./base-component.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./dom/selector-engine.js'), require('./util/index.js'), require('./util/swipe.js')) :
  8. typeof define === 'function' && define.amd ? define(['./base-component', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './util/index', './util/swipe'], factory) :
  9. (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Carousel = factory(global.BaseComponent, global.EventHandler, global.Manipulator, global.SelectorEngine, global.Index, global.Swipe));
  10. })(this, (function (BaseComponent, EventHandler, Manipulator, SelectorEngine, index_js, Swipe) { 'use strict';
  11. /**
  12. * --------------------------------------------------------------------------
  13. * Bootstrap carousel.js
  14. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  15. * --------------------------------------------------------------------------
  16. */
  17. /**
  18. * Constants
  19. */
  20. const NAME = 'carousel';
  21. const DATA_KEY = 'bs.carousel';
  22. const EVENT_KEY = `.${DATA_KEY}`;
  23. const DATA_API_KEY = '.data-api';
  24. const ARROW_LEFT_KEY = 'ArrowLeft';
  25. const ARROW_RIGHT_KEY = 'ArrowRight';
  26. const TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch
  27. const ORDER_NEXT = 'next';
  28. const ORDER_PREV = 'prev';
  29. const DIRECTION_LEFT = 'left';
  30. const DIRECTION_RIGHT = 'right';
  31. const EVENT_SLIDE = `slide${EVENT_KEY}`;
  32. const EVENT_SLID = `slid${EVENT_KEY}`;
  33. const EVENT_KEYDOWN = `keydown${EVENT_KEY}`;
  34. const EVENT_MOUSEENTER = `mouseenter${EVENT_KEY}`;
  35. const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY}`;
  36. const EVENT_DRAG_START = `dragstart${EVENT_KEY}`;
  37. const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;
  38. const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
  39. const CLASS_NAME_CAROUSEL = 'carousel';
  40. const CLASS_NAME_ACTIVE = 'active';
  41. const CLASS_NAME_SLIDE = 'slide';
  42. const CLASS_NAME_END = 'carousel-item-end';
  43. const CLASS_NAME_START = 'carousel-item-start';
  44. const CLASS_NAME_NEXT = 'carousel-item-next';
  45. const CLASS_NAME_PREV = 'carousel-item-prev';
  46. const SELECTOR_ACTIVE = '.active';
  47. const SELECTOR_ITEM = '.carousel-item';
  48. const SELECTOR_ACTIVE_ITEM = SELECTOR_ACTIVE + SELECTOR_ITEM;
  49. const SELECTOR_ITEM_IMG = '.carousel-item img';
  50. const SELECTOR_INDICATORS = '.carousel-indicators';
  51. const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]';
  52. const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]';
  53. const KEY_TO_DIRECTION = {
  54. [ARROW_LEFT_KEY]: DIRECTION_RIGHT,
  55. [ARROW_RIGHT_KEY]: DIRECTION_LEFT
  56. };
  57. const Default = {
  58. interval: 5000,
  59. keyboard: true,
  60. pause: 'hover',
  61. ride: false,
  62. touch: true,
  63. wrap: true
  64. };
  65. const DefaultType = {
  66. interval: '(number|boolean)',
  67. // TODO:v6 remove boolean support
  68. keyboard: 'boolean',
  69. pause: '(string|boolean)',
  70. ride: '(boolean|string)',
  71. touch: 'boolean',
  72. wrap: 'boolean'
  73. };
  74. /**
  75. * Class definition
  76. */
  77. class Carousel extends BaseComponent {
  78. constructor(element, config) {
  79. super(element, config);
  80. this._interval = null;
  81. this._activeElement = null;
  82. this._isSliding = false;
  83. this.touchTimeout = null;
  84. this._swipeHelper = null;
  85. this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element);
  86. this._addEventListeners();
  87. if (this._config.ride === CLASS_NAME_CAROUSEL) {
  88. this.cycle();
  89. }
  90. }
  91. // Getters
  92. static get Default() {
  93. return Default;
  94. }
  95. static get DefaultType() {
  96. return DefaultType;
  97. }
  98. static get NAME() {
  99. return NAME;
  100. }
  101. // Public
  102. next() {
  103. this._slide(ORDER_NEXT);
  104. }
  105. nextWhenVisible() {
  106. // FIXME TODO use `document.visibilityState`
  107. // Don't call next when the page isn't visible
  108. // or the carousel or its parent isn't visible
  109. if (!document.hidden && index_js.isVisible(this._element)) {
  110. this.next();
  111. }
  112. }
  113. prev() {
  114. this._slide(ORDER_PREV);
  115. }
  116. pause() {
  117. if (this._isSliding) {
  118. index_js.triggerTransitionEnd(this._element);
  119. }
  120. this._clearInterval();
  121. }
  122. cycle() {
  123. this._clearInterval();
  124. this._updateInterval();
  125. this._interval = setInterval(() => this.nextWhenVisible(), this._config.interval);
  126. }
  127. _maybeEnableCycle() {
  128. if (!this._config.ride) {
  129. return;
  130. }
  131. if (this._isSliding) {
  132. EventHandler.one(this._element, EVENT_SLID, () => this.cycle());
  133. return;
  134. }
  135. this.cycle();
  136. }
  137. to(index) {
  138. const items = this._getItems();
  139. if (index > items.length - 1 || index < 0) {
  140. return;
  141. }
  142. if (this._isSliding) {
  143. EventHandler.one(this._element, EVENT_SLID, () => this.to(index));
  144. return;
  145. }
  146. const activeIndex = this._getItemIndex(this._getActive());
  147. if (activeIndex === index) {
  148. return;
  149. }
  150. const order = index > activeIndex ? ORDER_NEXT : ORDER_PREV;
  151. this._slide(order, items[index]);
  152. }
  153. dispose() {
  154. if (this._swipeHelper) {
  155. this._swipeHelper.dispose();
  156. }
  157. super.dispose();
  158. }
  159. // Private
  160. _configAfterMerge(config) {
  161. config.defaultInterval = config.interval;
  162. return config;
  163. }
  164. _addEventListeners() {
  165. if (this._config.keyboard) {
  166. EventHandler.on(this._element, EVENT_KEYDOWN, event => this._keydown(event));
  167. }
  168. if (this._config.pause === 'hover') {
  169. EventHandler.on(this._element, EVENT_MOUSEENTER, () => this.pause());
  170. EventHandler.on(this._element, EVENT_MOUSELEAVE, () => this._maybeEnableCycle());
  171. }
  172. if (this._config.touch && Swipe.isSupported()) {
  173. this._addTouchEventListeners();
  174. }
  175. }
  176. _addTouchEventListeners() {
  177. for (const img of SelectorEngine.find(SELECTOR_ITEM_IMG, this._element)) {
  178. EventHandler.on(img, EVENT_DRAG_START, event => event.preventDefault());
  179. }
  180. const endCallBack = () => {
  181. if (this._config.pause !== 'hover') {
  182. return;
  183. }
  184. // If it's a touch-enabled device, mouseenter/leave are fired as
  185. // part of the mouse compatibility events on first tap - the carousel
  186. // would stop cycling until user tapped out of it;
  187. // here, we listen for touchend, explicitly pause the carousel
  188. // (as if it's the second time we tap on it, mouseenter compat event
  189. // is NOT fired) and after a timeout (to allow for mouse compatibility
  190. // events to fire) we explicitly restart cycling
  191. this.pause();
  192. if (this.touchTimeout) {
  193. clearTimeout(this.touchTimeout);
  194. }
  195. this.touchTimeout = setTimeout(() => this._maybeEnableCycle(), TOUCHEVENT_COMPAT_WAIT + this._config.interval);
  196. };
  197. const swipeConfig = {
  198. leftCallback: () => this._slide(this._directionToOrder(DIRECTION_LEFT)),
  199. rightCallback: () => this._slide(this._directionToOrder(DIRECTION_RIGHT)),
  200. endCallback: endCallBack
  201. };
  202. this._swipeHelper = new Swipe(this._element, swipeConfig);
  203. }
  204. _keydown(event) {
  205. if (/input|textarea/i.test(event.target.tagName)) {
  206. return;
  207. }
  208. const direction = KEY_TO_DIRECTION[event.key];
  209. if (direction) {
  210. event.preventDefault();
  211. this._slide(this._directionToOrder(direction));
  212. }
  213. }
  214. _getItemIndex(element) {
  215. return this._getItems().indexOf(element);
  216. }
  217. _setActiveIndicatorElement(index) {
  218. if (!this._indicatorsElement) {
  219. return;
  220. }
  221. const activeIndicator = SelectorEngine.findOne(SELECTOR_ACTIVE, this._indicatorsElement);
  222. activeIndicator.classList.remove(CLASS_NAME_ACTIVE);
  223. activeIndicator.removeAttribute('aria-current');
  224. const newActiveIndicator = SelectorEngine.findOne(`[data-bs-slide-to="${index}"]`, this._indicatorsElement);
  225. if (newActiveIndicator) {
  226. newActiveIndicator.classList.add(CLASS_NAME_ACTIVE);
  227. newActiveIndicator.setAttribute('aria-current', 'true');
  228. }
  229. }
  230. _updateInterval() {
  231. const element = this._activeElement || this._getActive();
  232. if (!element) {
  233. return;
  234. }
  235. const elementInterval = Number.parseInt(element.getAttribute('data-bs-interval'), 10);
  236. this._config.interval = elementInterval || this._config.defaultInterval;
  237. }
  238. _slide(order, element = null) {
  239. if (this._isSliding) {
  240. return;
  241. }
  242. const activeElement = this._getActive();
  243. const isNext = order === ORDER_NEXT;
  244. const nextElement = element || index_js.getNextActiveElement(this._getItems(), activeElement, isNext, this._config.wrap);
  245. if (nextElement === activeElement) {
  246. return;
  247. }
  248. const nextElementIndex = this._getItemIndex(nextElement);
  249. const triggerEvent = eventName => {
  250. return EventHandler.trigger(this._element, eventName, {
  251. relatedTarget: nextElement,
  252. direction: this._orderToDirection(order),
  253. from: this._getItemIndex(activeElement),
  254. to: nextElementIndex
  255. });
  256. };
  257. const slideEvent = triggerEvent(EVENT_SLIDE);
  258. if (slideEvent.defaultPrevented) {
  259. return;
  260. }
  261. if (!activeElement || !nextElement) {
  262. // Some weirdness is happening, so we bail
  263. // TODO: change tests that use empty divs to avoid this check
  264. return;
  265. }
  266. const isCycling = Boolean(this._interval);
  267. this.pause();
  268. this._isSliding = true;
  269. this._setActiveIndicatorElement(nextElementIndex);
  270. this._activeElement = nextElement;
  271. const directionalClassName = isNext ? CLASS_NAME_START : CLASS_NAME_END;
  272. const orderClassName = isNext ? CLASS_NAME_NEXT : CLASS_NAME_PREV;
  273. nextElement.classList.add(orderClassName);
  274. index_js.reflow(nextElement);
  275. activeElement.classList.add(directionalClassName);
  276. nextElement.classList.add(directionalClassName);
  277. const completeCallBack = () => {
  278. nextElement.classList.remove(directionalClassName, orderClassName);
  279. nextElement.classList.add(CLASS_NAME_ACTIVE);
  280. activeElement.classList.remove(CLASS_NAME_ACTIVE, orderClassName, directionalClassName);
  281. this._isSliding = false;
  282. triggerEvent(EVENT_SLID);
  283. };
  284. this._queueCallback(completeCallBack, activeElement, this._isAnimated());
  285. if (isCycling) {
  286. this.cycle();
  287. }
  288. }
  289. _isAnimated() {
  290. return this._element.classList.contains(CLASS_NAME_SLIDE);
  291. }
  292. _getActive() {
  293. return SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element);
  294. }
  295. _getItems() {
  296. return SelectorEngine.find(SELECTOR_ITEM, this._element);
  297. }
  298. _clearInterval() {
  299. if (this._interval) {
  300. clearInterval(this._interval);
  301. this._interval = null;
  302. }
  303. }
  304. _directionToOrder(direction) {
  305. if (index_js.isRTL()) {
  306. return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT;
  307. }
  308. return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV;
  309. }
  310. _orderToDirection(order) {
  311. if (index_js.isRTL()) {
  312. return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT;
  313. }
  314. return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT;
  315. }
  316. // Static
  317. static jQueryInterface(config) {
  318. return this.each(function () {
  319. const data = Carousel.getOrCreateInstance(this, config);
  320. if (typeof config === 'number') {
  321. data.to(config);
  322. return;
  323. }
  324. if (typeof config === 'string') {
  325. if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
  326. throw new TypeError(`No method named "${config}"`);
  327. }
  328. data[config]();
  329. }
  330. });
  331. }
  332. }
  333. /**
  334. * Data API implementation
  335. */
  336. EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, function (event) {
  337. const target = SelectorEngine.getElementFromSelector(this);
  338. if (!target || !target.classList.contains(CLASS_NAME_CAROUSEL)) {
  339. return;
  340. }
  341. event.preventDefault();
  342. const carousel = Carousel.getOrCreateInstance(target);
  343. const slideIndex = this.getAttribute('data-bs-slide-to');
  344. if (slideIndex) {
  345. carousel.to(slideIndex);
  346. carousel._maybeEnableCycle();
  347. return;
  348. }
  349. if (Manipulator.getDataAttribute(this, 'slide') === 'next') {
  350. carousel.next();
  351. carousel._maybeEnableCycle();
  352. return;
  353. }
  354. carousel.prev();
  355. carousel._maybeEnableCycle();
  356. });
  357. EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
  358. const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE);
  359. for (const carousel of carousels) {
  360. Carousel.getOrCreateInstance(carousel);
  361. }
  362. });
  363. /**
  364. * jQuery
  365. */
  366. index_js.defineJQueryPlugin(Carousel);
  367. return Carousel;
  368. }));
  369. //# sourceMappingURL=carousel.js.map