@egjs/flicking-plugins 4.3.0 → 4.5.0

package/css/arrow.css

@@ -86,3 +86,15 @@
 .flicking-arrow-disabled::after {
   background-color: #e6e6e6;
 }
+
+.flicking-arrow-prev.is-thin::before,
+.flicking-arrow-prev.is-thin::after,
+.flicking-arrow-next.is-thin::before,
+.flicking-arrow-next.is-thin::after{
+  height: 3px;
+}
+
+.flicking-arrow-prev.is-thin::after,
+.flicking-arrow-next.is-thin::after{
+  top: calc(50% - 2px);
+}

package/declaration/AutoPlay.d.ts

@@ -1,28 +1,37 @@
 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;
     get duration(): number;
+    get animationDuration(): number | undefined;
     get direction(): AutoPlayOptions["direction"];
     get stopOnHover(): boolean;
+    get delayAfterHover(): number;
     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/arrow.css

@@ -104,3 +104,15 @@
 .flicking-arrow-disabled::after {
   background-color: #e6e6e6;
 }
+
+.flicking-arrow-prev.is-thin::before,
+.flicking-arrow-prev.is-thin::after,
+.flicking-arrow-next.is-thin::before,
+.flicking-arrow-next.is-thin::after{
+  height: 3px;
+}
+
+.flicking-arrow-prev.is-thin::after,
+.flicking-arrow-next.is-thin::after{
+  top: calc(50% - 2px);
+}

package/dist/arrow.min.css

