@egjs/flicking 4.3.1 → 4.5.0

package/src/camera/mode/CameraMode.ts

@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Flicking from "../../Flicking";
+import Panel from "../../core/panel/Panel";
+import AnchorPoint from "../../core/AnchorPoint";
+import { clamp } from "../../utils";
+
+/**
+ * A mode of camera
+ */
+abstract class CameraMode {
+  protected _flicking: Flicking;
+
+  /** */
+  public constructor(flicking: Flicking) {
+    this._flicking = flicking;
+  }
+
+  public abstract checkAvailability(): boolean;
+  public abstract getRange(): { min: number; max: number };
+
+  public getAnchors(): AnchorPoint[] {
+    const panels = this._flicking.renderer.panels;
+
+    return panels.map((panel, index) => new AnchorPoint({
+      index,
+      position: panel.position,
+      panel
+    }));
+  }
+
+  public findAnchorIncludePosition(position: number): AnchorPoint | null {
+    const anchors = this._flicking.camera.anchorPoints;
+    const anchorsIncludingPosition = anchors.filter(anchor => anchor.panel.includePosition(position, true));
+
+    return anchorsIncludingPosition.reduce((nearest: AnchorPoint | null, anchor) => {
+      if (!nearest) return anchor;
+
+      return Math.abs(nearest.position - position) < Math.abs(anchor.position - position)
+        ? nearest
+        : anchor;
+    }, null);
+  }
+
+  public clampToReachablePosition(position: number): number {
+    const camera = this._flicking.camera;
+    const range = camera.range;
+
+    return clamp(position, range.min, range.max);
+  }
+
+  public getCircularOffset(): number {
+    return 0;
+  }
+
+  public canReach(panel: Panel): boolean {
+    const camera = this._flicking.camera;
+    const range = camera.range;
+
+    if (panel.removed) return false;
+
+    const panelPos = panel.position;
+
+    return panelPos >= range.min && panelPos <= range.max;
+  }
+
+  public canSee(panel: Panel): boolean {
+    const camera = this._flicking.camera;
+    const visibleRange = camera.visibleRange;
+    // Should not include margin, as we don't declare what the margin is visible as what the panel is visible.
+    return panel.isVisibleOnRange(visibleRange.min, visibleRange.max);
+  }
+}
+
+export default CameraMode;

package/src/camera/mode/CircularCameraMode.ts

