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

package/declaration/pagination/renderer/Renderer.d.ts

@@ -1,19 +1,19 @@
-import Flicking from "@egjs/flicking";
-import Pagination from "../Pagination";
-export interface RendererOptions {
-    flicking: Flicking;
-    pagination: Pagination;
-    wrapper: HTMLElement;
-}
-declare abstract class Renderer {
-    protected _flicking: Flicking;
-    protected _pagination: Pagination;
-    protected _wrapper: HTMLElement;
-    constructor({ flicking, pagination, wrapper }: RendererOptions);
-    abstract destroy(): void;
-    abstract render(): void;
-    abstract update(index: number): void;
-    protected _createBulletFromString(html: string, index: number): HTMLElement;
-    protected _addBulletEvents(bullet: HTMLElement, index: number): void;
-}
-export default Renderer;
+import Flicking from "@egjs/flicking";
+import Pagination from "../Pagination";
+export interface RendererOptions {
+    flicking: Flicking;
+    pagination: Pagination;
+    wrapper: HTMLElement;
+}
+declare abstract class Renderer {
+    protected _flicking: Flicking;
+    protected _pagination: Pagination;
+    protected _wrapper: HTMLElement;
+    constructor({ flicking, pagination, wrapper }: RendererOptions);
+    abstract destroy(): void;
+    abstract render(): void;
+    abstract update(index: number): void;
+    protected _createBulletFromString(html: string, index: number): HTMLElement;
+    protected _addBulletEvents(bullet: HTMLElement, index: number): void;
+}
+export default Renderer;

package/declaration/pagination/renderer/ScrollBulletRenderer.d.ts

@@ -1,12 +1,12 @@
-import Renderer from "./Renderer";
-declare class ScrollBulletRenderer extends Renderer {
-    private _bullets;
-    private _bulletSize;
-    private _previousIndex;
-    private _sliderIndex;
-    destroy(): void;
-    render(): void;
-    update(index: number): void;
-    moveTo: (index: number) => void;
-}
-export default ScrollBulletRenderer;
+import Renderer from "./Renderer";
+declare class ScrollBulletRenderer extends Renderer {
+    private _bullets;
+    private _bulletSize;
+    private _previousIndex;
+    private _sliderIndex;
+    destroy(): void;
+    render(): void;
+    update(index: number): void;
+    moveTo: (index: number) => void;
+}
+export default ScrollBulletRenderer;

package/declaration/type.d.ts

@@ -1,9 +1,9 @@
-interface ScrollContext {
-    total: number;
-    prevIndex: number;
-    sliderIndex: number;
-    direction: "NEXT" | "PREV";
-    bullets: HTMLElement[];
-    moveTo: (index: number) => void;
-}
-export default ScrollContext;
+interface ScrollContext {
+    total: number;
+    prevIndex: number;
+    sliderIndex: number;
+    direction: "NEXT" | "PREV";
+    bullets: HTMLElement[];
+    moveTo: (index: number) => void;
+}
+export default ScrollContext;

package/declaration/utils.d.ts

@@ -1,3 +1,3 @@
-export declare const addClass: (el: HTMLElement, className: string) => void;
-export declare const removeClass: (el: HTMLElement, className: string) => void;
-export declare const getElement: (selector: string, parent: HTMLElement, pluginName: string) => HTMLElement;
+export declare const addClass: (el: HTMLElement, className: string) => void;
+export declare const removeClass: (el: HTMLElement, className: string) => void;
+export declare const getElement: (selector: string, parent: HTMLElement, pluginName: string) => HTMLElement;

package/dist/plugins.esm.js

@@ -4,26 +4,26 @@ 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
 */
-import { EVENTS, DIRECTION, FlickingError, clamp } from '@egjs/flicking';
+import { EVENTS, MOVE_TYPE, DIRECTION, FlickingError, clamp } from '@egjs/flicking';
 
