@egjs/flicking-plugins 4.1.0 → 4.2.3

package/declaration/Sync.d.ts

@@ -0,0 +1,37 @@
+import Flicking from "@egjs/flicking";
+import type { Plugin } from "@egjs/flicking";
+import { SYNC } from "./const";
+export interface SyncOptions {
+    type: typeof SYNC.TYPE.CAMERA | typeof SYNC.TYPE.INDEX;
+    synchronizedFlickingOptions: SychronizableFlickingOptions[];
+}
+export interface SychronizableFlickingOptions {
+    flicking: Flicking;
+    isClickable?: boolean;
+    isSlidable?: boolean;
+    activeClass?: string;
+}
+declare class Sync implements Plugin {
+    private _flicking;
+    private _type;
+    private _synchronizedFlickingOptions;
+    get type(): SyncOptions["type"];
+    get synchronizedFlickingOptions(): SyncOptions["synchronizedFlickingOptions"];
+    set type(val: SyncOptions["type"]);
+    set synchronizedFlickingOptions(val: SyncOptions["synchronizedFlickingOptions"]);
+    constructor({ type, synchronizedFlickingOptions }?: Partial<SyncOptions>);
+    init(flicking: Flicking): void;
+    destroy(): void;
+    update(): void;
+    private _preventEvent;
+    private _addEvents;
+    private _removeEvents;
+    private _onIndexChange;
+    private _onMove;
+    private _onMoveStart;
+    private _onMoveEnd;
+    private _onSelect;
+    private _synchronizeByIndex;
+    private _updateClass;
+}
+export default Sync;

package/declaration/const.d.ts

@@ -23,3 +23,9 @@ export declare const PAGINATION: {
         readonly SCROLL: "scroll";
     };
 };
+export declare const SYNC: {
+    readonly TYPE: {
+        readonly CAMERA: "camera";
+        readonly INDEX: "index";
+    };
+};

package/declaration/index.d.ts

@@ -2,6 +2,8 @@ import Parallax from "./Parallax";
 import Fade from "./Fade";
 import AutoPlay from "./AutoPlay";
 import Arrow from "./Arrow";
+import Sync, { SyncOptions, SychronizableFlickingOptions } from "./Sync";
 export * from "./pagination";
-export { Parallax, Fade, AutoPlay, Arrow };
+export { Parallax, Fade, AutoPlay, Arrow, Sync };
+export type { SyncOptions, SychronizableFlickingOptions };
 export * from "./const";

package/dist/plugins.esm.js

@@ -4,9 +4,9 @@ name: @egjs/flicking-plugins
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking-plugins
-version: 4.1.0
+version: 4.2.3
 */
