@egjs/flicking 4.11.4 → 4.11.5-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.11.4",
+	"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,13 @@ 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
   /**
    * Whether Flicking's {@link Flicking#init init()} is called.
@@ -906,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 {
@@ -916,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;
@@ -36,7 +40,11 @@ class AutoResizer {
         ? new ResizeObserver(this._skipFirstResize)
         : new ResizeObserver(this._onResize);
 
-      resizeObserver.observe(flicking.viewport.element);
+      [
+        flicking.viewport.element,
+        flicking.camera.element,
+        ...flicking.panels.map(panel => panel.element)
+      ].forEach((element) => { resizeObserver.observe(element); });
 
       this._resizeObserver = resizeObserver;
     } else {
@@ -64,6 +72,13 @@ 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;

package/src/renderer/Renderer.ts

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