diff --git a/src/control/SnapControl.ts b/src/control/SnapControl.ts index e823303b3..a6b9370e6 100644 --- 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 index 7b6d58cb1..17d59f2fd 100644 --- 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 new file mode 100644 index 000000000..d391888df --- /dev/null +++ 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 new file mode 100644 index 000000000..1ea0a3a49 --- /dev/null +++ b/test/manual/vertical.html @@ -0,0 +1,30 @@ + + + + + + + + + + + + + Flicking Manual Test + + +
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ + + diff --git a/test/unit/Flicking.spec.ts b/test/unit/Flicking.spec.ts index 8e002f0d1..82988fb12 100644 --- 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 index efdd52763..2a6425a37 100644 --- 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), ), ); }