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

package/dist/plugins.js

@@ -4,7 +4,7 @@ name: @egjs/flicking-plugins
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking-plugins
-version: 4.7.1
+version: 4.8.0-beta.1
 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@egjs/flicking')) :
@@ -12,22 +12,22 @@ version: 4.7.1
   (global = global || self, factory((global.Flicking = global.Flicking || {}, global.Flicking.Plugins = {}), global.Flicking));
 }(this, function (exports, flicking) { 'use strict';
 
-  /**
-   * You can apply parallax effect while panel is moving.
-   * @ko 패널들을 움직이면서 parallax 효과를 부여할 수 있습니다.
-   * @memberof Flicking.Plugins
+  /**
+   * You can apply parallax effect while panel is moving.
+   * @ko 패널들을 움직이면서 parallax 효과를 부여할 수 있습니다.
+   * @memberof Flicking.Plugins
    */
 
   var Parallax =
   /*#__PURE__*/
   function () {
-    /**
-     * @param {string} selector Selector of the element to apply parallax effect<ko> Parallax 효과를 적용할 엘리먼트의 선택자 </ko>
-     * @param {number} scale Effect amplication scale<ko>효과 증폭도</ko>
-     * @example
-     * ```ts
-     * flicking.addPlugins(new Parallax("img", 1));
-     * ```
+    /**
+     * @param {string} selector Selector of the element to apply parallax effect<ko> Parallax 효과를 적용할 엘리먼트의 선택자 </ko>
+     * @param {number} scale Effect amplication scale<ko>효과 증폭도</ko>
+     * @example
+     * ```ts
+     * flicking.addPlugins(new Parallax("img", 1));
+     * ```
      */
     function Parallax(selector, scale) {
       var _this = this;
@@ -114,22 +114,22 @@ version: 4.7.1
     return Parallax;
   }();
 
-  /**
-   * You can apply fade in / out effect while panel is moving.
-   * @ko 패널들을 움직이면서 fade in / out 효과를 부여할 수 있습니다.
-   * @memberof Flicking.Plugins
+  /**
+   * You can apply fade in / out effect while panel is moving.
+   * @ko 패널들을 움직이면서 fade in / out 효과를 부여할 수 있습니다.
+   * @memberof Flicking.Plugins
    */
 
   var Fade =
   /*#__PURE__*/
   function () {
-    /**
-     * @param - The selector of the element to which the fade effect is to be applied. If the selector is blank, it applies to panel element. <ko>Fade 효과를 적용할 대상의 선택자. 선택자가 공백이면 패널 엘리먼트에 적용된다.</ko>
-     * @param - Effect amplication scale<ko>효과 증폭도</ko>
-     * @example
-     * ```ts
-     * flicking.addPlugins(new Fade("p", 1));
-     * ```
+    /**
+     * @param - The selector of the element to which the fade effect is to be applied. If the selector is blank, it applies to panel element. <ko>Fade 효과를 적용할 대상의 선택자. 선택자가 공백이면 패널 엘리먼트에 적용된다.</ko>
+     * @param - Effect amplication scale<ko>효과 증폭도</ko>
+     * @example
+     * ```ts
+     * flicking.addPlugins(new Fade("p", 1));
+     * ```
      */
     function Fade(selector, scale) {
       var _this = this;
@@ -216,26 +216,27 @@ version: 4.7.1
     return Fade;
   }();
 
-  /**
-   * Plugin that allow you to automatically move to the next/previous panel, on a specific time basis
-   * @ko 일정 시간마다, 자동으로 다음/이전 패널로 넘어가도록 할 수 있는 플러그인
-   * @memberof Flicking.Plugins
+  /**
+   * Plugin that allow you to automatically move to the next/previous panel, on a specific time basis
+   * @ko 일정 시간마다, 자동으로 다음/이전 패널로 넘어가도록 할 수 있는 플러그인
+   * @memberof Flicking.Plugins
    */
 
   var AutoPlay =
   /*#__PURE__*/
   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" }));
-     * ```
+    /**
+     * @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 {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
+     * flicking.addPlugins(new AutoPlay({ duration: 2000, direction: "NEXT" }));
+     * ```
      */
     function AutoPlay(_a) {
       var _this = this;
@@ -249,6 +250,8 @@ version: 4.7.1
           direction = _e === void 0 ? flicking.DIRECTION.NEXT : _e,
           _f = _b.stopOnHover,
           stopOnHover = _f === void 0 ? false : _f,
+          _g = _b.stopOnInit,
+          stopOnInit = _g === void 0 ? false : _g,
           delayAfterHover = _b.delayAfterHover;
       /* Internal Values */
 
@@ -283,6 +286,7 @@ version: 4.7.1
       this._animationDuration = animationDuration;
       this._direction = direction;
       this._stopOnHover = stopOnHover;
+      this._stopOnInit = stopOnInit;
       this._delayAfterHover = delayAfterHover !== null && delayAfterHover !== void 0 ? delayAfterHover : duration;
     }
 
@@ -327,6 +331,16 @@ version: 4.7.1
       enumerable: false,
       configurable: true
     });
+    Object.defineProperty(__proto, "stopOnInit", {
+      get: function () {
+        return this._stopOnInit;
+      },
+      set: function (val) {
+        this._stopOnInit = val;
+      },
+      enumerable: false,
+      configurable: true
+    });
     Object.defineProperty(__proto, "delayAfterHover", {
       get: function () {
         return this._delayAfterHover;
@@ -361,7 +375,9 @@ version: 4.7.1
         targetEl.addEventListener("mouseleave", this._onMouseLeave, false);
       }
 
-      this.play();
+      if (!this._stopOnInit) {
+        this.play();
+      }
     };
 
     __proto.destroy = function () {
@@ -541,10 +557,10 @@ version: 4.7.1
     return el;
   };
 
-  /**
-   * A plugin to easily create prev/right arrow button of Flicking
-   * @ko 이전/다음 버튼을 쉽게 만들 수 있는 플러그인
-   * @memberof Flicking.Plugins
+  /**
+   * A plugin to easily create prev/right arrow button of Flicking
+   * @ko 이전/다음 버튼을 쉽게 만들 수 있는 플러그인
+   * @memberof Flicking.Plugins
    */
 
   var Arrow =
@@ -565,7 +581,9 @@ version: 4.7.1
           _g = _b.moveCount,
           moveCount = _g === void 0 ? 1 : _g,
           _h = _b.moveByViewportSize,
-          moveByViewportSize = _h === void 0 ? false : _h;
+          moveByViewportSize = _h === void 0 ? false : _h,
+          _j = _b.interruptable,
+          interruptable = _j === void 0 ? false : _j;
       /* Internal Values */
 
 
@@ -577,9 +595,16 @@ version: 4.7.1
 
       this._onPrevClick = function () {
         var flicking = _this._flicking;
+        var index = flicking.animating ? _this._nextIndex : flicking.index;
+        var currentPanel = flicking.animating ? flicking.panels[_this._nextIndex] : flicking.currentPanel;
         var camera = flicking.camera;
         var anchorPoints = camera.anchorPoints;
-        if (flicking.animating || anchorPoints.length <= 0) return;
+        if (flicking.animating && !_this.interruptable || anchorPoints.length <= 0) return;
+
+        if (flicking.animating) {
+          flicking.stopAnimation();
+        }
+
         var firstAnchor = anchorPoints[0];
         var moveCount = _this._moveCount;
 
@@ -587,26 +612,33 @@ version: 4.7.1
           flicking.control.moveToPosition(camera.position - camera.size, flicking.duration).catch(_this._onCatch);
         } else {
           if (flicking.circularEnabled) {
-            var targetPanel = flicking.currentPanel;
+            var targetPanel = currentPanel;
 
             for (var 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)).catch(_this._onCatch);
+          } 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).catch(_this._onCatch);
+            flicking.moveTo(index).catch(_this._onCatch);
           }
         }
       };
 
       this._onNextClick = function () {
         var flicking = _this._flicking;
+        var index = flicking.animating ? _this._nextIndex : flicking.index;
+        var currentPanel = flicking.animating ? flicking.panels[_this._nextIndex] : flicking.currentPanel;
         var camera = flicking.camera;
         var anchorPoints = camera.anchorPoints;
-        if (flicking.animating || anchorPoints.length <= 0) return;
+        if (flicking.animating && !_this.interruptable || anchorPoints.length <= 0) return;
+
+        if (flicking.animating) {
+          flicking.stopAnimation();
+        }
+
         var lastAnchor = anchorPoints[anchorPoints.length - 1];
         var moveCount = _this._moveCount;
 
@@ -614,17 +646,17 @@ version: 4.7.1
           flicking.control.moveToPosition(camera.position + camera.size, flicking.duration).catch(_this._onCatch);
         } else {
           if (flicking.circularEnabled) {
-            var targetPanel = flicking.currentPanel;
+            var targetPanel = currentPanel;
 
             for (var 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)).catch(_this._onCatch);
+          } 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).catch(_this._onCatch);
+            flicking.moveTo(index).catch(_this._onCatch);
           }
         }
       };
