@egjs/flicking 4.11.5-beta.0 → 4.11.5-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.11.5-beta.0",
+	"version": "4.11.5-beta.1",
 	"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

@@ -218,6 +218,12 @@ class Flicking extends Component<FlickingEvents> {
    * @see Viewport
    */
   public get viewport() { return this._viewport; }
+  /**
+   * {@link AutoResizer} instance of the Flicking
+   * @ko 현재 Flicking에 활성화된 {@link AutoResizer} 인스턴스
+   * @internal
+   * @readonly
+   */
   public get autoResizer() { return this._autoResizer; }
   // Internal States
   /**
@@ -907,6 +913,10 @@ class Flicking extends Component<FlickingEvents> {
   public set autoResize(val: FlickingOptions["autoResize"]) {
     this._autoResize = val;
 
+    if (!this._initialized) {
+      return;
+    }
+
     if (val) {
       this._autoResizer.enable();
     } else {
@@ -917,7 +927,7 @@ class Flicking extends Component<FlickingEvents> {
   public set useResizeObserver(val: FlickingOptions["useResizeObserver"]) {
     this._useResizeObserver = val;
 
-    if (this._autoResize) {
+    if (this._initialized && this._autoResize) {
       this._autoResizer.enable();
     }
   }

package/src/core/AutoResizer.ts

@@ -4,6 +4,10 @@
  */
 import Flicking from "../Flicking";
 
+/**
+ * A component that detects size change and trigger resize method when the autoResize option is used
+ * @ko autoResize 옵션을 사용할 때 크기 변화를 감지하고 Flicking의 resize를 호출하는 컴포넌트
+ */
 class AutoResizer {
   private _flicking: Flicking;
   private _enabled: boolean;
@@ -38,9 +42,9 @@ class AutoResizer {
 
       [
         flicking.viewport.element,
-        ...(flicking.camera.element ? [flicking.camera.element] : []),
-        ...flicking.panels.map(panel => panel.element),
-      ].forEach((element) => { resizeObserver.observe(element) });
+        flicking.camera.element,
+        ...flicking.panels.map(panel => panel.element)
+      ].forEach((element) => { resizeObserver.observe(element); });
 
       this._resizeObserver = resizeObserver;
     } else {
@@ -68,10 +72,18 @@ class AutoResizer {
     return this;
   }
 
+  public observe(element: Element): this {
+    if (this._resizeObserver) {
+      this._resizeObserver.observe(element);
+    }
+    return this;
+  }
+
   private _onResize = () => {
     const flicking = this._flicking;
     const resizeDebounce = flicking.resizeDebounce;
     const maxResizeDebounce = flicking.maxResizeDebounce;
+
     if (resizeDebounce <= 0) {
       void flicking.resize();
     } else {

package/src/renderer/Renderer.ts

@@ -335,8 +335,10 @@ abstract class Renderer {
     // Update camera & control
     this._updateCameraAndControl();
 
-    if (flicking.autoResize) {
-      flicking.autoResizer.enable();
+    if (flicking.autoResize && flicking.useResizeObserver) {
+      panelsAdded.forEach((panel) => {
+        flicking.autoResizer.observe(panel.element);
+      });
     }
 
     void this.render();