From 48a95f7280735d6f8962fe8b17975b03e351710c Mon Sep 17 00:00:00 2001 From: alpadev <2838324+alpadev@users.noreply.github.com> Date: Tue, 2 Mar 2021 15:55:44 +0100 Subject: refactor: use a Map instead of an Object in dom/data (#32180) Co-authored-by: XhmikosR Co-authored-by: Rohit Sharma --- js/src/carousel.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index 75f8a4da7..a825aaef4 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -527,7 +527,7 @@ class Carousel extends BaseComponent { // Static static carouselInterface(element, config) { - let data = Data.getData(element, DATA_KEY) + let data = Data.get(element, DATA_KEY) let _config = { ...Default, ...Manipulator.getDataAttributes(element) @@ -586,7 +586,7 @@ class Carousel extends BaseComponent { Carousel.carouselInterface(target, config) if (slideIndex) { - Data.getData(target, DATA_KEY).to(slideIndex) + Data.get(target, DATA_KEY).to(slideIndex) } event.preventDefault() @@ -605,7 +605,7 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => { const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE) for (let i = 0, len = carousels.length; i < len; i++) { - Carousel.carouselInterface(carousels[i], Data.getData(carousels[i], DATA_KEY)) + Carousel.carouselInterface(carousels[i], Data.get(carousels[i], DATA_KEY)) } }) -- cgit v1.2.3 From b9f30903a5a916904c873bd078240b3df743e093 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Wed, 17 Mar 2021 07:58:43 +0200 Subject: Fix carousel RTL and refactor code, fix rtl swipe issues (#32913) * move common code to reusable functions * add/re-factor tests, directionToOrder func * add _orderToDirection tests Co-authored-by: XhmikosR --- js/src/carousel.js | 95 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 50 insertions(+), 45 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index a825aaef4..b14cbd1a2 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -10,8 +10,8 @@ import { emulateTransitionEnd, getElementFromSelector, getTransitionDurationFromElement, - isVisible, isRTL, + isVisible, reflow, triggerTransitionEnd, typeCheckConfig @@ -56,8 +56,8 @@ const DefaultType = { touch: 'boolean' } -const DIRECTION_NEXT = 'next' -const DIRECTION_PREV = 'prev' +const ORDER_NEXT = 'next' +const ORDER_PREV = 'prev' const DIRECTION_LEFT = 'left' const DIRECTION_RIGHT = 'right' @@ -137,7 +137,7 @@ class Carousel extends BaseComponent { next() { if (!this._isSliding) { - this._slide(DIRECTION_NEXT) + this._slide(ORDER_NEXT) } } @@ -151,7 +151,7 @@ class Carousel extends BaseComponent { prev() { if (!this._isSliding) { - this._slide(DIRECTION_PREV) + this._slide(ORDER_PREV) } } @@ -208,11 +208,11 @@ class Carousel extends BaseComponent { return } - const direction = index > activeIndex ? - DIRECTION_NEXT : - DIRECTION_PREV + const order = index > activeIndex ? + ORDER_NEXT : + ORDER_PREV - this._slide(direction, this._items[index]) + this._slide(order, this._items[index]) } dispose() { @@ -251,23 +251,11 @@ class Carousel extends BaseComponent { this.touchDeltaX = 0 - // swipe left - if (direction > 0) { - if (isRTL()) { - this.next() - } else { - this.prev() - } + if (!direction) { + return } - // swipe right - if (direction < 0) { - if (isRTL()) { - this.prev() - } else { - this.next() - } - } + this._slide(direction > 0 ? DIRECTION_RIGHT : DIRECTION_LEFT) } _addEventListeners() { @@ -350,18 +338,10 @@ class Carousel extends BaseComponent { if (event.key === ARROW_LEFT_KEY) { event.preventDefault() - if (isRTL()) { - this.next() - } else { - this.prev() - } + this._slide(DIRECTION_LEFT) } else if (event.key === ARROW_RIGHT_KEY) { event.preventDefault() - if (isRTL()) { - this.prev() - } else { - this.next() - } + this._slide(DIRECTION_RIGHT) } } @@ -373,19 +353,18 @@ class Carousel extends BaseComponent { return this._items.indexOf(element) } - _getItemByDirection(direction, activeElement) { - const isNextDirection = direction === DIRECTION_NEXT - const isPrevDirection = direction === DIRECTION_PREV + _getItemByOrder(order, activeElement) { + const isNext = order === ORDER_NEXT + const isPrev = order === ORDER_PREV const activeIndex = this._getItemIndex(activeElement) const lastItemIndex = this._items.length - 1 - const isGoingToWrap = (isPrevDirection && activeIndex === 0) || - (isNextDirection && activeIndex === lastItemIndex) + const isGoingToWrap = (isPrev && activeIndex === 0) || (isNext && activeIndex === lastItemIndex) if (isGoingToWrap && !this._config.wrap) { return activeElement } - const delta = direction === DIRECTION_PREV ? -1 : 1 + const delta = isPrev ? -1 : 1 const itemIndex = (activeIndex + delta) % this._items.length return itemIndex === -1 ? @@ -441,17 +420,19 @@ class Carousel extends BaseComponent { } } - _slide(direction, element) { + _slide(directionOrOrder, element) { + const order = this._directionToOrder(directionOrOrder) const activeElement = SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element) const activeElementIndex = this._getItemIndex(activeElement) - const nextElement = element || (activeElement && this._getItemByDirection(direction, activeElement)) + const nextElement = element || this._getItemByOrder(order, activeElement) const nextElementIndex = this._getItemIndex(nextElement) const isCycling = Boolean(this._interval) - const directionalClassName = direction === DIRECTION_NEXT ? CLASS_NAME_START : CLASS_NAME_END - const orderClassName = direction === DIRECTION_NEXT ? CLASS_NAME_NEXT : CLASS_NAME_PREV - const eventDirectionName = direction === DIRECTION_NEXT ? DIRECTION_LEFT : DIRECTION_RIGHT + const isNext = order === ORDER_NEXT + const directionalClassName = isNext ? CLASS_NAME_START : CLASS_NAME_END + const orderClassName = isNext ? CLASS_NAME_NEXT : CLASS_NAME_PREV + const eventDirectionName = this._orderToDirection(order) if (nextElement && nextElement.classList.contains(CLASS_NAME_ACTIVE)) { this._isSliding = false @@ -524,6 +505,30 @@ class Carousel extends BaseComponent { } } + _directionToOrder(direction) { + if (![DIRECTION_RIGHT, DIRECTION_LEFT].includes(direction)) { + return direction + } + + if (isRTL()) { + return direction === DIRECTION_RIGHT ? ORDER_PREV : ORDER_NEXT + } + + return direction === DIRECTION_RIGHT ? ORDER_NEXT : ORDER_PREV + } + + _orderToDirection(order) { + if (![ORDER_NEXT, ORDER_PREV].includes(order)) { + return order + } + + if (isRTL()) { + return order === ORDER_NEXT ? DIRECTION_LEFT : DIRECTION_RIGHT + } + + return order === ORDER_NEXT ? DIRECTION_RIGHT : DIRECTION_LEFT + } + // Static static carouselInterface(element, config) { -- cgit v1.2.3 From 9667438c1e8544b829b08c68d4ce1f36305297c8 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 23 Mar 2021 15:27:46 +0200 Subject: Bump eslint-plugin-unicorn from 28.0.2 to 29.0.0 (#33435) * Bump eslint-plugin-unicorn from 28.0.2 to 29.0.0 Bumps [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn) from 28.0.2 to 29.0.0. - [Release notes](https://github.com/sindresorhus/eslint-plugin-unicorn/releases) - [Commits](https://github.com/sindresorhus/eslint-plugin-unicorn/compare/v28.0.2...v29.0.0) Signed-off-by: dependabot[bot] * Fix lint failure Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: XhmikosR --- js/src/carousel.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index b14cbd1a2..fe53d583a 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -284,11 +284,9 @@ class Carousel extends BaseComponent { const move = event => { // ensure swiping with one touch and not pinching - if (event.touches && event.touches.length > 1) { - this.touchDeltaX = 0 - } else { - this.touchDeltaX = event.touches[0].clientX - this.touchStartX - } + this.touchDeltaX = event.touches && event.touches.length > 1 ? + 0 : + event.touches[0].clientX - this.touchStartX } const end = event => { -- cgit v1.2.3 From 220139a89ffc3864bbb6e1b35471667318eadc1f Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 23 Mar 2021 18:26:54 +0200 Subject: Release v5.0.0-beta3 (#33439) --- js/src/carousel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index fe53d583a..76581ca5d 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.0.0-beta2): carousel.js + * Bootstrap (v5.0.0-beta3): carousel.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -- cgit v1.2.3 From 0795a778f2b9e90a92ac5a240811cc2427dc268d Mon Sep 17 00:00:00 2001 From: GeoSot Date: Wed, 7 Apr 2021 08:29:31 +0300 Subject: Fix wrong carousel transformation, direction to order (#33499) --- js/src/carousel.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index 76581ca5d..e336abb1e 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -336,10 +336,10 @@ class Carousel extends BaseComponent { if (event.key === ARROW_LEFT_KEY) { event.preventDefault() - this._slide(DIRECTION_LEFT) + this._slide(DIRECTION_RIGHT) } else if (event.key === ARROW_RIGHT_KEY) { event.preventDefault() - this._slide(DIRECTION_RIGHT) + this._slide(DIRECTION_LEFT) } } @@ -509,10 +509,10 @@ class Carousel extends BaseComponent { } if (isRTL()) { - return direction === DIRECTION_RIGHT ? ORDER_PREV : ORDER_NEXT + return direction === DIRECTION_LEFT ? ORDER_PREV : ORDER_NEXT } - return direction === DIRECTION_RIGHT ? ORDER_NEXT : ORDER_PREV + return direction === DIRECTION_LEFT ? ORDER_NEXT : ORDER_PREV } _orderToDirection(order) { @@ -521,10 +521,10 @@ class Carousel extends BaseComponent { } if (isRTL()) { - return order === ORDER_NEXT ? DIRECTION_LEFT : DIRECTION_RIGHT + return order === ORDER_PREV ? DIRECTION_LEFT : DIRECTION_RIGHT } - return order === ORDER_NEXT ? DIRECTION_RIGHT : DIRECTION_LEFT + return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT } // Static -- cgit v1.2.3 From 566451230f5c87c3d7515af02995895df610b8ac Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sun, 11 Apr 2021 09:54:48 +0300 Subject: Remove element event listeners through base component (#33429) After some research, I found out that EventHandler saves all the custom events per element using namespace, and is capable of removing handlers using only the element and its namespace (`DATA_KEY`). So, probably is better to utilize the base-component to do the same job. --- js/src/carousel.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index e336abb1e..ebb0b7b20 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -216,8 +216,6 @@ class Carousel extends BaseComponent { } dispose() { - EventHandler.off(this._element, EVENT_KEY) - this._items = null this._config = null this._interval = null -- cgit v1.2.3 From bf0936748602c8109fd916c64b4560799fa1c3f8 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 5 May 2021 22:32:12 +0300 Subject: Release v5.0.0 (#33647) * Bump version to 5.0.0 * Fix npm tag * Dist --- js/src/carousel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index ebb0b7b20..5bf7225f3 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.0.0-beta3): carousel.js + * Bootstrap (v5.0.0): carousel.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -- cgit v1.2.3 From 90b1a6907ed7bb3397fe6bd223f09eb12122d7a3 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sun, 11 Apr 2021 02:27:18 +0300 Subject: Merge js-components 'transitionend' listener callbacks into one method --- js/src/carousel.js | 35 ++++++++++++++--------------------- 1 file changed, 14 insertions(+), 21 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index 5bf7225f3..2f5cd9de9 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -7,9 +7,7 @@ import { defineJQueryPlugin, - emulateTransitionEnd, getElementFromSelector, - getTransitionDurationFromElement, isRTL, isVisible, reflow, @@ -454,6 +452,15 @@ class Carousel extends BaseComponent { this._setActiveIndicatorElement(nextElement) this._activeElement = nextElement + const triggerSlidEvent = () => { + EventHandler.trigger(this._element, EVENT_SLID, { + relatedTarget: nextElement, + direction: eventDirectionName, + from: activeElementIndex, + to: nextElementIndex + }) + } + if (this._element.classList.contains(CLASS_NAME_SLIDE)) { nextElement.classList.add(orderClassName) @@ -462,9 +469,7 @@ class Carousel extends BaseComponent { activeElement.classList.add(directionalClassName) nextElement.classList.add(directionalClassName) - const transitionDuration = getTransitionDurationFromElement(activeElement) - - EventHandler.one(activeElement, 'transitionend', () => { + const completeCallBack = () => { nextElement.classList.remove(directionalClassName, orderClassName) nextElement.classList.add(CLASS_NAME_ACTIVE) @@ -472,28 +477,16 @@ class Carousel extends BaseComponent { this._isSliding = false - setTimeout(() => { - EventHandler.trigger(this._element, EVENT_SLID, { - relatedTarget: nextElement, - direction: eventDirectionName, - from: activeElementIndex, - to: nextElementIndex - }) - }, 0) - }) + setTimeout(triggerSlidEvent, 0) + } - emulateTransitionEnd(activeElement, transitionDuration) + this._queueCallback(completeCallBack, activeElement, true) } else { activeElement.classList.remove(CLASS_NAME_ACTIVE) nextElement.classList.add(CLASS_NAME_ACTIVE) this._isSliding = false - EventHandler.trigger(this._element, EVENT_SLID, { - relatedTarget: nextElement, - direction: eventDirectionName, - from: activeElementIndex, - to: nextElementIndex - }) + triggerSlidEvent() } if (isCycling) { -- cgit v1.2.3 From 03842b5f259d6007db02c465e6c55929e551e9cd Mon Sep 17 00:00:00 2001 From: GeoSot Date: Tue, 11 May 2021 09:04:42 +0300 Subject: Refactor: move disposing properties into the base class (#33740) Moves more functionality to `base-component`, transferring the responsibility of disposal to parent class. Each component, dusting disposal, sets its protected properties to `null`. So the same can be done in one place for all children components . --- js/src/carousel.js | 12 ------------ 1 file changed, 12 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index 2f5cd9de9..92733637e 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -213,18 +213,6 @@ class Carousel extends BaseComponent { this._slide(order, this._items[index]) } - dispose() { - this._items = null - this._config = null - this._interval = null - this._isPaused = null - this._isSliding = null - this._activeElement = null - this._indicatorsElement = null - - super.dispose() - } - // Private _getConfig(config) { -- cgit v1.2.3 From 9fe36edf683af02574bf6bbd6c9b27de93bd31b1 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Tue, 11 May 2021 10:49:30 +0300 Subject: Extract static `DATA_KEY` & `EVENT_KEY` to base-component (#33635) * Force each plugin that extends base-components to implement a static method `NAME()` * Remove redundant `NAME` argument from 'Utils.defineJQueryPlugin' & fix test --- js/src/carousel.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index 92733637e..0e45fed76 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -127,8 +127,8 @@ class Carousel extends BaseComponent { return Default } - static get DATA_KEY() { - return DATA_KEY + static get NAME() { + return NAME } // Public @@ -598,6 +598,6 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => { * add .Carousel to jQuery only if jQuery is present */ -defineJQueryPlugin(NAME, Carousel) +defineJQueryPlugin(Carousel) export default Carousel -- cgit v1.2.3 From 58b1be927f43c779377e478df2d119f2ddf956ca Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 13 May 2021 19:22:20 +0300 Subject: Release v5.0.1 (#33972) * Bump version to 5.0.1. * Dist --- js/src/carousel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index 0e45fed76..bb894e9c3 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.0.0): carousel.js + * Bootstrap (v5.0.1): carousel.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -- cgit v1.2.3 From df72a21fa89a4885bb666f4a3bc0a9e757b870c2 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Wed, 19 May 2021 01:23:52 +0300 Subject: Add `getNextActiveElement` helper function to utils, replacing custom implementation through components (#33608) --- js/src/carousel.js | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index bb894e9c3..7d197ab1e 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -10,6 +10,7 @@ import { getElementFromSelector, isRTL, isVisible, + getNextActiveElement, reflow, triggerTransitionEnd, typeCheckConfig @@ -337,21 +338,7 @@ class Carousel extends BaseComponent { _getItemByOrder(order, activeElement) { const isNext = order === ORDER_NEXT - const isPrev = order === ORDER_PREV - const activeIndex = this._getItemIndex(activeElement) - const lastItemIndex = this._items.length - 1 - const isGoingToWrap = (isPrev && activeIndex === 0) || (isNext && activeIndex === lastItemIndex) - - if (isGoingToWrap && !this._config.wrap) { - return activeElement - } - - const delta = isPrev ? -1 : 1 - const itemIndex = (activeIndex + delta) % this._items.length - - return itemIndex === -1 ? - this._items[this._items.length - 1] : - this._items[itemIndex] + return getNextActiveElement(this._items, activeElement, isNext, this._config.wrap) } _triggerSlideEvent(relatedTarget, eventDirectionName) { -- cgit v1.2.3 From c98657b8303150bfda3bdea750055b83a29b27a3 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Thu, 3 Jun 2021 18:53:27 +0300 Subject: Add `getOrCreateInstance` method in base-component (#33276) Co-authored-by: Rohit Sharma Co-authored-by: XhmikosR --- js/src/carousel.js | 26 ++++++-------------------- 1 file changed, 6 insertions(+), 20 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index 7d197ab1e..a956ebc8b 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -15,7 +15,6 @@ import { triggerTransitionEnd, typeCheckConfig } from './util/index' -import Data from './dom/data' import EventHandler from './dom/event-handler' import Manipulator from './dom/manipulator' import SelectorEngine from './dom/selector-engine' @@ -219,7 +218,8 @@ class Carousel extends BaseComponent { _getConfig(config) { config = { ...Default, - ...config + ...Manipulator.getDataAttributes(this._element), + ...(typeof config === 'object' ? config : {}) } typeCheckConfig(NAME, config, DefaultType) return config @@ -496,25 +496,11 @@ class Carousel extends BaseComponent { // Static static carouselInterface(element, config) { - let data = Data.get(element, DATA_KEY) - let _config = { - ...Default, - ...Manipulator.getDataAttributes(element) - } - - if (typeof config === 'object') { - _config = { - ..._config, - ...config - } - } + const data = Carousel.getOrCreateInstance(element, config) + const { _config } = data const action = typeof config === 'string' ? config : _config.slide - if (!data) { - data = new Carousel(element, _config) - } - if (typeof config === 'number') { data.to(config) } else if (typeof action === 'string') { @@ -555,7 +541,7 @@ class Carousel extends BaseComponent { Carousel.carouselInterface(target, config) if (slideIndex) { - Data.get(target, DATA_KEY).to(slideIndex) + Carousel.getInstance(target).to(slideIndex) } event.preventDefault() @@ -574,7 +560,7 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => { const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE) for (let i = 0, len = carousels.length; i < len; i++) { - Carousel.carouselInterface(carousels[i], Data.get(carousels[i], DATA_KEY)) + Carousel.carouselInterface(carousels[i], Carousel.getInstance(carousels[i])) } }) -- cgit v1.2.3 From d62ba935ef2e1ee97a57b1b75090e50e86e0d140 Mon Sep 17 00:00:00 2001 From: alpadev <2838324+alpadev@users.noreply.github.com> Date: Wed, 16 Jun 2021 06:48:23 +0200 Subject: Fix carousel buttons (#34266) * test(carousel): add test to check if next/prev button work as intended * fix(carousel): merge passed config with instance config in carouselInterface --- js/src/carousel.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index a956ebc8b..fa401535a 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -498,7 +498,14 @@ class Carousel extends BaseComponent { static carouselInterface(element, config) { const data = Carousel.getOrCreateInstance(element, config) - const { _config } = data + let { _config } = data + if (typeof config === 'object') { + _config = { + ..._config, + ...config + } + } + const action = typeof config === 'string' ? config : _config.slide if (typeof config === 'number') { -- cgit v1.2.3 From 290b9ee2cde5a0182e1a53116ef626bd6c0c9cad Mon Sep 17 00:00:00 2001 From: alpadev <2838324+alpadev@users.noreply.github.com> Date: Tue, 22 Jun 2021 12:11:03 +0200 Subject: fix(carousel): arrow keys break animation if carousel sliding (#34307) --- js/src/carousel.js | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index fa401535a..3c64829db 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -59,6 +59,11 @@ const ORDER_PREV = 'prev' const DIRECTION_LEFT = 'left' const DIRECTION_RIGHT = 'right' +const KEY_TO_DIRECTION = { + [ARROW_LEFT_KEY]: DIRECTION_RIGHT, + [ARROW_RIGHT_KEY]: DIRECTION_LEFT +} + const EVENT_SLIDE = `slide${EVENT_KEY}` const EVENT_SLID = `slid${EVENT_KEY}` const EVENT_KEYDOWN = `keydown${EVENT_KEY}` @@ -134,9 +139,7 @@ class Carousel extends BaseComponent { // Public next() { - if (!this._isSliding) { - this._slide(ORDER_NEXT) - } + this._slide(ORDER_NEXT) } nextWhenVisible() { @@ -148,9 +151,7 @@ class Carousel extends BaseComponent { } prev() { - if (!this._isSliding) { - this._slide(ORDER_PREV) - } + this._slide(ORDER_PREV) } pause(event) { @@ -319,12 +320,10 @@ class Carousel extends BaseComponent { return } - if (event.key === ARROW_LEFT_KEY) { - event.preventDefault() - this._slide(DIRECTION_RIGHT) - } else if (event.key === ARROW_RIGHT_KEY) { + const direction = KEY_TO_DIRECTION[event.key] + if (direction) { event.preventDefault() - this._slide(DIRECTION_LEFT) + this._slide(direction) } } @@ -408,6 +407,10 @@ class Carousel extends BaseComponent { return } + if (this._isSliding) { + return + } + const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName) if (slideEvent.defaultPrevented) { return -- cgit v1.2.3 From 688bce4fa695cc360a0d084e34f029b0c192b223 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 22 Jun 2021 21:29:16 +0300 Subject: Release v5.0.2 (#34276) * Bump version to v5.0.2. * Dist --- js/src/carousel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index 3c64829db..fe43f53eb 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.0.1): carousel.js + * Bootstrap (v5.0.2): carousel.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -- cgit v1.2.3 From f20fece3a8cdd0e76a42c2737524b7652bf54d26 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 4 Aug 2021 18:41:51 +0300 Subject: Prepare v5.1.0. (#34674) --- js/src/carousel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index fe43f53eb..75f34e422 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.0.2): carousel.js + * Bootstrap (v5.1.0): carousel.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -- cgit v1.2.3 From 418fe8113ec78e3b7251322560cd2d4a5bc6b71e Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 10 Aug 2021 17:50:32 +0300 Subject: carousel: move common checks to a function (#34621) --- js/src/carousel.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'js/src/carousel.js') diff --git a/js/src/carousel.js b/js/src/carousel.js index 75f34e422..b0aed3872 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -260,8 +260,13 @@ class Carousel extends BaseComponent { } _addTouchEventListeners() { + const hasPointerPenTouch = event => { + return this._pointerEvent && + (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH) + } + const start = event => { - if (this._pointerEvent && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)) { + if (hasPointerPenTouch(event)) { this.touchStartX = event.clientX } else if (!this._pointerEvent) { this.touchStartX = event.touches[0].clientX @@ -276,7 +281,7 @@ class Carousel extends BaseComponent { } const end = event => { - if (this._pointerEvent && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)) { + if (hasPointerPenTouch(event)) { this.touchDeltaX = event.clientX - this.touchStartX } -- cgit v1.2.3