@egjs/flicking-plugins 4.7.2-beta.0 → 4.7.2-beta.2

package/declaration/AutoPlay.d.ts

@@ -4,6 +4,7 @@ interface AutoPlayOptions {
     animationDuration: number | undefined;
     direction: typeof DIRECTION["NEXT"] | typeof DIRECTION["PREV"];
     stopOnHover: boolean;
+    stopOnInit: boolean;
     delayAfterHover: number;
 }
 declare class AutoPlay implements Plugin {
@@ -11,6 +12,7 @@ declare class AutoPlay implements Plugin {
     private _animationDuration;
     private _direction;
     private _stopOnHover;
+    private _stopOnInit;
     private _delayAfterHover;
     private _flicking;
     private _timerId;
@@ -20,14 +22,16 @@ declare class AutoPlay implements Plugin {
     get animationDuration(): number | undefined;
     get direction(): AutoPlayOptions["direction"];
     get stopOnHover(): boolean;
+    get stopOnInit(): boolean;
     get delayAfterHover(): number;
     get playing(): boolean;
     set duration(val: number);
     set animationDuration(val: number | undefined);
     set direction(val: AutoPlayOptions["direction"]);
     set stopOnHover(val: boolean);
+    set stopOnInit(val: boolean);
     set delayAfterHover(val: number);
-    constructor({ duration, animationDuration, direction, stopOnHover, delayAfterHover }?: Partial<AutoPlayOptions>);
+    constructor({ duration, animationDuration, direction, stopOnHover, stopOnInit, delayAfterHover }?: Partial<AutoPlayOptions>);
     init(flicking: Flicking): void;
     destroy(): void;
     update(): void;

package/declaration/Sync.d.ts

@@ -13,6 +13,7 @@ export interface SychronizableFlickingOptions {
 }
 declare class Sync implements Plugin {
     private _flicking;
+    private _disabledIndex;
     private _type;
     private _synchronizedFlickingOptions;
     get type(): SyncOptions["type"];

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.7.2-beta.0
+version: 4.7.2-beta.2
 */
 import { EVENTS, MOVE_TYPE, DIRECTION, FlickingError, clamp } from '@egjs/flicking';
 
@@ -227,6 +227,7 @@ function () {
    * @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 the plugin is initialized.<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
@@ -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 () {
@@ -825,6 +841,7 @@ function () {
 
 
     this._flicking = null;
+    this._disabledIndex = [];
 
     this._addEvents = function () {
       var type = _this._type;
@@ -908,23 +925,24 @@ function () {
     };
 
     this._onMoveStart = function (e) {
-      _this._synchronizedFlickingOptions.forEach(function (_a) {
+      _this._disabledIndex = [];
+
+      _this._synchronizedFlickingOptions.forEach(function (_a, i) {
         var flicking = _a.flicking;
 
-        if (flicking !== e.currentTarget) {
+        if (flicking !== e.currentTarget && flicking.control.controller.enabled) {
+          _this._disabledIndex.push(i);
+
           flicking.disableInput();
         }
       });
     };
 
     this._onMoveEnd = function (e) {
-      _this._synchronizedFlickingOptions.forEach(function (_a) {
-        var flicking = _a.flicking;
-
-        if (flicking !== e.currentTarget) {
-          flicking.enableInput();
-          flicking.control.updateInput();
-        }
+      _this._disabledIndex.forEach(function (i) {
+        var flicking = _this._synchronizedFlickingOptions[i].flicking;
+        flicking.enableInput();
+        flicking.control.updateInput();
       });
     };