@@ -1 +1 @@
-.flicking-arrow-next,.flicking-arrow-prev{position:absolute;top:50%;width:64px;height:64px;cursor:pointer;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:2}.flicking-arrow-next.is-circle,.flicking-arrow-prev.is-circle{background-color:#f2a65e;border-radius:50%}.flicking-arrow-disabled.is-circle{background-color:rgb(10 10 10 / 10%)}.flicking-arrow-next.is-circle::after,.flicking-arrow-next.is-circle::before,.flicking-arrow-prev.is-circle::after,.flicking-arrow-prev.is-circle::before{background-color:#fff}.flicking-arrow-prev{left:10px}.flicking-arrow-next{right:10px}.flicking-arrow-prev.is-outside{left:-74px}.flicking-arrow-next.is-outside{right:-74px}.flicking-arrow-next::after,.flicking-arrow-next::before,.flicking-arrow-prev::after,.flicking-arrow-prev::before{content:"";width:24px;height:6px;position:absolute;background-color:#f2a65e}.flicking-arrow-prev::before{top:50%;left:22px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.flicking-arrow-prev::after{top:calc(50% - 4px);left:22px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.flicking-arrow-next::before{top:50%;right:22px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.flicking-arrow-next::after{top:calc(50% - 4px);right:22px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.flicking-arrow-disabled{cursor:default}.flicking-arrow-disabled::after,.flicking-arrow-disabled::before{background-color:#e6e6e6}
+.flicking-arrow-next,.flicking-arrow-prev{position:absolute;top:50%;width:64px;height:64px;cursor:pointer;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:2}.flicking-arrow-next.is-circle,.flicking-arrow-prev.is-circle{background-color:#f2a65e;border-radius:50%}.flicking-arrow-disabled.is-circle{background-color:rgb(10 10 10 / 10%)}.flicking-arrow-next.is-circle::after,.flicking-arrow-next.is-circle::before,.flicking-arrow-prev.is-circle::after,.flicking-arrow-prev.is-circle::before{background-color:#fff}.flicking-arrow-prev{left:10px}.flicking-arrow-next{right:10px}.flicking-arrow-prev.is-outside{left:-74px}.flicking-arrow-next.is-outside{right:-74px}.flicking-arrow-next::after,.flicking-arrow-next::before,.flicking-arrow-prev::after,.flicking-arrow-prev::before{content:"";width:24px;height:6px;position:absolute;background-color:#f2a65e}.flicking-arrow-prev::before{top:50%;left:22px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.flicking-arrow-prev::after{top:calc(50% - 4px);left:22px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.flicking-arrow-next::before{top:50%;right:22px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.flicking-arrow-next::after{top:calc(50% - 4px);right:22px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.flicking-arrow-disabled{cursor:default}.flicking-arrow-disabled::after,.flicking-arrow-disabled::before{background-color:#e6e6e6}.flicking-arrow-next.is-thin::after,.flicking-arrow-next.is-thin::before,.flicking-arrow-prev.is-thin::after,.flicking-arrow-prev.is-thin::before{height:3px}.flicking-arrow-next.is-thin::after,.flicking-arrow-prev.is-thin::after{top:calc(50% - 2px)}

package/dist/flicking-plugins.css

@@ -104,6 +104,18 @@
 .flicking-arrow-disabled::after {
   background-color: #e6e6e6;
 }
+
+.flicking-arrow-prev.is-thin::before,
+.flicking-arrow-prev.is-thin::after,
+.flicking-arrow-next.is-thin::before,
+.flicking-arrow-next.is-thin::after{
+  height: 3px;
+}
+
+.flicking-arrow-prev.is-thin::after,
+.flicking-arrow-next.is-thin::after{
+  top: calc(50% - 2px);
+}
 .flicking-pagination {
   position: absolute;
   left: 0;

package/dist/flicking-plugins.min.css

@@ -1 +1 @@
-.flicking-arrow-next,.flicking-arrow-prev{position:absolute;top:50%;width:64px;height:64px;cursor:pointer;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:2}.flicking-arrow-next.is-circle,.flicking-arrow-prev.is-circle{background-color:#f2a65e;border-radius:50%}.flicking-arrow-disabled.is-circle{background-color:rgb(10 10 10 / 10%)}.flicking-arrow-next.is-circle::after,.flicking-arrow-next.is-circle::before,.flicking-arrow-prev.is-circle::after,.flicking-arrow-prev.is-circle::before{background-color:#fff}.flicking-arrow-prev{left:10px}.flicking-arrow-next{right:10px}.flicking-arrow-prev.is-outside{left:-74px}.flicking-arrow-next.is-outside{right:-74px}.flicking-arrow-next::after,.flicking-arrow-next::before,.flicking-arrow-prev::after,.flicking-arrow-prev::before{content:"";width:24px;height:6px;position:absolute;background-color:#f2a65e}.flicking-arrow-prev::before{top:50%;left:22px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.flicking-arrow-prev::after{top:calc(50% - 4px);left:22px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.flicking-arrow-next::before{top:50%;right:22px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.flicking-arrow-next::after{top:calc(50% - 4px);right:22px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.flicking-arrow-disabled{cursor:default}.flicking-arrow-disabled::after,.flicking-arrow-disabled::before{background-color:#e6e6e6}.flicking-pagination{position:absolute;left:0;bottom:10px;width:100%;text-align:center;z-index:2}.flicking-pagination-bullets,.flicking-pagination-scroll{font-size:0}.flicking-pagination-scroll{left:50%;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%);white-space:nowrap;overflow:hidden}.flicking-pagination-scroll .flicking-pagination-slider{-webkit-transition:.2s transform;transition:.2s transform}.flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-bullet,.flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-slider{-webkit-transition:none;transition:none}.flicking-pagination-bullet{display:inline-block;width:8px;height:8px;margin:0 4px;border-radius:50%;background-color:rgb(10 10 10 / 10%);cursor:pointer;font-size:1rem}.flicking-pagination-scroll .flicking-pagination-bullet{vertical-align:middle;position:relative;-webkit-transition:.2s transform;transition:.2s transform}.flicking-pagination-bullet-active{background-color:#f2a65e}.flicking-pagination-scroll .flicking-pagination-bullet{vertical-align:middle;position:relative;-webkit-transition:.2s transform,.2s left;transition:.2s transform,.2s left;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.flicking-pagination-scroll .flicking-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.flicking-pagination-scroll .flicking-pagination-bullet-next,.flicking-pagination-scroll .flicking-pagination-bullet-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.flicking-pagination-scroll .flicking-pagination-bullet-next2,.flicking-pagination-scroll .flicking-pagination-bullet-prev2{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}
+.flicking-arrow-next,.flicking-arrow-prev{position:absolute;top:50%;width:64px;height:64px;cursor:pointer;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:2}.flicking-arrow-next.is-circle,.flicking-arrow-prev.is-circle{background-color:#f2a65e;border-radius:50%}.flicking-arrow-disabled.is-circle{background-color:rgb(10 10 10 / 10%)}.flicking-arrow-next.is-circle::after,.flicking-arrow-next.is-circle::before,.flicking-arrow-prev.is-circle::after,.flicking-arrow-prev.is-circle::before{background-color:#fff}.flicking-arrow-prev{left:10px}.flicking-arrow-next{right:10px}.flicking-arrow-prev.is-outside{left:-74px}.flicking-arrow-next.is-outside{right:-74px}.flicking-arrow-next::after,.flicking-arrow-next::before,.flicking-arrow-prev::after,.flicking-arrow-prev::before{content:"";width:24px;height:6px;position:absolute;background-color:#f2a65e}.flicking-arrow-prev::before{top:50%;left:22px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.flicking-arrow-prev::after{top:calc(50% - 4px);left:22px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.flicking-arrow-next::before{top:50%;right:22px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.flicking-arrow-next::after{top:calc(50% - 4px);right:22px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.flicking-arrow-disabled{cursor:default}.flicking-arrow-disabled::after,.flicking-arrow-disabled::before{background-color:#e6e6e6}.flicking-arrow-next.is-thin::after,.flicking-arrow-next.is-thin::before,.flicking-arrow-prev.is-thin::after,.flicking-arrow-prev.is-thin::before{height:3px}.flicking-arrow-next.is-thin::after,.flicking-arrow-prev.is-thin::after{top:calc(50% - 2px)}.flicking-pagination{position:absolute;left:0;bottom:10px;width:100%;text-align:center;z-index:2}.flicking-pagination-bullets,.flicking-pagination-scroll{font-size:0}.flicking-pagination-scroll{left:50%;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%);white-space:nowrap;overflow:hidden}.flicking-pagination-scroll .flicking-pagination-slider{-webkit-transition:.2s transform;transition:.2s transform}.flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-bullet,.flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-slider{-webkit-transition:none;transition:none}.flicking-pagination-bullet{display:inline-block;width:8px;height:8px;margin:0 4px;border-radius:50%;background-color:rgb(10 10 10 / 10%);cursor:pointer;font-size:1rem}.flicking-pagination-scroll .flicking-pagination-bullet{vertical-align:middle;position:relative;-webkit-transition:.2s transform;transition:.2s transform}.flicking-pagination-bullet-active{background-color:#f2a65e}.flicking-pagination-scroll .flicking-pagination-bullet{vertical-align:middle;position:relative;-webkit-transition:.2s transform,.2s left;transition:.2s transform,.2s left;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.flicking-pagination-scroll .flicking-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.flicking-pagination-scroll .flicking-pagination-bullet-next,.flicking-pagination-scroll .flicking-pagination-bullet-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.flicking-pagination-scroll .flicking-pagination-bullet-next2,.flicking-pagination-scroll .flicking-pagination-bullet-prev2{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}

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.3.0
+version: 4.5.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,10 +236,13 @@ 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 */
 
 
@@ -246,32 +251,7 @@ function () {
     this._mouseEntered = 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 () {
@@ -287,12 +267,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 +288,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 +318,16 @@ function () {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "delayAfterHover", {
+    get: function () {
+      return this._delayAfterHover;
+    },
+    set: function (val) {
+      this._delayAfterHover = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
 
   __proto.init = function (flicking) {
     var _a;
@@ -368,6 +370,37 @@ 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._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;
 }();