@egjs/flicking 4.14.2-beta.2 → 4.16.0-beta.0

package/src/control/states/HoldingState.ts

@@ -6,28 +6,23 @@ import { OnRelease } from "@egjs/axes";
 import { ComponentEvent } from "@egjs/component";
 
 import Panel from "../../core/panel/Panel";
-import { EVENTS } from "../../const/external";
+import { EVENTS } from "../../event/names";
 import { getDirection } from "../../utils";
 
 import State, { STATE_TYPE } from "./State";
 
 /**
  * A state that activates when user's holding the Flicking area, but not moved a single pixel yet
- * @ko 사용자의 입력이 시작되었으나, 아직 움직이지는 않은 상태
  * @internal
  */
 class HoldingState extends State {
   /**
    * Whether user is clicking or touching
-   * @ko 현재 사용자가 클릭/터치중인지 여부
-   * @type {true}
    * @readonly
    */
   public readonly holding = true;
   /**
    * Whether Flicking's animating
-   * @ko 현재 애니메이션 동작 여부
-   * @type {false}
    * @readonly
    */
   public readonly animating = false;
@@ -43,9 +38,7 @@ class HoldingState extends State {
       return;
     }
 
-    const offset = flicking.horizontal
-      ? inputEvent.offsetX
-      : inputEvent.offsetY;
+    const offset = flicking.horizontal ? inputEvent.offsetX : inputEvent.offsetY;
 
     const moveStartEvent = new ComponentEvent(EVENTS.MOVE_START, {
       isTrusted: axesEvent.isTrusted,
@@ -128,12 +121,14 @@ class HoldingState extends State {
       const cameraPosition = flicking.camera.position;
       const clickedPanelPosition = clickedPanel.position;
 
-      flicking.trigger(new ComponentEvent(EVENTS.SELECT, {
-        index: clickedPanel.index,
-        panel: clickedPanel,
-        // Direction to the clicked panel
-        direction: getDirection(cameraPosition, clickedPanelPosition)
-      }));
+      flicking.trigger(
+        new ComponentEvent(EVENTS.SELECT, {
+          index: clickedPanel.index,
+          panel: clickedPanel,
+          // Direction to the clicked panel
+          direction: getDirection(cameraPosition, clickedPanelPosition)
+        })
+      );
     }
   }
 }

package/src/control/states/IdleState.ts

@@ -4,28 +4,23 @@
  */
 import { ComponentEvent } from "@egjs/component";
 
-import { EVENTS } from "../../const/external";
+import { EVENTS } from "../../event/names";
 import { getDirection } from "../../utils";
 
 import State, { STATE_TYPE } from "./State";
 
 /**
  * A default state when there's no user input and no animation's playing
- * @ko 사용자의 입력이 없고, 애니메이션이 동작하고있지 않은 기본 상태
  * @internal
  */
 class IdleState extends State {
   /**
    * Whether user is clicking or touching
-   * @ko 현재 사용자가 클릭/터치중인지 여부
-   * @type {false}
    * @readonly
    */
   public readonly holding = false;
   /**
    * Whether Flicking's animating
-   * @ko 현재 애니메이션 동작 여부
-   * @type {false}
    * @readonly
    */
   public readonly animating = false;

package/src/control/states/State.ts

@@ -5,11 +5,10 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { OnAnimationEnd, OnChange, OnFinish, OnHold, OnRelease } from "@egjs/axes";
 import { ComponentEvent } from "@egjs/component";
-
-import Flicking from "../../Flicking";
+import * as AXES from "../../constants/internal";
 import Panel from "../../core/panel/Panel";
-import { EVENTS } from "../../const/external";
-import * as AXES from "../../const/axes";
+import { EVENTS } from "../../event/names";
+import Flicking from "../../Flicking";
 import { circulatePosition, getDirection } from "../../utils";
 
 export enum STATE_TYPE {
@@ -20,23 +19,31 @@ export enum STATE_TYPE {
   DISABLED
 }
 
+/**
+ * Event context for State event handlers
+ * @internal
+ */
+export interface StateContext<T> {
+  /** An instance of Flicking */
+  flicking: Flicking;
+  /** An Axes event */
+  axesEvent: T;
+  /** A function for changing current state to other state */
+  transitTo: (nextState: STATE_TYPE) => State;
+}
+
 /**
  * A component that shows the current status of the user input or the animation
- * @ko 현재 사용자 입력 또는 애니메이션 상태를 나타내는 컴포넌트
  * @internal
  */
 abstract class State {
   /**
    * Whether user is clicking or touching
-   * @ko 현재 사용자가 클릭/터치중인지 여부
-   * @type {boolean}
    * @readonly
    */
   public abstract readonly holding: boolean;
   /**
    * Whether Flicking's animating
-   * @ko 현재 애니메이션 동작 여부
-   * @type {boolean}
    * @readonly
    */
   public abstract readonly animating: boolean;
@@ -46,27 +53,27 @@ abstract class State {
 
   /**
    * A sum of delta values of change events from the last hold event of Axes
-   * @ko 이전 hold이벤트부터 change에 의해 발생한 이동 delta값의 합산
-   * @type {number}
    * @readonly
    */
-  public get delta() { return this._delta; }
+  public get delta(): number {
+    return this._delta;
+  }
 
   /**
-   * A panel to set as {@link Control#activePanel} after the animation is finished
-   * @ko 애니메이션 종료시 {@link Control#activePanel}로 설정할 패널
-   * @type {number}
+   * A panel to set as {@link Control.activePanel} after the animation is finished
    * @readonly
    */
-  public get targetPanel() { return this._targetPanel; }
+  public get targetPanel(): Panel | null {
+    return this._targetPanel;
+  }
 
-  public set targetPanel(val: Panel | null) { this._targetPanel = val; }
+  public set targetPanel(val: Panel | null) {
+    this._targetPanel = val;
+  }
 
   /**
    * An callback which is called when state has changed to this state
-   * @ko 현재 상태로 돌입했을때 호출되는 콜백 함수
-   * @param {State} prevState An previous state<ko>이전 상태값</ko>
-   * @return {void}
+   * @param prevState - An previous state
    */
   public onEnter(prevState: State): void {
     this._delta = prevState._delta;
@@ -74,95 +81,49 @@ abstract class State {
   }
 
   /**
-   * An event handler for Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold hold} event
-   * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold hold} 이벤트 핸들러
-   * @param {object} [ctx] Event context<ko>이벤트 콘텍스트</ko>
-   * @param {Flicking} [ctx.flicking] An instance of Flicking<ko>Flicking 인스턴스</ko>
-   * @param {object} [ctx.axesEvent] A {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold hold} event of Axes
-   * <ko>Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold hold} 이벤트</ko>
-   * @param {function} [ctx.transitTo] A function for changing current state to other state<ko>다른 상태로 변경하기 위한 함수</ko>
-   * @return {void}
+   * An event handler for Axes's {@link https://naver.github.io/egjs-axes/docs/api/Axes#event-hold | hold} event
+   * @param ctx - {@link StateContext}
    */
-  public onHold(ctx: {
-    flicking: Flicking;
-    axesEvent: OnHold;
-    transitTo: (nextState: STATE_TYPE) => State;
-  }): void {
+  public onHold(ctx: StateContext<OnHold>): void {
     // DO NOTHING
   }
 
   /**
-   * An event handler for Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change change} event
-   * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change change} 이벤트 핸들러
-   * @param {object} [ctx] Event context<ko>이벤트 콘텍스트</ko>
-   * @param {Flicking} [ctx.flicking] An instance of Flicking<ko>Flicking 인스턴스</ko>
-   * @param {object} [ctx.axesEvent] A {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change change} event of Axes
-   * <ko>Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change change} 이벤트</ko>
-   * @param {function} [ctx.transitTo] A function for changing current state to other state<ko>다른 상태로 변경하기 위한 함수</ko>
-   * @return {void}
+   * An event handler for Axes's {@link https://naver.github.io/egjs-axes/docs/api/Axes#event-change | change} event
+   * @param ctx - {@link StateContext}
    */
-  public onChange(ctx: {
-    flicking: Flicking;
-    axesEvent: OnChange;
-    transitTo: (nextState: STATE_TYPE) => State;
-  }): void {
+  public onChange(ctx: StateContext<OnChange>): void {
     // DO NOTHING
   }
 
   /**
-   * An event handler for Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event
-   * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트 핸들러
-   * @param {object} [ctx] Event context<ko>이벤트 콘텍스트</ko>
-   * @param {Flicking} [ctx.flicking] An instance of Flicking<ko>Flicking 인스턴스</ko>
-   * @param {object} [ctx.axesEvent] A {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} event of Axes
-   * <ko>Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release release} 이벤트</ko>
-   * @param {function} [ctx.transitTo] A function for changing current state to other state<ko>다른 상태로 변경하기 위한 함수</ko>
-   * @return {void}
+   * An event handler for Axes's {@link https://naver.github.io/egjs-axes/docs/api/Axes#event-release | release} event
+   * @param ctx - {@link StateContext}
    */
-  public onRelease(ctx: {
-    flicking: Flicking;
-    axesEvent: OnRelease;
-    transitTo: (nextState: STATE_TYPE) => State;
-  }): void {
+  public onRelease(ctx: StateContext<OnRelease>): void {
     // DO NOTHING
   }
 
   /**
-   * An event handler for Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd animationEnd} event
-   * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd animationEnd} 이벤트 핸들러
-   * @param {object} [ctx] Event context<ko>이벤트 콘텍스트</ko>
-   * @param {Flicking} [ctx.flicking] An instance of Flicking<ko>Flicking 인스턴스</ko>
-   * @param {object} [ctx.axesEvent] A {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd animationEnd} event of Axes
-   * <ko>Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd animationEnd} 이벤트</ko>
-   * @param {function} [ctx.transitTo] A function for changing current state to other state<ko>다른 상태로 변경하기 위한 함수</ko>
-   * @return {void}
+   * An event handler for Axes's {@link https://naver.github.io/egjs-axes/docs/api/Axes#event-animationEnd | animationEnd} event
+   * @param ctx - {@link StateContext}
    */
-  public onAnimationEnd(ctx: {
-    flicking: Flicking;
-    axesEvent: OnAnimationEnd;
-    transitTo: (nextState: STATE_TYPE) => State;
-  }): void {
+  public onAnimationEnd(ctx: StateContext<OnAnimationEnd>): void {
     // DO NOTHING
   }
 
   /**
-   * An event handler for Axes's {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish finish} event
-   * @ko Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish finish} 이벤트 핸들러
-   * @param {object} [ctx] Event context<ko>이벤트 콘텍스트</ko>
-   * @param {Flicking} [ctx.flicking] An instance of Flicking<ko>Flicking 인스턴스</ko>
-   * @param {object} [ctx.axesEvent] A {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish finish} event of Axes<ko>Axes의 {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish finish} 이벤트</ko>
-   * @param {function} [ctx.transitTo] A function for changing current state to other state<ko>다른 상태로 변경하기 위한 함수</ko>
-   * @return {void}
+   * An event handler for Axes's {@link https://naver.github.io/egjs-axes/docs/api/Axes#event-finish | finish} event
+   * @param ctx - {@link StateContext}
    */
-  public onFinish(ctx: {
-    flicking: Flicking;
-    axesEvent: OnFinish;
-    transitTo: (nextState: STATE_TYPE) => State;
-  }): void {
+  public onFinish(ctx: StateContext<OnFinish>): void {
     // DO NOTHING
   }
 
-  protected _moveToChangedPosition(ctx: Parameters<State["onChange"]>[0]): void {
+  /**
+   * @internal
+   */
+  protected _moveToChangedPosition(ctx: StateContext<OnChange>): void {
     const { flicking, axesEvent, transitTo } = ctx;
     const delta = axesEvent.delta[AXES.POSITION_KEY];
 

package/src/core/AnchorPoint.ts

@@ -4,9 +4,20 @@
  */
 import Panel from "./panel/Panel";
 
+/**
+ * Options for creating an AnchorPoint
+ */
+export interface AnchorPointOptions {
+  /** Index of AnchorPoint */
+  index: number;
+  /** Position of AnchorPoint */
+  position: number;
+  /** A {@link Panel} instance AnchorPoint is referencing to */
+  panel: Panel;
+}
+
 /**
  * A data component that has actual position where the camera should be stopped at
- * @ko 카메라가 정지해야하는 실제 위치를 담고 있는 데이터 컴포넌트
  */
 class AnchorPoint {
   private _index: number;
@@ -15,41 +26,32 @@ class AnchorPoint {
 
   /**
    * Index of AnchorPoint
-   * @ko AnchorPoint의 인덱스
-   * @type {number}
    * @readonly
    */
-  public get index() { return this._index; }
+  public get index(): number {
+    return this._index;
+  }
   /**
    * Position of AnchorPoint
-   * @ko AnchorPoint의 좌표
-   * @type {number}
    * @readonly
    */
-  public get position() { return this._pos; }
+  public get position(): number {
+    return this._pos;
+  }
   /**
    * A {@link Panel} instance AnchorPoint is referencing to
-   * @ko AnchorPoint가 참조하고 있는 {@link Panel}
-   * @type {Panel}
    * @readonly
    */
-  public get panel() { return this._panel; }
+  public get panel(): Panel {
+    return this._panel;
+  }
 
   /**
-   * @param {object} options An options object<ko>옵션 객체</ko>
-   * @param {number} [options.index] Index of AnchorPoint<ko>AnchorPoint의 인덱스</ko>
-   * @param {number} [options.position] Position of AnchorPoint<ko>AnchorPoint의 좌표</ko>
-   * @param {Panel} [options.panel] A {@link Panel} instance AnchorPoint is referencing to<ko>AnchorPoint가 참조하고 있는 {@link Panel}</ko>
+   * @param options - {@link AnchorPointOptions}
    */
-  public constructor({
-    index,
-    position,
-    panel
-  }: {
-    index: number;
-    position: number;
-    panel: Panel;
-  }) {
+  public constructor(options: AnchorPointOptions) {
+    const { index, position, panel } = options;
+
     this._index = index;
     this._pos = position;
     this._panel = panel;

package/src/core/AutoResizer.ts

@@ -2,12 +2,12 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import { getElementSize, getStyle } from "../utils";
+
 import Flicking from "../Flicking";
+import { getElementSize, getStyle } from "../utils";
 
 /**
  * A component that detects size change and trigger resize method when the autoResize option is used
- * @ko autoResize 옵션을 사용할 때 크기 변화를 감지하고 Flicking의 resize를 호출하는 컴포넌트
  */
 class AutoResizer {
   private _flicking: Flicking;
@@ -157,10 +157,7 @@ class AutoResizer {
         })
       };
 
-      if (
-        beforeSize.height === afterSize.height &&
-        beforeSize.width === afterSize.width
-      ) {
+      if (beforeSize.height === afterSize.height && beforeSize.width === afterSize.width) {
         return;
       }
     }
@@ -170,10 +167,7 @@ class AutoResizer {
     } else {
       if (this._maxResizeDebounceTimer <= 0) {
         if (maxResizeDebounce > 0 && maxResizeDebounce >= resizeDebounce) {
-          this._maxResizeDebounceTimer = window.setTimeout(
-            this._doScheduledResize,
-            maxResizeDebounce
-          );
+          this._maxResizeDebounceTimer = window.setTimeout(this._doScheduledResize, maxResizeDebounce);
         }
       }
 
@@ -182,10 +176,7 @@ class AutoResizer {
         this._resizeTimer = 0;
       }
 
-      this._resizeTimer = window.setTimeout(
-        this._doScheduledResize,
-        resizeDebounce
-      );
+      this._resizeTimer = window.setTimeout(this._doScheduledResize, resizeDebounce);
     }
   };
 
@@ -203,7 +194,7 @@ class AutoResizer {
   private _skipFirstResize = (() => {
     let isFirstResize = true;
 
-    return (entries) => {
+    return entries => {
       if (isFirstResize) {
         isFirstResize = false;
         return;

package/src/core/ResizeWatcher.ts

@@ -20,7 +20,7 @@ class ResizeWatcher {
   private _rect = { width: 0, height: 0 };
   private _resizeTimer = 0;
   private _maxResizeDebounceTimer = 0;
-  private _emitter: Component<{ resize: void }>;
+  private _emitter: Component<{ resize: undefined }>;
   private _observer: ResizeObserver | null;
   private _options!: Required<ResizeWatherOptions>;
 
@@ -50,13 +50,17 @@ class ResizeWatcher {
   public resize() {
     const container = this._container;
 
-    this.setRect(this._options.rectBox === "border-box" ? {
-      width: container.offsetWidth,
-      height: container.offsetHeight
-    } : {
-      width: container.clientWidth,
-      height: container.clientHeight
-    });
+    this.setRect(
+      this._options.rectBox === "border-box"
+        ? {
+            width: container.offsetWidth,
+            height: container.offsetHeight
+          }
+        : {
+            width: container.clientWidth,
+            height: container.clientHeight
+          }
+    );
   }
 
   public listen(callback: () => void) {
@@ -101,9 +105,10 @@ class ResizeWatcher {
     const rect = this._rect;
     const isWatchWidth = watchDirection === "box" || watchDirection === "width";
     const isWatchHeight = watchDirection === "box" || watchDirection === "height";
-    const isResize = !watchDirection
-      || (isWatchWidth && prevRect.width !== rect.width)
-      || (isWatchHeight && prevRect.height !== rect.height);
+    const isResize =
+      !watchDirection ||
+      (isWatchWidth && prevRect.width !== rect.width) ||
+      (isWatchHeight && prevRect.height !== rect.height);
 
     if (isResize) {
       this._emitter.trigger("resize");
@@ -111,11 +116,7 @@ class ResizeWatcher {
   };
 
   private _scheduleResize = () => {
-    const {
-      resizeDebounce,
-      maxResizeDebounce
-    } = this._options;
-
+    const { resizeDebounce, maxResizeDebounce } = this._options;
 
     if (!this._maxResizeDebounceTimer && maxResizeDebounce >= resizeDebounce) {
       this._maxResizeDebounceTimer = window.setTimeout(this._onResize, maxResizeDebounce);

package/src/core/Viewport.ts

@@ -3,11 +3,22 @@
  * egjs projects are licensed under the MIT license
  */
 import Flicking from "../Flicking";
+import { SetSizeParams } from "../types/params";
 import { getElementSize, getStyle, isString } from "../utils";
 
+export interface ViewportPadding {
+  /** CSS `padding-left` */
+  left: number;
+  /** CSS `padding-right` */
+  right: number;
+  /** CSS `padding-top` */
+  top: number;
+  /** CSS `padding-bottom` */
+  bottom: number;
+}
+
 /**
  * A component that manages viewport size
- * @ko 뷰포트 크기 정보를 담당하는 컴포넌트
  */
 class Viewport {
   private _flicking: Flicking;
@@ -15,49 +26,41 @@ class Viewport {
   private _width: number;
   private _height: number;
   private _isBorderBoxSizing: boolean;
-  private _padding: {
-    left: number;
-    right: number;
-    top: number;
-    bottom: number;
-  };
+  private _padding: ViewportPadding;
 
   /**
    * A viewport(root) element
-   * @ko 뷰포트(root) 엘리먼트
-   * @type {HTMLElement}
    * @readonly
    */
-  public get element() { return this._el; }
+  public get element(): HTMLElement {
+    return this._el;
+  }
 
   /**
    * Viewport width, without paddings
-   * @ko 뷰포트 너비
-   * @type {number}
    * @readonly
    */
-  public get width() { return this._width - this._padding.left - this._padding.right; }
+  public get width(): number {
+    return this._width - this._padding.left - this._padding.right;
+  }
   /**
    * Viewport height, without paddings
-   * @ko 뷰포트 높이
-   * @type {number}
    * @readonly
    */
-  public get height() { return this._height - this._padding.top - this._padding.bottom; }
+  public get height(): number {
+    return this._height - this._padding.top - this._padding.bottom;
+  }
   /**
    * Viewport paddings
-   * @ko 뷰포트 CSS padding 값
-   * @type {object}
-   * @property {number} left CSS `padding-left`
-   * @property {number} right CSS `padding-right`
-   * @property {number} top CSS `padding-top`
-   * @property {number} bottom CSS `padding-bottom`
    * @readonly
    */
-  public get padding() { return this._padding; }
+  public get padding(): ViewportPadding {
+    return this._padding;
+  }
 
   /**
-   * @param el A viewport element<ko>뷰포트 엘리먼트</ko>
+   * @param flicking - Flicking instance
+   * @param el - A viewport element
    */
   public constructor(flicking: Flicking, el: HTMLElement) {
     this._flicking = flicking;
@@ -75,20 +78,13 @@ class Viewport {
 
   /**
    * Change viewport's size.
+   * @remarks
    * This will change the actual size of `.flicking-viewport` element by changing its CSS width/height property
-   * @ko 뷰포트 크기를 변경합니다.
-   * `.flicking-viewport` 엘리먼트에 해당 크기의 CSS width/height를 적용합니다
-   * @param {object} [size] New viewport size<ko>새 뷰포트 크기</ko>
-   * @param {number|string} [size.width] CSS string or number(in px)<ko>CSS 문자열 또는 숫자(px)</ko>
-   * @param {number|string} [size.height] CSS string or number(in px)<ko>CSS 문자열 또는 숫자(px)</ko>
+   * @param size - {@link SetSizeParams}
    */
-  public setSize({
-    width,
-    height
-  }: Partial<{
-    width: number | string;
-    height: number | string;
-  }>) {
+  public setSize(size: SetSizeParams) {
+    const { width, height } = size;
+
     const el = this._el;
     const padding = this._padding;
     const isBorderBoxSizing = this._isBorderBoxSizing;
@@ -97,9 +93,7 @@ class Viewport {
       if (isString(width)) {
         el.style.width = width;
       } else {
-        const newWidth = isBorderBoxSizing
-          ? width + padding.left + padding.right
-          : width;
+        const newWidth = isBorderBoxSizing ? width + padding.left + padding.right : width;
         el.style.width = `${newWidth}px`;
       }
     }
@@ -107,9 +101,7 @@ class Viewport {
       if (isString(height)) {
         el.style.height = height;
       } else {
-        const newHeight = isBorderBoxSizing
-          ? height + padding.top + padding.bottom
-          : height;
+        const newHeight = isBorderBoxSizing ? height + padding.top + padding.bottom : height;
         el.style.height = `${newHeight}px`;
       }
     }
@@ -118,14 +110,11 @@ class Viewport {
 
   /**
    * Update width/height to the current viewport element's size
-   * @ko 현재 뷰포트 엘리먼트의 크기로 너비/높이를 업데이트합니다
    */
   public resize() {
     const el = this._el;
     const elStyle = getStyle(el);
-    const {
-      useFractionalSize
-    } = this._flicking;
+    const { useFractionalSize } = this._flicking;
 
     this._width = getElementSize({
       el,