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

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

@@ -1,9 +1,9 @@
-import Renderer from "./Renderer";
-declare class FractionRenderer extends Renderer {
-    private _prevIndex;
-    private _prevTotal;
-    destroy(): void;
-    render(): void;
-    update(index: number): void;
-}
-export default FractionRenderer;
+import Renderer from "./Renderer";
+declare class FractionRenderer extends Renderer {
+    private _prevIndex;
+    private _prevTotal;
+    destroy(): void;
+    render(): void;
+    update(index: number): void;
+}
+export default FractionRenderer;

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.1
+version: 4.8.0-beta.1
 */
 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,27 @@ 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 {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;
@@ -245,6 +246,8 @@ function () {
         direction = _e === void 0 ? 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 */
 
@@ -279,6 +282,7 @@ function () {
     this._animationDuration = animationDuration;
     this._direction = direction;
     this._stopOnHover = stopOnHover;
+    this._stopOnInit = stopOnInit;
     this._delayAfterHover = delayAfterHover !== null && delayAfterHover !== void 0 ? delayAfterHover : duration;
   }
 
@@ -323,6 +327,16 @@ function () {
     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;
@@ -357,7 +371,9 @@ function () {
       targetEl.addEventListener("mouseleave", this._onMouseLeave, false);
     }
 
-    this.play();
+    if (!this._stopOnInit) {
+      this.play();
+    }
   };
 
   __proto.destroy = function () {
@@ -537,10 +553,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 =
@@ -561,7 +577,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 */
 
 
@@ -573,9 +591,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;
 
@@ -583,26 +608,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;
 
@@ -610,17 +642,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);
         }
       }
     };
@@ -637,6 +669,10 @@ function () {
       }
     };
 
+    this._onWillChange = function (e) {
+      _this._nextIndex = e.index;
+    };
+
     this._onCatch = function (err) {
       if (err instanceof FlickingError) return;
       throw err;
@@ -648,6 +684,7 @@ function () {
     this._disabledClass = disabledClass;
     this._moveCount = moveCount;
     this._moveByViewportSize = moveByViewportSize;
+    this._interruptable = interruptable;
   }
 
   var __proto = Arrow.prototype;
@@ -725,6 +762,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;
@@ -735,6 +782,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");
@@ -763,6 +811,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) {
@@ -803,10 +852,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 =
@@ -1053,24 +1102,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;
@@ -1607,8 +1656,8 @@ function (_super) {
   return ScrollBulletRenderer;
 }(Renderer);
 
-/**
- * @memberof Flicking.Plugins
+/**
+ * @memberof Flicking.Plugins
  */
 
 var Pagination =
@@ -1868,8 +1917,8 @@ function () {
   return Pagination;
 }();
 
-/**
- * @namespace Flicking
+/**
+ * @namespace Flicking
  */
 
 export { ARROW, Arrow, AutoPlay, Fade, PAGINATION, Pagination, Parallax, Perspective, SYNC, Sync };