@egjs/flicking 4.14.2-beta.1 → 4.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.14.2-beta.1",
+	"version": "4.15.0",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.cjs.js",
 	"module": "dist/flicking.esm.js",

package/src/Flicking.ts

@@ -119,7 +119,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;
@@ -203,7 +203,7 @@ class Flicking extends Component<FlickingEvents> {
   private _threshold: FlickingOptions["threshold"];
   private _dragThreshold: FlickingOptions["dragThreshold"];
   private _animationThreshold: FlickingOptions["animationThreshold"];
-  private _useCSSOrderProperty: FlickingOptions["useCSSOrderProperty"];
+  private _useCSSOrder: FlickingOptions["useCSSOrder"];
 
   private _interruptable: FlickingOptions["interruptable"];
   private _bounce: FlickingOptions["bounce"];
@@ -230,6 +230,7 @@ class Flicking extends Component<FlickingEvents> {
   private _initialized: boolean;
   private _plugins: Plugin[];
   private _isResizing: boolean;
+  private _scheduleResize = false;
 
   // Components
   /**
@@ -719,17 +720,18 @@ class Flicking extends Component<FlickingEvents> {
     return this._animationThreshold;
   }
   /**
-   * 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 )}
    */
-  public get useCSSOrderProperty() {
-    return this._useCSSOrderProperty;
+  public get useCSSOrder() {
+    return this._useCSSOrder;
   }
 
   /**
@@ -1148,8 +1150,8 @@ class Flicking extends Component<FlickingEvents> {
   public set animationThreshold(val: FlickingOptions["animationThreshold"]) {
     this._animationThreshold = val;
   }
-  public set useCSSOrderProperty(val: FlickingOptions["useCSSOrderProperty"]) {
-    this._useCSSOrderProperty = val;
+  public set useCSSOrder(val: FlickingOptions["useCSSOrder"]) {
+    this._useCSSOrder = val;
   }
 
   public set interruptable(val: FlickingOptions["interruptable"]) {
@@ -1327,7 +1329,7 @@ class Flicking extends Component<FlickingEvents> {
     renderExternal = null,
     optimizeSizeUpdate = false,
     animationThreshold = 0.5,
-    useCSSOrderProperty = false,
+    useCSSOrder = false,
   }: Partial<FlickingOptions> = {}) {
     super();
 
@@ -1377,7 +1379,7 @@ class Flicking extends Component<FlickingEvents> {
     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));
@@ -1461,7 +1463,9 @@ class Flicking extends Component<FlickingEvents> {
 
     this._plugins.forEach((plugin) => plugin.destroy());
 
+    this._scheduleResize = false;
     this._initialized = false;
+    this._isResizing = false;
   }
 
   /**
@@ -1859,11 +1863,20 @@ class Flicking extends Component<FlickingEvents> {
    * @method
    * @fires Flicking#beforeResize
    * @fires Flicking#afterResize
-   * @return {this}
+   * @return {boolean}
    */
   public async resize(): Promise<void> {
-    if (this._isResizing) return;
+    if (!this._initialized) {
+      return;
+    }
+    if (this._isResizing) {
+      // resize를 연속으로 발생하면 무시하기에 마지막 viewport를 사이즈를 알 수 없음.
+      // resize를 1번 더 실행할 수 잇는 스케줄링 등록
+      this._scheduleResize = true;
+      return;
+    }
 
+    this._scheduleResize = false;
     this._isResizing = true;
 
     const viewport = this._viewport;
@@ -1910,6 +1923,7 @@ class Flicking extends Component<FlickingEvents> {
     camera.updatePanelOrder();
     camera.updateOffset();
     await renderer.render();
+
     if (!this._initialized) {
       return;
     }
@@ -1939,6 +1953,12 @@ class Flicking extends Component<FlickingEvents> {
     );
 
     this._isResizing = false;
+
+    // 연속으로 resize를 호출하는 경우를 대비하기 위해서 스케줄링 반영
+    if (this._scheduleResize) {
+      this.resize();
+    }
+    return;
   }
 
   /**
@@ -2136,8 +2156,8 @@ class Flicking extends Component<FlickingEvents> {
     const nearestAnchor = camera.findNearestAnchor(defaultPanel.position);
     const initialPanel =
       nearestAnchor &&
-      defaultPanel.position !== nearestAnchor.panel.position &&
-      defaultPanel.index !== nearestAnchor.panel.index
+        defaultPanel.position !== nearestAnchor.panel.position &&
+        defaultPanel.index !== nearestAnchor.panel.index
         ? nearestAnchor.panel
         : defaultPanel;
     control.setActive(initialPanel, null, false);

package/src/cfc/getRenderingPanels.ts

@@ -13,11 +13,11 @@ export default <T>(flicking: Flicking, diffResult: DiffResult<T>) => {
     return map;
   }, {});
   const renderingPanels = flicking.panels
-      .filter(panel => !removedPanels[panel.index]);
+    .filter(panel => !removedPanels[panel.index]);
 
 
-  if (!flicking.useCSSOrderProperty) {
-    // useCSSOrderProperty를 사용하게 되는 경우 sort를 하지 않는다.
+  if (!flicking.useCSSOrder) {
+    // useCSSOrder를 사용하게 되는 경우 sort를 하지 않는다.
     renderingPanels.sort((panel1, panel2) => (panel1.position + panel1.offset) - (panel2.position + panel2.offset));
   }
 
@@ -26,4 +26,3 @@ export default <T>(flicking: Flicking, diffResult: DiffResult<T>) => {
     ...diffResult.added.map(idx => diffResult.list[idx])
   ];
 };
-

package/src/renderer/Renderer.ts

@@ -521,7 +521,7 @@ abstract class Renderer {
     const firstPanelSizeObj = {
       size: panelSize,
       margin: referencePanel.margin,
-      ...(!flicking.horizontal && { height: referencePanel.height})
+      ...(!flicking.horizontal && { height: referencePanel.height })
     };
 
     if (!flicking.noPanelStyleOverride) {
@@ -566,12 +566,15 @@ abstract class Renderer {
 
     flicking.camera.applyTransform();
 
-    if (flicking.useCSSOrderProperty) {
-      // useCSSOrderProperty를 사용하는 경우 DOM은 변화가 없지만 대신 CSS Order가 추가 된다.
-      const panels = flicking.panels;
+    if (flicking.useCSSOrder) {
+      // `useCSSOrder`를 사용하는 경우 DOM은 변화가 없지만 대신 css `order`값을 주입
+      const renderedPanels = flicking.renderer.panels.filter(panel => panel.rendered);
 
       this._strategy.getRenderingIndexesByOrder(flicking).forEach((domIndex, index) => {
-        panels[domIndex].element.style.order = `${index}`;
+        if (renderedPanels[domIndex].element) {
+          // 방어 코드 추가
+          renderedPanels[domIndex].element.style.order = `${index}`;
+        }
       });
     }
   }

package/src/renderer/VanillaRenderer.ts

@@ -43,8 +43,8 @@ class VanillaRenderer extends Renderer {
 
     let reversedElements: HTMLElement[] = [];
 
-    if (flicking.useCSSOrderProperty) {
-      // useCSSOrderProperty를 사용하는 경우 원본 그대로 렌더링
+    if (flicking.useCSSOrder) {
+      // useCSSOrder를 사용하는 경우 DOM은 변화가 없지만 대신 css `order`값을 주입
       reversedElements = this.getRenderedPanels().map(panel => panel.element).reverse();
     } else {
       reversedElements = this._strategy