1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 18:40:03 +00:00

Carousel: reorder variables and refactor method to use it inline

This commit is contained in:
GeoSot 2022-03-02 01:16:25 +02:00 committed by XhmikosR
parent e77ae50311
commit a8142497c7
2 changed files with 27 additions and 33 deletions

View File

@ -277,17 +277,6 @@ class Carousel extends BaseComponent {
return getNextActiveElement(this._items, activeElement, isNext, this._config.wrap) return getNextActiveElement(this._items, activeElement, isNext, this._config.wrap)
} }
_triggerSlideEvent(relatedTarget, fromIndex, eventDirectionName) {
const targetIndex = this._getItemIndex(relatedTarget)
return EventHandler.trigger(this._element, EVENT_SLIDE, {
relatedTarget,
direction: eventDirectionName,
from: fromIndex,
to: targetIndex
})
}
_setActiveIndicatorElement(index) { _setActiveIndicatorElement(index) {
if (!this._indicatorsElement) { if (!this._indicatorsElement) {
return return
@ -320,17 +309,12 @@ class Carousel extends BaseComponent {
_slide(directionOrOrder, element) { _slide(directionOrOrder, element) {
const order = this._directionToOrder(directionOrOrder) const order = this._directionToOrder(directionOrOrder)
const activeElement = this._getActive() const activeElement = this._getActive()
const activeElementIndex = this._getItemIndex(activeElement) const activeElementIndex = this._getItemIndex(activeElement)
const nextElement = element || this._getItemByOrder(order, activeElement) const nextElement = element || this._getItemByOrder(order, activeElement)
const nextElementIndex = this._getItemIndex(nextElement) const nextElementIndex = this._getItemIndex(nextElement)
const isCycling = Boolean(this._interval)
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)) { if (nextElement && nextElement.classList.contains(CLASS_NAME_ACTIVE)) {
this._isSliding = false this._isSliding = false
@ -341,7 +325,17 @@ class Carousel extends BaseComponent {
return return
} }
const slideEvent = this._triggerSlideEvent(nextElement, activeElementIndex, eventDirectionName) const triggerEvent = eventName => {
return EventHandler.trigger(this._element, eventName, {
relatedTarget: nextElement,
direction: this._orderToDirection(order),
from: activeElementIndex,
to: nextElementIndex
})
}
const slideEvent = triggerEvent(EVENT_SLIDE)
if (slideEvent.defaultPrevented) { if (slideEvent.defaultPrevented) {
return return
} }
@ -353,6 +347,7 @@ class Carousel extends BaseComponent {
this._isSliding = true this._isSliding = true
const isCycling = Boolean(this._interval)
if (isCycling) { if (isCycling) {
this.pause() this.pause()
} }
@ -360,6 +355,10 @@ class Carousel extends BaseComponent {
this._setActiveIndicatorElement(nextElementIndex) this._setActiveIndicatorElement(nextElementIndex)
this._activeElement = nextElement this._activeElement = nextElement
const isNext = order === ORDER_NEXT
const directionalClassName = isNext ? CLASS_NAME_START : CLASS_NAME_END
const orderClassName = isNext ? CLASS_NAME_NEXT : CLASS_NAME_PREV
nextElement.classList.add(orderClassName) nextElement.classList.add(orderClassName)
reflow(nextElement) reflow(nextElement)
@ -375,12 +374,7 @@ class Carousel extends BaseComponent {
this._isSliding = false this._isSliding = false
EventHandler.trigger(this._element, EVENT_SLID, { triggerEvent(EVENT_SLID)
relatedTarget: nextElement,
direction: eventDirectionName,
from: activeElementIndex,
to: nextElementIndex
})
} }
this._queueCallback(completeCallBack, activeElement, this._isAnimated()) this._queueCallback(completeCallBack, activeElement, this._isAnimated())

View File

@ -214,7 +214,7 @@ describe('Carousel', () => {
const carouselEl = fixtureEl.querySelector('div') const carouselEl = fixtureEl.querySelector('div')
const carousel = new Carousel(carouselEl, {}) const carousel = new Carousel(carouselEl, {})
spyOn(carousel, '_triggerSlideEvent') spyOn(EventHandler, 'trigger')
carousel._isSliding = true carousel._isSliding = true
@ -225,7 +225,7 @@ describe('Carousel', () => {
carouselEl.dispatchEvent(keydown) carouselEl.dispatchEvent(keydown)
} }
expect(carousel._triggerSlideEvent).not.toHaveBeenCalled() expect(EventHandler.trigger).not.toHaveBeenCalled()
}) })
it('should wrap around from end to start when wrap option is true', () => { it('should wrap around from end to start when wrap option is true', () => {
@ -546,7 +546,7 @@ describe('Carousel', () => {
const carousel = new Carousel(carouselEl) const carousel = new Carousel(carouselEl)
carousel._isSliding = true carousel._isSliding = true
spyOn(carousel, '_triggerSlideEvent') spyOn(EventHandler, 'trigger')
Simulator.gestures.swipe(carouselEl, { Simulator.gestures.swipe(carouselEl, {
deltaX: 300, deltaX: 300,
@ -560,7 +560,7 @@ describe('Carousel', () => {
}) })
setTimeout(() => { setTimeout(() => {
expect(carousel._triggerSlideEvent).not.toHaveBeenCalled() expect(EventHandler.trigger).not.toHaveBeenCalled()
delete document.documentElement.ontouchstart delete document.documentElement.ontouchstart
restorePointerEvents() restorePointerEvents()
resolve() resolve()
@ -639,12 +639,12 @@ describe('Carousel', () => {
const carouselEl = fixtureEl.querySelector('div') const carouselEl = fixtureEl.querySelector('div')
const carousel = new Carousel(carouselEl, {}) const carousel = new Carousel(carouselEl, {})
spyOn(carousel, '_triggerSlideEvent') spyOn(EventHandler, 'trigger')
carousel._isSliding = true carousel._isSliding = true
carousel.next() carousel.next()
expect(carousel._triggerSlideEvent).not.toHaveBeenCalled() expect(EventHandler.trigger).not.toHaveBeenCalled()
}) })
it('should not fire slid when slide is prevented', () => { it('should not fire slid when slide is prevented', () => {
@ -858,12 +858,12 @@ describe('Carousel', () => {
const carouselEl = fixtureEl.querySelector('div') const carouselEl = fixtureEl.querySelector('div')
const carousel = new Carousel(carouselEl, {}) const carousel = new Carousel(carouselEl, {})
spyOn(carousel, '_triggerSlideEvent') spyOn(EventHandler, 'trigger')
carousel._isSliding = true carousel._isSliding = true
carousel.prev() carousel.prev()
expect(carousel._triggerSlideEvent).not.toHaveBeenCalled() expect(EventHandler.trigger).not.toHaveBeenCalled()
}) })
}) })