@egjs/flicking-plugins 4.7.1 → 4.8.0-beta.1

package/src/Arrow.ts

@@ -1,4 +1,4 @@
-import Flicking, { EVENTS, FlickingError, Plugin } from "@egjs/flicking";
+import Flicking, { EVENTS, FlickingError, Plugin, WillChangeEvent } from "@egjs/flicking";
 
 import { BROWSER } from "./event";
 import { ARROW } from "./const";
@@ -11,6 +11,7 @@ interface ArrowOptions {
   disabledClass: string;
   moveCount: number;
   moveByViewportSize: boolean;
+  interruptable: boolean;
 }
 
 /**
@@ -23,6 +24,7 @@ class Arrow implements Plugin {
   private _flicking: Flicking | null = null;
   private _prevEl: HTMLElement;
   private _nextEl: HTMLElement;
+  private _nextIndex: number;
 
   /* Options */
   private _parentEl: ArrowOptions["parentEl"];
@@ -31,6 +33,7 @@ class Arrow implements Plugin {
   private _disabledClass: ArrowOptions["disabledClass"];
   private _moveCount: ArrowOptions["moveCount"];
   private _moveByViewportSize: ArrowOptions["moveByViewportSize"];
+  private _interruptable: ArrowOptions["interruptable"];
 
   public get prevEl() { return this._prevEl; }
   public get nextEl() { return this._nextEl; }
@@ -41,6 +44,7 @@ class Arrow implements Plugin {
   public get disabledClass() { return this._disabledClass; }
   public get moveCount() { return this._moveCount; }
   public get moveByViewportSize() { return this._moveByViewportSize; }
+  public get interruptable() { return this._interruptable; }
 
   public set parentEl(val: ArrowOptions["parentEl"]) { this._parentEl = val; }
   public set prevElSelector(val: ArrowOptions["prevElSelector"]) { this._prevElSelector = val; }
@@ -48,6 +52,7 @@ class Arrow implements Plugin {
   public set disabledClass(val: ArrowOptions["disabledClass"]) { this._disabledClass = val; }
   public set moveCount(val: ArrowOptions["moveCount"]) { this._moveCount = val; }
   public set moveByViewportSize(val: ArrowOptions["moveByViewportSize"]) { this._moveByViewportSize = val; }
+  public set interruptable(val: ArrowOptions["interruptable"]) { this._interruptable = val; }
 
   public constructor({
     parentEl = null,
@@ -55,7 +60,8 @@ class Arrow implements Plugin {
     nextElSelector = ARROW.NEXT_SELECTOR,
     disabledClass = ARROW.DISABLED_CLASS,
     moveCount = 1,
-    moveByViewportSize = false
+    moveByViewportSize = false,
+    interruptable = false
   }: Partial<ArrowOptions> = {}) {
     this._parentEl = parentEl;
     this._prevElSelector = prevElSelector;
@@ -63,6 +69,7 @@ class Arrow implements Plugin {
     this._disabledClass = disabledClass;
     this._moveCount = moveCount;
     this._moveByViewportSize = moveByViewportSize;
+    this._interruptable = interruptable;
   }
 
   public init(flicking: Flicking): void {
@@ -73,6 +80,7 @@ class Arrow implements Plugin {
     this._flicking = flicking;
 
     flicking.on(EVENTS.MOVE, this._onAnimation);
+    flicking.on(EVENTS.WILL_CHANGE, this._onWillChange);
 
     const parentEl = this._parentEl ? this._parentEl : flicking.element;
     const prevEl = getElement(this._prevElSelector, parentEl, "Arrow");
@@ -100,6 +108,7 @@ class Arrow implements Plugin {
     }
 
     flicking.off(EVENTS.MOVE, this._onAnimation);
+    flicking.off(EVENTS.WILL_CHANGE, this._onWillChange);
 
     const prevEl = this._prevEl;
     const nextEl = this._nextEl;
@@ -124,10 +133,16 @@ class Arrow implements Plugin {
 
   private _onPrevClick = () => {
     const flicking = this._flicking!;
+    const index = flicking.animating ? this._nextIndex : flicking.index;
+    const currentPanel = flicking.animating ? flicking.panels[this._nextIndex] : flicking.currentPanel;
     const camera = flicking.camera;
     const anchorPoints = camera.anchorPoints;
 
-    if (flicking.animating || anchorPoints.length <= 0) return;
+    if ((flicking.animating && !this.interruptable) || anchorPoints.length <= 0) return;
+
+    if (flicking.animating) {
+      flicking.stopAnimation();
+    }
 
     const firstAnchor = anchorPoints[0];
     const moveCount = this._moveCount;
@@ -137,18 +152,18 @@ class Arrow implements Plugin {
         .catch(this._onCatch);
     } else {
       if (flicking.circularEnabled) {
-        let targetPanel = flicking.currentPanel;
+        let targetPanel = currentPanel;
 
         for (let i = 0; i < moveCount; i++) {
           targetPanel = targetPanel.prev()!;
         }
 
         targetPanel.focus().catch(this._onCatch);
-      } else if (flicking.index > firstAnchor.panel.index) {
-        flicking.moveTo(Math.max(flicking.index - moveCount, firstAnchor.panel.index))
+      } else if (index > firstAnchor.panel.index) {
+        flicking.moveTo(Math.max(index - moveCount, firstAnchor.panel.index))
           .catch(this._onCatch);
       } else if (camera.position > camera.range.min) {
-        flicking.moveTo(flicking.index)
+        flicking.moveTo(index)
           .catch(this._onCatch);
       }
     }
@@ -156,11 +171,16 @@ class Arrow implements Plugin {
 
   private _onNextClick = () => {
     const flicking = this._flicking!;
-
+    const index = flicking.animating ? this._nextIndex : flicking.index;
+    const currentPanel = flicking.animating ? flicking.panels[this._nextIndex] : flicking.currentPanel;
     const camera = flicking.camera;
     const anchorPoints = camera.anchorPoints;
 
-    if (flicking.animating || anchorPoints.length <= 0) return;
+    if ((flicking.animating && !this.interruptable) || anchorPoints.length <= 0) return;
+
+    if (flicking.animating) {
+      flicking.stopAnimation();
+    }
 
     const lastAnchor = anchorPoints[anchorPoints.length - 1];
     const moveCount = this._moveCount;
@@ -170,18 +190,18 @@ class Arrow implements Plugin {
         .catch(this._onCatch);
     } else {
       if (flicking.circularEnabled) {
-        let targetPanel = flicking.currentPanel;
+        let targetPanel = currentPanel;
 
         for (let i = 0; i < moveCount; i++) {
           targetPanel = targetPanel.next()!;
         }
 
         targetPanel.focus().catch(this._onCatch);
-      } else if (flicking.index < lastAnchor.panel.index) {
-        flicking.moveTo(Math.min(flicking.index + moveCount, lastAnchor.panel.index))
+      } else if (index < lastAnchor.panel.index) {
+        flicking.moveTo(Math.min(index + moveCount, lastAnchor.panel.index))
           .catch(this._onCatch);
       } else if (camera.position > camera.range.min) {
-        flicking.moveTo(flicking.index)
+        flicking.moveTo(index)
           .catch(this._onCatch);
       }
     }
@@ -199,6 +219,10 @@ class Arrow implements Plugin {
     }
   };
 
+  private _onWillChange = (e: WillChangeEvent) => {
+    this._nextIndex = e.index;
+  };
+
   private _updateClass(pos: number) {
     const flicking = this._flicking!;
     const disabledClass = this._disabledClass;

package/src/AutoPlay.ts

@@ -5,6 +5,7 @@ interface AutoPlayOptions {
   animationDuration: number | undefined;
   direction: typeof DIRECTION["NEXT"] | typeof DIRECTION["PREV"];
   stopOnHover: boolean;
+  stopOnInit: boolean;
   delayAfterHover: number;
 }
 
@@ -19,6 +20,7 @@ class AutoPlay implements Plugin {
   private _animationDuration: AutoPlayOptions["animationDuration"];
   private _direction: AutoPlayOptions["direction"];
   private _stopOnHover: AutoPlayOptions["stopOnHover"];
+  private _stopOnInit: AutoPlayOptions["stopOnInit"];
   private _delayAfterHover: AutoPlayOptions["delayAfterHover"];
 
   /* Internal Values */
@@ -31,6 +33,7 @@ class AutoPlay implements Plugin {
   public get animationDuration() { return this._animationDuration; }
   public get direction() { return this._direction; }
   public get stopOnHover() { return this._stopOnHover; }
+  public get stopOnInit() { return this._stopOnInit; }
   public get delayAfterHover() { return this._delayAfterHover; }
   public get playing() { return this._playing; }
 
@@ -38,6 +41,7 @@ class AutoPlay implements Plugin {
   public set animationDuration(val: number | undefined) { this._animationDuration = val; }
   public set direction(val: AutoPlayOptions["direction"]) { this._direction = val; }
   public set stopOnHover(val: boolean) { this._stopOnHover = val; }
+  public set stopOnInit(val: boolean) { this._stopOnInit = val; }
   public set delayAfterHover(val: number) { this._delayAfterHover = val; }
 
   /**
@@ -46,6 +50,7 @@ class AutoPlay implements Plugin {
    * @param {number | undefined} options.animationDuration Duration of animation of moving to the next panel. If undefined, duration option of the Flicking instance is used instead.<ko>패널이 움직이는 애니메이션의 지속 시간, undefined라면 Flicking 인스턴스의 duration 값을 사용한다</ko>
    * @param {"PREV" | "NEXT"} options.direction The direction in which the panel moves.<ko>패널이 움직이는 방향</ko>
    * @param {boolean} options.stopOnHover Whether to stop when mouse hover upon the element.<ko>엘리먼트에 마우스를 올렸을 때 AutoPlay를 정지할지 여부</ko>
+   * @param {boolean} options.stopOnInit Whether to stop when mouse hover upon the element.<ko>엘리먼트에 마우스를 올렸을 때 AutoPlay를 정지할지 여부</ko>
    * @param {number} options.delayAfterHover If stopOnHover is true, the amount of time to wait before moving on to the next panel when mouse leaves the element.<ko>stopOnHover를 사용한다면 마우스가 엘리먼트로부터 나간 뒤 다음 패널로 움직이기까지 대기 시간</ko>
    * @example
    * ```ts
@@ -57,12 +62,14 @@ class AutoPlay implements Plugin {
     animationDuration = undefined,
     direction = DIRECTION.NEXT,
     stopOnHover = false,
+    stopOnInit = false,
     delayAfterHover
   }: Partial<AutoPlayOptions> = {}) {
     this._duration = duration;
     this._animationDuration = animationDuration;
     this._direction = direction;
     this._stopOnHover = stopOnHover;
+    this._stopOnInit = stopOnInit;
     this._delayAfterHover = delayAfterHover ?? duration;
   }
 
@@ -85,7 +92,9 @@ class AutoPlay implements Plugin {
       targetEl.addEventListener("mouseleave", this._onMouseLeave, false);
     }
 
-    this.play();
+    if (!this._stopOnInit) {
+      this.play();
+    }
   }
 
   public destroy(): void {