@egjs/flicking 4.11.5-beta.1 → 4.11.5-beta.3

package/declaration/Flicking.d.ts

@@ -1,6 +1,5 @@
 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";
@@ -123,7 +122,6 @@ 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/camera/Camera.d.ts

@@ -12,6 +12,7 @@ declare class Camera {
     private _mode;
     private _el;
     private _transform;
+    private _lookedOffset;
     private _position;
     private _alignPos;
     private _offset;

package/declaration/core/AutoResizer.d.ts

@@ -9,7 +9,6 @@ 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.5-beta.1
+version: 4.11.5-beta.3
 */
 'use strict';
 
@@ -12,7 +12,7 @@ var Component = require('@egjs/component');
 var Axes = require('@egjs/axes');
 var ImReady = require('@egjs/imready');
 
-/******************************************************************************
+/*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -26,7 +26,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise */
 
 var extendStatics = function (d, b) {
   extendStatics = Object.setPrototypeOf || {
@@ -111,7 +111,7 @@ function __generator(thisArg, body) {
   }
   function step(op) {
     if (f) throw new TypeError("Generator is already executing.");
-    while (g && (g = 0, op[0] && (_ = 0)), _) try {
+    while (_) try {
       if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
       if (y = 0, t) op = [op[0] & 2, t.value];
       switch (op[0]) {
@@ -215,10 +215,6 @@ function __spread() {
   for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
   return ar;
 }
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
 
 /*
  * Copyright (c) 2015 NAVER Corp.
@@ -910,10 +906,6 @@ 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;
@@ -976,13 +968,9 @@ var AutoResizer = /*#__PURE__*/function () {
     }
     if (flicking.useResizeObserver && !!window.ResizeObserver) {
       var viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;
-      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;
+      var resizeObserver = viewportSizeNot0 ? new ResizeObserver(this._skipFirstResize) : new ResizeObserver(this._onResize);
+      resizeObserver.observe(flicking.viewport.element);
+      this._resizeObserver = resizeObserver;
     } else {
       window.addEventListener("resize", this._onResize);
     }
@@ -1001,12 +989,6 @@ var AutoResizer = /*#__PURE__*/function () {
     this._enabled = false;
     return this;
   };
-  __proto.observe = function (element) {
-    if (this._resizeObserver) {
-      this._resizeObserver.observe(element);
-    }
-    return this;
-  };
   return AutoResizer;
 }();
 
@@ -3727,6 +3709,7 @@ var Camera = /*#__PURE__*/function () {
     var _this = this;
     var _b = (_a === void 0 ? {} : _a).align,
       align = _b === void 0 ? ALIGN.CENTER : _b;
+    this._lookedOffset = 0;
     this._checkTranslateSupport = function () {
       var e_1, _a;
       var transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
@@ -4086,6 +4069,8 @@ var Camera = /*#__PURE__*/function () {
    */
   __proto.lookAt = function (pos) {
     var _this = this;
+    var prevOffset = this._offset;
+    var isChangedOffset = this._lookedOffset !== prevOffset;
     var flicking = getFlickingAttached(this._flicking);
     var prevPos = this._position;
     this._position = pos;
@@ -4093,10 +4078,15 @@ var Camera = /*#__PURE__*/function () {
     this._refreshVisiblePanels();
     this._checkNeedPanel();
     this._checkReachEnd(prevPos, pos);
-    if (toggled) {
+    if (isChangedOffset || toggled) {
       void flicking.renderer.render().then(function () {
         _this.updateOffset();
+        _this._lookedOffset = _this._offset;
       });
+    } else if (isChangedOffset) {
+      // sync offset for renderOnlyVisible on resize
+      this.updateOffset();
+      this._lookedOffset = this._offset;
     } else {
       this.applyTransform();
     }
@@ -4355,6 +4345,7 @@ var Camera = /*#__PURE__*/function () {
   };
   __proto._resetInternalValues = function () {
     this._position = 0;
+    this._lookedOffset = 0;
     this._alignPos = 0;
     this._offset = 0;
     this._circularOffset = 0;
@@ -4780,11 +4771,6 @@ 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) {
@@ -6186,19 +6172,6 @@ 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
     /**
@@ -7051,9 +7024,6 @@ var Flicking = /*#__PURE__*/function (_super) {
     // OTHERS
     set: function (val) {
       this._autoResize = val;
-      if (!this._initialized) {
-        return;
-      }
       if (val) {
         this._autoResizer.enable();
       } else {
@@ -7076,7 +7046,7 @@ var Flicking = /*#__PURE__*/function (_super) {
     },
     set: function (val) {
       this._useResizeObserver = val;
-      if (this._initialized && this._autoResize) {
+      if (this._autoResize) {
         this._autoResizer.enable();
       }
     },
@@ -7873,7 +7843,7 @@ var Flicking = /*#__PURE__*/function (_super) {
    * Flicking.VERSION;  // ex) 4.0.0
    * ```
    */
-  Flicking.VERSION = "4.11.5-beta.1";
+  Flicking.VERSION = "4.11.5-beta.3";
   return Flicking;
 }(Component);