fix: fix threshold option not applying snap threshold

naver · Jan 10, 2024 · 39b1edd · 39b1edd
1 parent d88869d
commit 39b1edd
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 11 deletions.
diff --git a/src/control/SnapControl.ts b/src/control/SnapControl.ts
@@ -95,7 +95,7 @@ class SnapControl extends Control {
       return Promise.reject(new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(position), ERROR.CODE.POSITION_NOT_REACHABLE));
     }
 
-    const snapThreshold = this._calcSnapThreshold(position, activeAnchor);
+    const snapThreshold = this._calcSnapThreshold(flicking.threshold, position, activeAnchor);
 
     const posDelta = flicking.animating
       ? state.delta
@@ -210,7 +210,7 @@ class SnapControl extends Control {
     return adjacentAnchor;
   }
 
-  private _calcSnapThreshold(position: number, activeAnchor: AnchorPoint): number {
+  private _calcSnapThreshold(threshold: number, position: number, activeAnchor: AnchorPoint): number {
     const isNextDirection = position > activeAnchor.position;
     const panel = activeAnchor.panel;
     const panelSize = panel.size;
@@ -222,9 +222,9 @@ class SnapControl extends Control {
      * |<------>|<------------>|
      * [        |<-Anchor      ]
      */
-    return isNextDirection
+    return Math.max(threshold, isNextDirection
       ? panelSize - alignPos + panel.margin.next
-      : alignPos + panel.margin.prev;
+      : alignPos + panel.margin.prev);
   }
 }
 

diff --git a/test/manual/css/index.css b/test/manual/css/index.css
@@ -35,6 +35,10 @@ header {
   background-color: #423789;
 }
 
+.vertical {
+  height: 200px;
+}
+
 .flicking-panel {
   border: 10px solid transparent;
   box-sizing: border-box;

diff --git a/test/manual/js/vertical.js b/test/manual/js/vertical.js
@@ -1,5 +1,5 @@
 const flicking = new Flicking("#flicking", {
   horizontal: false,
   align: "prev",
-  threshold: 100,
+  threshold: 50,
 });
diff --git a/test/unit/Flicking.spec.ts b/test/unit/Flicking.spec.ts
@@ -669,6 +669,24 @@ describe("Flicking", () => {
 
         expect(flicking.index).equals(beforeIndex);
       });
+
+      it("should change panel when moving above threshold (vertical)", async () => {
+        const flicking = await createFlicking(El.DEFAULT_VERTICAL, { threshold: 50, defaultIndex: 2, horizontal: false, align: "prev" });
+        const beforeIndex = flicking.index;
+
+        await simulate(flicking.element, { deltaY: 1000, duration: 3000 });
+
+        expect(flicking.index).not.to.equal(beforeIndex);
+      });
+
+      it("should not change panel when moving below threshold (vertical)", async () => {
+        const flicking = await createFlicking(El.DEFAULT_VERTICAL, { threshold: 50, defaultIndex: 2, horizontal: false, align: "prev" });
+        const beforeIndex = flicking.index;
+
+        await simulate(flicking.element, { deltaY: 49, duration: 3000 });
+
+        expect(flicking.index).equals(beforeIndex);
+      });
     });
 
     describe("interruptable", () => {

diff --git a/test/unit/helper/El.ts b/test/unit/helper/El.ts
@@ -92,16 +92,16 @@ class El {
    * @example
    * - Viewport (width: 1000px, height: 1000px)
    *   - Camera
-   *     - Panel (width: 100%, height: 100%)
-   *     - Panel (width: 100%, height: 100%)
-   *     - Panel (width: 100%, height: 100%)
+   *     - Panel (width: 100%, height: 1000px)
+   *     - Panel (width: 100%, height: 1000px)
+   *     - Panel (width: 100%, height: 1000px)
    */
   public static get DEFAULT_VERTICAL() {
     return El.viewport("1000px", "1000px").addClass(EL_CLASS.VERTICAL).add(
       El.camera().add(
-        El.panel("100%", "100%"),
-        El.panel("100%", "100%"),
-        El.panel("100%", "100%"),
+        El.panel().setWidth("100%").setHeight(1000),
+        El.panel().setWidth("100%").setHeight(1000),
+        El.panel().setWidth("100%").setHeight(1000),
       ),
     );
   }