diff --git a/js/src/util/swipe.js b/js/src/util/swipe.js index d2f708711b62..6336efb7767a 100644 --- a/js/src/util/swipe.js +++ b/js/src/util/swipe.js @@ -51,6 +51,7 @@ class Swipe extends Config { } this._config = this._getConfig(config) + this._startX = 0 this._deltaX = 0 this._supportPointerEvents = Boolean(window.PointerEvent) this._initEvents() @@ -76,20 +77,22 @@ class Swipe extends Config { // Private _start(event) { + this._deltaX = 0 + if (!this._supportPointerEvents) { - this._deltaX = event.touches[0].clientX + this._startX = event.touches[0].clientX return } if (this._eventIsPointerPenTouch(event)) { - this._deltaX = event.clientX + this._startX = event.clientX } } _end(event) { if (this._eventIsPointerPenTouch(event)) { - this._deltaX = event.clientX - this._deltaX + this._deltaX = event.clientX - this._startX } this._handleSwipe() @@ -99,7 +102,7 @@ class Swipe extends Config { _move(event) { this._deltaX = event.touches && event.touches.length > 1 ? 0 : - event.touches[0].clientX - this._deltaX + event.touches[0].clientX - this._startX } _handleSwipe() { diff --git a/js/tests/unit/util/swipe.spec.js b/js/tests/unit/util/swipe.spec.js index 9252d312ba4f..e90b4e74bfe7 100644 --- a/js/tests/unit/util/swipe.spec.js +++ b/js/tests/unit/util/swipe.spec.js @@ -35,6 +35,11 @@ describe('Swipe', () => { Simulator.gestures.swipe(element, _options) } + const triggerTouchEvent = (element, type, clientX) => { + const touches = [{ x: clientX, y: 10, target: element }] + Simulator.events.touch.trigger(touches, element, type) + } + beforeEach(() => { fixtureEl = getFixture() const cssStyle = [ @@ -156,7 +161,43 @@ describe('Swipe', () => { }) }) - describe('Functionality on PointerEvents', () => { + describe('Functionality', () => { + it('should not interpret a tap as a swipe with touch events', () => { + clearPointerEvents() + defineDocumentElementOntouchstart() + + const leftCallback = jasmine.createSpy('leftCallback') + const rightCallback = jasmine.createSpy('rightCallback') + // eslint-disable-next-line no-new + new Swipe(swipeEl, { leftCallback, rightCallback }) + + triggerTouchEvent(swipeEl, 'start', 200) + triggerTouchEvent(swipeEl, 'end', 200) + + expect(leftCallback).not.toHaveBeenCalled() + expect(rightCallback).not.toHaveBeenCalled() + restorePointerEvents() + }) + + it('should preserve the swipe direction across touchmove events', () => { + clearPointerEvents() + defineDocumentElementOntouchstart() + + const leftCallback = jasmine.createSpy('leftCallback') + const rightCallback = jasmine.createSpy('rightCallback') + // eslint-disable-next-line no-new + new Swipe(swipeEl, { leftCallback, rightCallback }) + + triggerTouchEvent(swipeEl, 'start', 300) + triggerTouchEvent(swipeEl, 'move', 250) + triggerTouchEvent(swipeEl, 'move', 200) + triggerTouchEvent(swipeEl, 'end', 200) + + expect(leftCallback).toHaveBeenCalledTimes(1) + expect(rightCallback).not.toHaveBeenCalled() + restorePointerEvents() + }) + it('should not allow pinch with touch events', () => { Simulator.setType('touch') clearPointerEvents()