@@ -0,0 +1,171 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Panel from "../../core/panel/Panel";
+import AnchorPoint from "../../core/AnchorPoint";
+import { DIRECTION } from "../../const/external";
+import { circulatePosition } from "../../utils";
+
+import CameraMode from "./CameraMode";
+
+/**
+ * A {@link Camera} mode that connects the last panel and the first panel, enabling continuous loop
+ * @ko 첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 {@link Camera} 모드
+ */
+class CircularCameraMode extends CameraMode {
+  public checkAvailability(): boolean {
+    const flicking = this._flicking;
+    const renderer = flicking.renderer;
+    const panels = renderer.panels;
+
+    if (panels.length <= 0) {
+      return false;
+    }
+
+    const firstPanel = panels[0];
+    const lastPanel = panels[panels.length - 1];
+    const firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;
+    const lastPanelNext = lastPanel.range.max + lastPanel.margin.next;
+
+    const visibleSize = flicking.camera.size;
+    const panelSizeSum = lastPanelNext - firstPanelPrev;
+
+    const canSetCircularMode = panels
+      .every(panel => panelSizeSum - panel.size >= visibleSize);
+
+    return canSetCircularMode;
+  }
+
+  public getRange(): { min: number; max: number } {
+    const flicking = this._flicking;
+    const panels = flicking.renderer.panels;
+
+    if (panels.length <= 0) {
+      return { min: 0, max: 0 };
+    }
+
+    const firstPanel = panels[0];
+    const lastPanel = panels[panels.length - 1];
+    const firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;
+    const lastPanelNext = lastPanel.range.max + lastPanel.margin.next;
+
+    return { min: firstPanelPrev, max: lastPanelNext };
+  }
+
+  public getAnchors(): AnchorPoint[] {
+    const flicking = this._flicking;
+    const panels = flicking.renderer.panels;
+
+    return panels.map((panel, index) => new AnchorPoint({
+      index,
+      position: panel.position,
+      panel
+    }));
+  }
+
+  public findAnchorIncludePosition(position: number): AnchorPoint | null {
+    const camera = this._flicking.camera;
+    const range = camera.range;
+    const anchors = camera.anchorPoints;
+    const rangeDiff = camera.rangeDiff;
+    const anchorCount = anchors.length;
+    const positionInRange = circulatePosition(position, range.min, range.max);
+
+    let anchorInRange: AnchorPoint | null = super.findAnchorIncludePosition(positionInRange);
+
+    if (anchorCount > 0 && (position === range.min || position === range.max)) {
+      const possibleAnchors = [
+        anchorInRange,
+        new AnchorPoint({
+          index: 0,
+          position: anchors[0].position + rangeDiff,
+          panel: anchors[0].panel
+        }),
+        new AnchorPoint({
+          index: anchorCount - 1,
+          position: anchors[anchorCount - 1].position - rangeDiff,
+          panel: anchors[anchorCount - 1].panel
+        })
+      ].filter(anchor => !!anchor) as AnchorPoint[];
+
+      anchorInRange = possibleAnchors.reduce((nearest: AnchorPoint | null, anchor) => {
+        if (!nearest) return anchor;
+
+        return Math.abs(nearest.position - position) < Math.abs(anchor.position - position)
+          ? nearest
+          : anchor;
+      }, null);
+    }
+
+    if (!anchorInRange) return null;
+
+    if (position < range.min) {
+      const loopCount = -Math.floor((range.min - position) / rangeDiff) - 1;
+
+      return new AnchorPoint({
+        index: anchorInRange.index,
+        position: anchorInRange.position + rangeDiff * loopCount,
+        panel: anchorInRange.panel
+      });
+    } else if (position > range.max) {
+      const loopCount = Math.floor((position - range.max) / rangeDiff) + 1;
+
+      return new AnchorPoint({
+        index: anchorInRange.index,
+        position: anchorInRange.position + rangeDiff * loopCount,
+        panel: anchorInRange.panel
+      });
+    }
+
+    return anchorInRange;
+  }
+
+  public getCircularOffset(): number {
+    const flicking = this._flicking;
+    const camera = flicking.camera;
+
+    if (!camera.circularEnabled) return 0;
+
+    const toggled = flicking.panels.filter(panel => panel.toggled);
+    const toggledPrev = toggled.filter(panel => panel.toggleDirection === DIRECTION.PREV);
+    const toggledNext = toggled.filter(panel => panel.toggleDirection === DIRECTION.NEXT);
+
+    return this._calcPanelAreaSum(toggledPrev) - this._calcPanelAreaSum(toggledNext);
+  }
+
+  public clampToReachablePosition(position: number): number {
+    // Basically all position is reachable for circular camera
+    return position;
+  }
+
+  public canReach(panel: Panel): boolean {
+    if (panel.removed) return false;
+
+    // Always reachable on circular mode
+    return true;
+  }
+
+  public canSee(panel: Panel): boolean {
+    const camera = this._flicking.camera;
+    const range = camera.range;
+    const rangeDiff = camera.rangeDiff;
+    const visibleRange = camera.visibleRange;
+    const visibleInCurrentRange = super.canSee(panel);
+
+    // Check looped visible area for circular case
+    if (visibleRange.min < range.min) {
+      return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff);
+    } else if (visibleRange.max > range.max) {
+      return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff);
+    }
+
+    return visibleInCurrentRange;
+  }
+
+  private _calcPanelAreaSum(panels: Panel[]) {
+    return panels.reduce((sum: number, panel: Panel) => sum + panel.sizeIncludingMargin, 0);
+  }
+}
+
+export default CircularCameraMode;

