@egjs/flicking 3.8.4 → 3.9.0

package/dist/flicking.pkgd.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
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -6444,7 +6444,8 @@ version: 3.8.4
       renderExternal: false,
       resizeOnContentsReady: false,
       iOSEdgeSwipeThreshold: 30,
-      collectStatistics: true
+      collectStatistics: true,
+      useResizeObserver: true
     };
     var DEFAULT_VIEWPORT_CSS = {
       position: "relative",
@@ -8843,7 +8844,12 @@ version: 3.8.4
       __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);
         }
       };
@@ -9542,6 +9548,7 @@ version: 3.8.4
         this.applyCSSValue();
         this.setMoveType();
         this.setAxesInstance();
+        this.createPanInput();
         this.refreshPanels();
         this.setDefaultPanel();
         this.resize();
@@ -9653,7 +9660,6 @@ version: 3.8.4
           deceleration: options.deceleration,
           interruptable: true
         });
-        this.createPanInput();
       };
 
       __proto.refreshPanels = function () {
@@ -10370,6 +10376,77 @@ version: 3.8.4
       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
@@ -10419,6 +10496,7 @@ version: 3.8.4
        * @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>
        */
 
@@ -10586,18 +10664,13 @@ version: 3.8.4
 
 
         _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.
@@ -10931,11 +11004,7 @@ version: 3.8.4
         }
 
         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
 
@@ -11307,7 +11376,7 @@ version: 3.8.4
         var options = this.options;
 
         if (options.autoResize) {
-          window.addEventListener("resize", this.resize);
+          this.autoResizer.enable();
         }
 
         if (options.resizeOnContentsReady) {
@@ -11347,7 +11416,7 @@ version: 3.8.4
        */
 
 
-      Flicking.VERSION = "3.8.4";
+      Flicking.VERSION = "3.9.0";
       /**
        * Direction constant - "PREV" or "NEXT"
        * @ko 방향 상수 - "PREV" 또는 "NEXT"