@egjs/flicking 4.4.2 → 4.6.0

package/src/camera/Camera.ts

@@ -9,8 +9,10 @@ import FlickingError from "../core/FlickingError";
 import Panel from "../core/panel/Panel";
 import AnchorPoint from "../core/AnchorPoint";
 import * as ERROR from "../const/error";
-import { ALIGN, DIRECTION, EVENTS } from "../const/external";
-import { checkExistence, clamp, find, getFlickingAttached, getProgress, includes, parseAlign, toArray } from "../utils";
+import { ALIGN, CIRCULAR_FALLBACK, DIRECTION, EVENTS } from "../const/external";
+import { checkExistence, find, getFlickingAttached, getProgress, includes, parseAlign, toArray } from "../utils";
+
+import { CameraMode, BoundCameraMode, CircularCameraMode, LinearCameraMode } from "./mode";
 
 export interface CameraOptions {
   align: FlickingOptions["align"];
@@ -20,21 +22,24 @@ export interface CameraOptions {
  * A component that manages actual movement inside the viewport
  * @ko 뷰포트 내에서의 실제 움직임을 담당하는 컴포넌트
  */
-abstract class Camera {
+class Camera {
   // Options
-  protected _align: FlickingOptions["align"];
+  private _align: FlickingOptions["align"];
 
   // Internal states
-  protected _flicking: Flicking | null;
-  protected _el: HTMLElement;
-  protected _transform: string;
-  protected _position: number;
-  protected _alignPos: number;
-  protected _offset: number;
-  protected _range: { min: number; max: number };
-  protected _visiblePanels: Panel[];
-  protected _anchors: AnchorPoint[];
-  protected _needPanelTriggered: { prev: boolean; next: boolean };
+  private _flicking: Flicking;
+  private _mode: CameraMode;
+  private _el: HTMLElement;
+  private _transform: string;
+  private _position: number;
+  private _alignPos: number;
+  private _offset: number;
+  private _circularOffset: number;
+  private _circularEnabled: boolean;
+  private _range: { min: number; max: number };
+  private _visiblePanels: Panel[];
+  private _anchors: AnchorPoint[];
+  private _needPanelTriggered: { prev: boolean; next: boolean };
 
   // Internal states getter
   /**
@@ -72,7 +77,23 @@ abstract class Camera {
    * @default 0
    * @readonly
    */
-  public get offset() { return this._offset; }
+  public get offset() { return this._offset - this._circularOffset; }
+  /**
+   * Whether the `circular` option is enabled.
+   * The {@link Flicking#circular circular} option can't be enabled when sum of the panel sizes are too small.
+   * @ko {@link Flicking#circular circular} 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
+   * {@link Flicking#circular circular} 옵션은 패널의 크기의 합이 충분하지 않을 경우 비활성화됩니다.
+   * @type {boolean}
+   * @default false
+   * @readonly
+   */
+  public get circularEnabled() { return this._circularEnabled; }
+  /**
+   * A current camera mode
+   * @type {CameraMode}
+   * @readonly
+   */
+  public get mode() { return this._mode; }
   /**
    * A range that Camera's {@link Camera#position position} can reach
    * @ko Camera의 {@link Camera#position position}이 도달 가능한 범위
@@ -118,7 +139,7 @@ abstract class Camera {
    * @type {ControlParams}
    * @readonly
    */
-  public get controlParams() { return { range: this._range, position: this._position, circular: false }; }
+  public get controlParams() { return { range: this._range, position: this._position, circular: this._circularEnabled }; }
   /**
    * A Boolean value indicating whether Camera's over the minimum or maximum position reachable
    * @ko 현재 카메라가 도달 가능한 범위의 최소 혹은 최대점을 넘어섰는지를 나타냅니다
@@ -210,51 +231,33 @@ abstract class Camera {
   }
 
   /** */
-  public constructor({
+  public constructor(flicking: Flicking, {
     align = ALIGN.CENTER
   }: Partial<CameraOptions> = {}) {
-    this._flicking = null;
+    this._flicking = flicking;
     this._resetInternalValues();
 
     // Options
     this._align = align;
   }
 
-  /**
-   * Update {@link Camera#range range} of Camera
-   * @ko Camera의 {@link Camera#range range}를 업데이트합니다
-   * @method
-   * @abstract
-   * @memberof Camera
-   * @instance
-   * @name updateRange
-   * @chainable
-   * @throws {FlickingError}
-   * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
-   * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
-   * @return {this}
-   */
-  public abstract updateRange(): this;
-
   /**
    * Initialize Camera
    * @ko Camera를 초기화합니다
-   * @param {Flicking} flicking An instance of {@link Flicking}<ko>Flicking의 인스턴스</ko>
-   * @chainable
    * @throws {FlickingError}
    * {@link ERROR_CODE VAL_MUST_NOT_NULL} If the camera element(`.flicking-camera`) does not exist inside viewport element
    * <ko>{@link ERROR_CODE VAL_MUST_NOT_NULL} 뷰포트 엘리먼트 내부에 카메라 엘리먼트(`.flicking-camera`)가 존재하지 않을 경우</ko>
    * @return {this}
    */
-  public init(flicking: Flicking): this {
-    this._flicking = flicking;
-
-    const viewportEl = flicking.viewport.element;
+  public init(): this {
+    const viewportEl = this._flicking.viewport.element;
 
     checkExistence(viewportEl.firstElementChild, "First element child of the viewport element");
     this._el = viewportEl.firstElementChild as HTMLElement;
     this._checkTranslateSupport();
 
+    this._updateMode();
+
     return this;
   }
 
@@ -264,7 +267,6 @@ abstract class Camera {
    * @return {void}
    */
   public destroy(): this {
-    this._flicking = null;
     this._resetInternalValues();
     return this;
   }
@@ -279,13 +281,22 @@ abstract class Camera {
    * @return {this}
    */
   public lookAt(pos: number): void {
+    const flicking = getFlickingAttached(this._flicking);
     const prevPos = this._position;
 
     this._position = pos;
+    const toggled = this._togglePanels(prevPos, pos);
     this._refreshVisiblePanels();
     this._checkNeedPanel();
     this._checkReachEnd(prevPos, pos);
-    this.applyTransform();
+
+    if (toggled) {
+      void flicking.renderer.render().then(() => {
+        this.updateOffset();
+      });
+    } else {
+      this.applyTransform();
+    }
   }
 
   /**
@@ -297,7 +308,19 @@ abstract class Camera {
    * @return {AnchorPoint | null} The previous {@link AnchorPoint}<ko>이전 {@link AnchorPoint}</ko>
    */
   public getPrevAnchor(anchor: AnchorPoint): AnchorPoint | null {
-    return this._anchors[anchor.index - 1] || null;
+    if (!this._circularEnabled || anchor.index !== 0) {
+      return this._anchors[anchor.index - 1] || null;
+    } else {
+      const anchors = this._anchors;
+      const rangeDiff = this.rangeDiff;
+      const lastAnchor = anchors[anchors.length - 1];
+
+      return new AnchorPoint({
+        index: lastAnchor.index,
+        position: lastAnchor.position - rangeDiff,
+        panel: lastAnchor.panel
+      });
+    }
   }
 
   /**
@@ -309,7 +332,20 @@ abstract class Camera {
    * @return {AnchorPoint | null} The next {@link AnchorPoint}<ko>다음 {@link AnchorPoint}</ko>
    */
   public getNextAnchor(anchor: AnchorPoint): AnchorPoint | null {
-    return this._anchors[anchor.index + 1] || null;
+    const anchors = this._anchors;
+
+    if (!this._circularEnabled || anchor.index !== anchors.length - 1) {
+      return anchors[anchor.index + 1] || null;
+    } else {
+      const rangeDiff = this.rangeDiff;
+      const firstAnchor = anchors[0];
+
+      return new AnchorPoint({
+        index: firstAnchor.index,
+        position: firstAnchor.position + rangeDiff,
+        panel: firstAnchor.panel
+      });
+    }
   }
 
   /**
@@ -335,16 +371,7 @@ abstract class Camera {
    * @return {AnchorPoint | null} The {@link AnchorPoint} that includes the given position<ko>해당 좌표를 포함하는 {@link AnchorPoint}</ko>
    */
   public findAnchorIncludePosition(position: number): AnchorPoint | null {
-    const anchors = this._anchors;
-    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);
+    return this._mode.findAnchorIncludePosition(position);
   }
 
   /**
@@ -396,8 +423,7 @@ abstract class Camera {
    * @return {number} A clamped position<ko>범위 제한된 좌표</ko>
    */
   public clampToReachablePosition(position: number): number {
-    const range = this._range;
-    return clamp(position, range.min, range.max);
+    return this._mode.clampToReachablePosition(position);
   }
 
   /**
@@ -407,13 +433,7 @@ abstract class Camera {
    * @return {boolean} Whether the panel's inside Camera's range<ko>도달 가능한 범위 내에 해당 패널이 존재하는지 여부</ko>
    */
   public canReach(panel: Panel): boolean {
-    const range = this._range;
-
-    if (panel.removed) return false;
-
-    const panelPos = panel.position;
-
-    return panelPos >= range.min && panelPos <= range.max;
+    return this._mode.canReach(panel);
   }
 
   /**
@@ -423,9 +443,36 @@ abstract class Camera {
    * @return Whether the panel element is visible at the current position<ko>현재 위치에서 해당 패널 엘리먼트가 보이는지 여부</ko>
    */
   public canSee(panel: Panel): boolean {
-    const visibleRange = this.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);
+    return this._mode.canSee(panel);
+  }
+
+  /**
+   * Update {@link Camera#range range} of Camera
+   * @ko Camera의 {@link Camera#range range}를 업데이트합니다
+   * @method
+   * @abstract
+   * @memberof Camera
+   * @instance
+   * @name updateRange
+   * @chainable
+   * @throws {FlickingError}
+   * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
+   * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
+   * @return {this}
+   */
+  public updateRange() {
+    const flicking = getFlickingAttached(this._flicking);
+    const renderer = flicking.renderer;
+    const panels = renderer.panels;
+
+    this._updateMode();
+    this._range = this._mode.getRange();
+
+    if (this._circularEnabled) {
+      panels.forEach(panel => panel.updateCircularToggleDirection());
+    }
+
+    return this;
   }
 
   /**
@@ -456,14 +503,7 @@ abstract class Camera {
    * @return {this}
    */
   public updateAnchors(): this {
-    const flicking = getFlickingAttached(this._flicking);
-    const panels = flicking.renderer.panels;
-
-    this._anchors = panels.map((panel, index) => new AnchorPoint({
-      index,
-      position: panel.position,
-      panel
-    }));
+    this._anchors = this._mode.getAnchors();
 
     return this;
   }
@@ -503,6 +543,8 @@ abstract class Camera {
       .filter(panel => panel.position + panel.offset < position)
       .reduce((offset, panel) => offset + panel.sizeIncludingMargin, 0);
 
+    this._circularOffset = this._mode.getCircularOffset();
+
     this.applyTransform();
 
     return this;
@@ -522,14 +564,16 @@ abstract class Camera {
   /**
    * Apply "transform" style with the current position to camera element
    * @ko 현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다.
-   * @chainable
    * @return {this}
    */
   public applyTransform(): this {
     const el = this._el;
     const flicking = getFlickingAttached(this._flicking);
+    const renderer = flicking.renderer;
+
+    if (renderer.rendering) return this;
 
-    const actualPosition = this._position - this._alignPos - this._offset;
+    const actualPosition = this._position - this._alignPos - this._offset + this._circularOffset;
 
     el.style[this._transform] = flicking.horizontal
       ? `translate(${-actualPosition}px)`
@@ -538,17 +582,19 @@ abstract class Camera {
     return this;
   }
 
-  protected _resetInternalValues() {
+  private _resetInternalValues() {
     this._position = 0;
     this._alignPos = 0;
     this._offset = 0;
+    this._circularOffset = 0;
+    this._circularEnabled = false;
     this._range = { min: 0, max: 0 };
     this._visiblePanels = [];
     this._anchors = [];
     this._needPanelTriggered = { prev: false, next: false };
   }
 
-  protected _refreshVisiblePanels() {
+  private _refreshVisiblePanels() {
     const flicking = getFlickingAttached(this._flicking);
     const panels = flicking.renderer.panels;
 
@@ -570,7 +616,7 @@ abstract class Camera {
     }
   }
 
-  protected _checkNeedPanel(): void {
+  private _checkNeedPanel(): void {
     const needPanelTriggered = this._needPanelTriggered;
 
     if (needPanelTriggered.prev && needPanelTriggered.next) return;
@@ -621,7 +667,7 @@ abstract class Camera {
     }
   }
 
-  protected _checkReachEnd(prevPos: number, newPos: number): void {
+  private _checkReachEnd(prevPos: number, newPos: number): void {
     const flicking = getFlickingAttached(this._flicking);
     const range = this._range;
 
@@ -637,7 +683,7 @@ abstract class Camera {
     }));
   }
 
-  protected _checkTranslateSupport = () => {
+  private _checkTranslateSupport = () => {
     const transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
 
     const supportedStyle = document.documentElement.style;
@@ -654,6 +700,41 @@ abstract class Camera {
 
     this._transform = transformName;
   };
+
+  private _updateMode() {
+    const flicking = getFlickingAttached(this._flicking);
+
+    if (flicking.circular) {
+      const circularMode = new CircularCameraMode(flicking);
+      const canSetCircularMode = circularMode.checkAvailability();
+
+      if (canSetCircularMode) {
+        this._mode = circularMode;
+      } else {
+        const fallbackMode = flicking.circularFallback;
+
+        this._mode = fallbackMode === CIRCULAR_FALLBACK.BOUND
+          ? new BoundCameraMode(flicking)
+          : new LinearCameraMode(flicking);
+      }
+
+      this._circularEnabled = canSetCircularMode;
+    } else {
+      this._mode = flicking.bound
+        ? new BoundCameraMode(flicking)
+        : new LinearCameraMode(flicking);
+    }
+  }
+
+  private _togglePanels(prevPos: number, pos: number): boolean {
+    if (pos === prevPos) return false;
+
+    const flicking = getFlickingAttached(this._flicking);
+    const panels = flicking.renderer.panels;
+    const toggled = panels.map(panel => panel.toggle(prevPos, pos));
+
+    return toggled.some(isToggled => isToggled);
+  }
 }
 
 export default Camera;

package/src/camera/index.ts

@@ -3,17 +3,13 @@
  * egjs projects are licensed under the MIT license
  */
 import Camera, { CameraOptions } from "./Camera";
-import LinearCamera from "./LinearCamera";
-import CircularCamera from "./CircularCamera";
-import BoundCamera from "./BoundCamera";
 
 export {
-  Camera,
-  LinearCamera,
-  CircularCamera,
-  BoundCamera
+  Camera
 };
 
 export type {
   CameraOptions
 };
+
+export * from "./mode";

package/src/camera/{BoundCamera.ts → mode/BoundCameraMode.ts}

@@ -2,40 +2,46 @@
  * 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 { getFlickingAttached, parseAlign } from "../utils";
+import AnchorPoint from "../../core/AnchorPoint";
+import Panel from "../../core/panel/Panel";
+import { parseAlign } from "../../utils";
 
-import Camera from "./Camera";
+import CameraMode from "./CameraMode";
 
-/**
- * A {@link Camera} that set range not to go out of the first/last panel, so it won't show empty spaces before/after the first/last panel
- * @ko 첫번째와 마지막 패널 밖으로 넘어가지 못하도록 범위를 설정하여, 첫번째/마지막 패널 전/후의 빈 공간을 보이지 않도록 하는 종류의 {@link Camera}
- */
-class BoundCamera extends Camera {
-  /**
-   * Update {@link Camera#range range} of Camera
-   * @ko Camera의 {@link Camera#range range}를 업데이트합니다
-   * @chainable
-   * @throws {FlickingError}
-   * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
-   * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
-   * @return {this}
-   */
-  public updateRange() {
-    const flicking = getFlickingAttached(this._flicking);
+class BoundCameraMode extends CameraMode {
+  public checkAvailability(): boolean {
+    const flicking = this._flicking;
+    const renderer = flicking.renderer;
+
+    const firstPanel = renderer.getPanel(0);
+    const lastPanel = renderer.getPanel(renderer.panelCount - 1);
+
+    if (!firstPanel || !lastPanel) {
+      return false;
+    }
+
+    const viewportSize = flicking.camera.size;
+    const firstPanelPrev = firstPanel.range.min;
+    const lastPanelNext = lastPanel.range.max;
+    const panelAreaSize = lastPanelNext - firstPanelPrev;
+    const isBiggerThanViewport = viewportSize < panelAreaSize;
+
+    return isBiggerThanViewport;
+  }
+
+  public getRange(): { min: number; max: number } {
+    const flicking = this._flicking;
     const renderer = flicking.renderer;
-    const alignPos = this._alignPos;
+    const alignPos = flicking.camera.alignPosition;
 
     const firstPanel = renderer.getPanel(0);
     const lastPanel = renderer.getPanel(renderer.panelCount - 1);
 
     if (!firstPanel || !lastPanel) {
-      this._range = { min: 0, max: 0 };
-      return this;
+      return { min: 0, max: 0 };
     }
 
-    const viewportSize = this.size;
+    const viewportSize = flicking.camera.size;
     const firstPanelPrev = firstPanel.range.min;
     const lastPanelNext = lastPanel.range.max;
     const panelAreaSize = lastPanelNext - firstPanelPrev;
@@ -45,32 +51,30 @@ class BoundCamera extends Camera {
     const lastPos = lastPanelNext - viewportSize + alignPos;
 
     if (isBiggerThanViewport) {
-      this._range = { min: firstPos, max: lastPos };
+      return { min: firstPos, max: lastPos };
     } else {
-      const align = this._align;
+      const align = flicking.camera.align;
       const alignVal = typeof align === "object"
         ? (align as { camera: string | number }).camera
         : align;
 
       const pos = firstPos + parseAlign(alignVal, lastPos - firstPos);
 
-      this._range = { min: pos, max: pos };
+      return { min: pos, max: pos };
     }
-
-    return this;
   }
 
-  public updateAnchors(): this {
-    const flicking = getFlickingAttached(this._flicking);
+  public getAnchors(): AnchorPoint[] {
+    const flicking = this._flicking;
+    const camera = flicking.camera;
     const panels = flicking.renderer.panels;
 
     if (panels.length <= 0) {
-      this._anchors = [];
-      return this;
+      return [];
     }
 
-    const range = this._range;
-    const reachablePanels = panels.filter(panel => this.canReach(panel));
+    const range = flicking.camera.range;
+    const reachablePanels = panels.filter(panel => camera.canReach(panel));
 
     if (reachablePanels.length > 0) {
       const shouldPrependBoundAnchor = reachablePanels[0].position !== range.min;
@@ -99,7 +103,7 @@ class BoundCamera extends Camera {
         }));
       }
 
-      this._anchors = newAnchors;
+      return newAnchors;
     } else if (range.min !== range.max) {
       // There're more than 2 panels
       const nearestPanelAtMin = this._findNearestPanel(range.min, panels);
@@ -108,7 +112,7 @@ class BoundCamera extends Camera {
         : nearestPanelAtMin;
       const panelAtMax = panelAtMin.next()!;
 
-      this._anchors = [
+      return [
         new AnchorPoint({
           index: 0,
           position: range.min,
@@ -121,19 +125,18 @@ class BoundCamera extends Camera {
         })
       ];
     } else {
-      this._anchors = [new AnchorPoint({
+      return [new AnchorPoint({
         index: 0,
         position: range.min,
         panel: this._findNearestPanel(range.min, panels)
       })];
     }
-
-    return this;
   }
 
   public findAnchorIncludePosition(position: number): AnchorPoint | null {
-    const range = this._range;
-    const anchors = this._anchors;
+    const camera = this._flicking.camera;
+    const range = camera.range;
+    const anchors = camera.anchorPoints;
 
     if (anchors.length <= 0) return null;
 
@@ -165,4 +168,4 @@ class BoundCamera extends Camera {
   }
 }
 
-export default BoundCamera;
+export default BoundCameraMode;

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;