package/src/camera/mode/LinearCameraMode.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import CameraMode from "./CameraMode";
+
+class LinearCameraMode extends CameraMode {
+  public checkAvailability(): boolean {
+    // It's always available
+    return true;
+  }
+
+  public getRange(): { min: number; max: number } {
+    const renderer = this._flicking.renderer;
+
+    const firstPanel = renderer.getPanel(0);
+    const lastPanel = renderer.getPanel(renderer.panelCount - 1);
+
+    return { min: firstPanel?.position ?? 0, max: lastPanel?.position ?? 0 };
+  }
+}
+
+export default LinearCameraMode;

package/src/camera/mode/index.ts

@@ -0,0 +1,14 @@
+import CameraMode from "./CameraMode";
+import LinearCameraMode from "./LinearCameraMode";
+import CircularCameraMode from "./CircularCameraMode";
+import BoundCameraMode from "./BoundCameraMode";
+
+export {
+  LinearCameraMode,
+  CircularCameraMode,
+  BoundCameraMode
+};
+
+export type {
+  CameraMode
+};

package/src/cfc/sync.ts

@@ -6,6 +6,7 @@ import Renderer from "../renderer/Renderer";
 export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]) => {
   const renderer = flicking.renderer;
   const panels = renderer.panels;
+  const prevList = [...diffResult.prevList];
 
   if (diffResult.removed.length > 0) {
     let endIdx = -1;
@@ -24,6 +25,8 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
       } else {
         prevIdx = removedIdx;
       }
+
+      prevList.splice(removedIdx, 1);
     });
 
     batchRemove(renderer, prevIdx, endIdx + 1);
@@ -56,13 +59,15 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
     let startIdx = -1;
     let prevIdx = -1;
 
+    const addedElements = rendered.slice(prevList.length);
+
     diffResult.added.forEach((addedIdx, idx) => {
       if (startIdx < 0) {
         startIdx = idx;
       }
 
       if (prevIdx >= 0 && addedIdx !== prevIdx + 1) {
-        batchInsert(renderer, diffResult, rendered, startIdx, idx + 1);
+        batchInsert(renderer, diffResult, addedElements, startIdx, idx + 1);
 
         startIdx = -1;
         prevIdx = -1;
@@ -72,20 +77,20 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
     });
 
     if (startIdx >= 0) {
-      batchInsert(renderer, diffResult, rendered, startIdx);
+      batchInsert(renderer, diffResult, addedElements, startIdx);
     }
   }
 };
 
