From b3aebdf79a289c4ed25b9cf8a4463dd159e5d26b Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 24 Jul 2021 22:47:13 +0300
Subject: [PATCH] #49 : Update swipe event handling

---
 src/actions/swipeable/swipeable.js      | 18 +++++++++++++++---
 src/actions/tappable/tappable.js        |  8 ++++----
 src/components/Carousel/Carousel.svelte |  1 +
 src/units.js                            |  3 +++
 4 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 src/units.js

diff --git a/src/actions/swipeable/swipeable.js b/src/actions/swipeable/swipeable.js
index 1f70f2e..2aa474a 100644
--- a/src/actions/swipeable/swipeable.js
+++ b/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
-    y = coords.y
-    dispatch('end', { x, y })
+    dispatch('end', { x: coords.x, y: coords.y })
     removeEndEventListener(window, handleMouseup)
     removeMoveEventListener(window, handleMousemove)
   }
diff --git a/src/actions/tappable/tappable.js b/src/actions/tappable/tappable.js
index 352a5eb..c5d008e 100644
--- a/src/actions/tappable/tappable.js
+++ b/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 (diffMs <= 200) {
+    if (Date.now() - tapStartedAt <= TAP_DURATION_MS) {
       dispatch('tapped')
     }
   }
diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 4eefe5b..600cbc2 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/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
 
diff --git a/src/units.js b/src/units.js
new file mode 100644
index 0000000..6d8c23c
--- /dev/null
+++ b/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
\ No newline at end of file