From 28f64bf4f8985591b11060240de70b87fe15e1ca Mon Sep 17 00:00:00 2001
From: miccoh <miccoh1994@gmail.com>
Date: Wed, 29 Apr 2020 18:16:49 +0200
Subject: [PATCH] added basic support for touch gestures

---
 .gitignore             |  1 +
 package-lock.json      | 85 +++++++++++++++++++++++++++++++++++-------
 src/MultiCarousel.html | 41 +++++++++++++++++++-
 3 files changed, 112 insertions(+), 15 deletions(-)

diff --git a/.gitignore b/.gitignore
index 9097753..b714399 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 /lib/
 /dist/
 node_modules/
+package-lock.json
diff --git a/package-lock.json b/package-lock.json
index 0449597..6e10fba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1097,6 +1097,12 @@
       "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=",
       "dev": true
     },
+    "estree-walker": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+      "dev": true
+    },
     "events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz",
@@ -1415,7 +1421,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1436,12 +1443,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1456,17 +1465,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1583,7 +1595,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1595,6 +1608,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -1609,6 +1623,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1616,12 +1631,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -1640,6 +1657,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -1720,7 +1738,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -1732,6 +1751,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -1817,7 +1837,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -1853,6 +1874,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -1872,6 +1894,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -1915,12 +1938,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -3102,6 +3127,12 @@
       "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
       "dev": true
     },
+    "require-relative": {
+      "version": "0.8.7",
+      "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
+      "integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=",
+      "dev": true
+    },
     "resolve-cwd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",
@@ -3158,6 +3189,26 @@
         "inherits": "^2.0.1"
       }
     },
+    "rollup-plugin-svelte": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-5.2.1.tgz",
+      "integrity": "sha512-wc93cN66sRpX6uFljVFqvWT6NU3V5ab/uLXKt2UiARuexFU/ctolzkmdXM7WM5iKdTX9scToS9sabJTJV4DUMA==",
+      "dev": true,
+      "requires": {
+        "require-relative": "^0.8.7",
+        "rollup-pluginutils": "^2.8.2",
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dev": true,
+      "requires": {
+        "estree-walker": "^0.6.1"
+      }
+    },
     "run-queue": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
@@ -3427,6 +3478,12 @@
       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
       "dev": true
     },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
+    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -3549,9 +3606,9 @@
       }
     },
     "svelte": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.0.0.tgz",
-      "integrity": "sha512-4QQ7eBuVw/t0kMSSjLCiAjQYTj7ZF0OtH24YOWtTrTJHTLd58gEAPZeKSGOYDXtwpcrMi4Cxo3MgEbdI1m4erg==",
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.21.0.tgz",
+      "integrity": "sha512-smh3LZKPCGJ+UXa0iZvUmuDctPYCwPY1opmClTWTm+l6e4y9FHLoCZMiue8YIeyc9JvlGT/EK0xry0diXjFDZQ==",
       "dev": true
     },
     "svelte-dev-helper": {
diff --git a/src/MultiCarousel.html b/src/MultiCarousel.html
index a1ae5be..c7be097 100644
--- a/src/MultiCarousel.html
+++ b/src/MultiCarousel.html
@@ -56,7 +56,7 @@
       </svg>
     </div>
   {/if}
-  <div class="items" bind:this={itemsElement}></div>
+  <div class="items" bind:this={itemsElement} on:touchstart={handleTouchStart} on:touchend={handleTouchEnd} on:touchmove={handleTouchMove}></div>
 </div>
 
 <script>
@@ -181,6 +181,45 @@
       timer = setInterval(next, delay);
     }
   }
+  var touchsurface = document.getElementById('items'),
+        startX,
+        startY,
+        dist,
+        threshold = 50, //required min distance traveled to be considered swipe
+        allowedTime = 300, // maximum time allowed to travel that distance
+        elapsedTime,
+        startTime
+  export const handleSwipe = (isRightSwipe) => {
+    if (isRightSwipe) {
+      previous()
+    } else {
+      next()
+    }
+  }
+
+  export const handleTouchStart = (e) => {
+    var touchObj = e.changedTouches[0]
+    dist = 0
+    startX = e.changedTouches[0].pageX
+    startY = e.changedTouches[0].pageY
+    startTime = new Date().getTime()
+    e.preventDefault()
+  }
+
+  export const handleTouchMove = (e) => {
+    e.preventDefault();
+  }
+
+  export const handleTouchEnd = (e) => {
+    var touchobj = e.changedTouches[0]
+        dist = e.changedTouches[0].pageX - startX // get total dist traveled by finger while in contact with surface
+        elapsedTime = new Date().getTime() - startTime // get time elapsed
+        // check that elapsed time is within specified, horizontal dist traveled >= threshold, and vertical dist traveled <= 100
+        var swiperightBol = (elapsedTime <= allowedTime && dist >= threshold && Math.abs(e.changedTouches[0].pageY - startY) <= 100)
+        handleSwipe(swiperightBol)
+        e.preventDefault()
+  }
+
 </script>
 
 <style>