@@ -641,6 +673,10 @@ version: 4.7.1
         }
       };
 
+      this._onWillChange = function (e) {
+        _this._nextIndex = e.index;
+      };
+
       this._onCatch = function (err) {
         if (err instanceof flicking.FlickingError) return;
         throw err;
@@ -652,6 +688,7 @@ version: 4.7.1
       this._disabledClass = disabledClass;
       this._moveCount = moveCount;
       this._moveByViewportSize = moveByViewportSize;
+      this._interruptable = interruptable;
     }
 
     var __proto = Arrow.prototype;
@@ -729,6 +766,16 @@ version: 4.7.1
       enumerable: false,
       configurable: true
     });
+    Object.defineProperty(__proto, "interruptable", {
+      get: function () {
+        return this._interruptable;
+      },
+      set: function (val) {
+        this._interruptable = val;
+      },
+      enumerable: false,
+      configurable: true
+    });
 
     __proto.init = function (flicking$1) {
       var _this = this;
@@ -739,6 +786,7 @@ version: 4.7.1
 
       this._flicking = flicking$1;
       flicking$1.on(flicking.EVENTS.MOVE, this._onAnimation);
+      flicking$1.on(flicking.EVENTS.WILL_CHANGE, this._onWillChange);
       var parentEl = this._parentEl ? this._parentEl : flicking$1.element;
       var prevEl = getElement(this._prevElSelector, parentEl, "Arrow");
       var nextEl = getElement(this._nextElSelector, parentEl, "Arrow");
@@ -767,6 +815,7 @@ version: 4.7.1
       }
 
       flicking$1.off(flicking.EVENTS.MOVE, this._onAnimation);
