@egjs/flicking 4.14.2-beta.1 → 4.15.0

package/dist/flicking.esm.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.1
+version: 4.15.0
 */
 import Component, { ComponentEvent } from '@egjs/component';
 import Axes, { PanInput } from '@egjs/axes';
@@ -5127,11 +5127,16 @@ var Renderer = /*#__PURE__*/function () {
   __proto._afterRender = function () {
     var flicking = getFlickingAttached(this._flicking);
     flicking.camera.applyTransform();
-    if (flicking.useCSSOrderProperty) {
-      // useCSSOrderProperty를 사용하는 경우 DOM은 변화가 없지만 대신 CSS Order가 추가 된다.
-      var panels_1 = flicking.panels;
+    if (flicking.useCSSOrder) {
+      // `useCSSOrder`를 사용하는 경우 DOM은 변화가 없지만 대신 css `order`값을 주입
+      var renderedPanels_1 = flicking.renderer.panels.filter(function (panel) {
+        return panel.rendered;
+      });
       this._strategy.getRenderingIndexesByOrder(flicking).forEach(function (domIndex, index) {
-        panels_1[domIndex].element.style.order = "" + index;
+        if (renderedPanels_1[domIndex].element) {
+          // 방어 코드 추가
+          renderedPanels_1[domIndex].element.style.order = "" + index;
+        }
       });
     }
   };
@@ -5177,8 +5182,8 @@ var VanillaRenderer = /*#__PURE__*/function (_super) {
     var cameraEl = flicking.camera.element;
     // We're using reversed panels here as last panel should be the last element of camera element
     var reversedElements = [];
-    if (flicking.useCSSOrderProperty) {
-      // useCSSOrderProperty를 사용하는 경우 원본 그대로 렌더링
+    if (flicking.useCSSOrder) {
+      // useCSSOrder를 사용하는 경우 DOM은 변화가 없지만 대신 css `order`값을 주입
       reversedElements = this.getRenderedPanels().map(function (panel) {
         return panel.element;
       }).reverse();
@@ -6250,9 +6255,10 @@ var Flicking = /*#__PURE__*/function (_super) {
       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;
+      _18 = _b.useCSSOrder,
+      useCSSOrder = _18 === void 0 ? false : _18;
     var _this = _super.call(this) || this;
+    _this._scheduleResize = false;
     // Internal states
     _this._initialized = false;
     _this._plugins = [];
@@ -6298,7 +6304,7 @@ var Flicking = /*#__PURE__*/function (_super) {
     _this._renderExternal = renderExternal;
     _this._optimizeSizeUpdate = optimizeSizeUpdate;
     _this._animationThreshold = animationThreshold;
-    _this._useCSSOrderProperty = useCSSOrderProperty;
+    _this._useCSSOrder = useCSSOrder;
     // Create core components
     _this._viewport = new Viewport(_this, getElement(root));
     _this._autoResizer = new AutoResizer(_this);
@@ -7027,22 +7033,23 @@ var Flicking = /*#__PURE__*/function (_super) {
     enumerable: false,
     configurable: true
   });
-  Object.defineProperty(__proto, "useCSSOrderProperty", {
+  Object.defineProperty(__proto, "useCSSOrder", {
     /**
-     * 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.
+     * Using `useCSSOrder` does not change the DOM order, but the `order` CSS property changes the order on the screen. (When `circular` is used, the DOM order changes depending on the position.)
      * When using `iframe`, you can prevent reloading when the DOM order changes.
-     * @ko `circular`를 사용한 경우 위치에 따라 DOM의 순서가 변경된다. `useCSSOrderProperty`를 사용하면 DOM의 순서는 변경되지 않지만 `order` css가 설정되면서 화면상 순서가 바뀐다.
+     * In svelte, CSS order is always used.
+     * @ko `useCSSOrder`를 사용하면 DOM의 순서는 변경되지 않지만 `order` css가 설정되면서 화면상 순서가 바뀐다. (`circular`를 사용한 경우 위치에 따라 DOM의 순서가 변경된다.)
      * `iframe`을 사용하는 경우 DOM의 순서가 변경되면서 reload가 되는 것을 막을 수 있다.
+     * svelte에서는 css order를 무조건 사용한다.
      * @type {boolean}
-     * @requires `circular`
      * @default false
-     * @see {@link https://naver.github.io/egjs-flicking/Options#useCSSOrderProperty animationThreshold ( Options )}
+     * @see {@link https://naver.github.io/egjs-flicking/Options#useCSSOrder useCSSOrder ( Options )}
      */
     get: function () {
-      return this._useCSSOrderProperty;
+      return this._useCSSOrder;
     },
     set: function (val) {
-      this._useCSSOrderProperty = val;
+      this._useCSSOrder = val;
     },
     enumerable: false,
     configurable: true
@@ -7529,7 +7536,9 @@ var Flicking = /*#__PURE__*/function (_super) {
     this._plugins.forEach(function (plugin) {
       return plugin.destroy();
     });
+    this._scheduleResize = false;
     this._initialized = false;
+    this._isResizing = false;
   };
   /**
    * Move to the previous panel (current index - 1)
@@ -7894,7 +7903,7 @@ var Flicking = /*#__PURE__*/function (_super) {
    * @method
    * @fires Flicking#beforeResize
    * @fires Flicking#afterResize
-   * @return {this}
+   * @return {boolean}
    */
   __proto.resize = function () {
     return __awaiter(this, void 0, void 0, function () {
@@ -7902,7 +7911,18 @@ var Flicking = /*#__PURE__*/function (_super) {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
-            if (this._isResizing) return [2 /*return*/];
+            if (!this._initialized) {
+              return [2 /*return*/];
+            }
+
+            if (this._isResizing) {
+              // resize를 연속으로 발생하면 무시하기에 마지막 viewport를 사이즈를 알 수 없음.
+              // resize를 1번 더 실행할 수 잇는 스케줄링 등록
+              this._scheduleResize = true;
+              return [2 /*return*/];
+            }
+
+            this._scheduleResize = false;
             this._isResizing = true;
             viewport = this._viewport;
             renderer = this._renderer;
@@ -7968,6 +7988,10 @@ var Flicking = /*#__PURE__*/function (_super) {
               element: viewport.element
             }));
             this._isResizing = false;
+            // 연속으로 resize를 호출하는 경우를 대비하기 위해서 스케줄링 반영
+            if (this._scheduleResize) {
+              this.resize();
+            }
             return [2 /*return*/];
         }
       });
@@ -8187,7 +8211,7 @@ var Flicking = /*#__PURE__*/function (_super) {
    * Flicking.VERSION;  // ex) 4.0.0
    * ```
    */
-  Flicking.VERSION = "4.14.2-beta.1";
+  Flicking.VERSION = "4.15.0";
   return Flicking;
 }(Component);
 
@@ -8706,8 +8730,8 @@ var getRenderingPanels = (function (flicking, diffResult) {
   var renderingPanels = flicking.panels.filter(function (panel) {
     return !removedPanels[panel.index];
   });
-  if (!flicking.useCSSOrderProperty) {
-    // useCSSOrderProperty를 사용하게 되는 경우 sort를 하지 않는다.
+  if (!flicking.useCSSOrder) {
+    // useCSSOrder를 사용하게 되는 경우 sort를 하지 않는다.
     renderingPanels.sort(function (panel1, panel2) {
       return panel1.position + panel1.offset - (panel2.position + panel2.offset);
     });