@egjs/flicking-plugins 4.7.0 → 4.8.0-beta.0

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.0
+version: 4.8.0-beta.0
 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@egjs/flicking')) :
@@ -12,22 +12,22 @@ version: 4.7.0
   (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.0
     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,26 @@ version: 4.7.0
     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 {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;
@@ -404,12 +404,61 @@ version: 4.7.0
 
       this._playing = true;
       this._timerId = window.setTimeout(function () {
+        var _a, _b;
+
+        var animationDuration = _this._animationDuration || flicking$1.duration;
+        var moveType = flicking$1.moveType; // for freeScroll
+
+        if (moveType === flicking.MOVE_TYPE.FREE_SCROLL || (moveType === null || moveType === void 0 ? void 0 : moveType[0]) === flicking.MOVE_TYPE.FREE_SCROLL) {
+          var range = flicking$1.camera.range;
+          var cameraPosition = flicking$1.camera.position;
+          var currentPanel = flicking$1.currentPanel;
+          var prevPanel = currentPanel.prev();
+          var nextPanel = currentPanel.next();
+          var currentPosition = currentPanel.position;
+          var nextPosition = (_a = nextPanel === null || nextPanel === void 0 ? void 0 : nextPanel.position) !== null && _a !== void 0 ? _a : range.max;
+          var prevPosition = (_b = prevPanel === null || prevPanel === void 0 ? void 0 : prevPanel.position) !== null && _b !== void 0 ? _b : range.min; // circular: prev (last) > cur (0) => prev(-1) < cur(0)
+
+          if (prevPosition > currentPosition) {
+            prevPosition = range.min - (range.max - prevPosition);
+          } // current (last) > next (0)
+
+
+          if (nextPosition < currentPosition) {
+            nextPosition += range.max;
+          }
+
+          if (direction === flicking.DIRECTION.NEXT) {
+            // prev - cur - camera - next
+            var size = nextPosition - currentPosition;
+            var restSize = nextPosition - cameraPosition;
+
+            if (cameraPosition < currentPosition) {
+              // prev - camera - cur - next
+              restSize = nextPosition - cameraPosition;
+            }
+
+            animationDuration *= restSize / size;
+          } else {
+            // prev - caemra - cur - next
+            var size = currentPosition - prevPosition;
+            var restSize = cameraPosition - prevPosition;
+
+            if (cameraPosition > currentPosition) {
+              // prev - cur - camera - next
+              restSize = cameraPosition - prevPosition;
+            }
+
+            animationDuration *= restSize / size;
+          }
+        }
+
         if (direction === flicking.DIRECTION.NEXT) {
-          flicking$1.next(_this._animationDuration).catch(function () {
+          flicking$1.next(animationDuration).catch(function () {
             return void 0;
           });
         } else {
-          flicking$1.prev(_this._animationDuration).catch(function () {
+          flicking$1.prev(animationDuration).catch(function () {
             return void 0;
           });
         }
@@ -492,10 +541,10 @@ version: 4.7.0
     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 =
@@ -516,7 +565,9 @@ version: 4.7.0
           _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 */
 
 
@@ -528,9 +579,16 @@ version: 4.7.0
 
       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;
 
@@ -538,26 +596,33 @@ version: 4.7.0
           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;
 
@@ -565,17 +630,17 @@ version: 4.7.0
           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);
           }
         }
       };
@@ -592,6 +657,10 @@ version: 4.7.0
         }
       };
 
+      this._onWillChange = function (e) {
+        _this._nextIndex = e.index;
+      };
+
       this._onCatch = function (err) {
         if (err instanceof flicking.FlickingError) return;
         throw err;
@@ -603,6 +672,7 @@ version: 4.7.0
       this._disabledClass = disabledClass;
       this._moveCount = moveCount;
       this._moveByViewportSize = moveByViewportSize;
+      this._interruptable = interruptable;
     }
 
     var __proto = Arrow.prototype;
@@ -680,6 +750,16 @@ version: 4.7.0
       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;
@@ -690,6 +770,7 @@ version: 4.7.0
 
       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");
@@ -718,6 +799,7 @@ version: 4.7.0
       }
 
       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) {
@@ -758,10 +840,10 @@ version: 4.7.0
     return Arrow;
   }();
 
-  /**
-   * Plugin for synchronizing multiple flickings
-   * @ko 다양한 형태로 Flicking들이 같이 움직이게 할 수 있습니다.
-   * @memberof Flicking.Plugins
+  /**
+   * Plugin for synchronizing multiple flickings
+   * @ko 다양한 형태로 Flicking들이 같이 움직이게 할 수 있습니다.
+   * @memberof Flicking.Plugins
    */
 
   var Sync =
@@ -1008,24 +1090,24 @@ version: 4.7.0
   }();
 
   /* 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;
@@ -1562,8 +1644,8 @@ version: 4.7.0
     return ScrollBulletRenderer;
   }(Renderer);
 
-  /**
-   * @memberof Flicking.Plugins
+  /**
+   * @memberof Flicking.Plugins
    */
 
   var Pagination =
@@ -1823,8 +1905,8 @@ version: 4.7.0
     return Pagination;
   }();
 
-  /**
-   * @namespace Flicking
+  /**
+   * @namespace Flicking
    */
 
   exports.ARROW = ARROW;