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:
parent
e77ae50311
commit
a8142497c7
@ -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())
|
||||||
|
@ -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()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user