rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

carousel: move functions one level up

Browse source
This commit is contained in:
XhmikosR 2020-12-02 15:13:11 +02:00
parent c7f5b3f9b3
commit 1798dfcce7
1 changed files with 51 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

102
js/src/carousel.js
View file

@ -274,66 +274,66 @@ class Carousel extends BaseComponent {
}
}
_hasPointerPenTouch(event) {
return this._pointerEvent &&
(event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)
}
_start(event) {
if (this._hasPointerPenTouch(event)) {
this.touchStartX = event.clientX
} else if (!this._pointerEvent) {
this.touchStartX = event.touches[0].clientX
}
}
_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
}
}
_end(event) {
if (this._hasPointerPenTouch(event)) {
this.touchDeltaX = event.clientX - this.touchStartX
}
this._handleSwipe()
if (this._config.pause === 'hover') {
// 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
this.pause()
if (this.touchTimeout) {
clearTimeout(this.touchTimeout)
}
this.touchTimeout = setTimeout(event => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval)
}
}
_addTouchEventListeners() {
const hasPointerPenTouch = event => {
return this._pointerEvent &&
(event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)
}
const start = event => {
if (hasPointerPenTouch(event)) {
this.touchStartX = event.clientX
} else if (!this._pointerEvent) {
this.touchStartX = event.touches[0].clientX
}
}
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
}
}
const end = event => {
if (hasPointerPenTouch(event)) {
this.touchDeltaX = event.clientX - this.touchStartX
}
this._handleSwipe()
if (this._config.pause === 'hover') {
// 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
this.pause()
if (this.touchTimeout) {
clearTimeout(this.touchTimeout)
}
this.touchTimeout = setTimeout(event => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval)
}
}
SelectorEngine.find(SELECTOR_ITEM_IMG, this._element).forEach(itemImg => {
EventHandler.on(itemImg, EVENT_DRAG_START, e => e.preventDefault())
})
if (this._pointerEvent) {
EventHandler.on(this._element, EVENT_POINTERDOWN, event => start(event))
EventHandler.on(this._element, EVENT_POINTERUP, event => end(event))
EventHandler.on(this._element, EVENT_POINTERDOWN, event => this._start(event))
EventHandler.on(this._element, EVENT_POINTERUP, event => this._end(event))
this._element.classList.add(CLASS_NAME_POINTER_EVENT)
} else {
EventHandler.on(this._element, EVENT_TOUCHSTART, event => start(event))
EventHandler.on(this._element, EVENT_TOUCHMOVE, event => move(event))
EventHandler.on(this._element, EVENT_TOUCHEND, event => end(event))
EventHandler.on(this._element, EVENT_TOUCHSTART, event => this._start(event))
EventHandler.on(this._element, EVENT_TOUCHMOVE, event => this._move(event))
EventHandler.on(this._element, EVENT_TOUCHEND, event => this._end(event))
}
}