+      flicking$1.off(flicking.EVENTS.WILL_CHANGE, this._onWillChange);
       var prevEl = this._prevEl;
       var nextEl = this._nextEl;
       [BROWSER.MOUSE_DOWN, BROWSER.TOUCH_START].forEach(function (evt) {
@@ -807,10 +856,10 @@ version: 4.7.1
     return Arrow;
   }();
 
-  /**
-   * Plugin for synchronizing multiple flickings
-   * @ko 다양한 형태로 Flicking들이 같이 움직이게 할 수 있습니다.
-   * @memberof Flicking.Plugins
+  /**
+   * Plugin for synchronizing multiple flickings
+   * @ko 다양한 형태로 Flicking들이 같이 움직이게 할 수 있습니다.
+   * @memberof Flicking.Plugins
    */
 
   var Sync =
@@ -1057,24 +1106,24 @@ version: 4.7.1
   }();
 
   /* eslint-disable no-underscore-dangle */
-  /**
-   * You can apply perspective effect while panel is moving.
-   * @ko 패널들을 움직이면서 입체감을 부여할 수 있습니다.
-   * @memberof Flicking.Plugins
+  /**
+   * You can apply perspective effect while panel is moving.
+   * @ko 패널들을 움직이면서 입체감을 부여할 수 있습니다.
+   * @memberof Flicking.Plugins
    */
 
   var Perspective =
   /*#__PURE__*/
   function () {
-    /**
-     * @param - The selector of the element to which the perspective effect is to be applied. If the selector is blank, it applies to panel element. <ko>입체 효과를 적용할 대상의 선택자. 선택자가 공백이면 패널 엘리먼트에 적용된다.</ko>
-     * @param - Effect amplication scale.<ko>효과 증폭도</ko>
-     * @param - Effect amplication rotate.<ko>회전 증폭도</ko>
-     * @param - The value of perspective CSS property. <ko>css perspective 속성 값</ko>
-     * @example
-     * ```ts
-     * flicking.addPlugins(new Perspective({ selector: "p", scale: 1, rotate: 1, perspective = 1000 }));
-     * ```
+    /**
+     * @param - The selector of the element to which the perspective effect is to be applied. If the selector is blank, it applies to panel element. <ko>입체 효과를 적용할 대상의 선택자. 선택자가 공백이면 패널 엘리먼트에 적용된다.</ko>
+     * @param - Effect amplication scale.<ko>효과 증폭도</ko>
+     * @param - Effect amplication rotate.<ko>회전 증폭도</ko>
+     * @param - The value of perspective CSS property. <ko>css perspective 속성 값</ko>
+     * @example
+     * ```ts
+     * flicking.addPlugins(new Perspective({ selector: "p", scale: 1, rotate: 1, perspective = 1000 }));
+     * ```
      */
     function Perspective(_a) {
       var _this = this;
@@ -1611,8 +1660,8 @@ version: 4.7.1
     return ScrollBulletRenderer;
   }(Renderer);
 
-  /**
-   * @memberof Flicking.Plugins
+  /**
+   * @memberof Flicking.Plugins
    */
 
   var Pagination =
@@ -1872,8 +1921,8 @@ version: 4.7.1
     return Pagination;
   }();
 
-  /**
-   * @namespace Flicking
+  /**
+   * @namespace Flicking
    */
 
   exports.ARROW = ARROW;