0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00

use pointer events if available

This commit is contained in:
Johann-S 2018-10-14 23:10:13 +02:00 committed by XhmikosR
parent c08652cfe8
commit 735c374e9c
4 changed files with 185 additions and 23 deletions

View File

@ -56,22 +56,28 @@ const Event = {
KEYDOWN : `keydown${EVENT_KEY}`,
MOUSEENTER : `mouseenter${EVENT_KEY}`,
MOUSELEAVE : `mouseleave${EVENT_KEY}`,
TOUCHEND : `touchend${EVENT_KEY}`,
TOUCHSTART : `touchstart${EVENT_KEY}`,
TOUCHMOVE : `touchmove${EVENT_KEY}`,
TOUCHEND : `touchend${EVENT_KEY}`,
POINTERDOWN : `pointerdown${EVENT_KEY}`,
POINTERMOVE : `pointermove${EVENT_KEY}`,
POINTERUP : `pointerup${EVENT_KEY}`,
POINTERLEAVE : `pointerleave${EVENT_KEY}`,
POINTERCANCEL : `pointercancel${EVENT_KEY}`,
LOAD_DATA_API : `load${EVENT_KEY}${DATA_API_KEY}`,
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
}
const ClassName = {
CAROUSEL : 'carousel',
ACTIVE : 'active',
SLIDE : 'slide',
RIGHT : 'carousel-item-right',
LEFT : 'carousel-item-left',
NEXT : 'carousel-item-next',
PREV : 'carousel-item-prev',
ITEM : 'carousel-item'
CAROUSEL : 'carousel',
ACTIVE : 'active',
SLIDE : 'slide',
RIGHT : 'carousel-item-right',
LEFT : 'carousel-item-left',
NEXT : 'carousel-item-next',
PREV : 'carousel-item-prev',
ITEM : 'carousel-item',
POINTER_EVENT : 'pointer-event'
}
const Selector = {
@ -84,6 +90,11 @@ const Selector = {
DATA_RIDE : '[data-ride="carousel"]'
}
const PointerType = {
TOUCH : 'touch',
PEN : 'pen'
}
/**
* ------------------------------------------------------------------------
* Class Definition
@ -103,7 +114,8 @@ class Carousel {
this._config = this._getConfig(config)
this._element = element
this._indicatorsElement = this._element.querySelector(Selector.INDICATORS)
this._touchSupported = 'ontouchstart' in document.documentElement
this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
this._pointerEvent = Boolean(window.PointerEvent || window.MSPointerEvent)
this._addEventListeners()
}
@ -265,22 +277,35 @@ class Carousel {
return
}
$(this._element).on(Event.TOUCHSTART, (event) => {
this.touchStartX = event.originalEvent.touches[0].pageX
})
const start = (event) => {
event.preventDefault()
const originEvent = event.originalEvent
$(this._element).on(Event.TOUCHMOVE, (event) => {
if (this._pointerEvent && (originEvent.pointerType === PointerType.TOUCH || originEvent.pointerType === PointerType.PEN)) {
this.touchStartX = originEvent.clientX
} else {
this.touchStartX = originEvent.touches[0].pageX
}
}
const move = (event) => {
event.preventDefault()
// ensure swiping with one touch and not pinching
if (event.originalEvent.touches.length > 1) {
if (event.originalEvent.touches && event.originalEvent.touches.length > 1) {
return
}
this.touchDeltaX = event.originalEvent.touches[0].pageX - this.touchStartX
})
if (!this._pointerEvent) {
this.touchDeltaX = event.originalEvent.touches[0].pageX - this.touchStartX
}
}
const end = (event) => {
if (this._pointerEvent) {
this.touchDeltaX = event.originalEvent.clientX - this.touchStartX
}
$(this._element).on(Event.TOUCHEND, () => {
this._handleSwipe()
if (this._config.pause === 'hover') {
@ -298,7 +323,21 @@ class Carousel {
}
this.touchTimeout = setTimeout((event) => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval)
}
})
}
if (this._pointerEvent) {
$(this._element).on(Event.POINTERDOWN, (event) => start(event))
$(this._element).on(Event.POINTERMOVE, (event) => move(event))
$(this._element).on(Event.POINTERUP, (event) => end(event))
$(this._element).on(Event.POINTERLEAVE, (event) => end(event))
$(this._element).on(Event.POINTERCANCEL, (event) => end(event))
this._element.classList.add(ClassName.POINTER_EVENT)
} else {
$(this._element).on(Event.TOUCHSTART, (event) => start(event))
$(this._element).on(Event.TOUCHMOVE, (event) => move(event))
$(this._element).on(Event.TOUCHEND, (event) => end(event))
}
}
_keydown(event) {

View File

@ -3,6 +3,26 @@ $(function () {
window.Carousel = typeof bootstrap !== 'undefined' ? bootstrap.Carousel : Carousel
var originWinPointerEvent = window.PointerEvent
var originMsPointerEvent = window.MSPointerEvent
var supportPointerEvent = Boolean(window.PointerEvent || window.MSPointerEvent)
function clearPointerEvents() {
window.PointerEvent = null
window.MSPointerEvent = null
}
function restorePointerEvents() {
window.PointerEvent = originWinPointerEvent
window.MSPointerEvent = originMsPointerEvent
}
var stylesCarousel = [
'<style>',
' .carousel.pointer-event { -ms-touch-action: pan-x; touch-action: pan-x; }',
'</style>'
].join('')
QUnit.module('carousel plugin')
QUnit.test('should be defined on jQuery object', function (assert) {
@ -1006,8 +1026,55 @@ $(function () {
}, 80)
})
QUnit.test('should allow swiperight and call prev', function (assert) {
QUnit.test('should allow swiperight and call prev with pointer events', function (assert) {
if (!supportPointerEvent) {
assert.expect(0)
return
}
Simulator.setType('pointer')
assert.expect(3)
var $styles = $(stylesCarousel).appendTo('head')
var done = assert.async()
document.documentElement.ontouchstart = $.noop
var carouselHTML =
'<div class="carousel" data-interval="false">' +
' <div class="carousel-inner">' +
' <div id="item" class="carousel-item">' +
' <img alt="">' +
' </div>' +
' <div class="carousel-item active">' +
' <img alt="">' +
' </div>' +
' </div>' +
'</div>'
var $carousel = $(carouselHTML)
$carousel.appendTo('#qunit-fixture')
var $item = $('#item')
$carousel.bootstrapCarousel()
var carousel = $carousel.data('bs.carousel')
var spy = sinon.spy(carousel, 'prev')
$carousel.one('slid.bs.carousel', function () {
assert.ok(true, 'slid event fired')
assert.ok($item.hasClass('active'))
assert.ok(spy.called)
delete document.documentElement.ontouchstart
$styles.remove()
done()
})
Simulator.gestures.swipe($carousel[0], {
deltaX: 300,
deltaY: 0
})
})
QUnit.test('should allow swiperight and call prev with touch events', function (assert) {
Simulator.setType('touch')
clearPointerEvents()
assert.expect(3)
var done = assert.async()
document.documentElement.ontouchstart = $.noop
@ -1036,6 +1103,7 @@ $(function () {
assert.ok($item.hasClass('active'))
assert.ok(spy.called)
delete document.documentElement.ontouchstart
restorePointerEvents()
done()
})
@ -1045,8 +1113,56 @@ $(function () {
})
})
QUnit.test('should allow swipeleft and call next', function (assert) {
QUnit.test('should allow swipeleft and call next with pointer events', function (assert) {
if (!supportPointerEvent) {
assert.expect(0)
return
}
assert.expect(3)
Simulator.setType('pointer')
var $styles = $(stylesCarousel).appendTo('head')
var done = assert.async()
document.documentElement.ontouchstart = $.noop
var carouselHTML =
'<div class="carousel" data-interval="false">' +
' <div class="carousel-inner">' +
' <div id="item" class="carousel-item active">' +
' <img alt="">' +
' </div>' +
' <div class="carousel-item">' +
' <img alt="">' +
' </div>' +
' </div>' +
'</div>'
var $carousel = $(carouselHTML)
$carousel.appendTo('#qunit-fixture')
var $item = $('#item')
$carousel.bootstrapCarousel()
var carousel = $carousel.data('bs.carousel')
var spy = sinon.spy(carousel, 'next')
$carousel.one('slid.bs.carousel', function () {
assert.ok(true, 'slid event fired')
assert.ok(!$item.hasClass('active'))
assert.ok(spy.called)
$styles.remove()
done()
})
Simulator.gestures.swipe($carousel[0], {
pos: [300, 10],
deltaX: -300,
deltaY: 0
})
})
QUnit.test('should allow swipeleft and call next with touch events', function (assert) {
assert.expect(3)
clearPointerEvents()
Simulator.setType('touch')
var done = assert.async()
@ -1075,6 +1191,7 @@ $(function () {
assert.ok(true, 'slid event fired')
assert.ok(!$item.hasClass('active'))
assert.ok(spy.called)
restorePointerEvents()
done()
})
@ -1085,8 +1202,9 @@ $(function () {
})
})
QUnit.test('should not allow pinch', function (assert) {
QUnit.test('should not allow pinch with touch events', function (assert) {
assert.expect(0)
clearPointerEvents()
Simulator.setType('touch')
var done = assert.async()
document.documentElement.ontouchstart = $.noop
@ -1102,6 +1220,7 @@ $(function () {
deltaY: 0,
touches: 2
}, function () {
restorePointerEvents()
done()
})
})

View File

@ -190,7 +190,7 @@
},
{
"path": "./dist/js/bootstrap.js",
"maxSize": "21 kB"
"maxSize": "22 kB"
},
{
"path": "./dist/js/bootstrap.min.js",

View File

@ -12,6 +12,10 @@
position: relative;
}
.carousel.pointer-event {
touch-action: pan-x;
}
.carousel-inner {
position: relative;
width: 100%;