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

package/src/camera/index.ts

@@ -4,12 +4,8 @@
  */
 import Camera, { CameraOptions } from "./Camera";
 
-export {
-  Camera
-};
+export { Camera };
 
-export type {
-  CameraOptions
-};
+export type { CameraOptions };
 
 export * from "./mode";

package/src/camera/mode/BoundCameraMode.ts

@@ -5,6 +5,7 @@
 import AnchorPoint from "../../core/AnchorPoint";
 import Panel from "../../core/panel/Panel";
 import { parseAlign } from "../../utils";
+import { CameraRange } from "../Camera";
 
 import CameraMode from "./CameraMode";
 
@@ -29,7 +30,7 @@ class BoundCameraMode extends CameraMode {
     return isBiggerThanViewport;
   }
 
-  public getRange(): { min: number; max: number } {
+  public getRange(): CameraRange {
     const flicking = this._flicking;
     const renderer = flicking.renderer;
     const alignPos = flicking.camera.alignPosition;
@@ -54,9 +55,7 @@ class BoundCameraMode extends CameraMode {
       return { min: firstPos, max: lastPos };
     } else {
       const align = flicking.camera.align;
-      const alignVal = typeof align === "object"
-        ? (align as { camera: string | number }).camera
-        : align;
+      const alignVal = typeof align === "object" ? (align as { camera: string | number }).camera : align;
 
       const pos = firstPos + parseAlign(alignVal, lastPos - firstPos);
 
@@ -81,35 +80,42 @@ class BoundCameraMode extends CameraMode {
       const shouldAppendBoundAnchor = reachablePanels[reachablePanels.length - 1].position !== range.max;
       const indexOffset = shouldPrependBoundAnchor ? 1 : 0;
 
-      const newAnchors = reachablePanels.map((panel, idx) => new AnchorPoint({
-        index: idx + indexOffset,
-        position: panel.position,
-        panel
-      }));
+      const newAnchors = reachablePanels.map(
+        (panel, idx) =>
+          new AnchorPoint({
+            index: idx + indexOffset,
+            position: panel.position,
+            panel
+          })
+      );
 
       if (shouldPrependBoundAnchor) {
-        newAnchors.splice(0, 0, new AnchorPoint({
-          index: 0,
-          position: range.min,
-          panel: panels[reachablePanels[0].index - 1]
-        }));
+        newAnchors.splice(
+          0,
+          0,
+          new AnchorPoint({
+            index: 0,
+            position: range.min,
+            panel: panels[reachablePanels[0].index - 1]
+          })
+        );
       }
 
       if (shouldAppendBoundAnchor) {
-        newAnchors.push(new AnchorPoint({
-          index: newAnchors.length,
-          position: range.max,
-          panel: panels[reachablePanels[reachablePanels.length - 1].index + 1]
-        }));
+        newAnchors.push(
+          new AnchorPoint({
+            index: newAnchors.length,
+            position: range.max,
+            panel: panels[reachablePanels[reachablePanels.length - 1].index + 1]
+          })
+        );
       }
 
       return newAnchors;
     } else if (range.min !== range.max) {
       // There're more than 2 panels
       const nearestPanelAtMin = this._findNearestPanel(range.min, panels);
-      const panelAtMin = nearestPanelAtMin.index === panels.length - 1
-        ? nearestPanelAtMin.prev()!
-        : nearestPanelAtMin;
+      const panelAtMin = nearestPanelAtMin.index === panels.length - 1 ? nearestPanelAtMin.prev()! : nearestPanelAtMin;
       const panelAtMax = panelAtMin.next()!;
 
       return [
@@ -125,11 +131,13 @@ class BoundCameraMode extends CameraMode {
         })
       ];
     } else {
-      return [new AnchorPoint({
-        index: 0,
-        position: range.min,
-        panel: this._findNearestPanel(range.min, panels)
-      })];
+      return [
+        new AnchorPoint({
+          index: 0,
+          position: range.min,
+          panel: this._findNearestPanel(range.min, panels)
+        })
+      ];
     }
   }
 
@@ -149,6 +157,9 @@ class BoundCameraMode extends CameraMode {
     }
   }
 
