@egjs/flicking 4.11.4 → 4.11.5-beta.1

package/declaration/Flicking.d.ts

@@ -1,5 +1,6 @@
 import Component from "@egjs/component";
 import Viewport from "./core/Viewport";
+import AutoResizer from "./core/AutoResizer";
 import { Panel } from "./core/panel";
 import VirtualManager, { VirtualOptions } from "./core/VirtualManager";
 import { Control } from "./control";
@@ -122,6 +123,7 @@ declare class Flicking extends Component<FlickingEvents> {
     get camera(): Camera;
     get renderer(): Renderer;
     get viewport(): Viewport;
+    get autoResizer(): AutoResizer;
     get initialized(): boolean;
     get circularEnabled(): boolean;
     get virtualEnabled(): boolean;

package/declaration/core/AutoResizer.d.ts

@@ -9,6 +9,7 @@ declare class AutoResizer {
     constructor(flicking: Flicking);
     enable(): this;
     disable(): this;
+    observe(element: Element): this;
     private _onResize;
     private _doScheduledResize;
     private _skipFirstResize;

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.11.4
+version: 4.11.5-beta.1
 */
 'use strict';
 
@@ -910,6 +910,10 @@ var Viewport = /*#__PURE__*/function () {
   return Viewport;
 }();
 
+/**
+ * A component that detects size change and trigger resize method when the autoResize option is used
+ * @ko autoResize 옵션을 사용할 때 크기 변화를 감지하고 Flicking의 resize를 호출하는 컴포넌트
+ */
 var AutoResizer = /*#__PURE__*/function () {
   function AutoResizer(flicking) {
     var _this = this;
@@ -972,9 +976,13 @@ var AutoResizer = /*#__PURE__*/function () {
     }
     if (flicking.useResizeObserver && !!window.ResizeObserver) {
       var viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;
-      var resizeObserver = viewportSizeNot0 ? new ResizeObserver(this._skipFirstResize) : new ResizeObserver(this._onResize);
-      resizeObserver.observe(flicking.viewport.element);
-      this._resizeObserver = resizeObserver;
+      var resizeObserver_1 = viewportSizeNot0 ? new ResizeObserver(this._skipFirstResize) : new ResizeObserver(this._onResize);
+      __spread([flicking.viewport.element, flicking.camera.element], flicking.panels.map(function (panel) {
+        return panel.element;
+      })).forEach(function (element) {
+        resizeObserver_1.observe(element);
+      });
+      this._resizeObserver = resizeObserver_1;
     } else {
       window.addEventListener("resize", this._onResize);
     }
@@ -993,6 +1001,12 @@ var AutoResizer = /*#__PURE__*/function () {
     this._enabled = false;
     return this;
   };
+  __proto.observe = function (element) {
+    if (this._resizeObserver) {
+      this._resizeObserver.observe(element);
+    }
+    return this;
+  };
   return AutoResizer;
 }();
 
@@ -4766,6 +4780,11 @@ var Renderer = /*#__PURE__*/function () {
     var activePanel = control.activePanel;
     // Update camera & control
     this._updateCameraAndControl();
+    if (flicking.autoResize && flicking.useResizeObserver) {
+      panelsAdded.forEach(function (panel) {
+        flicking.autoResizer.observe(panel.element);
+      });
+    }
     void this.render();
     if (!flicking.animating) {
       if (!activePanel || activePanel.removed) {
@@ -6167,6 +6186,19 @@ var Flicking = /*#__PURE__*/function (_super) {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "autoResizer", {
+    /**
+     * {@link AutoResizer} instance of the Flicking
+     * @ko 현재 Flicking에 활성화된 {@link AutoResizer} 인스턴스
+     * @internal
+     * @readonly
+     */
+    get: function () {
+      return this._autoResizer;
+    },
+    enumerable: false,
+    configurable: true
+  });
   Object.defineProperty(__proto, "initialized", {
     // Internal States
     /**
@@ -7019,6 +7051,9 @@ var Flicking = /*#__PURE__*/function (_super) {
     // OTHERS
     set: function (val) {
       this._autoResize = val;
+      if (!this._initialized) {
+        return;
+      }
       if (val) {
         this._autoResizer.enable();
       } else {
@@ -7041,7 +7076,7 @@ var Flicking = /*#__PURE__*/function (_super) {
     },
     set: function (val) {
       this._useResizeObserver = val;
-      if (this._autoResize) {
+      if (this._initialized && this._autoResize) {
         this._autoResizer.enable();
       }
     },
@@ -7838,7 +7873,7 @@ var Flicking = /*#__PURE__*/function (_super) {
    * Flicking.VERSION;  // ex) 4.0.0
    * ```
    */
-  Flicking.VERSION = "4.11.4";
+  Flicking.VERSION = "4.11.5-beta.1";
   return Flicking;
 }(Component);