0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-14 02:24:00 +01:00
Bootstrap/js/dist/carousel.js

472 lines
14 KiB
JavaScript
Raw Normal View History

2018-11-13 07:41:12 +01:00
/*!
* Bootstrap carousel.js v5.2.2 (https://getbootstrap.com/)
2022-05-13 08:07:23 +02:00
* Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
2020-06-16 20:50:01 +02:00
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
2018-11-13 07:41:12 +01:00
*/
2018-07-24 02:51:14 +02:00
(function (global, factory) {
2022-05-13 08:07:23 +02:00
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./util/index'), require('./dom/event-handler'), require('./dom/manipulator'), require('./dom/selector-engine'), require('./util/swipe'), require('./base-component')) :
typeof define === 'function' && define.amd ? define(['./util/index', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './util/swipe', './base-component'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Carousel = factory(global.Index, global.EventHandler, global.Manipulator, global.SelectorEngine, global.Swipe, global.BaseComponent));
})(this, (function (index, EventHandler, Manipulator, SelectorEngine, Swipe, BaseComponent) { 'use strict';
2018-07-24 02:51:14 +02:00
2021-10-05 17:50:18 +02:00
const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
2020-09-14 17:12:06 +02:00
2021-10-05 17:50:18 +02:00
const EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
const Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator);
const SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine);
2022-05-13 08:07:23 +02:00
const Swipe__default = /*#__PURE__*/_interopDefaultLegacy(Swipe);
2021-10-05 17:50:18 +02:00
const BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
2021-08-04 17:41:51 +02:00
/**
* --------------------------------------------------------------------------
* Bootstrap (v5.2.2): carousel.js
2021-08-04 17:41:51 +02:00
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
/**
2020-12-03 15:18:59 +01:00
* Constants
*/
2021-03-23 17:26:54 +01:00
const NAME = 'carousel';
const DATA_KEY = 'bs.carousel';
const EVENT_KEY = `.${DATA_KEY}`;
const DATA_API_KEY = '.data-api';
const ARROW_LEFT_KEY = 'ArrowLeft';
const ARROW_RIGHT_KEY = 'ArrowRight';
const TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch
2018-11-13 07:41:12 +01:00
2021-03-23 17:26:54 +01:00
const ORDER_NEXT = 'next';
const ORDER_PREV = 'prev';
const DIRECTION_LEFT = 'left';
const DIRECTION_RIGHT = 'right';
const EVENT_SLIDE = `slide${EVENT_KEY}`;
const EVENT_SLID = `slid${EVENT_KEY}`;
const EVENT_KEYDOWN = `keydown${EVENT_KEY}`;
const EVENT_MOUSEENTER = `mouseenter${EVENT_KEY}`;
const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY}`;
const EVENT_DRAG_START = `dragstart${EVENT_KEY}`;
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
const CLASS_NAME_CAROUSEL = 'carousel';
const CLASS_NAME_ACTIVE = 'active';
const CLASS_NAME_SLIDE = 'slide';
const CLASS_NAME_END = 'carousel-item-end';
const CLASS_NAME_START = 'carousel-item-start';
const CLASS_NAME_NEXT = 'carousel-item-next';
const CLASS_NAME_PREV = 'carousel-item-prev';
const SELECTOR_ACTIVE = '.active';
const SELECTOR_ITEM = '.carousel-item';
2022-05-13 08:07:23 +02:00
const SELECTOR_ACTIVE_ITEM = SELECTOR_ACTIVE + SELECTOR_ITEM;
2021-03-23 17:26:54 +01:00
const SELECTOR_ITEM_IMG = '.carousel-item img';
const SELECTOR_INDICATORS = '.carousel-indicators';
const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]';
const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]';
2022-05-13 08:07:23 +02:00
const KEY_TO_DIRECTION = {
[ARROW_LEFT_KEY]: DIRECTION_RIGHT,
[ARROW_RIGHT_KEY]: DIRECTION_LEFT
};
const Default = {
interval: 5000,
keyboard: true,
pause: 'hover',
ride: false,
touch: true,
wrap: true
};
const DefaultType = {
interval: '(number|boolean)',
// TODO:v6 remove boolean support
2022-05-13 08:07:23 +02:00
keyboard: 'boolean',
pause: '(string|boolean)',
ride: '(boolean|string)',
2022-05-13 08:07:23 +02:00
touch: 'boolean',
wrap: 'boolean'
};
2019-10-08 08:39:10 +02:00
/**
2022-05-13 08:07:23 +02:00
* Class definition
2019-10-08 08:39:10 +02:00
*/
2018-11-13 07:41:12 +01:00
2021-10-05 17:50:18 +02:00
class Carousel extends BaseComponent__default.default {
2021-03-23 17:26:54 +01:00
constructor(element, config) {
2022-05-13 08:07:23 +02:00
super(element, config);
2021-03-23 17:26:54 +01:00
this._interval = null;
this._activeElement = null;
this._isSliding = false;
this.touchTimeout = null;
2022-05-13 08:07:23 +02:00
this._swipeHelper = null;
2021-10-05 17:50:18 +02:00
this._indicatorsElement = SelectorEngine__default.default.findOne(SELECTOR_INDICATORS, this._element);
2021-03-23 17:26:54 +01:00
this._addEventListeners();
2022-05-13 08:07:23 +02:00
if (this._config.ride === CLASS_NAME_CAROUSEL) {
this.cycle();
}
2018-11-13 07:41:12 +01:00
} // Getters
2021-03-23 17:26:54 +01:00
static get Default() {
return Default;
}
2022-05-13 08:07:23 +02:00
static get DefaultType() {
return DefaultType;
}
static get NAME() {
return NAME;
2021-03-23 17:26:54 +01:00
} // Public
2018-11-13 07:41:12 +01:00
2021-03-23 17:26:54 +01:00
next() {
this._slide(ORDER_NEXT);
2021-03-23 17:26:54 +01:00
}
2018-11-13 07:41:12 +01:00
2021-03-23 17:26:54 +01:00
nextWhenVisible() {
2022-05-13 08:07:23 +02:00
// FIXME TODO use `document.visibilityState`
2018-11-13 07:41:12 +01:00
// Don't call next when the page isn't visible
// or the carousel or its parent isn't visible
2022-05-13 08:07:23 +02:00
if (!document.hidden && index.isVisible(this._element)) {
2018-11-13 07:41:12 +01:00
this.next();
}
2021-03-23 17:26:54 +01:00
}
2018-11-13 07:41:12 +01:00
2021-03-23 17:26:54 +01:00
prev() {
this._slide(ORDER_PREV);
2021-03-23 17:26:54 +01:00
}
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
pause() {
if (this._isSliding) {
index.triggerTransitionEnd(this._element);
2018-11-13 07:41:12 +01:00
}
2022-05-13 08:07:23 +02:00
this._clearInterval();
}
2018-11-13 07:41:12 +01:00
2022-05-13 08:07:23 +02:00
cycle() {
this._clearInterval();
this._updateInterval();
this._interval = setInterval(() => this.nextWhenVisible(), this._config.interval);
2021-03-23 17:26:54 +01:00
}
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
_maybeEnableCycle() {
if (!this._config.ride) {
return;
2018-11-13 07:41:12 +01:00
}
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
if (this._isSliding) {
EventHandler__default.default.one(this._element, EVENT_SLID, () => this.cycle());
return;
2018-11-13 07:41:12 +01:00
}
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
this.cycle();
2021-03-23 17:26:54 +01:00
}
2017-09-30 23:28:03 +02:00
2021-03-23 17:26:54 +01:00
to(index) {
2022-05-13 08:07:23 +02:00
const items = this._getItems();
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
if (index > items.length - 1 || index < 0) {
2018-11-13 07:41:12 +01:00
return;
}
2017-09-30 23:28:03 +02:00
2018-11-13 07:41:12 +01:00
if (this._isSliding) {
2021-10-05 17:50:18 +02:00
EventHandler__default.default.one(this._element, EVENT_SLID, () => this.to(index));
2018-11-13 07:41:12 +01:00
return;
}
2016-10-10 02:26:51 +02:00
2022-05-13 08:07:23 +02:00
const activeIndex = this._getItemIndex(this._getActive());
2018-11-13 07:41:12 +01:00
if (activeIndex === index) {
return;
}
2015-05-08 07:26:40 +02:00
2021-03-23 17:26:54 +01:00
const order = index > activeIndex ? ORDER_NEXT : ORDER_PREV;
2017-09-30 23:28:03 +02:00
2022-05-13 08:07:23 +02:00
this._slide(order, items[index]);
2021-03-23 17:26:54 +01:00
}
2017-09-30 23:28:03 +02:00
2022-05-13 08:07:23 +02:00
dispose() {
if (this._swipeHelper) {
this._swipeHelper.dispose();
2018-11-13 07:41:12 +01:00
}
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
super.dispose();
} // Private
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
_configAfterMerge(config) {
config.defaultInterval = config.interval;
return config;
2021-03-23 17:26:54 +01:00
}
2015-05-08 07:26:40 +02:00
2021-03-23 17:26:54 +01:00
_addEventListeners() {
2018-11-13 07:41:12 +01:00
if (this._config.keyboard) {
2021-10-05 17:50:18 +02:00
EventHandler__default.default.on(this._element, EVENT_KEYDOWN, event => this._keydown(event));
2018-11-13 07:41:12 +01:00
}
2016-11-01 05:14:23 +01:00
2018-11-13 07:41:12 +01:00
if (this._config.pause === 'hover') {
2022-05-13 08:07:23 +02:00
EventHandler__default.default.on(this._element, EVENT_MOUSEENTER, () => this.pause());
EventHandler__default.default.on(this._element, EVENT_MOUSELEAVE, () => this._maybeEnableCycle());
2018-11-13 07:41:12 +01:00
}
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
if (this._config.touch && Swipe__default.default.isSupported()) {
this._addTouchEventListeners();
}
2021-03-23 17:26:54 +01:00
}
2018-07-24 02:51:14 +02:00
2021-03-23 17:26:54 +01:00
_addTouchEventListeners() {
2022-05-13 08:07:23 +02:00
for (const img of SelectorEngine__default.default.find(SELECTOR_ITEM_IMG, this._element)) {
EventHandler__default.default.on(img, EVENT_DRAG_START, event => event.preventDefault());
}
2017-09-30 23:28:03 +02:00
2022-05-13 08:07:23 +02:00
const endCallBack = () => {
if (this._config.pause !== 'hover') {
return;
} // If it's a touch-enabled device, mouseenter/leave are fired as
// part of the mouse compatibility events on first tap - the carousel
// would stop cycling until user tapped out of it;
// here, we listen for touchend, explicitly pause the carousel
// (as if it's the second time we tap on it, mouseenter compat event
// is NOT fired) and after a timeout (to allow for mouse compatibility
// events to fire) we explicitly restart cycling
2018-11-13 07:41:12 +01:00
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
this.pause();
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
if (this.touchTimeout) {
clearTimeout(this.touchTimeout);
2018-07-24 02:51:14 +02:00
}
2016-10-10 02:26:51 +02:00
2022-05-13 08:07:23 +02:00
this.touchTimeout = setTimeout(() => this._maybeEnableCycle(), TOUCHEVENT_COMPAT_WAIT + this._config.interval);
};
2017-09-30 23:28:03 +02:00
2022-05-13 08:07:23 +02:00
const swipeConfig = {
leftCallback: () => this._slide(this._directionToOrder(DIRECTION_LEFT)),
rightCallback: () => this._slide(this._directionToOrder(DIRECTION_RIGHT)),
endCallback: endCallBack
};
this._swipeHelper = new Swipe__default.default(this._element, swipeConfig);
2021-03-23 17:26:54 +01:00
}
2015-05-08 07:26:40 +02:00
2021-03-23 17:26:54 +01:00
_keydown(event) {
2018-11-13 07:41:12 +01:00
if (/input|textarea/i.test(event.target.tagName)) {
return;
}
2015-05-08 07:26:40 +02:00
const direction = KEY_TO_DIRECTION[event.key];
if (direction) {
event.preventDefault();
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
this._slide(this._directionToOrder(direction));
2018-11-13 07:41:12 +01:00
}
2021-03-23 17:26:54 +01:00
}
2015-05-08 07:26:40 +02:00
2021-03-23 17:26:54 +01:00
_getItemIndex(element) {
2022-05-13 08:07:23 +02:00
return this._getItems().indexOf(element);
2021-03-23 17:26:54 +01:00
}
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
_setActiveIndicatorElement(index) {
if (!this._indicatorsElement) {
return;
}
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
const activeIndicator = SelectorEngine__default.default.findOne(SELECTOR_ACTIVE, this._indicatorsElement);
activeIndicator.classList.remove(CLASS_NAME_ACTIVE);
activeIndicator.removeAttribute('aria-current');
const newActiveIndicator = SelectorEngine__default.default.findOne(`[data-bs-slide-to="${index}"]`, this._indicatorsElement);
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
if (newActiveIndicator) {
newActiveIndicator.classList.add(CLASS_NAME_ACTIVE);
newActiveIndicator.setAttribute('aria-current', 'true');
2018-11-13 07:41:12 +01:00
}
2021-03-23 17:26:54 +01:00
}
2015-05-08 07:26:40 +02:00
2021-03-23 17:26:54 +01:00
_updateInterval() {
2022-05-13 08:07:23 +02:00
const element = this._activeElement || this._getActive();
2020-11-11 18:07:37 +01:00
if (!element) {
return;
}
2021-03-23 17:26:54 +01:00
const elementInterval = Number.parseInt(element.getAttribute('data-bs-interval'), 10);
2022-05-13 08:07:23 +02:00
this._config.interval = elementInterval || this._config.defaultInterval;
2021-03-23 17:26:54 +01:00
}
2020-11-11 18:07:37 +01:00
2022-05-13 08:07:23 +02:00
_slide(order, element = null) {
if (this._isSliding) {
return;
}
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
const activeElement = this._getActive();
2015-05-08 07:26:40 +02:00
2021-03-23 17:26:54 +01:00
const isNext = order === ORDER_NEXT;
2022-05-13 08:07:23 +02:00
const nextElement = element || index.getNextActiveElement(this._getItems(), activeElement, isNext, this._config.wrap);
2017-09-30 23:28:03 +02:00
2022-05-13 08:07:23 +02:00
if (nextElement === activeElement) {
2018-11-13 07:41:12 +01:00
return;
}
2017-09-30 23:28:03 +02:00
2022-05-13 08:07:23 +02:00
const nextElementIndex = this._getItemIndex(nextElement);
const triggerEvent = eventName => {
return EventHandler__default.default.trigger(this._element, eventName, {
relatedTarget: nextElement,
direction: this._orderToDirection(order),
from: this._getItemIndex(activeElement),
to: nextElementIndex
});
};
2022-05-13 08:07:23 +02:00
const slideEvent = triggerEvent(EVENT_SLIDE);
2018-09-19 06:35:40 +02:00
2019-03-01 17:31:34 +01:00
if (slideEvent.defaultPrevented) {
2018-11-13 07:41:12 +01:00
return;
}
2015-05-08 07:26:40 +02:00
2018-11-13 07:41:12 +01:00
if (!activeElement || !nextElement) {
// Some weirdness is happening, so we bail
2022-05-13 08:07:23 +02:00
// todo: change tests that use empty divs to avoid this check
2018-11-13 07:41:12 +01:00
return;
}
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
const isCycling = Boolean(this._interval);
this.pause();
2018-11-13 07:41:12 +01:00
this._isSliding = true;
2015-08-19 05:28:28 +02:00
2022-05-13 08:07:23 +02:00
this._setActiveIndicatorElement(nextElementIndex);
2017-09-30 23:28:03 +02:00
2020-11-11 18:07:37 +01:00
this._activeElement = nextElement;
2022-05-13 08:07:23 +02:00
const directionalClassName = isNext ? CLASS_NAME_START : CLASS_NAME_END;
const orderClassName = isNext ? CLASS_NAME_NEXT : CLASS_NAME_PREV;
nextElement.classList.add(orderClassName);
index.reflow(nextElement);
activeElement.classList.add(directionalClassName);
nextElement.classList.add(directionalClassName);
2020-11-11 18:07:37 +01:00
2022-05-13 08:07:23 +02:00
const completeCallBack = () => {
nextElement.classList.remove(directionalClassName, orderClassName);
2020-03-28 11:29:08 +01:00
nextElement.classList.add(CLASS_NAME_ACTIVE);
2022-05-13 08:07:23 +02:00
activeElement.classList.remove(CLASS_NAME_ACTIVE, orderClassName, directionalClassName);
2018-11-13 07:41:12 +01:00
this._isSliding = false;
2022-05-13 08:07:23 +02:00
triggerEvent(EVENT_SLID);
};
this._queueCallback(completeCallBack, activeElement, this._isAnimated());
2018-07-24 02:51:14 +02:00
2018-11-13 07:41:12 +01:00
if (isCycling) {
this.cycle();
}
2021-03-23 17:26:54 +01:00
}
2022-05-13 08:07:23 +02:00
_isAnimated() {
return this._element.classList.contains(CLASS_NAME_SLIDE);
}
_getActive() {
return SelectorEngine__default.default.findOne(SELECTOR_ACTIVE_ITEM, this._element);
}
_getItems() {
return SelectorEngine__default.default.find(SELECTOR_ITEM, this._element);
}
_clearInterval() {
if (this._interval) {
clearInterval(this._interval);
this._interval = null;
2021-03-23 17:26:54 +01:00
}
2022-05-13 08:07:23 +02:00
}
2021-03-23 17:26:54 +01:00
2022-05-13 08:07:23 +02:00
_directionToOrder(direction) {
if (index.isRTL()) {
return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT;
2021-03-23 17:26:54 +01:00
}
return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV;
2021-03-23 17:26:54 +01:00
}
_orderToDirection(order) {
2022-05-13 08:07:23 +02:00
if (index.isRTL()) {
return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT;
2021-03-23 17:26:54 +01:00
}
return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT;
2019-01-04 17:29:45 +01:00
} // Static
2016-10-10 02:26:51 +02:00
2017-09-30 23:28:03 +02:00
2022-05-13 08:07:23 +02:00
static jQueryInterface(config) {
return this.each(function () {
const data = Carousel.getOrCreateInstance(this, config);
2017-12-23 01:21:54 +01:00
2022-05-13 08:07:23 +02:00
if (typeof config === 'number') {
data.to(config);
return;
2018-07-24 02:51:14 +02:00
}
2017-09-30 23:28:03 +02:00
2022-05-13 08:07:23 +02:00
if (typeof config === 'string') {
if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
throw new TypeError(`No method named "${config}"`);
}
2017-09-30 23:28:03 +02:00
2022-05-13 08:07:23 +02:00
data[config]();
}
2018-11-13 07:41:12 +01:00
});
2021-03-23 17:26:54 +01:00
}
2017-09-30 23:28:03 +02:00
2022-05-13 08:07:23 +02:00
}
/**
* Data API implementation
*/
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
EventHandler__default.default.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, function (event) {
const target = index.getElementFromSelector(this);
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
if (!target || !target.classList.contains(CLASS_NAME_CAROUSEL)) {
return;
}
2018-06-22 07:55:23 +02:00
2022-05-13 08:07:23 +02:00
event.preventDefault();
const carousel = Carousel.getOrCreateInstance(target);
const slideIndex = this.getAttribute('data-bs-slide-to');
2017-09-30 23:28:03 +02:00
2022-05-13 08:07:23 +02:00
if (slideIndex) {
carousel.to(slideIndex);
2018-11-13 07:41:12 +01:00
2022-05-13 08:07:23 +02:00
carousel._maybeEnableCycle();
2015-05-08 07:26:40 +02:00
2022-05-13 08:07:23 +02:00
return;
2021-03-23 17:26:54 +01:00
}
2018-11-13 07:41:12 +01:00
2022-05-13 08:07:23 +02:00
if (Manipulator__default.default.getDataAttribute(this, 'slide') === 'next') {
carousel.next();
2018-11-13 07:41:12 +01:00
2022-05-13 08:07:23 +02:00
carousel._maybeEnableCycle();
2018-11-13 07:41:12 +01:00
2022-05-13 08:07:23 +02:00
return;
}
carousel.prev();
carousel._maybeEnableCycle();
});
2021-10-05 17:50:18 +02:00
EventHandler__default.default.on(window, EVENT_LOAD_DATA_API, () => {
const carousels = SelectorEngine__default.default.find(SELECTOR_DATA_RIDE);
2018-11-13 07:41:12 +01:00
2022-05-13 08:07:23 +02:00
for (const carousel of carousels) {
Carousel.getOrCreateInstance(carousel);
2018-11-13 07:41:12 +01:00
}
});
/**
* jQuery
*/
2022-05-13 08:07:23 +02:00
index.defineJQueryPlugin(Carousel);
2015-05-08 07:26:40 +02:00
return Carousel;
2018-07-24 02:51:14 +02:00
2021-10-05 17:50:18 +02:00
}));
2018-07-24 02:51:14 +02:00
//# sourceMappingURL=carousel.js.map