-import { EVENTS, DIRECTION, FlickingError } from '@egjs/flicking';
+import { EVENTS, DIRECTION, FlickingError, clamp } from '@egjs/flicking';
 
 /**
  * You can apply parallax effect while panel is moving.
@@ -398,6 +398,12 @@ var PAGINATION = {
     SCROLL: "scroll"
   }
 };
+var SYNC = {
+  TYPE: {
+    CAMERA: "camera",
+    INDEX: "index"
+  }
+};
 
 var addClass = function (el, className) {
   if (el.classList) {
@@ -690,6 +696,255 @@ function () {
   return Arrow;
 }();
 
+/**
+ * Plugin for synchronizing multiple flickings
+ * @ko 다양한 형태로 Flicking들이 같이 움직이게 할 수 있습니다.
+ * @memberof Flicking.Plugins
+ */
+
+var Sync =
+/*#__PURE__*/
+function () {
+  /** */
+  function Sync(_a) {
+    var _this = this;
+
+    var _b = _a === void 0 ? {} : _a,
+        _c = _b.type,
+        type = _c === void 0 ? SYNC.TYPE.CAMERA : _c,
+        _d = _b.synchronizedFlickingOptions,
+        synchronizedFlickingOptions = _d === void 0 ? [] : _d;
+    /* Internal Values */
+
+
+    this._flicking = null;
+
+    this._addEvents = function () {
+      var type = _this._type;
+      var synced = _this._synchronizedFlickingOptions;
+      synced.forEach(function (_a) {
+        var flicking = _a.flicking,
+            isSlidable = _a.isSlidable,
+            isClickable = _a.isClickable;
+
+        if (type === SYNC.TYPE.CAMERA) {
+          flicking.on(EVENTS.MOVE, _this._onMove);
+          flicking.on(EVENTS.MOVE_START, _this._onMoveStart);
+          flicking.on(EVENTS.MOVE_END, _this._onMoveEnd);
+        }
+
+        if (type === SYNC.TYPE.INDEX && isSlidable) {
+          flicking.on(EVENTS.WILL_CHANGE, _this._onIndexChange);
+          flicking.on(EVENTS.WILL_RESTORE, _this._onIndexChange);
+        }
+
+        if (isClickable) {
+          flicking.on(EVENTS.SELECT, _this._onSelect);
+        }
+      });
+    };
+
+    this._removeEvents = function () {
+      var type = _this._type;
+      var synced = _this._synchronizedFlickingOptions;
+      synced.forEach(function (_a) {
+        var flicking = _a.flicking,
+            isSlidable = _a.isSlidable,
+            isClickable = _a.isClickable;
+
+        if (type === SYNC.TYPE.CAMERA) {
+          flicking.off(EVENTS.MOVE, _this._onMove);
+          flicking.off(EVENTS.MOVE_START, _this._onMoveStart);
+          flicking.off(EVENTS.MOVE_END, _this._onMoveEnd);
+        }
+
+        if (type === SYNC.TYPE.INDEX && isSlidable) {
+          flicking.off(EVENTS.WILL_CHANGE, _this._onIndexChange);
+          flicking.off(EVENTS.WILL_RESTORE, _this._onIndexChange);
+        }
+
+        if (isClickable) {
+          flicking.off(EVENTS.SELECT, _this._onSelect);
+        }
+      });
+    };
+
+    this._onIndexChange = function (e) {
+      var flicking = e.currentTarget;
+
+      if (!flicking.initialized) {
+        return;
+      }
+
+      _this._synchronizeByIndex(flicking, e.index);
+    };
+
+    this._onMove = function (e) {
+      var camera = e.currentTarget.camera;
+      var progress = (camera.position - camera.range.min) / camera.rangeDiff;
+
+      _this._synchronizedFlickingOptions.forEach(function (_a) {
+        var flicking = _a.flicking;
+        if (flicking === e.currentTarget) return;
+        var targetPosition = 0;
+
+        if (camera.position < camera.range.min) {
+          targetPosition = camera.position;
+        } else if (camera.position > camera.range.max) {
+          targetPosition = flicking.camera.range.max + camera.position - camera.range.max;
+        } else {
+          targetPosition = flicking.camera.range.min + flicking.camera.rangeDiff * progress;
+        }
+
+        void flicking.camera.lookAt(targetPosition);
+      });
+    };
+
+    this._onMoveStart = function (e) {
+      _this._synchronizedFlickingOptions.forEach(function (_a) {
+        var flicking = _a.flicking;
+
+        if (flicking !== e.currentTarget) {
+          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._onSelect = function (e) {
+      void e.currentTarget.moveTo(e.index).catch(function () {
+        return void 0;
+      });
+
+      _this._synchronizeByIndex(e.currentTarget, e.index);
+    };
+
+    this._synchronizeByIndex = function (activeFlicking, index) {
+      var synchronizedFlickingOptions = _this._synchronizedFlickingOptions;
+
+      _this._preventEvent(function () {
+        synchronizedFlickingOptions.forEach(function (options) {
+          // Active class should be applied same to the Flicking which triggered event
+          _this._updateClass(options, index);
+
+          var flicking = options.flicking;
+          if (flicking === activeFlicking) return;
+          var targetIndex = clamp(index, 0, flicking.panels.length);
+
+          if (flicking.animating) {
+            // Reserve moveTo once previous animation is finished
+            flicking.once(EVENTS.MOVE_END, function () {
+              void flicking.moveTo(targetIndex).catch(function () {
+                return void 0;
+              });
+            });
+          } else {
+            void flicking.moveTo(targetIndex);
+          }
+        });
+      });
+    };
+
+    this._updateClass = function (_a, index) {
+      var flicking = _a.flicking,
+          activeClass = _a.activeClass;
+      if (!activeClass) return;
+      flicking.panels.forEach(function (panel) {
+        if (panel.index === index) {
+          addClass(panel.element, activeClass);
+        } else {
+          removeClass(panel.element, activeClass);
+        }
+      });
+    };
+
+    this._type = type;
+    this._synchronizedFlickingOptions = synchronizedFlickingOptions;
+  }
+
+  var __proto = Sync.prototype;
+  Object.defineProperty(__proto, "type", {
+    get: function () {
+      return this._type;
+    },
+    set: function (val) {
+      this._type = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "synchronizedFlickingOptions", {
+    get: function () {
+      return this._synchronizedFlickingOptions;
+    },
+    set: function (val) {
+      this._synchronizedFlickingOptions = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
+
+  __proto.init = function (flicking) {
+    var _this = this;
+
+    var synced = this._synchronizedFlickingOptions;
+
+    if (this._flicking) {
+      this.destroy();
+    }
+
+    this._flicking = flicking;
+
+    this._addEvents();
+
+    synced.forEach(function (options) {
+      var syncedFlicking = options.flicking;
+
+      _this._updateClass(options, syncedFlicking.defaultIndex);
+    });
+  };
+
+  __proto.destroy = function () {
+    var flicking = this._flicking;
+
+    if (!flicking) {
+      return;
+    }
+
+    this._removeEvents();
+
+    this._flicking = null;
+  };
+
+  __proto.update = function () {
+    var _this = this;
+
+    this._synchronizedFlickingOptions.forEach(function (options) {
+      _this._updateClass(options, options.flicking.index);
+    });
+  };
+
+  __proto._preventEvent = function (fn) {
+    this._removeEvents();
+
+    fn();
+
+    this._addEvents();
+  };
+
+  return Sync;
+}();
+
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -944,26 +1199,38 @@ function (_super) {
     var anchorOffset = anchorPoints[0].panel.index;
     var activeIndex = index - anchorOffset;
     if (anchorPoints.length <= 0) return;
-    var bulletClass = pagination.classPrefix + "-" + PAGINATION.BULLET_SUFFIX;
     var bulletActiveClass = pagination.classPrefix + "-" + PAGINATION.BULLET_ACTIVE_SUFFIX;
+    var prevClassPrefix = pagination.classPrefix + "-" + PAGINATION.SCROLL_PREV_SUFFIX;
+    var nextClassPrefix = pagination.classPrefix + "-" + PAGINATION.SCROLL_NEXT_SUFFIX;
 
     var bulletPrevClass = function (offset) {
-      return pagination.classPrefix + "-" + PAGINATION.SCROLL_PREV_SUFFIX + (offset > 1 ? offset : "");
+      return "" + prevClassPrefix + (offset > 1 ? offset : "");
     };
 
     var bulletNextClass = function (offset) {
-      return pagination.classPrefix + "-" + PAGINATION.SCROLL_NEXT_SUFFIX + (offset > 1 ? offset : "");
+      return "" + nextClassPrefix + (offset > 1 ? offset : "");
     };
 
+    var prevClassRegex = new RegExp("^" + prevClassPrefix);
+    var nextClassRegex = new RegExp("^" + nextClassPrefix);
     bullets.forEach(function (bullet, idx) {
       var indexOffset = idx - activeIndex;
+      var classList = bullet.className.split(" ");
+
+      for (var _i = 0, classList_1 = classList; _i < classList_1.length; _i++) {
+        var className = classList_1[_i];
+
+        if (className === bulletActiveClass || prevClassRegex.test(className) || nextClassRegex.test(className)) {
+          removeClass(bullet, className);
+        }
+      }
 
       if (indexOffset === 0) {
-        bullet.className = bulletClass + " " + bulletActiveClass;
+        addClass(bullet, bulletActiveClass);
       } else if (indexOffset > 0) {
-        bullet.className = bulletClass + " " + bulletNextClass(Math.abs(indexOffset));
+        addClass(bullet, bulletNextClass(Math.abs(indexOffset)));
       } else {
-        bullet.className = bulletClass + " " + bulletPrevClass(Math.abs(indexOffset));
+        addClass(bullet, bulletPrevClass(Math.abs(indexOffset)));
       }
     });
     pagination.scrollOnChange(activeIndex, {
@@ -1230,5 +1497,5 @@ function () {
  * @namespace Flicking
  */
 
-export { ARROW, Arrow, AutoPlay, Fade, PAGINATION, Pagination, Parallax };
+export { ARROW, Arrow, AutoPlay, Fade, PAGINATION, Pagination, Parallax, SYNC, Sync };
 //# sourceMappingURL=plugins.esm.js.map