@egjs/flicking 3.8.2 → 3.9.1

package/dist/flicking.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 3.8.2
+version: 3.9.1
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@egjs/component'), require('@egjs/imready'), require('@egjs/axes')) :
@@ -115,7 +115,8 @@ version: 3.8.2
       renderExternal: false,
       resizeOnContentsReady: false,
       iOSEdgeSwipeThreshold: 30,
-      collectStatistics: true
+      collectStatistics: true,
+      useResizeObserver: true
     };
     var DEFAULT_VIEWPORT_CSS = {
       position: "relative",
@@ -377,7 +378,7 @@ version: 3.8.2
       for (var i = 0; i < iterable.length; i += 1) {
         var element = iterable[i];
 
-        if (element && callback(element)) {
+        if (element != null && callback(element)) {
           return i;
         }
       }
@@ -2514,7 +2515,12 @@ version: 3.8.2
       __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);
         }
       };
@@ -3213,6 +3219,7 @@ version: 3.8.2
         this.applyCSSValue();
         this.setMoveType();
         this.setAxesInstance();
+        this.createPanInput();
         this.refreshPanels();
         this.setDefaultPanel();
         this.resize();
@@ -3324,7 +3331,6 @@ version: 3.8.2
           deceleration: options.deceleration,
           interruptable: true
         });
-        this.createPanInput();
       };
 
       __proto.refreshPanels = function () {
@@ -3372,7 +3378,7 @@ version: 3.8.2
         var relativeHangerPosition = this.getRelativeHangerPosition();
         var areaPrev = (relativeHangerPosition - relativeAnchorPosition) % sumOriginalPanelSize;
         var sizeSum = 0;
-        var panelAtLeftBoundary;
+        var panelAtLeftBoundary = null;
 
         for (var _i = 0, reversedPanels_1 = reversedPanels; _i < reversedPanels_1.length; _i++) {
           var panel = reversedPanels_1[_i];
@@ -3391,7 +3397,7 @@ version: 3.8.2
 
         var areaNext = (viewportSize - relativeHangerPosition + relativeAnchorPosition) % sumOriginalPanelSize;
         sizeSum = 0;
-        var panelAtRightBoundary;
+        var panelAtRightBoundary = null;
 
         for (var _a = 0, panels_1 = panels; _a < panels_1.length; _a++) {
           var panel = panels_1[_a];
@@ -3409,7 +3415,7 @@ version: 3.8.2
         } // Need one more set of clones on prev area of original panel 0
 
 
-        var needCloneOnPrev = panelAtLeftBoundary.getIndex() !== 0 && panelAtLeftBoundary.getIndex() <= panelAtRightBoundary.getIndex(); // Visible count of panel 0 on first screen
+        var needCloneOnPrev = panelAtLeftBoundary && panelAtRightBoundary && panelAtLeftBoundary.getIndex() !== 0 && panelAtLeftBoundary.getIndex() <= panelAtRightBoundary.getIndex(); // Visible count of panel 0 on first screen
 
         var panel0OnFirstscreen = Math.ceil((relativeHangerPosition + firstPanel.getSize() - relativeAnchorPosition) / sumOriginalPanelSize) + Math.ceil((viewportSize - relativeHangerPosition + relativeAnchorPosition) / sumOriginalPanelSize) - 1; // duplication
 
@@ -4041,6 +4047,77 @@ version: 3.8.2
       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
@@ -4090,6 +4167,7 @@ version: 3.8.2
        * @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>
        */
 
@@ -4119,7 +4197,9 @@ version: 3.8.2
           var allPanels = viewport.panelManager.allPanels();
 
           if (!options.isConstantSize) {
-            allPanels.forEach(function (panel) {
+            allPanels.filter(function (panel) {
+              return !!panel;
+            }).forEach(function (panel) {
               return panel.unCacheBbox();
             });
           }
@@ -4255,18 +4335,13 @@ version: 3.8.2
 
 
         _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 +4675,7 @@ version: 3.8.2
         }
 
         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
 
@@ -4757,6 +4828,8 @@ version: 3.8.2
       __proto.beforeSync = function (diffInfo) {
         var _this = this;
 
+        var _a;
+
         var maintained = diffInfo.maintained,
             added = diffInfo.added,
             changed = diffInfo.changed,
@@ -4848,8 +4921,12 @@ version: 3.8.2
         }
 
         panelManager.replacePanels(newPanels, newClones);
+        var currentPanelIndex = (_a = currentPanel === null || currentPanel === void 0 ? void 0 : currentPanel.getIndex()) !== null && _a !== void 0 ? _a : -1;
+        var currentPanelIsRemoved = findIndex(removed, function (index) {
+          return index === currentPanelIndex;
+        }) >= 0;
 
-        if (!currentPanel && newPanels.length > 0) {
+        if ((!currentPanel || currentPanelIsRemoved) && newPanels.length > 0) {
           viewport.setCurrentPanel(newPanels[0]);
         } else if (newPanels.length <= 0) {
           viewport.setCurrentPanel(undefined);
@@ -4970,7 +5047,7 @@ version: 3.8.2
         var options = this.options;
 
         if (options.autoResize) {
-          window.addEventListener("resize", this.resize);
+          this.autoResizer.enable();
         }
 
         if (options.resizeOnContentsReady) {
@@ -5010,7 +5087,7 @@ version: 3.8.2
        */
 
 
-      Flicking.VERSION = "3.8.2";
+      Flicking.VERSION = "3.9.1";
       /**
        * Direction constant - "PREV" or "NEXT"
        * @ko 방향 상수 - "PREV" 또는 "NEXT"