@egjs/flicking 4.14.1 → 4.14.2-beta.1

package/dist/flicking.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(require('@egjs/component'), require('@egjs/axes'), require('@egjs/imready'), require('@cfcs/core')) :
@@ -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 = function (d, b) {
       extendStatics = 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) {
@@ -1002,6 +1006,9 @@ version: 4.14.1
      * @ko autoResize 옵션을 사용할 때 크기 변화를 감지하고 Flicking의 resize를 호출하는 컴포넌트
      */
     var AutoResizer = /*#__PURE__*/function () {
+      /**
+       * @param flicking
+       */
       function AutoResizer(flicking) {
         var _this = this;
         this._onResizeWrapper = function () {
@@ -2444,7 +2451,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);
@@ -2488,6 +2495,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;
@@ -2825,16 +2840,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 () {
@@ -2860,6 +2879,7 @@ version: 4.14.1
           });
         });
       };
+
       __proto._getPosition = function (panel, direction) {
         if (direction === void 0) {
           direction = DIRECTION.NONE;
@@ -3425,8 +3445,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
@@ -4818,6 +4839,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 모든 패널의 크기를 업데이트합니다
@@ -5178,6 +5210,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;
     }();
@@ -5206,6 +5245,7 @@ version: 4.14.1
           });
         });
       };
+
       __proto._collectPanels = function () {
         var flicking = getFlickingAttached(this._flicking);
         var camera = flicking.camera;
@@ -5219,7 +5259,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) {
@@ -6296,7 +6344,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;
@@ -6342,6 +6394,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);
@@ -7053,6 +7107,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.
@@ -7941,6 +8032,7 @@ version: 4.14.1
                 if (!this._initialized) {
                   return [2 /*return*/];
                 }
+
                 renderer.updatePanelSize();
                 camera.updateAlignPos();
                 camera.updateRange();
@@ -7954,6 +8046,7 @@ version: 4.14.1
                 if (!this._initialized) {
                   return [2 /*return*/];
                 }
+
                 if (control.animating) ; else {
                   control.updatePosition(prevProgressInPanel);
                   control.updateInput();
@@ -8191,7 +8284,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);
 
@@ -8730,13 +8823,16 @@ version: 4.14.1
         map[prev] = current;
         return map;
       }, {});
-      return __spread(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(renderingPanels.map(function (panel) {
         return diffResult.list[maintainedMap[panel.index]];
       }), diffResult.added.map(function (idx) {
         return diffResult.list[idx];