-const batchInsert = (renderer: Renderer, diffResult: DiffResult<any>, rendered: any[], startIdx: number, endIdx?: number) => {
+const batchInsert = (renderer: Renderer, diffResult: DiffResult<any>, addedElements: any[], startIdx: number, endIdx?: number) => {
   renderer.batchInsert(
-    ...diffResult.added.slice(startIdx, endIdx).map((index, elIdx) => ({ index, elements: [rendered[elIdx + diffResult.prevList.length]] }))
+    ...diffResult.added.slice(startIdx, endIdx).map((index, elIdx) => ({ index, elements: [addedElements[elIdx]], hasDOMInElements: false }))
   );
 };
 
 const batchRemove = (renderer: Renderer, startIdx: number, endIdx?: number) => {
   const removed = renderer.panels.slice(startIdx, endIdx);
 
-  renderer.batchRemove({ index: startIdx, deleteCount: removed.length });
+  renderer.batchRemove({ index: startIdx, deleteCount: removed.length, hasDOMInElements: false });
 };
 

package/src/const/error.ts

@@ -25,6 +25,7 @@
  * <ko>프레임워크(React, Angular, Vue ...)에서 사용 불가능한 메소드를 호출했을 경우</ko>
  * @property {number} NOT_INITIALIZED When the {@link Flicking#init} is not called before but is needed<ko>{@link Flicking#init}의 호출이 필요하나, 아직 호출되지 않았을 경우</ko>
  * @property {number} NO_ACTIVE When there're no active panel that flicking has selected. This may be due to the absence of any panels<ko>현재 Flicking이 선택한 패널이 없을 경우. 일반적으로 패널이 하나도 없는 경우에 발생할 수 있습니다</ko>
+ * @property {number} NOT_ALLOWED_IN_VIRTUAL When the non-allowed method is called while the virtual option is enabled<ko>virtual 옵션이 활성화된 상태에서 사용 불가능한 메소드가 호출되었을 경우</ko>
  */
 export const CODE = {
   WRONG_TYPE: 0,
@@ -40,14 +41,15 @@ export const CODE = {
   ANIMATION_ALREADY_PLAYING: 10,
   NOT_ALLOWED_IN_FRAMEWORK: 11,
   NOT_INITIALIZED: 12,
-  NO_ACTIVE: 13
+  NO_ACTIVE: 13,
+  NOT_ALLOWED_IN_VIRTUAL: 14
 } as const;
 
 export const MESSAGE = {
   WRONG_TYPE: (wrongVal: any, correctTypes: string[]) => `${wrongVal}(${typeof wrongVal}) is not a ${correctTypes.map(type => `"${type}"`).join(" or ")}.`,
   ELEMENT_NOT_FOUND: (selector: string) => `Element with selector "${selector}" not found.`,
   VAL_MUST_NOT_NULL: (val: any, name: string) => `${name} should be provided. Given: ${val}`,
-  NOT_ATTACHED_TO_FLICKING: (name: string) => `${name} is not attached to the Flicking instance. "init()" should be called first.`,
+  NOT_ATTACHED_TO_FLICKING: "This module is not attached to the Flicking instance. \"init()\" should be called first.",
   WRONG_OPTION: (optionName: string, val: any) => `Option "${optionName}" is not in correct format, given: ${val}`,
   INDEX_OUT_OF_RANGE: (val: number, min: number, max: number) => `Index "${val}" is out of range: should be between ${min} and ${max}.`,
   POSITION_NOT_REACHABLE: (position: number) => `Position "${position}" is not reachable.`,
@@ -57,5 +59,6 @@ export const MESSAGE = {
   ANIMATION_ALREADY_PLAYING: "Animation is already playing.",
   NOT_ALLOWED_IN_FRAMEWORK: "This behavior is not allowed in the frameworks like React, Vue, or Angular.",
   NOT_INITIALIZED: "Flicking is not initialized yet, call init() first.",
-  NO_ACTIVE: "There's no active panel that Flicking has selected. This may be due to the absence of any panels."
+  NO_ACTIVE: "There's no active panel that Flicking has selected. This may be due to the absence of any panels.",
+  NOT_ALLOWED_IN_VIRTUAL: "This behavior is not allowed when the virtual option is enabled"
 } as const;

package/src/const/external.ts

@@ -92,3 +92,21 @@ export const MOVE_TYPE = {
   FREE_SCROLL: "freeScroll",
   STRICT: "strict"
 } as const;
+
+export const CLASS = {
+  VERTICAL: "vertical",
+  HIDDEN: "flicking-hidden",
+  DEFAULT_VIRTUAL: "flicking-panel"
+};
+
+/**
+ * An object with all possible {@link Flicking#circularFallback circularFallback}s
+ * @ko Flicking의 {@link Flicking#circularFallback circularFallback}에 설정 가능한 값들을 담고 있는 객체
+ * @type {object}
+ * @property {string} LINEAR "linear"
+ * @property {string} BOUND "bound"
+ */
+export const CIRCULAR_FALLBACK = {
+  LINEAR: "linear",
+  BOUND: "bound"
+} as const;

package/src/control/AxesController.ts

@@ -211,7 +211,7 @@ class AxesController {
    * @return {this}
    */
   public update(controlParams: ControlParams): this {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const axes = this._axes!;
     const axis = axes.axis[AXES.POSITION_KEY];
@@ -231,7 +231,7 @@ class AxesController {
    * @return {this}
    */
   public addPreventClickHandler(): this {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const axes = this._axes!;
     const cameraEl = flicking.camera.element;
 
@@ -248,7 +248,7 @@ class AxesController {
    * @return {this}
    */
   public removePreventClickHandler(): this {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const axes = this._axes!;
     const cameraEl = flicking.camera.element;
 
@@ -282,17 +282,22 @@ class AxesController {
    */
   public animateTo(position: number, duration: number, axesEvent?: OnRelease): Promise<void> {
     const axes = this._axes;
+    const state = this._stateMachine.state;
 
     if (!axes) {
-      return Promise.reject(new FlickingError(ERROR.MESSAGE.NOT_ATTACHED_TO_FLICKING("Control"), ERROR.CODE.NOT_ATTACHED_TO_FLICKING));
+      return Promise.reject(new FlickingError(ERROR.MESSAGE.NOT_ATTACHED_TO_FLICKING, ERROR.CODE.NOT_ATTACHED_TO_FLICKING));
     }
 
     const startPos = axes.get([AXES.POSITION_KEY])[AXES.POSITION_KEY];
 
     if (startPos === position) {
-      const flicking = getFlickingAttached(this._flicking, "Control");
+      const flicking = getFlickingAttached(this._flicking);
 
       flicking.camera.lookAt(position);
+
+      if (state.targetPanel) {
+        flicking.control.setActive(state.targetPanel, flicking.control.activePanel, axesEvent?.isTrusted ?? false);
+      }
       return Promise.resolve();
     }
 
@@ -317,7 +322,7 @@ class AxesController {
     };
 
     if (duration === 0) {
-      const flicking = getFlickingAttached(this._flicking, "Control");
+      const flicking = getFlickingAttached(this._flicking);
       const camera = flicking.camera;
 
       animate();

package/src/control/Control.ts

@@ -172,7 +172,7 @@ abstract class Control {
    * @return {Promise<void>}
    */
   public updatePosition(_progressInPanel: number): void { // eslint-disable-line @typescript-eslint/no-unused-vars
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const activePanel = this._activePanel;
 
@@ -188,7 +188,7 @@ abstract class Control {
    * @return {this}
    */
   public updateInput(): this {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
 
     this._controller.update(camera.controlParams);
@@ -255,7 +255,7 @@ abstract class Control {
     direction?: ValueOf<typeof DIRECTION>;
     axesEvent?: OnRelease;
   }) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
 
     let position = panel.position;
@@ -299,7 +299,7 @@ abstract class Control {
    * @internal
    */
   public setActive(newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
 
     this._activePanel = newActivePanel;
 
@@ -322,7 +322,7 @@ abstract class Control {
   }
 
   protected _triggerIndexChangeEvent(panel: Panel, position: number, axesEvent?: OnRelease): void {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const triggeringEvent = panel !== this._activePanel ? EVENTS.WILL_CHANGE : EVENTS.WILL_RESTORE;
     const camera = flicking.camera;
     const activePanel = this._activePanel;
@@ -351,7 +351,7 @@ abstract class Control {
     newActivePanel: Panel;
     axesEvent?: OnRelease;
   }) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const animate = () => this._controller.animateTo(position, duration, axesEvent);
     const state = this._controller.state;
 

package/src/control/FreeControl.ts

@@ -58,7 +58,7 @@ class FreeControl extends Control {
    * @return {Promise<void>}
    */
   public updatePosition(progressInPanel: number): void {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const activePanel = this._activePanel;
 
@@ -107,7 +107,7 @@ class FreeControl extends Control {
    * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
    */
   public async moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
 
     const camera = flicking.camera;
     const targetPos = camera.clampToReachablePosition(position);

package/src/control/SnapControl.ts

@@ -85,7 +85,7 @@ class SnapControl extends Control {
    * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
    */
   public async moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const activeAnchor = camera.findActiveAnchor();
     const anchorAtCamera = camera.findNearestAnchor(camera.position);
@@ -128,7 +128,7 @@ class SnapControl extends Control {
   }
 
   private _findSnappedAnchor(position: number, anchorAtCamera: AnchorPoint): AnchorPoint {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const count = this._count;
 
@@ -191,7 +191,7 @@ class SnapControl extends Control {
   }
 
   private _findAdjacentAnchor(posDelta: number, anchorAtCamera: AnchorPoint): AnchorPoint {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const adjacentAnchor = (posDelta > 0 ? camera.getNextAnchor(anchorAtCamera) : camera.getPrevAnchor(anchorAtCamera)) ?? anchorAtCamera;
 

package/src/control/StrictControl.ts

@@ -66,7 +66,7 @@ class StrictControl extends Control {
    * @return {this}
    */
   public updateInput(): this {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const renderer = flicking.renderer;
     const controller = this._controller;
@@ -178,7 +178,7 @@ class StrictControl extends Control {
    * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
    */
   public async moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const activePanel = this._activePanel;
     const axesRange = this._controller.range;

package/src/core/AutoResizer.ts

@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Flicking from "../Flicking";
+
+class AutoResizer {
+  private _flicking: Flicking;
+  private _enabled: boolean;
+  private _resizeObserver: ResizeObserver | null;
+
+  public get enabled() { return this._enabled; }
+
+  public constructor(flicking: Flicking) {
+    this._flicking = flicking;
+    this._enabled = false;
+    this._resizeObserver = null;
+  }
+
+  public enable(): this {
+    const flicking = this._flicking;
+    const viewport = flicking.viewport;
+
+    if (this._enabled) {
+      this.disable();
+    }
+
+    if (flicking.useResizeObserver && !!window.ResizeObserver) {
+      const viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;
+
+      const resizeObserver = viewportSizeNot0
+        ? new ResizeObserver(this._skipFirstResize)
+        : new ResizeObserver(this._onResize);
+
+      resizeObserver.observe(flicking.viewport.element);
+
+      this._resizeObserver = resizeObserver;
+    } else {
+      window.addEventListener("resize", this._onResize);
+    }
+
+    this._enabled = true;
+
+    return this;
+  }
+
+  public disable(): this {
+    if (!this._enabled) return this;
+
+    const resizeObserver = this._resizeObserver;
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      this._resizeObserver = null;
+    } else {
+      window.removeEventListener("resize", this._onResize);
+    }
+
+    this._enabled = false;
+
+    return this;
+  }
+
+  private _onResize = () => {
+    void this._flicking.resize();
+  };
+
+  // eslint-disable-next-line @typescript-eslint/member-ordering
+  private _skipFirstResize = (() => {
+    let isFirstResize = true;
+
+    return (() => {
+      if (isFirstResize) {
+        isFirstResize = false;
+        return;
+      }
+      this._onResize();
+    });
+  })();
+}
+
+export default AutoResizer;

package/src/core/Viewport.ts

@@ -124,10 +124,10 @@ class Viewport {
     this._width = el.clientWidth;
     this._height = el.clientHeight;
     this._padding = {
-      left: parseFloat(elStyle.paddingLeft),
-      right: parseFloat(elStyle.paddingRight),
-      top: parseFloat(elStyle.paddingTop),
-      bottom: parseFloat(elStyle.paddingBottom)
+      left: elStyle.paddingLeft ? parseFloat(elStyle.paddingLeft) : 0,
+      right: elStyle.paddingRight ? parseFloat(elStyle.paddingRight) : 0,
+      top: elStyle.paddingTop ? parseFloat(elStyle.paddingTop) : 0,
+      bottom: elStyle.paddingBottom ? parseFloat(elStyle.paddingBottom) : 0
     };
     this._isBorderBoxSizing = elStyle.boxSizing === "border-box";
   }