@egjs/flicking 4.14.2-beta.1 → 4.15.0

package/declaration/Flicking.d.ts

@@ -54,7 +54,7 @@ export interface FlickingOptions {
     threshold: number;
     dragThreshold: number;
     animationThreshold: number;
-    useCSSOrderProperty: boolean;
+    useCSSOrder: boolean;
     interruptable: boolean;
     bounce: number | string | [number | string, number | string];
     iOSEdgeSwipeThreshold: number;
@@ -108,7 +108,7 @@ declare class Flicking extends Component<FlickingEvents> {
     private _threshold;
     private _dragThreshold;
     private _animationThreshold;
-    private _useCSSOrderProperty;
+    private _useCSSOrder;
     private _interruptable;
     private _bounce;
     private _iOSEdgeSwipeThreshold;
@@ -130,6 +130,7 @@ declare class Flicking extends Component<FlickingEvents> {
     private _initialized;
     private _plugins;
     private _isResizing;
+    private _scheduleResize;
     get control(): Control;
     get camera(): Camera;
     get renderer(): Renderer;
@@ -171,7 +172,7 @@ declare class Flicking extends Component<FlickingEvents> {
     get threshold(): FlickingOptions["threshold"];
     get dragThreshold(): FlickingOptions["dragThreshold"];
     get animationThreshold(): FlickingOptions["animationThreshold"];
-    get useCSSOrderProperty(): FlickingOptions["useCSSOrderProperty"];
+    get useCSSOrder(): FlickingOptions["useCSSOrder"];
     get interruptable(): FlickingOptions["interruptable"];
     get bounce(): FlickingOptions["bounce"];
     get iOSEdgeSwipeThreshold(): FlickingOptions["iOSEdgeSwipeThreshold"];
@@ -214,7 +215,7 @@ declare class Flicking extends Component<FlickingEvents> {
     set threshold(val: FlickingOptions["threshold"]);
     set dragThreshold(val: FlickingOptions["dragThreshold"]);
     set animationThreshold(val: FlickingOptions["animationThreshold"]);
-    set useCSSOrderProperty(val: FlickingOptions["useCSSOrderProperty"]);
+    set useCSSOrder(val: FlickingOptions["useCSSOrder"]);
     set interruptable(val: FlickingOptions["interruptable"]);
     set bounce(val: FlickingOptions["bounce"]);
     set iOSEdgeSwipeThreshold(val: FlickingOptions["iOSEdgeSwipeThreshold"]);
@@ -227,7 +228,7 @@ declare class Flicking extends Component<FlickingEvents> {
     set useResizeObserver(val: FlickingOptions["useResizeObserver"]);
     set observePanelResize(val: FlickingOptions["observePanelResize"]);
     set optimizeSizeUpdate(val: FlickingOptions["optimizeSizeUpdate"]);
-    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, circularFallback, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, nested, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, dragThreshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, preventDefaultOnDrag, disableOnInit, changeOnHold, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, observePanelResize, maxResizeDebounce, useFractionalSize, externalRenderer, renderExternal, optimizeSizeUpdate, animationThreshold, useCSSOrderProperty, }?: Partial<FlickingOptions>);
+    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, circularFallback, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, nested, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, dragThreshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, preventDefaultOnDrag, disableOnInit, changeOnHold, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, observePanelResize, maxResizeDebounce, useFractionalSize, externalRenderer, renderExternal, optimizeSizeUpdate, animationThreshold, useCSSOrder, }?: Partial<FlickingOptions>);
     init(): Promise<void>;
     destroy(): void;
     prev(duration?: number): Promise<void>;

package/dist/flicking.cjs.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
 */
 'use strict';
 
@@ -5129,11 +5129,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;
+        }
       });
     }
   };
@@ -5179,8 +5184,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();
@@ -6252,9 +6257,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 = [];
@@ -6300,7 +6306,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);
@@ -7029,22 +7035,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
@@ -7531,7 +7538,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)
@@ -7896,7 +7905,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 () {
@@ -7904,7 +7913,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;
@@ -7970,6 +7990,10 @@ var Flicking = /*#__PURE__*/function (_super) {
               element: viewport.element
             }));
             this._isResizing = false;
+            // 연속으로 resize를 호출하는 경우를 대비하기 위해서 스케줄링 반영
+            if (this._scheduleResize) {
+              this.resize();
+            }
             return [2 /*return*/];
         }
       });
@@ -8189,7 +8213,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);
 
@@ -8708,8 +8732,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);
     });