-/**
- * 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;
@@ -110,22 +110,22 @@ function () {
   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;
@@ -212,26 +212,26 @@ function () {
   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;
@@ -400,12 +400,61 @@ function () {
 
     this._playing = true;
     this._timerId = window.setTimeout(function () {
+      var _a, _b;
+
+      var animationDuration = _this._animationDuration || flicking.duration;
+      var moveType = flicking.moveType; // for freeScroll
+
+      if (moveType === MOVE_TYPE.FREE_SCROLL || (moveType === null || moveType === void 0 ? void 0 : moveType[0]) === MOVE_TYPE.FREE_SCROLL) {
+        var range = flicking.camera.range;
+        var cameraPosition = flicking.camera.position;
+        var currentPanel = flicking.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 === 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 === DIRECTION.NEXT) {
-        flicking.next(_this._animationDuration).catch(function () {
+        flicking.next(animationDuration).catch(function () {
           return void 0;
         });
       } else {
-        flicking.prev(_this._animationDuration).catch(function () {
+        flicking.prev(animationDuration).catch(function () {
           return void 0;
         });
       }
@@ -488,10 +537,10 @@ var getElement = function (selector, parent, pluginName) {
   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 =
@@ -512,7 +561,9 @@ function () {
         _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 */
 
 
@@ -524,9 +575,16 @@ function () {
 
     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;
 
@@ -534,26 +592,33 @@ function () {
         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;
 
@@ -561,17 +626,17 @@ function () {
         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);
         }
       }
     };
@@ -588,6 +653,10 @@ function () {
       }
     };
 
+    this._onWillChange = function (e) {
+      _this._nextIndex = e.index;
+    };
+
     this._onCatch = function (err) {
       if (err instanceof FlickingError) return;
       throw err;
@@ -599,6 +668,7 @@ function () {
     this._disabledClass = disabledClass;
     this._moveCount = moveCount;
     this._moveByViewportSize = moveByViewportSize;
+    this._interruptable = interruptable;
   }
 
   var __proto = Arrow.prototype;
@@ -676,6 +746,16 @@ function () {
     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) {
     var _this = this;
@@ -686,6 +766,7 @@ function () {
 
     this._flicking = flicking;
     flicking.on(EVENTS.MOVE, this._onAnimation);
+    flicking.on(EVENTS.WILL_CHANGE, this._onWillChange);
     var parentEl = this._parentEl ? this._parentEl : flicking.element;
     var prevEl = getElement(this._prevElSelector, parentEl, "Arrow");
     var nextEl = getElement(this._nextElSelector, parentEl, "Arrow");
@@ -714,6 +795,7 @@ function () {
     }
 
     flicking.off(EVENTS.MOVE, this._onAnimation);
+    flicking.off(EVENTS.WILL_CHANGE, this._onWillChange);
     var prevEl = this._prevEl;
     var nextEl = this._nextEl;
     [BROWSER.MOUSE_DOWN, BROWSER.TOUCH_START].forEach(function (evt) {
@@ -754,10 +836,10 @@ function () {
   return Arrow;
 }();
 
-/**
- * Plugin for synchronizing multiple flickings
- * @ko 다양한 형태로 Flicking들이 같이 움직이게 할 수 있습니다.
- * @memberof Flicking.Plugins
+/**
+ * Plugin for synchronizing multiple flickings
+ * @ko 다양한 형태로 Flicking들이 같이 움직이게 할 수 있습니다.
+ * @memberof Flicking.Plugins
  */
 
 var Sync =
@@ -1004,24 +1086,24 @@ function () {
 }();
 
 /* 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;
@@ -1558,8 +1640,8 @@ function (_super) {
   return ScrollBulletRenderer;
 }(Renderer);
 
-/**
- * @memberof Flicking.Plugins
+/**
+ * @memberof Flicking.Plugins
  */
 
 var Pagination =
@@ -1819,8 +1901,8 @@ function () {
   return Pagination;
 }();
 
-/**
- * @namespace Flicking
+/**
+ * @namespace Flicking
  */
 
 export { ARROW, Arrow, AutoPlay, Fade, PAGINATION, Pagination, Parallax, Perspective, SYNC, Sync };