fix: fix threshold option not applying snap threshold (#845)

* test: add manual test for vertical flicking * fix: fix threshold option not applying snap threshold --------- Co-authored-by: malangfox <seonghyun.ahn@navercorp.com>
naver · Mar 29, 2024 · cf1636e · cf1636e
1 parent 2a35048
commit cf1636e
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 10 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
@@ -0,0 +1,5 @@
+const flicking = new Flicking("#flicking", {
+  horizontal: false,
+  align: "prev",
+  threshold: 50,
+});
diff --git a/test/manual/vertical.html b/test/manual/vertical.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.js"></script>
+  <script type="text/javascript" src="../../dist/flicking.pkgd.js"></script>
+  <script type="text/javascript" src="../../node_modules/@egjs/flicking-plugins/dist/plugins.js"></script>
+  <link rel="stylesheet" href="./css/index.css">
+  <link rel="stylesheet" href="../../dist/flicking.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
+  <title>Flicking Manual Test</title>
+</head>
+<body>
+  <div class="demo-area">
+    <div id="flicking" class="flicking-viewport vertical">
+      <div class="flicking-camera">
+        <div class="flicking-panel has-text-white has-background-danger">1</div>
+        <div class="flicking-panel has-text-white has-background-primary">2</div>
+        <div class="flicking-panel has-text-white has-background-warning">3</div>
+        <div class="flicking-panel has-text-white has-background-black">4</div>
+        <div class="flicking-panel has-text-white has-background-info">5</div>
+        <div class="flicking-panel has-text-white has-background-link">6</div>
+      </div>
+    </div>
+  </div>
+  <script type="text/javascript" src="./js/vertical.js"></script>
+</body>
+</html>
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),
       ),
     );
   }