@egjs/flicking-plugins 4.2.1 → 4.3.0

package/declaration/Perspective.d.ts

@@ -0,0 +1,28 @@
+import Flicking, { Plugin } from "@egjs/flicking";
+interface PerspectiveOptions {
+    selector: string;
+    scale: number;
+    rotate: number;
+    perspective: number;
+}
+declare class Perspective implements Plugin {
+    private _flicking;
+    private _selector;
+    private _scale;
+    private _rotate;
+    private _perspective;
+    get selector(): string;
+    get scale(): number;
+    get rotate(): number;
+    get perspective(): number;
+    set selector(val: string);
+    set scale(val: number);
+    set rotate(val: number);
+    set perspective(val: number);
+    constructor({ selector, scale, rotate, perspective }?: Partial<PerspectiveOptions>);
+    init(flicking: Flicking): void;
+    destroy(): void;
+    update: () => void;
+    private _onMove;
+}
+export default Perspective;

package/declaration/Sync.d.ts

@@ -1,9 +1,11 @@
-import Flicking, { Plugin } from "@egjs/flicking";
-interface SyncOptions {
-    type: "camera" | "index";
+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[];
 }
-interface SychronizableFlickingOptions {
+export interface SychronizableFlickingOptions {
     flicking: Flicking;
     isClickable?: boolean;
     isSlidable?: boolean;
@@ -28,8 +30,8 @@ declare class Sync implements Plugin {
     private _onMove;
     private _onMoveStart;
     private _onMoveEnd;
+    private _onSelect;
     private _synchronizeByIndex;
     private _updateClass;
-    private _findNearsetPanel;
 }
 export default Sync;

package/declaration/index.d.ts

@@ -2,7 +2,9 @@ import Parallax from "./Parallax";
 import Fade from "./Fade";
 import AutoPlay from "./AutoPlay";
 import Arrow from "./Arrow";
-import Sync from "./Sync";
+import Sync, { SyncOptions, SychronizableFlickingOptions } from "./Sync";
+import Perspective from "./Perspective";
 export * from "./pagination";
-export { Parallax, Fade, AutoPlay, Arrow, Sync };
+export { Parallax, Fade, AutoPlay, Arrow, Sync, Perspective };
+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.2.1
+version: 4.3.0
 */
-import { EVENTS, DIRECTION, FlickingError } from '@egjs/flicking';
+import { EVENTS, DIRECTION, FlickingError, clamp } from '@egjs/flicking';
 
 /**
  * You can apply parallax effect while panel is moving.
@@ -102,6 +102,8 @@ function () {
 
     this._flicking.off(EVENTS.MOVE, this._onMove);
 
+    this._flicking.off(EVENTS.AFTER_RESIZE, this.update);
+
     this._flicking = null;
   };
 
@@ -199,6 +201,8 @@ function () {
 
     this._flicking.off(EVENTS.MOVE, this._onMove);
 
+    this._flicking.off(EVENTS.AFTER_RESIZE, this.update);
+
     this._flicking = null;
   };
 
@@ -406,6 +410,8 @@ var SYNC = {
 };
 
 var addClass = function (el, className) {
+  if (!el) return;
+
   if (el.classList) {
     el.classList.add(className);
   } else {
@@ -417,6 +423,8 @@ var addClass = function (el, className) {
   }
 };
 var removeClass = function (el, className) {
+  if (!el) return;
+
   if (el.classList) {
     el.classList.remove(className);
   } else {
@@ -636,8 +644,12 @@ function () {
     var prevEl = getElement(this._prevElSelector, parentEl, "Arrow");
     var nextEl = getElement(this._nextElSelector, parentEl, "Arrow");
     [BROWSER.MOUSE_DOWN, BROWSER.TOUCH_START].forEach(function (evt) {
-      prevEl.addEventListener(evt, _this._preventInputPropagation);
-      nextEl.addEventListener(evt, _this._preventInputPropagation);
+      prevEl.addEventListener(evt, _this._preventInputPropagation, {
+        passive: true
+      });
+      nextEl.addEventListener(evt, _this._preventInputPropagation, {
+        passive: true
+      });
     });
     prevEl.addEventListener(BROWSER.CLICK, this._onPrevClick);
     nextEl.addEventListener(BROWSER.CLICK, this._onNextClick);
@@ -719,46 +731,52 @@ function () {
 
     this._flicking = null;
 
-    this._addEvents = function (synchronizedFlickingOptions) {
-      synchronizedFlickingOptions.forEach(function (_a) {
+    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 (_this._type === "camera") {
+        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 (_this._type === "index" && isSlidable) {
+        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._onIndexChange);
+          flicking.on(EVENTS.SELECT, _this._onSelect);
         }
       });
     };
 
-    this._removeEvents = function (synchronizedFlickingOptions) {
-      synchronizedFlickingOptions.forEach(function (_a) {
+    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 (_this._type === "camera") {
+        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 (_this._type === "index" && isSlidable) {
+        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._onIndexChange);
+          flicking.off(EVENTS.SELECT, _this._onSelect);
         }
       });
     };
@@ -779,16 +797,18 @@ function () {
 
       _this._synchronizedFlickingOptions.forEach(function (_a) {
         var flicking = _a.flicking;
+        if (flicking === e.currentTarget) return;
+        var targetPosition = 0;
 
-        if (flicking !== e.currentTarget) {
-          if (camera.position < camera.range.min) {
-            void flicking.camera.lookAt(camera.position);
-          } else if (camera.position > camera.range.max) {
-            void flicking.camera.lookAt(flicking.camera.range.max + camera.position - camera.range.max);
-          } else {
-            void flicking.camera.lookAt(flicking.camera.range.min + flicking.camera.rangeDiff * progress);
-          }
+        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);
       });
     };
 
@@ -813,59 +833,53 @@ function () {
       });
     };
 
-    this._synchronizeByIndex = function (activeFlicking, index) {
-      var synchronizedFlickingOptions = _this._synchronizedFlickingOptions;
-      var activePanel = activeFlicking.panels.find(function (panel) {
-        return panel.index === index;
+    this._onSelect = function (e) {
+      void e.currentTarget.moveTo(e.index).catch(function () {
+        return void 0;
       });
-      var lastPanel = activeFlicking.panels[activeFlicking.panels.length - 1];
 
-      if (!activePanel) {
-        return;
-      }
-
-      _this._preventEvent(function () {
-        synchronizedFlickingOptions.forEach(function (_a) {
-          var flicking = _a.flicking,
-              activeClass = _a.activeClass; // calculate new target flicking position with active flicking size and target flicking size
+      _this._synchronizeByIndex(e.currentTarget, e.index);
+    };
 
-          var targetLastPanel = flicking.panels[flicking.panels.length - 1];
-          var targetPos = activePanel.position / (lastPanel.position + lastPanel.size / 2) * (targetLastPanel.position + targetLastPanel.size / 2);
-          flicking.control.moveToPosition(targetPos, 500).catch(function () {
-            return void 0;
-          });
+    this._synchronizeByIndex = function (activeFlicking, index) {
+      var synchronizedFlickingOptions = _this._synchronizedFlickingOptions;
 
-          if (activeClass) {
-            _this._updateClass({
-              flicking: flicking,
-              activeClass: activeClass
-            }, targetPos);
+      _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 (synchronizedFlickingOption, pos) {
-      var target = _this._findNearsetPanel(synchronizedFlickingOption.flicking, pos);
-
-      synchronizedFlickingOption.flicking.panels.forEach(function (panel) {
-        return panel.index === target.index ? addClass(panel.element, synchronizedFlickingOption.activeClass) : removeClass(panel.element, synchronizedFlickingOption.activeClass);
+    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._findNearsetPanel = function (flicking, pos) {
-      var nearsetIndex = flicking.panels.reduce(function (nearest, panel, index) {
-        return Math.abs(panel.position - pos) <= nearest.range ? {
-          index: index,
-          range: Math.abs(panel.position - pos)
-        } : nearest;
-      }, {
-        index: 0,
-        range: Infinity
-      }).index;
-      return flicking.panels[nearsetIndex];
-    };
-
     this._type = type;
     this._synchronizedFlickingOptions = synchronizedFlickingOptions;
   }
@@ -876,11 +890,7 @@ function () {
       return this._type;
     },
     set: function (val) {
-      var _this = this;
-
-      this._preventEvent(function () {
-        _this._type = val;
-      });
+      this._type = val;
     },
     enumerable: false,
     configurable: true
@@ -890,11 +900,7 @@ function () {
       return this._synchronizedFlickingOptions;
     },
     set: function (val) {
-      var _this = this;
-
-      this._preventEvent(function () {
-        _this._synchronizedFlickingOptions = val;
-      });
+      this._synchronizedFlickingOptions = val;
     },
     enumerable: false,
     configurable: true
@@ -903,16 +909,20 @@ function () {
   __proto.init = function (flicking) {
     var _this = this;
 
+    var synced = this._synchronizedFlickingOptions;
+
     if (this._flicking) {
       this.destroy();
     }
 
     this._flicking = flicking;
 
-    this._addEvents(this._synchronizedFlickingOptions);
+    this._addEvents();
+
+    synced.forEach(function (options) {
+      var syncedFlicking = options.flicking;
 
-    this._synchronizedFlickingOptions.forEach(function (synchronizedFlickingOption) {
-      _this._updateClass(synchronizedFlickingOption, 0);
+      _this._updateClass(options, syncedFlicking.defaultIndex);
     });
   };
 
@@ -923,7 +933,7 @@ function () {
       return;
     }
 
-    this._removeEvents(this._synchronizedFlickingOptions);
+    this._removeEvents();
 
     this._flicking = null;
   };
@@ -931,28 +941,157 @@ function () {
   __proto.update = function () {
     var _this = this;
 
-    this._synchronizedFlickingOptions.forEach(function (_a) {
-      var flicking = _a.flicking,
-          activeClass = _a.activeClass;
-
-      _this._updateClass({
-        flicking: flicking,
-        activeClass: activeClass
-      }, flicking.camera.position);
+    this._synchronizedFlickingOptions.forEach(function (options) {
+      _this._updateClass(options, options.flicking.index);
     });
   };
 
   __proto._preventEvent = function (fn) {
-    this._removeEvents(this._synchronizedFlickingOptions);
+    this._removeEvents();
 
     fn();
 
-    this._addEvents(this._synchronizedFlickingOptions);
+    this._addEvents();
   };
 
   return Sync;
 }();
 
+/* eslint-disable no-underscore-dangle */
+/**
+ * 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 }));
+   * ```
+   */
+  function Perspective(_a) {
+    var _this = this;
+
+    var _b = _a === void 0 ? {} : _a,
+        _c = _b.selector,
+        selector = _c === void 0 ? "" : _c,
+        _d = _b.scale,
+        scale = _d === void 0 ? 1 : _d,
+        _e = _b.rotate,
+        rotate = _e === void 0 ? 1 : _e,
+        _f = _b.perspective,
+        perspective = _f === void 0 ? 1000 : _f;
+
+    this.update = function () {
+      _this._onMove();
+    };
+
+    this._onMove = function () {
+      var flicking = _this._flicking;
+      var selector = _this._selector;
+      var scale = _this._scale;
+      var rotate = _this._rotate;
+      var perspective = _this._perspective;
+      if (!flicking) return;
+      var horizontal = flicking.horizontal;
+      var panels = flicking.visiblePanels;
+      panels.forEach(function (panel) {
+        var progress = panel.outsetProgress;
+        var el = panel.element;
+        var target = selector ? el.querySelector(selector) : el;
+        var panelScale = 1 / (Math.abs(progress * scale) + 1);
+        var rotateDegree = progress > 0 ? Math.min(90, progress * 100 * rotate) : Math.max(-90, progress * 100 * rotate);
+
+        var _a = horizontal ? [0, rotateDegree] : [rotateDegree, 0],
+            rotateX = _a[0],
+            rotateY = _a[1];
+
+        target.style.transform = "perspective(" + perspective + "px) rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg) scale(" + panelScale + ")";
+      });
+    };
+
+    this._flicking = null;
+    this._selector = selector;
+    this._scale = scale;
+    this._rotate = rotate;
+    this._perspective = perspective;
+  }
+
+  var __proto = Perspective.prototype;
+  Object.defineProperty(__proto, "selector", {
+    get: function () {
+      return this._selector;
+    },
+    set: function (val) {
+      this._selector = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "scale", {
+    get: function () {
+      return this._scale;
+    },
+    set: function (val) {
+      this._scale = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "rotate", {
+    get: function () {
+      return this._rotate;
+    },
+    set: function (val) {
+      this._rotate = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(__proto, "perspective", {
+    get: function () {
+      return this._perspective;
+    },
+    set: function (val) {
+      this._perspective = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
+
+  __proto.init = function (flicking) {
+    if (this._flicking) {
+      this.destroy();
+    }
+
+    this._flicking = flicking;
+    flicking.on(EVENTS.MOVE, this._onMove);
+    flicking.on(EVENTS.AFTER_RESIZE, this.update);
+
+    this._onMove();
+  };
+
+  __proto.destroy = function () {
+    if (!this._flicking) return;
+
+    this._flicking.off(EVENTS.MOVE, this._onMove);
+
+    this._flicking.off(EVENTS.AFTER_RESIZE, this.update);
+
+    this._flicking = null;
+  };
+
+  return Perspective;
+}();
+
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -1056,6 +1195,8 @@ function (_super) {
       });
       bullet.addEventListener(BROWSER.TOUCH_START, function (e) {
         e.stopPropagation();
+      }, {
+        passive: true
       });
       bullet.addEventListener(BROWSER.CLICK, function () {
         flicking.moveTo(anchorPoint.panel.index).catch(function (err) {
@@ -1178,6 +1319,8 @@ function (_super) {
       });
       bullet.addEventListener(BROWSER.TOUCH_START, function (e) {
         e.stopPropagation();
+      }, {
+        passive: true
       });
       bullet.addEventListener(BROWSER.CLICK, function () {
         flicking.moveTo(anchorPoint.panel.index).catch(function (err) {
@@ -1505,5 +1648,5 @@ function () {
  * @namespace Flicking
  */
 
-export { ARROW, Arrow, AutoPlay, Fade, PAGINATION, Pagination, Parallax, SYNC, Sync };
+export { ARROW, Arrow, AutoPlay, Fade, PAGINATION, Pagination, Parallax, Perspective, SYNC, Sync };
 //# sourceMappingURL=plugins.esm.js.map