@egjs/flicking 4.14.2-beta.0 → 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.2-beta.0
+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.2-beta.0
     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.2-beta.0
         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) {
@@ -2492,8 +2496,8 @@ version: 4.14.2-beta.0
         });
       };
       /**
-       * 현재
-       * @returns
+       * Returns the current axes position
+       * @ko 현재 axes의 position을 반환합니다.
        */
       __proto.getCurrentPosition = function () {
         var _a, _b;
@@ -2841,7 +2845,7 @@ version: 4.14.2-beta.0
           return __generator(this, function (_b) {
             flicking = getFlickingAttached(this._flicking);
             nextDuration = duration;
-            if (Math.abs(nextDuration - position) < 0.5) {
+            if (Math.abs(nextDuration - position) < flicking.animationThreshold) {
               nextDuration = 0;
             }
             animate = function () {
@@ -2875,6 +2879,7 @@ version: 4.14.2-beta.0
           });
         });
       };
+
       __proto._getPosition = function (panel, direction) {
         if (direction === void 0) {
           direction = DIRECTION.NONE;
@@ -4834,6 +4839,17 @@ version: 4.14.2-beta.0
         });
         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 모든 패널의 크기를 업데이트합니다
@@ -5194,6 +5210,13 @@ version: 4.14.2-beta.0
       __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;
     }();
@@ -5222,6 +5245,7 @@ version: 4.14.2-beta.0
           });
         });
       };
+
       __proto._collectPanels = function () {
         var flicking = getFlickingAttached(this._flicking);
         var camera = flicking.camera;
@@ -5235,7 +5259,15 @@ version: 4.14.2-beta.0
         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) {
@@ -6312,7 +6344,11 @@ version: 4.14.2-beta.0
           _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;
@@ -6358,6 +6394,8 @@ version: 4.14.2-beta.0
         _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);
@@ -7069,6 +7107,43 @@ version: 4.14.2-beta.0
         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.
@@ -7957,6 +8032,7 @@ version: 4.14.2-beta.0
                 if (!this._initialized) {
                   return [2 /*return*/];
                 }
+
                 renderer.updatePanelSize();
                 camera.updateAlignPos();
                 camera.updateRange();
@@ -7970,6 +8046,7 @@ version: 4.14.2-beta.0
                 if (!this._initialized) {
                   return [2 /*return*/];
                 }
+
                 if (control.animating) ; else {
                   control.updatePosition(prevProgressInPanel);
                   control.updateInput();
@@ -8207,7 +8284,7 @@ version: 4.14.2-beta.0
        * Flicking.VERSION;  // ex) 4.0.0
        * ```
        */
-      Flicking.VERSION = "4.14.2-beta.0";
+      Flicking.VERSION = "4.14.2-beta.1";
       return Flicking;
     }(Component);
 
@@ -8746,13 +8823,16 @@ version: 4.14.2-beta.0
         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];