@egjs/flicking 4.14.1 → 4.14.2-beta.1

package/dist/flicking.pkgd.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.14.1
+version: 4.14.2-beta.1
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -26,7 +26,7 @@ version: 4.14.1
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+    /* global Reflect, Promise, SuppressedError, Symbol */
 
     var extendStatics$3 = function (d, b) {
       extendStatics$3 = Object.setPrototypeOf || {
@@ -96,8 +96,12 @@ version: 4.14.1
         f,
         y,
         t,
-        g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-      return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+        g;
+      return g = {
+        next: verb(0),
+        "throw": verb(1),
+        "return": verb(2)
+      }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
         return this;
       }), g;
       function verb(n) {
@@ -222,7 +226,7 @@ version: 4.14.1
     license: MIT
     author: NAVER Corp.
     repository: https://github.com/naver/egjs-component
-    version: 3.0.5
+    version: 3.0.4
     */
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -554,6 +558,7 @@ version: 4.14.1
        * ```
        */
       __proto.off = function (eventName, handlerToDetach) {
+        var e_1, _a;
         // Detach all event handlers.
         if (isUndefined(eventName)) {
           this._eventHandler = {};
@@ -575,14 +580,28 @@ version: 4.14.1
         // Detach single event handler
         var handlerList = this._eventHandler[eventName];
         if (handlerList) {
-          var length = handlerList.length;
-          for (var i = 0; i < length; ++i) {
-            if (handlerList[i] === handlerToDetach) {
-              handlerList.splice(i, 1);
-              if (length <= 1) {
-                delete this._eventHandler[eventName];
+          var idx = 0;
+          try {
+            for (var handlerList_1 = __values(handlerList), handlerList_1_1 = handlerList_1.next(); !handlerList_1_1.done; handlerList_1_1 = handlerList_1.next()) {
+              var handlerFunction = handlerList_1_1.value;
+              if (handlerFunction === handlerToDetach) {
+                handlerList.splice(idx, 1);
+                if (handlerList.length <= 0) {
+                  delete this._eventHandler[eventName];
+                }
+                break;
               }
-              break;
+              idx++;
+            }
+          } catch (e_1_1) {
+            e_1 = {
+              error: e_1_1
+            };
+          } finally {
+            try {
+              if (handlerList_1_1 && !handlerList_1_1.done && (_a = handlerList_1.return)) _a.call(handlerList_1);
+            } finally {
+              if (e_1) throw e_1.error;
             }
           }
         }
@@ -597,7 +616,7 @@ version: 4.14.1
        * Component.VERSION;  // ex) 3.0.0
        * @memberof Component
        */
-      Component.VERSION = "3.0.5";
+      Component.VERSION = "3.0.4";
       return Component;
     }();
 
@@ -1394,6 +1413,9 @@ version: 4.14.1
      * @ko autoResize 옵션을 사용할 때 크기 변화를 감지하고 Flicking의 resize를 호출하는 컴포넌트
      */
     var AutoResizer = /*#__PURE__*/function () {
+      /**
+       * @param flicking
+       */
       function AutoResizer(flicking) {
         var _this = this;
         this._onResizeWrapper = function () {
@@ -1843,8 +1865,8 @@ version: 4.14.1
     name: @egjs/agent
     license: MIT
     author: NAVER Corp.
-    repository: git+https://github.com/naver/egjs-agent.git
-    version: 2.4.4
+    repository: git+https://github.com/naver/agent.git
+    version: 2.4.3
     */
     function some(arr, callback) {
       var length = arr.length;
@@ -2146,12 +2168,12 @@ version: 4.14.1
       });
       var chromiumBrand = findPresetBrand(CHROMIUM_PRESETS, brands);
       browser.chromium = !!chromiumBrand.brand;
-      browser.chromiumVersion = chromiumBrand.version || "-1";
+      browser.chromiumVersion = chromiumBrand.version;
 
       if (!browser.chromium) {
         var webkitBrand = findPresetBrand(WEBKIT_PRESETS, brands);
         browser.webkit = !!webkitBrand.brand;
-        browser.webkitVersion = webkitBrand.version || "-1";
+        browser.webkitVersion = webkitBrand.version;
       }
 
       var platfomResult = find(OS_PRESETS, function (preset) {
@@ -2160,7 +2182,7 @@ version: 4.14.1
       os.name = platfomResult ? platfomResult.id : "";
 
       if (osData) {
-        os.version = osData.platformVersion || "-1";
+        os.version = osData.platformVersion;
       }
 
       if (fullVersionList && fullVersionList.length) {
@@ -3085,7 +3107,7 @@ version: 4.14.1
     license: MIT
     author: NAVER Corp.
     repository: https://github.com/naver/egjs-axes
-    version: 3.9.2
+    version: 3.9.1
     */
 
     /*! *****************************************************************************
@@ -4011,19 +4033,6 @@ version: 4.14.1
         var deltaTime = latestInterval ? timeStamp - latestInterval.timestamp : 0;
         var velocityX = prevEvent ? prevEvent.velocityX : 0;
         var velocityY = prevEvent ? prevEvent.velocityY : 0;
-        var directionX = prevEvent ? prevEvent.directionX : 1;
-        var directionY = prevEvent ? prevEvent.directionY : 1;
-        // If offset is 0, it inherits the direction of the previous event.
-        if (offsetX > 0) {
-          directionX = 1;
-        } else if (offsetX < 0) {
-          directionX = -1;
-        }
-        if (offsetY > 0) {
-          directionY = 1;
-        } else if (offsetY < 0) {
-          directionY = -1;
-        }
         if (!latestInterval || deltaTime >= VELOCITY_INTERVAL) {
           if (latestInterval) {
             _a = [(deltaX - latestInterval.deltaX) / deltaTime, (deltaY - latestInterval.deltaY) / deltaTime], velocityX = _a[0], velocityY = _a[1];
@@ -4043,8 +4052,6 @@ version: 4.14.1
           deltaY: deltaY,
           offsetX: offsetX,
           offsetY: offsetY,
-          directionX: directionX,
-          directionY: directionY,
           velocityX: velocityX,
           velocityY: velocityY,
           preventSystemEvent: true
@@ -5508,7 +5515,7 @@ version: 4.14.1
        * eg.Axes.VERSION;  // ex) 3.3.3
        * ```
        */
-      Axes.VERSION = "3.9.2";
+      Axes.VERSION = "3.9.1";
       /* eslint-enable */
       /**
        * @name TRANSFORM
@@ -5725,10 +5732,7 @@ version: 4.14.1
        * @return {PanInput} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
        */
       __proto.enable = function () {
-        var activeEvent = convertInputType(this.options.inputType);
-        if (!activeEvent) {
-          throw new Error("PanInput cannot be enabled if there is no available input event.");
-        } else if (!this._enabled) {
+        if (!this._enabled) {
           this._enabled = true;
           this._originalCssProps = setCssProps(this.element, this.options, this._direction);
         }
@@ -5862,7 +5866,7 @@ version: 4.14.1
         this._detachWindowEvent(activeEvent);
         clearTimeout(this._rightEdgeTimer);
         var prevEvent = activeEvent.prevEvent;
-        var velocity = this._isOverThreshold ? this._getOffset([Math.abs(prevEvent.velocityX) * prevEvent.directionX, Math.abs(prevEvent.velocityY) * prevEvent.directionY], [useDirection(DIRECTION_HORIZONTAL, this._direction), useDirection(DIRECTION_VERTICAL, this._direction)]) : [0, 0];
+        var velocity = this._isOverThreshold ? this._getOffset([Math.abs(prevEvent.velocityX) * (prevEvent.offsetX < 0 ? -1 : 1), Math.abs(prevEvent.velocityY) * (prevEvent.offsetY < 0 ? -1 : 1)], [useDirection(DIRECTION_HORIZONTAL, this._direction), useDirection(DIRECTION_VERTICAL, this._direction)]) : [0, 0];
         activeEvent.onRelease();
         this._observer.release(this, prevEvent, velocity);
       };
@@ -6937,7 +6941,7 @@ version: 4.14.1
         if (!axes) {
           return Promise.reject(new FlickingError(MESSAGE.NOT_ATTACHED_TO_FLICKING, CODE.NOT_ATTACHED_TO_FLICKING));
         }
-        var startPos = axes.get([POSITION_KEY])[POSITION_KEY];
+        var startPos = this.getCurrentPosition();
         if (startPos === position) {
           var flicking = getFlickingAttached(this._flicking);
           flicking.camera.lookAt(position);
@@ -6981,6 +6985,14 @@ version: 4.14.1
           animate();
         });
       };
