Fix carousel touch handling without Pointer Events

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() {

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()