@egjs/flicking-plugins 4.2.1 → 4.3.0

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.2.1
+version: 4.3.0
 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@egjs/flicking')) :
@@ -106,6 +106,8 @@ version: 4.2.1
 
       this._flicking.off(flicking.EVENTS.MOVE, this._onMove);
 
+      this._flicking.off(flicking.EVENTS.AFTER_RESIZE, this.update);
+
       this._flicking = null;
     };
 
@@ -203,6 +205,8 @@ version: 4.2.1
 
       this._flicking.off(flicking.EVENTS.MOVE, this._onMove);
 
+      this._flicking.off(flicking.EVENTS.AFTER_RESIZE, this.update);
+
       this._flicking = null;
     };
 
@@ -410,6 +414,8 @@ version: 4.2.1
   };
 
   var addClass = function (el, className) {
+    if (!el) return;
+
     if (el.classList) {
       el.classList.add(className);
     } else {
@@ -421,6 +427,8 @@ version: 4.2.1
     }
   };
   var removeClass = function (el, className) {
+    if (!el) return;
+
     if (el.classList) {
       el.classList.remove(className);
     } else {
@@ -640,8 +648,12 @@ version: 4.2.1
       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);
@@ -723,46 +735,52 @@ version: 4.2.1
 
       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$1 = _a.flicking,
               isSlidable = _a.isSlidable,
               isClickable = _a.isClickable;
 
-          if (_this._type === "camera") {
+          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 (_this._type === "index" && isSlidable) {
+          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._onIndexChange);
+            flicking$1.on(flicking.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$1 = _a.flicking,
               isSlidable = _a.isSlidable,
               isClickable = _a.isClickable;
 
-          if (_this._type === "camera") {
+          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 (_this._type === "index" && isSlidable) {
+          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._onIndexChange);
+            flicking$1.off(flicking.EVENTS.SELECT, _this._onSelect);
           }
         });
       };
@@ -783,16 +801,18 @@ version: 4.2.1
 
         _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);
         });
       };
 
@@ -817,59 +837,53 @@ version: 4.2.1
         });
       };
 
-      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$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 (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;
     }
@@ -880,11 +894,7 @@ version: 4.2.1
         return this._type;
       },
       set: function (val) {
-        var _this = this;
-
-        this._preventEvent(function () {
-          _this._type = val;
-        });
+        this._type = val;
       },
       enumerable: false,
       configurable: true
@@ -894,11 +904,7 @@ version: 4.2.1
         return this._synchronizedFlickingOptions;
       },
       set: function (val) {
-        var _this = this;
-
-        this._preventEvent(function () {
-          _this._synchronizedFlickingOptions = val;
-        });
+        this._synchronizedFlickingOptions = val;
       },
       enumerable: false,
       configurable: true
@@ -907,16 +913,20 @@ version: 4.2.1
     __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);
       });
     };
 
@@ -927,7 +937,7 @@ version: 4.2.1
         return;
       }
 
-      this._removeEvents(this._synchronizedFlickingOptions);
+      this._removeEvents();
 
       this._flicking = null;
     };
@@ -935,28 +945,157 @@ version: 4.2.1
     __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$1) {
+      if (this._flicking) {
+        this.destroy();
+      }
+
+      this._flicking = flicking$1;
+      flicking$1.on(flicking.EVENTS.MOVE, this._onMove);
+      flicking$1.on(flicking.EVENTS.AFTER_RESIZE, this.update);
+
+      this._onMove();
+    };
+
+    __proto.destroy = function () {
+      if (!this._flicking) return;
+
+      this._flicking.off(flicking.EVENTS.MOVE, this._onMove);
+
+      this._flicking.off(flicking.EVENTS.AFTER_RESIZE, this.update);
+
+      this._flicking = null;
+    };
+
+    return Perspective;
+  }();
+
   /*! *****************************************************************************
   Copyright (c) Microsoft Corporation.
 
@@ -1060,6 +1199,8 @@ version: 4.2.1
         });
         bullet.addEventListener(BROWSER.TOUCH_START, function (e) {
           e.stopPropagation();
+        }, {
+          passive: true
         });
         bullet.addEventListener(BROWSER.CLICK, function () {
           flicking$1.moveTo(anchorPoint.panel.index).catch(function (err) {
@@ -1182,6 +1323,8 @@ version: 4.2.1
         });
         bullet.addEventListener(BROWSER.TOUCH_START, function (e) {
           e.stopPropagation();
+        }, {
+          passive: true
         });
         bullet.addEventListener(BROWSER.CLICK, function () {
           flicking$1.moveTo(anchorPoint.panel.index).catch(function (err) {
@@ -1516,6 +1659,7 @@ version: 4.2.1
   exports.PAGINATION = PAGINATION;
   exports.Pagination = Pagination;
   exports.Parallax = Parallax;
+  exports.Perspective = Perspective;
   exports.SYNC = SYNC;
   exports.Sync = Sync;