#49 : Update swipe event handling

src/actions/swipeable/swipeable.js

@@ -8,6 +8,7 @@ import {
   removeEndEventListener,
 } from './event'
 import { createDispatcher } from '../../utils/event'
+import { SWIPE_MIN_DURATION_MS, SWIPE_MIN_DISTANCE_PX } from '../../units'
 
 function getCoords(event) {
   if ('TouchEvent' in window && event instanceof TouchEvent) {
@@ -28,9 +29,18 @@ export function swipeable(node, { thresholdProvider }) {
   let x
   let y
   let moved = 0
+  let swipeStartedAt
+  let isTouching = false
+
+  function isValidSwipe() {
+    const swipeDurationMs = Date.now() - swipeStartedAt
+    return swipeDurationMs >= SWIPE_MIN_DURATION_MS && Math.abs(moved) >= SWIPE_MIN_DISTANCE_PX
+  }
 
   function handleMousedown(event) {
+    swipeStartedAt = Date.now()
     moved = 0
+    isTouching = true
     const coords = getCoords(event)
     x = coords.x
     y = coords.y
@@ -40,6 +50,7 @@ export function swipeable(node, { thresholdProvider }) {
   }
 
   function handleMousemove(event) {
+    if (!isTouching) return
     const coords = getCoords(event)
     const dx = coords.x - x
     const dy = coords.y - y
@@ -59,10 +70,11 @@ export function swipeable(node, { thresholdProvider }) {
   }
 
   function handleMouseup(event) {
+    isTouching = false
+    if (!isValidSwipe()) return
+
     const coords = getCoords(event)
-    x = coords.x
+    dispatch('end', { x: coords.x, y: coords.y })
-    y = coords.y
-    dispatch('end', { x, y })
     removeEndEventListener(window, handleMouseup)
     removeMoveEventListener(window, handleMousemove)
   }

src/actions/tappable/tappable.js

@@ -5,19 +5,19 @@ import {
   addFocusoutEventListener,
   removeFocusoutEventListener,
 } from './event'
+import { TAP_DURATION_MS } from '../../units'
 
-let timeStart
+let tapStartedAt = 0
 
 export function tappable(node) {
   const dispatch = createDispatcher(node)
 
   function handleTapstart() {
-    timeStart = Date.now()
+    tapStartedAt = Date.now()
   }
 
   function handleTapend() {
-    const diffMs = Date.now() - timeStart
+    if (Date.now() - tapStartedAt <= TAP_DURATION_MS) {
-    if (diffMs <= 200) {
       dispatch('tapped')
     }
   }

src/components/Carousel/Carousel.svelte

@@ -250,6 +250,7 @@
   // Disable page change while animation is in progress
   let disabled = false
   async function changePage(updateStoreFn, options) {
+    progressManager.reset()
     if (disabled) return
     disabled = true
 

src/units.js

@@ -0,0 +1,3 @@
+export const TAP_DURATION_MS = 200
+export const SWIPE_MIN_DURATION_MS = 250
+export const SWIPE_MIN_DISTANCE_PX = 20