@egjs/flicking-plugins 4.4.0 → 4.6.0

package/declaration/AutoPlay.d.ts

@@ -1,28 +1,39 @@
 import Flicking, { Plugin, DIRECTION } from "@egjs/flicking";
 interface AutoPlayOptions {
     duration: number;
+    animationDuration: number | undefined;
     direction: typeof DIRECTION["NEXT"] | typeof DIRECTION["PREV"];
     stopOnHover: boolean;
+    delayAfterHover: number;
 }
 declare class AutoPlay implements Plugin {
     private _duration;
+    private _animationDuration;
     private _direction;
     private _stopOnHover;
+    private _delayAfterHover;
     private _flicking;
     private _timerId;
     private _mouseEntered;
+    private _playing;
     get duration(): number;
+    get animationDuration(): number | undefined;
     get direction(): AutoPlayOptions["direction"];
     get stopOnHover(): boolean;
+    get delayAfterHover(): number;
+    get playing(): boolean;
     set duration(val: number);
+    set animationDuration(val: number | undefined);
     set direction(val: AutoPlayOptions["direction"]);
     set stopOnHover(val: boolean);
-    constructor({ duration, direction, stopOnHover }?: Partial<AutoPlayOptions>);
+    set delayAfterHover(val: number);
+    constructor({ duration, animationDuration, direction, stopOnHover, delayAfterHover }?: Partial<AutoPlayOptions>);
     init(flicking: Flicking): void;
     destroy(): void;
     update(): void;
     play: () => void;
     stop: () => void;
+    private _movePanel;
     private _onMouseEnter;
     private _onMouseLeave;
 }

package/dist/plugins.esm.js

@@ -4,7 +4,7 @@ name: @egjs/flicking-plugins
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking-plugins
-version: 4.4.0
+version: 4.6.0
 */
 import { EVENTS, DIRECTION, FlickingError, clamp } from '@egjs/flicking';
 
@@ -221,8 +221,10 @@ function () {
   /**
    * @param {AutoPlayOptions} options Options for the AutoPlay instance.<ko>AutoPlay 옵션</ko>
    * @param {number} options.duration Time to wait before moving on to the next panel.<ko>다음 패널로 움직이기까지 대기 시간</ko>
+   * @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 {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
    * flicking.addPlugins(new AutoPlay({ duration: 2000, direction: "NEXT" }));
@@ -234,47 +236,27 @@ function () {
     var _b = _a === void 0 ? {} : _a,
         _c = _b.duration,
         duration = _c === void 0 ? 2000 : _c,
-        _d = _b.direction,
-        direction = _d === void 0 ? DIRECTION.NEXT : _d,
-        _e = _b.stopOnHover,
-        stopOnHover = _e === void 0 ? false : _e;
+        _d = _b.animationDuration,
+        animationDuration = _d === void 0 ? undefined : _d,
+        _e = _b.direction,
+        direction = _e === void 0 ? DIRECTION.NEXT : _e,
+        _f = _b.stopOnHover,
+        stopOnHover = _f === void 0 ? false : _f,
+        delayAfterHover = _b.delayAfterHover;
     /* Internal Values */
 
 
     this._flicking = null;
     this._timerId = 0;
     this._mouseEntered = false;
+    this._playing = false;
 
     this.play = function () {
-      var flicking = _this._flicking;
-      var direction = _this._direction;
-
-      if (!flicking) {
-        return;
-      }
-
-      _this.stop();
-
-      if (_this._mouseEntered || flicking.animating) {
-        return;
-      }
-
-      _this._timerId = window.setTimeout(function () {
-        if (direction === DIRECTION.NEXT) {
-          flicking.next().catch(function () {
-            return void 0;
-          });
-        } else {
-          flicking.prev().catch(function () {
-            return void 0;
-          });
-        }
-
-        _this.play();
-      }, _this._duration);
+      _this._movePanel(_this._duration);
     };
 
     this.stop = function () {
+      _this._playing = false;
       clearTimeout(_this._timerId);
     };
 
@@ -287,12 +269,14 @@ function () {
     this._onMouseLeave = function () {
       _this._mouseEntered = false;
 
-      _this.play();
+      _this._movePanel(_this._delayAfterHover);
     };
 
     this._duration = duration;
+    this._animationDuration = animationDuration;
     this._direction = direction;
     this._stopOnHover = stopOnHover;
+    this._delayAfterHover = delayAfterHover !== null && delayAfterHover !== void 0 ? delayAfterHover : duration;
   }
 
   var __proto = AutoPlay.prototype;
@@ -306,6 +290,16 @@ function () {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "animationDuration", {
+    get: function () {
+      return this._animationDuration;
+    },
+    set: function (val) {
+      this._animationDuration = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
   Object.defineProperty(__proto, "direction", {
     get: function () {
       return this._direction;
@@ -326,6 +320,23 @@ function () {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "delayAfterHover", {
+    get: function () {
+      return this._delayAfterHover;
+    },
+    set: function (val) {
+      this._delayAfterHover = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "playing", {
+    get: function () {
+      return this._playing;
+    },
+    enumerable: false,
+    configurable: true
+  });
 
   __proto.init = function (flicking) {
     var _a;
@@ -368,6 +379,38 @@ function () {
   __proto.update = function () {// DO-NOTHING
   };
 
+  __proto._movePanel = function (duration) {
+    var _this = this;
+
+    var flicking = this._flicking;
+    var direction = this._direction;
+
+    if (!flicking) {
+      return;
+    }
+
+    this.stop();
+
+    if (this._mouseEntered || flicking.animating) {
+      return;
+    }
+
+    this._playing = true;
+    this._timerId = window.setTimeout(function () {
+      if (direction === DIRECTION.NEXT) {
+        flicking.next(_this._animationDuration).catch(function () {
+          return void 0;
+        });
+      } else {
+        flicking.prev(_this._animationDuration).catch(function () {
+          return void 0;
+        });
+      }
+
+      _this.play();
+    }, duration);
+  };
+
   return AutoPlay;
 }();