+      /**
+       * Returns the current axes position
+       * @ko 현재 axes의 position을 반환합니다.
+       */
+      __proto.getCurrentPosition = function () {
+        var _a, _b;
+        return (_b = (_a = this._axes) === null || _a === void 0 ? void 0 : _a.get([POSITION_KEY])[POSITION_KEY]) !== null && _b !== void 0 ? _b : 0;
+      };
       __proto.updateDirection = function () {
         var flicking = getFlickingAttached(this._flicking);
         var axes = this._axes;
@@ -7318,16 +7330,20 @@ version: 4.14.1
           newActivePanel = _a.newActivePanel,
           axesEvent = _a.axesEvent;
         return __awaiter(this, void 0, void 0, function () {
-          var flicking, animate, state;
+          var flicking, nextDuration, animate, state;
           var _this = this;
           return __generator(this, function (_b) {
             flicking = getFlickingAttached(this._flicking);
+            nextDuration = duration;
+            if (Math.abs(nextDuration - position) < flicking.animationThreshold) {
+              nextDuration = 0;
+            }
             animate = function () {
-              return _this._controller.animateTo(position, duration, axesEvent);
+              return _this._controller.animateTo(position, nextDuration, axesEvent);
             };
             state = this._controller.state;
             state.targetPanel = newActivePanel;
-            if (duration <= 0) {
+            if (nextDuration <= 0) {
               return [2 /*return*/, animate()];
             } else {
               return [2 /*return*/, animate().then(function () {
@@ -7353,6 +7369,7 @@ version: 4.14.1
           });
         });
       };
+
       __proto._getPosition = function (panel, direction) {
         if (direction === void 0) {
           direction = DIRECTION.NONE;
@@ -7918,8 +7935,9 @@ version: 4.14.1
         var anchors = camera.anchorPoints;
         var firstAnchor = anchors[0];
         var lastAnchor = anchors[anchors.length - 1];
-        var shouldBounceToFirst = position <= cameraRange.min && isBetween(firstAnchor.panel.index, indexRange.min, indexRange.max);
-        var shouldBounceToLast = position >= cameraRange.max && isBetween(lastAnchor.panel.index, indexRange.min, indexRange.max);
+        // position이 bounce으로 인하여 범위를 넘어가야 동작하도록 변경
+        var shouldBounceToFirst = position < cameraRange.min && isBetween(firstAnchor.panel.index, indexRange.min, indexRange.max);
+        var shouldBounceToLast = position > cameraRange.max && isBetween(lastAnchor.panel.index, indexRange.min, indexRange.max);
         var isAdjacent = adjacentAnchor && (indexRange.min <= indexRange.max ? isBetween(adjacentAnchor.index, indexRange.min, indexRange.max) : adjacentAnchor.index >= indexRange.min || adjacentAnchor.index <= indexRange.max);
         if (shouldBounceToFirst || shouldBounceToLast) {
           // In bounce area
@@ -9186,7 +9204,7 @@ version: 4.14.1
     license: MIT
     author: NAVER Corp.
     repository: https://github.com/naver/egjs-imready
-    version: 1.4.2
+    version: 1.4.1
     */
 
     /******************************************************************************
@@ -9384,7 +9402,9 @@ version: 4.14.1
             // I'm not ready
             return;
           }
-          _this.onReady();
+          // I'm pre-ready and ready!
+          var withPreReady = !_this.hasDataSize && !_this.hasLoading;
+          _this.onReady(withPreReady);
         };
         _this.options = __assign({
           prefix: "data-"
@@ -9400,7 +9420,7 @@ version: 4.14.1
       __proto.check = function () {
         if (this.isSkip || !this.checkElement()) {
           // I'm Ready
-          this.onAlreadyReady();
+          this.onAlreadyReady(true);
           return false;
         }
         if (this.hasDataSize) {
@@ -9446,7 +9466,6 @@ version: 4.14.1
         });
       };
       __proto.onPreReady = function () {
-        // 이전에 호출되었거나 ready가 발생했다면 preReady를 발생하지 않는다.
         if (this.isPreReady) {
           return;
         }
@@ -9457,18 +9476,19 @@ version: 4.14.1
           isSkip: this.isSkip
         });
       };
-      __proto.onReady = function () {
-        var isPreReady = this.isPreReady;
-        this.isPreReady = true;
+      __proto.onReady = function (withPreReady) {
         if (this.isReady) {
           return;
         }
+        withPreReady = !this.isPreReady && withPreReady;
+        if (withPreReady) {
+          this.isPreReady = true;
+        }
         this.removeAutoSizer();
         this.isReady = true;
-        // preReady가 호출이 되지 않았으면 ready 이벤트만 발생하고 대신 withPreReady가 활성화
         this.trigger("ready", {
           element: this.element,
-          withPreReady: !isPreReady,
+          withPreReady: withPreReady,
           hasLoading: this.hasLoading,
           isSkip: this.isSkip
         });
@@ -9485,10 +9505,10 @@ version: 4.14.1
           _this.onPreReady();
         });
       };
-      __proto.onAlreadyReady = function () {
+      __proto.onAlreadyReady = function (withPreReady) {
         var _this = this;
         setTimeout(function () {
-          _this.onReady();
+          _this.onReady(withPreReady);
         });
       };
       Loader.EVENTS = [];
@@ -9507,7 +9527,7 @@ version: 4.14.1
       __proto.check = function () {
         if (this.isSkip) {
           // I'm Ready
-          this.onAlreadyReady();
+          this.onAlreadyReady(true);
           return false;
         }
         if (this.hasDataSize) {
@@ -9714,17 +9734,18 @@ version: 4.14.1
         loader.setHasLoading(children.some(function (el) {
           return hasLoadingAttribute(el, prefix);
         }));
+        var withPreReady = false;
         var childrenImReady = this.clone().on("error", function (e) {
           loader.onError(e.target);
         }).on("ready", function () {
-          loader.onReady();
+          loader.onReady(withPreReady);
         });
         loader.on("requestChildren", function () {
           // has not data size
           var contentElements = getContentElements(element, tags, _this.options.prefix);
           childrenImReady.check(contentElements).on("preReady", function (e) {
-            if (!e.isReady) {
-              // isReady가 아닌 경우에만 발생 / ready에서 동시에 발생할 가능성 있음.
+            withPreReady = e.isReady;
+            if (!withPreReady) {
               loader.onPreReady();
             }
           });
@@ -10178,6 +10199,17 @@ version: 4.14.1
         });
         return Promise.resolve();
       };
+      /**
+       * Return Rendered Panels
+       * @ko 렌더링이 된 패널을 반환합니다.
+       * @return {Panel[]}
+       */
+      __proto.getRenderedPanels = function () {
+        var flicking = getFlickingAttached(this._flicking);
+        return flicking.renderer.panels.filter(function (panel) {
+          return panel.rendered;
+        });
+      };
       /**
        * Update all panel sizes
        * @ko 모든 패널의 크기를 업데이트합니다
@@ -10538,6 +10570,13 @@ version: 4.14.1
       __proto._afterRender = function () {
         var flicking = getFlickingAttached(this._flicking);
         flicking.camera.applyTransform();
+        if (flicking.useCSSOrderProperty) {
+          // useCSSOrderProperty를 사용하는 경우 DOM은 변화가 없지만 대신 CSS Order가 추가 된다.
+          var panels_1 = flicking.panels;
+          this._strategy.getRenderingIndexesByOrder(flicking).forEach(function (domIndex, index) {
+            panels_1[domIndex].element.style.order = "" + index;
+          });
+        }
       };
       return Renderer;
     }();
@@ -10566,6 +10605,7 @@ version: 4.14.1
           });
         });
       };
+
       __proto._collectPanels = function () {
         var flicking = getFlickingAttached(this._flicking);
         var camera = flicking.camera;
@@ -10579,7 +10619,15 @@ version: 4.14.1
         var flicking = getFlickingAttached(this._flicking);
         var cameraEl = flicking.camera.element;
         // We're using reversed panels here as last panel should be the last element of camera element
-        var reversedElements = this._strategy.getRenderingElementsByOrder(flicking).reverse();
+        var reversedElements = [];
+        if (flicking.useCSSOrderProperty) {
+          // useCSSOrderProperty를 사용하는 경우 원본 그대로 렌더링
+          reversedElements = this.getRenderedPanels().map(function (panel) {
+            return panel.element;
+          }).reverse();
+        } else {
+          reversedElements = this._strategy.getRenderingElementsByOrder(flicking).reverse();
+        }
         reversedElements.forEach(function (el, idx) {
           var nextEl = reversedElements[idx - 1] ? reversedElements[idx - 1] : null;
           if (el.nextElementSibling !== nextEl) {
@@ -11656,7 +11704,11 @@ version: 4.14.1
           _15 = _b.renderExternal,
           renderExternal = _15 === void 0 ? null : _15,
           _16 = _b.optimizeSizeUpdate,
-          optimizeSizeUpdate = _16 === void 0 ? false : _16;
+          optimizeSizeUpdate = _16 === void 0 ? false : _16,
+          _17 = _b.animationThreshold,
+          animationThreshold = _17 === void 0 ? 0.5 : _17,
+          _18 = _b.useCSSOrderProperty,
+          useCSSOrderProperty = _18 === void 0 ? false : _18;
         var _this = _super.call(this) || this;
         // Internal states
         _this._initialized = false;
@@ -11702,6 +11754,8 @@ version: 4.14.1
         _this._externalRenderer = externalRenderer;
         _this._renderExternal = renderExternal;
         _this._optimizeSizeUpdate = optimizeSizeUpdate;
+        _this._animationThreshold = animationThreshold;
+        _this._useCSSOrderProperty = useCSSOrderProperty;
         // Create core components
         _this._viewport = new Viewport(_this, getElement(root));
         _this._autoResizer = new AutoResizer(_this);
@@ -12413,6 +12467,43 @@ version: 4.14.1
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "animationThreshold", {
+        /**
+         * The minimum distance for animation to proceed. If the distance to be moved is less than `animationThreshold`, the movement proceeds immediately without animation (duration: 0).
+         * @ko animation이 진행되기 위한 최소한의 거리. 이동하려는 거리가 `animationThreshold`보다 적으면 애니메이션 없이(duration: 0) 즉시 이동한다.
+         * @type {number}
+         * @default 0.5
+         * @see {@link https://naver.github.io/egjs-flicking/Options#animationThreshold animationThreshold ( Options )}
+         */
+        get: function () {
+          return this._animationThreshold;
+        },
+        set: function (val) {
+          this._animationThreshold = val;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "useCSSOrderProperty", {
+        /**
+         * When `circular` is used, the DOM order changes depending on the position. Using `useCSSOrderProperty` does not change the DOM order, but the `order` CSS property changes the order on the screen.
+         * When using `iframe`, you can prevent reloading when the DOM order changes.
+         * @ko `circular`를 사용한 경우 위치에 따라 DOM의 순서가 변경된다. `useCSSOrderProperty`를 사용하면 DOM의 순서는 변경되지 않지만 `order` css가 설정되면서 화면상 순서가 바뀐다.
+         * `iframe`을 사용하는 경우 DOM의 순서가 변경되면서 reload가 되는 것을 막을 수 있다.
+         * @type {boolean}
+         * @requires `circular`
+         * @default false
+         * @see {@link https://naver.github.io/egjs-flicking/Options#useCSSOrderProperty animationThreshold ( Options )}
+         */
+        get: function () {
+          return this._useCSSOrderProperty;
+        },
+        set: function (val) {
+          this._useCSSOrderProperty = val;
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "interruptable", {
         /**
          * Set animation to be interruptable by click/touch.
@@ -13301,6 +13392,7 @@ version: 4.14.1
                 if (!this._initialized) {
                   return [2 /*return*/];
                 }
+
                 renderer.updatePanelSize();
                 camera.updateAlignPos();
                 camera.updateRange();
@@ -13314,6 +13406,7 @@ version: 4.14.1
                 if (!this._initialized) {
                   return [2 /*return*/];
                 }
+
                 if (control.animating) ; else {
                   control.updatePosition(prevProgressInPanel);
                   control.updateInput();
@@ -13551,7 +13644,7 @@ version: 4.14.1
        * Flicking.VERSION;  // ex) 4.0.0
        * ```
        */
-      Flicking.VERSION = "4.14.1";
+      Flicking.VERSION = "4.14.2-beta.1";
       return Flicking;
     }(Component);
 
@@ -14090,13 +14183,16 @@ version: 4.14.1
         map[prev] = current;
         return map;
       }, {});
-      return __spread$1(flicking.panels.filter(function (panel) {
+      var renderingPanels = flicking.panels.filter(function (panel) {
         return !removedPanels[panel.index];
-      })
-      // Sort panels by position
-      .sort(function (panel1, panel2) {
-        return panel1.position + panel1.offset - (panel2.position + panel2.offset);
-      }).map(function (panel) {
+      });
+      if (!flicking.useCSSOrderProperty) {
+        // useCSSOrderProperty를 사용하게 되는 경우 sort를 하지 않는다.
+        renderingPanels.sort(function (panel1, panel2) {
+          return panel1.position + panel1.offset - (panel2.position + panel2.offset);
+        });
+      }
+      return __spread$1(renderingPanels.map(function (panel) {
         return diffResult.list[maintainedMap[panel.index]];
       }), diffResult.added.map(function (idx) {
         return diffResult.list[idx];