+  /**
+   * @internal
+   */
   private _findNearestPanel(pos: number, panels: Panel[]): Panel {
     let prevDist = Infinity;
     for (let panelIdx = 0; panelIdx < panels.length; panelIdx++) {

package/src/camera/mode/CameraMode.ts

@@ -2,10 +2,12 @@
  * 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 Panel from "../../core/panel/Panel";
+import Flicking from "../../Flicking";
 import { clamp } from "../../utils";
+import { CameraRange } from "../Camera";
 
 /**
  * A mode of camera
@@ -13,22 +15,24 @@ import { clamp } from "../../utils";
 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 abstract getRange(): CameraRange;
 
   public getAnchors(): AnchorPoint[] {
     const panels = this._flicking.renderer.panels;
 
-    return panels.map((panel, index) => new AnchorPoint({
-      index,
-      position: panel.position,
-      panel
-    }));
+    return panels.map(
+      (panel, index) =>
+        new AnchorPoint({
+          index,
+          position: panel.position,
+          panel
+        })
+    );
   }
 
   public findAnchorIncludePosition(position: number): AnchorPoint | null {
@@ -38,9 +42,7 @@ abstract class CameraMode {
     return anchorsIncludingPosition.reduce((nearest: AnchorPoint | null, anchor) => {
       if (!nearest) return anchor;
 
-      return Math.abs(nearest.position - position) < Math.abs(anchor.position - position)
-        ? nearest
-        : anchor;
+      return Math.abs(nearest.position - position) < Math.abs(anchor.position - position) ? nearest : anchor;
     }, null);
   }
 

package/src/camera/mode/CircularCameraMode.ts

@@ -2,16 +2,17 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import Panel from "../../core/panel/Panel";
+
+import { DIRECTION } from "../../constants/values";
 import AnchorPoint from "../../core/AnchorPoint";
-import { DIRECTION } from "../../const/external";
+import Panel from "../../core/panel/Panel";
 import { circulatePosition } from "../../utils";
+import { CameraRange } from "../Camera";
 
 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 {
@@ -31,13 +32,12 @@ class CircularCameraMode extends CameraMode {
     const visibleSize = flicking.camera.size;
     const panelSizeSum = lastPanelNext - firstPanelPrev;
 
-    const canSetCircularMode = panels
-      .every(panel => panelSizeSum - panel.size >= visibleSize);
+    const canSetCircularMode = panels.every(panel => panelSizeSum - panel.size >= visibleSize);
 
     return canSetCircularMode;
   }
 
-  public getRange(): { min: number; max: number } {
+  public getRange(): CameraRange {
     const flicking = this._flicking;
     const panels = flicking.renderer.panels;
 
@@ -57,11 +57,14 @@ class CircularCameraMode extends CameraMode {
     const flicking = this._flicking;
     const panels = flicking.renderer.panels;
 
-    return panels.map((panel, index) => new AnchorPoint({
-      index,
-      position: panel.position,
-      panel
-    }));
+    return panels.map(
+      (panel, index) =>
+        new AnchorPoint({
+          index,
+          position: panel.position,
+          panel
+        })
+    );
   }
 
   public findNearestAnchor(position: number): AnchorPoint | null {
@@ -119,9 +122,7 @@ class CircularCameraMode extends CameraMode {
       anchorInRange = possibleAnchors.reduce((nearest: AnchorPoint | null, anchor) => {
         if (!nearest) return anchor;
 
-        return Math.abs(nearest.position - position) < Math.abs(anchor.position - position)
-          ? nearest
-          : anchor;
+        return Math.abs(nearest.position - position) < Math.abs(anchor.position - position) ? nearest : anchor;
       }, null);
     }
 
@@ -182,14 +183,21 @@ class CircularCameraMode extends CameraMode {
 
     // Check looped visible area for circular case
     if (visibleRange.min < range.min) {
-      return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff);
+      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 || panel.isVisibleOnRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff)
+      );
     }
 
     return visibleInCurrentRange;
   }
 
+  /**
+   * @internal
+   */
   private _calcPanelAreaSum(panels: Panel[]) {
     return panels.reduce((sum: number, panel: Panel) => sum + panel.sizeIncludingMargin, 0);
   }

package/src/camera/mode/LinearCameraMode.ts

@@ -2,6 +2,8 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
+import { CameraRange } from "../Camera";
+
 import CameraMode from "./CameraMode";
 
 class LinearCameraMode extends CameraMode {
@@ -10,7 +12,7 @@ class LinearCameraMode extends CameraMode {
     return true;
   }
 
-  public getRange(): { min: number; max: number } {
+  public getRange(): CameraRange {
     const renderer = this._flicking.renderer;
 
     const firstPanel = renderer.getPanel(0);

package/src/camera/mode/index.ts

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

package/src/cfc/getDefaultCameraTransform.ts

@@ -1,8 +1,12 @@
+import { ALIGN } from "../constants/values";
 import { FlickingOptions } from "../Flicking";
-import { ALIGN } from "../const/external";
 import { parseArithmeticExpression } from "../utils";
 
-export default (align: FlickingOptions["align"] = ALIGN.CENTER, horizontal: boolean = true, firstPanelSize?: string) => {
+export default (
+  align: FlickingOptions["align"] = ALIGN.CENTER,
+  horizontal: boolean = true,
+  firstPanelSize?: string
+) => {
   const cameraAlign = getCameraAlign(align);
   const panelAlign = getPanelAlign(align);
 
@@ -10,23 +14,17 @@ export default (align: FlickingOptions["align"] = ALIGN.CENTER, horizontal: bool
 
   const camPosition = `calc(${cameraAlign} - (${firstPanelSize || "0px"} * ${panelAlign.percentage}) - ${panelAlign.absolute}px)`;
 
-  return horizontal
-    ? `translate(${camPosition})`
-    : `translate(0, ${camPosition})`;
+  return horizontal ? `translate(${camPosition})` : `translate(0, ${camPosition})`;
 };
 
 const getCameraAlign = (align: FlickingOptions["align"]) => {
-  const alignVal = typeof align === "object"
-    ? (align as { camera: string | number }).camera
-    : align;
+  const alignVal = typeof align === "object" ? (align as { camera: string | number }).camera : align;
 
   return parseAlign(alignVal);
 };
 
 const getPanelAlign = (align: FlickingOptions["align"]) => {
-  const alignVal = typeof align === "object"
-    ? (align as { panel: string | number }).panel
-    : align;
+  const alignVal = typeof align === "object" ? (align as { panel: string | number }).panel : align;
 
   return parseArithmeticExpression(parseAlign(alignVal));
 };

package/src/cfc/getRenderingPanels.ts

@@ -12,13 +12,11 @@ export default <T>(flicking: Flicking, diffResult: DiffResult<T>) => {
     map[prev] = current;
     return map;
   }, {});
-  const renderingPanels = flicking.panels
-      .filter(panel => !removedPanels[panel.index]);
-
+  const renderingPanels = flicking.panels.filter(panel => !removedPanels[panel.index]);
 
   if (!flicking.useCSSOrder) {
     // useCSSOrder를 사용하게 되는 경우 sort를 하지 않는다.
-    renderingPanels.sort((panel1, panel2) => (panel1.position + panel1.offset) - (panel2.position + panel2.offset));
+    renderingPanels.sort((panel1, panel2) => panel1.position + panel1.offset - (panel2.position + panel2.offset));
   }
 
   return [
@@ -26,4 +24,3 @@ export default <T>(flicking: Flicking, diffResult: DiffResult<T>) => {
     ...diffResult.added.map(idx => diffResult.list[idx])
   ];
 };
-

package/src/cfc/index.ts

@@ -1,11 +1,6 @@
-import withFlickingMethods from "./withFlickingMethods";
-import sync from "./sync";
-import getRenderingPanels from "./getRenderingPanels";
 import getDefaultCameraTransform from "./getDefaultCameraTransform";
+import getRenderingPanels from "./getRenderingPanels";
+import sync from "./sync";
+import withFlickingMethods from "./withFlickingMethods";
 
-export {
-  withFlickingMethods,
-  sync,
-  getRenderingPanels,
-  getDefaultCameraTransform
-};
+export { withFlickingMethods, sync, getRenderingPanels, getDefaultCameraTransform };

package/src/cfc/sync.ts

@@ -1,8 +1,7 @@
 import { DiffResult } from "@egjs/list-differ";
-
+import Panel from "../core/panel/Panel";
 import Flicking from "../Flicking";
 import Renderer from "../renderer/Renderer";
-import Panel from "../core/panel/Panel";
 
 export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]) => {
   const renderer = flicking.renderer;
@@ -100,9 +99,17 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
   }
 };
 
-const batchInsert = (renderer: Renderer, diffResult: DiffResult<any>, addedElements: any[], startIdx: number, endIdx?: number) => {
+const batchInsert = (
+  renderer: Renderer,
+  diffResult: DiffResult<any>,
+  addedElements: any[],
+  startIdx: number,
+  endIdx?: number
+) => {
   return renderer.batchInsertDefer(
-    ...diffResult.added.slice(startIdx, endIdx).map((index, elIdx) => ({ index, elements: [addedElements[elIdx]], hasDOMInElements: false }))
+    ...diffResult.added
+      .slice(startIdx, endIdx)
+      .map((index, elIdx) => ({ index, elements: [addedElements[elIdx]], hasDOMInElements: false }))
   );
 };
 
@@ -111,4 +118,3 @@ const batchRemove = (renderer: Renderer, startIdx: number, endIdx?: number) => {
 
   return renderer.batchRemoveDefer({ index: startIdx, deleteCount: removed.length, hasDOMInElements: false });
 };
-

package/src/cfc/withFlickingMethods.ts

@@ -4,9 +4,7 @@ import Flicking from "../Flicking";
 
 /**
  * Decorator that makes the method of flicking available in the framework.
- * @ko 프레임워크에서 플리킹의 메소드를 사용할 수 있게 하는 데코레이터.
- * @memberof eg.Flicking
- * @private
+ * @internal
  * @example
  * ```js
  * import Flicking, { withFlickingMethods } from "@egjs/flicking";
@@ -19,27 +17,28 @@ import Flicking from "../Flicking";
  */
 const withFlickingMethods = (prototype: any, flickingName: string) => {
   [Component.prototype, Flicking.prototype].forEach(proto => {
-    Object.getOwnPropertyNames(proto).filter(name => !prototype[name] && name.indexOf("_") !== 0 && name !== "constructor")
+    Object.getOwnPropertyNames(proto)
+      .filter(name => !prototype[name] && name.indexOf("_") !== 0 && name !== "constructor")
       .forEach((name: string) => {
         const descriptor = Object.getOwnPropertyDescriptor(proto, name)!;
 
         if (descriptor.value) {
           // Public Function
           Object.defineProperty(prototype, name, {
-            value: function(...args) {
+            value: function (...args) {
               return descriptor.value.call(this[flickingName], ...args);
             }
           });
         } else {
           const getterDescriptor: { get?: () => any; set?: (val: any) => void } = {};
           if (descriptor.get) {
-            getterDescriptor.get = function() {
+            getterDescriptor.get = function () {
               const flicking = this[flickingName];
               return flicking && descriptor.get?.call(flicking);
             };
           }
           if (descriptor.set) {
-            getterDescriptor.set = function(...args) {
+            getterDescriptor.set = function (...args) {
               return descriptor.set?.call(this[flickingName], ...args);
             };
           }

package/src/{const/axes.ts → constants/internal.ts}

@@ -1,3 +1,4 @@
+/* @internal */
 /**
  * All possible @egjs/axes event keys
  * @internal

package/src/constants/values.ts

@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+
+/**
+ * An object with all possible predefined literal string for the {@link Flicking.align | align} option
+ */
+export const ALIGN = {
+  /** left/top align */
+  PREV: "prev",
+  /** center align */
+  CENTER: "center",
+  /** right/bottom align */
+  NEXT: "next"
+} as const;
+
+/**
+ * An object of directions
+ */
+export const DIRECTION = {
+  /** "left" when {@link Flicking.horizontal | horizontal} is true, and "top" when {@link Flicking.horizontal | horizontal} is false */
+  PREV: "PREV",
+  /** "right" when {@link Flicking.horizontal | horizontal} is true, and "bottom" when {@link Flicking.horizontal | horizontal} is false */
+  NEXT: "NEXT",
+  /** This value usually means it's the same position */
+  NONE: null
+} as const;
+
+/**
+ * An object with all possible {@link Flicking.moveType | moveType}s
+ */
+export const MOVE_TYPE = {
+  /** Flicking's {@link Flicking.moveType | moveType} that enables {@link SnapControl} as a Flicking's {@link Flicking.control | control} */
+  SNAP: "snap",
+  /** Flicking's {@link Flicking.moveType | moveType} that enables {@link FreeControl} as a Flicking's {@link Flicking.control | control} */
+  FREE_SCROLL: "freeScroll",
+  /** Flicking's {@link Flicking.moveType | moveType} that enables {@link StrictControl} as a Flicking's {@link Flicking.control | control} */
+  STRICT: "strict"
+} as const;
+
+export const CLASS = {
+  VIEWPORT: "flicking-viewport",
+  CAMERA: "flicking-camera",
+  VERTICAL: "vertical",
+  HIDDEN: "flicking-hidden",
+  DEFAULT_VIRTUAL: "flicking-panel"
+};
+
+/**
+ * An object with all possible {@link Flicking.circularFallback | circularFallback}s
+ */
+export const CIRCULAR_FALLBACK = {
+  /** "linear" */
+  LINEAR: "linear",
+  /** "bound" */
+  BOUND: "bound"
+} as const;
+
+/**
+ * An object for identifying {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction | direction} CSS property applied to the camera element(`.flicking-camera`)
+ */
+export const ORDER = {
+  /** "ltr" */
+  LTR: "ltr",
+  /** "rtl" */
+  RTL: "rtl"
+} as const;
+
+/**
+ * An object that contains the direction that {@link Flicking} is moving
+ */
+export const MOVE_DIRECTION = {
+  /** horizontal */
+  HORIZONTAL: "horizontal",
+  /** vertical */
+  VERTICAL: "vertical"
+} as const;