@egjs/flicking 4.12.1-beta.3 → 4.12.1-beta.4

package/src/control/Control.ts

@@ -397,7 +397,7 @@ abstract class Control {
     }
   }
 
-  private _getPosition(panel: Panel, direction: ValueOf<typeof DIRECTION> = DIRECTION.NONE) {
+  protected _getPosition(panel: Panel, direction: ValueOf<typeof DIRECTION> = DIRECTION.NONE) {
     const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
 

package/src/control/SnapControl.ts

@@ -9,6 +9,7 @@ import AnchorPoint from "../core/AnchorPoint";
 import { circulateIndex, clamp, getFlickingAttached } from "../utils";
 import * as AXES from "../const/axes";
 import * as ERROR from "../const/error";
+import { DIRECTION } from "../const/external";
 
 import Control from "./Control";
 
@@ -109,7 +110,7 @@ class SnapControl extends Control {
     if (snapDelta >= snapThreshold && snapDelta > 0) {
       // Move to anchor at position
       targetAnchor = this._findSnappedAnchor(position, anchorAtCamera);
-    } else if (absPosDelta >= flicking.threshold && absPosDelta > 0) {
+    } else if (absPosDelta >= flicking.threshold && absPosDelta > 0 && anchorAtCamera === activeAnchor) {
       // Move to the adjacent panel
       targetAnchor = this._findAdjacentAnchor(position, posDelta, anchorAtCamera);
     } else {
@@ -120,12 +121,16 @@ class SnapControl extends Control {
       });
     }
 
-    this._triggerIndexChangeEvent(targetAnchor.panel, position, axesEvent);
+    const nextPanel = targetAnchor.panel;
+    const direction = (posDelta === 0 || activeAnchor === targetAnchor) ? DIRECTION.NONE : (posDelta > 0 ? DIRECTION.NEXT : DIRECTION.PREV);
+    const nextPosition = this._getPosition(nextPanel, direction);
+
+    this._triggerIndexChangeEvent(nextPanel, position, axesEvent);
 
     return this._animateToPosition({
-      position: camera.clampToReachablePosition(targetAnchor.position),
+      position: camera.clampToReachablePosition(nextPosition),
       duration,
-      newActivePanel: targetAnchor.panel,
+      newActivePanel: nextPanel,
       axesEvent
     });
   }
@@ -138,14 +143,15 @@ class SnapControl extends Control {
     const currentPos = camera.position;
 
     const clampedPosition = camera.clampToReachablePosition(position);
+    const nearestAnchor = camera.findNearestAnchor(clampedPosition);
     const anchorAtPosition = camera.findAnchorIncludePosition(clampedPosition);
 
-    if (!anchorAtCamera || !anchorAtPosition) {
+    if (!anchorAtCamera || !anchorAtPosition || !nearestAnchor) {
       throw new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(position), ERROR.CODE.POSITION_NOT_REACHABLE);
     }
 
     if (!isFinite(count)) {
-      return anchorAtPosition;
+      return nearestAnchor;
     }
 
     const panelCount = flicking.panelCount;

package/src/core/AutoResizer.ts

@@ -11,9 +11,7 @@ class AutoResizer {
   private _resizeTimer: number;
   private _maxResizeDebounceTimer: number;
 
-  public get enabled() {
-    return this._enabled;
-  }
+  public get enabled() { return this._enabled; }
 
   public constructor(flicking: Flicking) {
     this._flicking = flicking;
@@ -35,14 +33,14 @@ class AutoResizer {
       const viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;
 
       const resizeObserver = viewportSizeNot0
-        ? new ResizeObserver((entries: ResizeObserverEntry[]) => this._skipFirstResize(entries))
-        : new ResizeObserver((entries: ResizeObserverEntry[]) => this._onResize(entries));
+        ? new ResizeObserver(this._skipFirstResize)
+        : new ResizeObserver(this._onResize);
 
       resizeObserver.observe(flicking.viewport.element);
 
       this._resizeObserver = resizeObserver;
     } else {
-      window.addEventListener("resize", () => this._onResize([]));
+      window.addEventListener("resize", this._onResize);
     }
 
     this._enabled = true;
@@ -58,7 +56,7 @@ class AutoResizer {
       resizeObserver.disconnect();
       this._resizeObserver = null;
     } else {
-      window.removeEventListener("resize", () => this._onResize([]));
+      window.removeEventListener("resize", this._onResize);
     }
 
     this._enabled = false;
@@ -66,41 +64,17 @@ class AutoResizer {
     return this;
   }
 
-  private _onResize = (entries: ResizeObserverEntry[]) => {
+  private _onResize = () => {
     const flicking = this._flicking;
     const resizeDebounce = flicking.resizeDebounce;
     const maxResizeDebounce = flicking.maxResizeDebounce;
 
-    if (entries.length) {
-      const resizeEntryInfo = entries[0].contentRect;
-      const beforeSize = {
-        width: flicking.viewport.width,
-        height: flicking.viewport.height
-      };
-
-      const afterSize = {
-        width: resizeEntryInfo.width,
-        height: resizeEntryInfo.height
-      };
-
-      // resize 이벤트가 발생했으나 이전과 width, height의 변화가 없다면 이후 로직을 진행하지 않는다.
-      if (
-        beforeSize.height === afterSize.height &&
-        beforeSize.width === afterSize.width
-      ) {
-        return;
-      }
-    }
-
     if (resizeDebounce <= 0) {
       void flicking.resize();
     } else {
       if (this._maxResizeDebounceTimer <= 0) {
         if (maxResizeDebounce > 0 && maxResizeDebounce >= resizeDebounce) {
-          this._maxResizeDebounceTimer = window.setTimeout(
-            this._doScheduledResize,
-            maxResizeDebounce
-          );
+          this._maxResizeDebounceTimer = window.setTimeout(this._doScheduledResize, maxResizeDebounce);
         }
       }
 
@@ -109,10 +83,7 @@ class AutoResizer {
         this._resizeTimer = 0;
       }
 
-      this._resizeTimer = window.setTimeout(
-        this._doScheduledResize,
-        resizeDebounce
-      );
+      this._resizeTimer = window.setTimeout(this._doScheduledResize, resizeDebounce);
     }
   };
 
@@ -130,13 +101,13 @@ class AutoResizer {
   private _skipFirstResize = (() => {
     let isFirstResize = true;
 
-    return (entries) => {
+    return (() => {
       if (isFirstResize) {
         isFirstResize = false;
         return;
       }
-      this._onResize(entries);
-    };
+      this._onResize();
+    });
   })();
 }
 

package/debug/example/index.html

@@ -1,82 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Flicking Basic Demo</title>
-    <link rel="stylesheet" href="../../dist/flicking.css" />
-    <style>
-      .flicking-viewport {
-        width: 500px;
-        height: 300px;
-        margin: 0 auto;
-      }
-      .panel {
-        width: 200px;
-        height: 300px;
-        margin-right: 10px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 24px;
-        color: white;
-      }
-      .navigation {
-        text-align: center;
-        margin-top: 20px;
-      }
-      .navigation button {
-        margin: 0 5px;
-        padding: 5px 10px;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="flicking-viewport">
-      <div class="flicking-camera">
-        <div class="panel" style="background-color: #f44336">Panel 1</div>
-        <div class="panel" style="background-color: #2196f3">Panel 2</div>
-        <div class="panel" style="background-color: #4caf50">Panel 3</div>
-        <div class="panel" style="background-color: #ffc107">Panel 4</div>
-        <div class="panel" style="background-color: #9c27b0">Panel 5</div>
-      </div>
-    </div>
-    <div class="navigation">
-      <button id="prev">Previous</button>
-      <button id="next">Next</button>
-    </div>
-
-    <script src="../../dist/flicking.pkgd.js"></script>
-    <script>
-      document.addEventListener("DOMContentLoaded", () => {
-        const flicking = new Flicking(".flicking-viewport", {
-          circular: false,
-          moveType: "snap",
-          align: "center",
-          defaultIndex: 0,
-        });
-
-        // Navigation buttons
-        const prevButton = document.getElementById("prev");
-        const nextButton = document.getElementById("next");
-
-        prevButton.addEventListener("click", () => {
-          flicking.prev();
-        });
-
-        nextButton.addEventListener("click", () => {
-          flicking.next();
-        });
-
-        // Update button states based on current index
-        flicking.on("moveEnd", () => {
-          prevButton.disabled = flicking.index === 0;
-          nextButton.disabled = flicking.index === flicking.panels.length - 1;
-        });
-
-        // Initial button state
-        prevButton.disabled = true;
-      });
-    </script>
-  </body>
-</html>