@egjs/flicking 4.14.2-beta.1 → 4.15.0

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.1
+version: 4.15.0
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@egjs/component'), require('@egjs/axes'), require('@egjs/imready'), require('@cfcs/core')) :
@@ -5210,11 +5210,16 @@ version: 4.14.2-beta.1
       __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;
+            }
           });
         }
       };
@@ -5260,8 +5265,8 @@ version: 4.14.2-beta.1
         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();
@@ -6347,9 +6352,10 @@ version: 4.14.2-beta.1
           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 = [];
@@ -6395,7 +6401,7 @@ version: 4.14.2-beta.1
         _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);
@@ -7124,22 +7130,23 @@ version: 4.14.2-beta.1
         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
@@ -7626,7 +7633,9 @@ version: 4.14.2-beta.1
         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)
@@ -7991,7 +8000,7 @@ version: 4.14.2-beta.1
        * @method
        * @fires Flicking#beforeResize
        * @fires Flicking#afterResize
-       * @return {this}
+       * @return {boolean}
        */
       __proto.resize = function () {
         return __awaiter(this, void 0, void 0, function () {
@@ -7999,7 +8008,18 @@ version: 4.14.2-beta.1
           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;
@@ -8065,6 +8085,10 @@ version: 4.14.2-beta.1
                   element: viewport.element
                 }));
                 this._isResizing = false;
+                // 연속으로 resize를 호출하는 경우를 대비하기 위해서 스케줄링 반영
+                if (this._scheduleResize) {
+                  this.resize();
+                }
                 return [2 /*return*/];
             }
           });
@@ -8284,7 +8308,7 @@ version: 4.14.2-beta.1
        * Flicking.VERSION;  // ex) 4.0.0
        * ```
        */
-      Flicking.VERSION = "4.14.2-beta.1";
+      Flicking.VERSION = "4.15.0";
       return Flicking;
     }(Component);
 
@@ -8826,8 +8850,8 @@ version: 4.14.2-beta.1
       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);
         });