From 8fc527d01e446a934e7e088699a59143b63e4c02 Mon Sep 17 00:00:00 2001
From: David Jerleke <david.jerleke@gmail.com>
Date: Wed, 3 May 2023 12:21:12 +0200
Subject: [PATCH] Implement #25.

---
 .../src/content/pages/api/options.mdx         | 15 ++++++++++++
 .../src/components/DragHandler.ts             | 12 ++++++----
 .../embla-carousel/src/components/Engine.ts   |  2 ++
 .../embla-carousel/src/components/Options.ts  |  2 ++
 .../src/main.ts                               | 24 +++++++++++++------
 5 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/packages/embla-carousel-docs/src/content/pages/api/options.mdx b/packages/embla-carousel-docs/src/content/pages/api/options.mdx
index 6718b5de3..93e0935a0 100644
--- a/packages/embla-carousel-docs/src/content/pages/api/options.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/api/options.mdx
@@ -216,6 +216,21 @@ Enables momentum scrolling. The duration of the continued scrolling is proportio
 
 ---
 
+### dragThreshold
+
+Type: <BrandPrimaryText>`number`</BrandPrimaryText>  
+Default: <BrandSecondaryText>`10`</BrandSecondaryText>
+
+Drag threshold in pixels. This only affects **when** clicks are fired and not. In contrast to other carousel libraries, it will **not affect when dragging** of the carousel **starts**.
+
+<Admonition type="note">
+  **Note:** Browsers handle touch events differently than mouse events. Browsers
+  won't fire the click event when a touch event includes an accidental slight
+  swipe gesture. This is why this threshold only works for mouse events.
+</Admonition>
+
+---
+
 ### duration
 
 Type: <BrandPrimaryText>`number`</BrandPrimaryText>  
diff --git a/packages/embla-carousel/src/components/DragHandler.ts b/packages/embla-carousel/src/components/DragHandler.ts
index 74b30cde8..521d490a8 100644
--- a/packages/embla-carousel/src/components/DragHandler.ts
+++ b/packages/embla-carousel/src/components/DragHandler.ts
@@ -49,6 +49,7 @@ export function DragHandler(
   eventHandler: EventHandlerType,
   percentOfView: PercentOfViewType,
   dragFree: boolean,
+  dragThreshold: number,
   skipSnaps: boolean,
   baseFriction: number,
 ): DragHandlerType {
@@ -147,17 +148,18 @@ export function DragHandler(
   }
 
   function move(evt: PointerEventType): void {
+    const lastScroll = dragTracker.readPoint(evt)
+    const lastCross = dragTracker.readPoint(evt, crossAxis)
+    const diffScroll = deltaAbs(lastScroll, startScroll)
+    const diffCross = deltaAbs(lastCross, startCross)
+
     if (!preventScroll && !isMouse) {
       if (!evt.cancelable) return up(evt)
-      const lastScroll = dragTracker.readPoint(evt)
-      const lastCross = dragTracker.readPoint(evt, crossAxis)
-      const diffScroll = deltaAbs(lastScroll, startScroll)
-      const diffCross = deltaAbs(lastCross, startCross)
       preventScroll = diffScroll > diffCross
       if (!preventScroll) return up(evt)
     }
     const diff = dragTracker.pointerMove(evt)
-    if (diff) preventClick = true
+    if (diffScroll > dragThreshold) preventClick = true
 
     scrollBody.useFriction(0.3).useDuration(1)
     animation.start()
diff --git a/packages/embla-carousel/src/components/Engine.ts b/packages/embla-carousel/src/components/Engine.ts
index 2064d8c00..29b0e2aec 100644
--- a/packages/embla-carousel/src/components/Engine.ts
+++ b/packages/embla-carousel/src/components/Engine.ts
@@ -83,6 +83,7 @@ export function Engine(
     loop,
     duration,
     dragFree,
+    dragThreshold,
     slidesToScroll: groupSlides,
     skipSnaps,
     containScroll,
@@ -227,6 +228,7 @@ export function Engine(
       eventHandler,
       percentOfView,
       dragFree,
+      dragThreshold,
       skipSnaps,
       friction,
     ),
diff --git a/packages/embla-carousel/src/components/Options.ts b/packages/embla-carousel/src/components/Options.ts
index a433b3380..d01bf1850 100644
--- a/packages/embla-carousel/src/components/Options.ts
+++ b/packages/embla-carousel/src/components/Options.ts
@@ -27,6 +27,7 @@ export type OptionsType = CreateOptionsType<{
   direction: DirectionOptionType
   slidesToScroll: SlidesToScrollOptionType
   dragFree: boolean
+  dragThreshold: number
   inViewThreshold: number
   loop: boolean
   skipSnaps: boolean
@@ -47,6 +48,7 @@ export const defaultOptions: OptionsType = {
   slidesToScroll: 1,
   breakpoints: {},
   dragFree: false,
+  dragThreshold: 10,
   inViewThreshold: 0,
   loop: false,
   skipSnaps: false,
diff --git a/playgrounds/embla-carousel-playground-vanilla/src/main.ts b/playgrounds/embla-carousel-playground-vanilla/src/main.ts
index 5e57b8226..381e9d6fd 100644
--- a/playgrounds/embla-carousel-playground-vanilla/src/main.ts
+++ b/playgrounds/embla-carousel-playground-vanilla/src/main.ts
@@ -69,13 +69,23 @@ emblaApi.on('select', togglePrevNextButtonsActive)
 emblaApi.on('init', toggleDotButtonsActive)
 emblaApi.reInit()
 
-let startTime = performance.now()
+// let startTime = performance.now()
 
-emblaApi.on('select', () => {
-  startTime = performance.now()
-})
+// emblaApi.on('select', () => {
+//   startTime = performance.now()
+// })
+
+// emblaApi.on('settle', () => {
+//   const endTime = performance.now()
+//   console.log('settled', endTime - startTime)
+// })
 
-emblaApi.on('settle', () => {
-  const endTime = performance.now()
-  console.log('settled', endTime - startTime)
+emblaApi.slideNodes().forEach((n, i) => {
+  n.addEventListener('click', () => {
+    console.log('Clicked index: ' + (i + 1))
+  })
 })
+
+// document.addEventListener('click', () => {
+//   console.log('Clicked document')
+// })