@egjs/flicking 3.8.4 → 3.9.0

package/declaration/Flicking.d.ts

@@ -1,6 +1,6 @@
 import Component from "@egjs/component";
-import { FlickingOptions, FlickingEvent, Direction, EventType, FlickingPanel, FlickingStatus, Plugin, ElementLike, DestroyOption, BeforeSyncResult, SyncResult, ChangeEvent, SelectEvent, NeedPanelEvent, VisibleChangeEvent, ContentErrorEvent } from "./types";
 import { DiffResult } from "@egjs/list-differ";
+import { FlickingOptions, FlickingEvent, Direction, EventType, FlickingPanel, FlickingStatus, Plugin, ElementLike, DestroyOption, BeforeSyncResult, SyncResult, ChangeEvent, SelectEvent, NeedPanelEvent, VisibleChangeEvent, ContentErrorEvent } from "./types";
 declare class Flicking extends Component<{
     holdStart: FlickingEvent;
     holdEnd: FlickingEvent;
@@ -20,6 +20,7 @@ declare class Flicking extends Component<{
     options: FlickingOptions;
     private wrapper;
     private viewport;
+    private autoResizer;
     private contentsReadyChecker;
     private eventContext;
     private isPanelChangedAtBeforeSync;

package/declaration/components/AutoResizer.d.ts

@@ -0,0 +1,12 @@
+import Flicking from "../Flicking";
+declare class AutoResizer {
+    private flicking;
+    private enabled;
+    private resizeObserver;
+    private skipFirstResize;
+    constructor(flicking: Flicking);
+    enable(): this;
+    disable(): this;
+    private onResize;
+}
+export default AutoResizer;

package/declaration/types.d.ts

@@ -40,6 +40,7 @@ export interface FlickingOptions {
     iOSEdgeSwipeThreshold: number;
     resizeOnContentsReady: boolean;
     collectStatistics: boolean;
+    useResizeObserver: boolean;
 }
 export declare type MoveTypeObjectOption = MoveTypeSnapOption | MoveTypeFreeScrollOption;
 export declare type MoveTypeStringOption = MoveTypeObjectOption["type"];

package/dist/flicking.esm.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 3.8.4
+version: 3.9.0
 */
 import Component from '@egjs/component';
 import ImReady from '@egjs/imready';
@@ -113,7 +113,8 @@ var DEFAULT_OPTIONS = {
   renderExternal: false,
   resizeOnContentsReady: false,
   iOSEdgeSwipeThreshold: 30,
-  collectStatistics: true
+  collectStatistics: true,
+  useResizeObserver: true
 };
 var DEFAULT_VIEWPORT_CSS = {
   position: "relative",
@@ -2512,7 +2513,12 @@ function () {
   __proto.disable = function () {
     if (this.panInput) {
       this.panInput.destroy();
-      this.panInput = null;
+      this.panInput = null; // Refresh Axes instance
+
+      this.axes.destroy();
+      this.setAxesInstance();
+      this.updateScrollArea();
+      this.updateAxesPosition(this.state.position);
       this.stateMachine.transitTo(STATE_TYPE.IDLE);
     }
   };
@@ -3211,6 +3217,7 @@ function () {
     this.applyCSSValue();
     this.setMoveType();
     this.setAxesInstance();
+    this.createPanInput();
     this.refreshPanels();
     this.setDefaultPanel();
     this.resize();
@@ -3322,7 +3329,6 @@ function () {
       deceleration: options.deceleration,
       interruptable: true
     });
-    this.createPanInput();
   };
 
   __proto.refreshPanels = function () {
@@ -4039,6 +4045,77 @@ function () {
   return Viewport;
 }();
 
+var AutoResizer =
+/*#__PURE__*/
+function () {
+  function AutoResizer(flicking) {
+    var _this = this;
+
+    this.skipFirstResize = function () {
+      var isFirstResize = true;
+      return function () {
+        if (isFirstResize) {
+          isFirstResize = false;
+          return;
+        }
+
+        _this.onResize();
+      };
+    }();
+
+    this.onResize = function () {
+      _this.flicking.resize();
+    };
+
+    this.flicking = flicking;
+    this.enabled = false;
+    this.resizeObserver = null;
+  }
+
+  var __proto = AutoResizer.prototype;
+
+  __proto.enable = function () {
+    var flicking = this.flicking;
+
+    if (this.enabled) {
+      this.disable();
+    }
+
+    if (flicking.options.useResizeObserver && !!window.ResizeObserver) {
+      var flickingEl = flicking.getElement();
+      var viewportSizeNot0 = flickingEl.clientWidth !== 0 || flickingEl.clientHeight !== 0;
+      var resizeObserver = viewportSizeNot0 ? new ResizeObserver(this.skipFirstResize) : new ResizeObserver(this.onResize);
+      resizeObserver.observe(flickingEl);
+      this.resizeObserver = resizeObserver;
+    } else {
+      window.addEventListener("resize", this.onResize);
+    }
+
+    this.enabled = true;
+    return this;
+  };
+
+  __proto.disable = function () {
+    if (!this.enabled) {
+      return this;
+    }
+
+    var resizeObserver = this.resizeObserver;
+
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      this.resizeObserver = null;
+    } else {
+      window.removeEventListener("resize", this.onResize);
+    }
+
+    this.enabled = false;
+    return this;
+  };
+
+  return AutoResizer;
+}();
+
 /**
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
@@ -4088,6 +4165,7 @@ function (_super) {
    * @param {boolean} [options.isConstantSize=false] Whether all panels have a constant size that won't be changed after resize. Enabling this option can increase performance while recalculating panel size.<ko>모든 패널의 크기가 불변인지의 여부. 이 옵션을 'true'로 설정하면 패널 크기 재설정시에 성능을 높일 수 있다.</ko>
    * @param {boolean} [options.renderExternal=false] Whether to use external rendering. It will delegate DOM manipulation and can synchronize the rendered state by calling `sync()` method. You can use this option to use in frameworks like React, Vue, Angular, which has its states and rendering methods.<ko>외부 렌더링을 사용할 지의 여부. 이 옵션을 사용시 렌더링을 외부에 위임할 수 있고, `sync()`를 호출하여 그 상태를 동기화할 수 있다. 이 옵션을 사용하여, React, Vue, Angular 등 자체적인 상태와 렌더링 방법을 갖는 프레임워크에 대응할 수 있다.</ko>
    * @param {boolean} [options.resizeOnContentsReady=false] Whether to resize the Flicking after the image/video elements inside viewport are ready.<br/>Use this property to prevent wrong Flicking layout caused by dynamic image / video sizes.<ko>Flicking 내부의 이미지 / 비디오 엘리먼트들이 전부 로드되었을 때 Flicking의 크기를 재계산하기 위한 옵션.<br/>이미지 / 비디오 크기가 고정 크기가 아닐 경우 사용하여 레이아웃이 잘못되는 것을 방지할 수 있다.</ko>
+   * @param {boolean} [options.useResizeObserver=true] Whether to listen {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}'s event instead of Window's {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} event when using the `autoResize` option<ko>autoResize 옵션 사용시 {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}의 이벤트를 Window객체의 {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} 이벤트 대신 수신할지 여부를 설정합니다</ko>
    * @param {boolean} [options.collectStatistics=true] Whether to collect statistics on how you are using `Flicking`. These statistical data do not contain any personal information and are used only as a basis for the development of a user-friendly product.<ko>어떻게 `Flicking`을 사용하고 있는지에 대한 통계 수집 여부를 나타낸다. 이 통계자료는 개인정보를 포함하고 있지 않으며 오직 사용자 친화적인 제품으로 발전시키기 위한 근거자료로서 활용한다.</ko>
    */
 
@@ -4255,18 +4333,13 @@ function (_super) {
 
 
     _this.viewport = new Viewport(_this, _this.options, _this.triggerEvent);
+    _this.autoResizer = new AutoResizer(_this);
 
     _this.listenInput();
 
     _this.listenResize();
 
-    return _this; // if (this.options.collectStatistics) {
-    //   sendEvent(
-    //     "usage",
-    //     "options",
-    //     options,
-    //   );
-    // }
+    return _this;
   }
   /**
    * Move to the previous panel if it exists.
@@ -4600,11 +4673,7 @@ function (_super) {
     }
 
     this.off();
-
-    if (this.options.autoResize) {
-      window.removeEventListener("resize", this.resize);
-    }
-
+    this.autoResizer.disable();
     this.viewport.destroy(option);
     (_a = this.contentsReadyChecker) === null || _a === void 0 ? void 0 : _a.destroy(); // release resources
 
@@ -4976,7 +5045,7 @@ function (_super) {
     var options = this.options;
 
     if (options.autoResize) {
-      window.addEventListener("resize", this.resize);
+      this.autoResizer.enable();
     }
 
     if (options.resizeOnContentsReady) {
@@ -5016,7 +5085,7 @@ function (_super) {
    */
 
 
-  Flicking.VERSION = "3.8.4";
+  Flicking.VERSION = "3.9.0";
   /**
    * Direction constant - "PREV" or "NEXT"
    * @ko 방향 상수 - "PREV" 또는 "NEXT"