@egjs/flicking-plugins 4.1.0 → 4.2.3

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.1.0
+version: 4.2.3
 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@egjs/flicking')) :
@@ -402,6 +402,12 @@ version: 4.1.0
       SCROLL: "scroll"
     }
   };
+  var SYNC = {
+    TYPE: {
+      CAMERA: "camera",
+      INDEX: "index"
+    }
+  };
 
   var addClass = function (el, className) {
     if (el.classList) {
@@ -694,6 +700,255 @@ version: 4.1.0
     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$1 = _a.flicking,
+              isSlidable = _a.isSlidable,
+              isClickable = _a.isClickable;
+
+          if (type === SYNC.TYPE.CAMERA) {
+            flicking$1.on(flicking.EVENTS.MOVE, _this._onMove);
+            flicking$1.on(flicking.EVENTS.MOVE_START, _this._onMoveStart);
+            flicking$1.on(flicking.EVENTS.MOVE_END, _this._onMoveEnd);
+          }
+
+          if (type === SYNC.TYPE.INDEX && isSlidable) {
+            flicking$1.on(flicking.EVENTS.WILL_CHANGE, _this._onIndexChange);
+            flicking$1.on(flicking.EVENTS.WILL_RESTORE, _this._onIndexChange);
+          }
+
+          if (isClickable) {
+            flicking$1.on(flicking.EVENTS.SELECT, _this._onSelect);
+          }
+        });
+      };
+
+      this._removeEvents = function () {
+        var type = _this._type;
+        var synced = _this._synchronizedFlickingOptions;
+        synced.forEach(function (_a) {
+          var flicking$1 = _a.flicking,
+              isSlidable = _a.isSlidable,
+              isClickable = _a.isClickable;
+
+          if (type === SYNC.TYPE.CAMERA) {
+            flicking$1.off(flicking.EVENTS.MOVE, _this._onMove);
+            flicking$1.off(flicking.EVENTS.MOVE_START, _this._onMoveStart);
+            flicking$1.off(flicking.EVENTS.MOVE_END, _this._onMoveEnd);
+          }
+
+          if (type === SYNC.TYPE.INDEX && isSlidable) {
+            flicking$1.off(flicking.EVENTS.WILL_CHANGE, _this._onIndexChange);
+            flicking$1.off(flicking.EVENTS.WILL_RESTORE, _this._onIndexChange);
+          }
+
+          if (isClickable) {
+            flicking$1.off(flicking.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$1 = options.flicking;
+            if (flicking$1 === activeFlicking) return;
+            var targetIndex = flicking.clamp(index, 0, flicking$1.panels.length);
+
+            if (flicking$1.animating) {
+              // Reserve moveTo once previous animation is finished
+              flicking$1.once(flicking.EVENTS.MOVE_END, function () {
+                void flicking$1.moveTo(targetIndex).catch(function () {
+                  return void 0;
+                });
+              });
+            } else {
+              void flicking$1.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.
 
@@ -948,26 +1203,38 @@ version: 4.1.0
       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, {
@@ -1241,6 +1508,8 @@ version: 4.1.0
   exports.PAGINATION = PAGINATION;
   exports.Pagination = Pagination;
   exports.Parallax = Parallax;
+  exports.SYNC = SYNC;
+  exports.Sync = Sync;
 
 }));
 //# sourceMappingURL=plugins.js.map