@egjs/flicking 4.3.1 → 4.5.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 } 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,30 +22,40 @@ 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 | null;
+  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
   /**
-   * The camera(`.flicking-camera`) element
-   * @ko 카메라(`.flicking-camera`) 엘리먼트
+   * The camera element(`.flicking-camera`)
+   * @ko 카메라 엘리먼트(`.flicking-camera`)
    * @type {HTMLElement}
    * @readonly
    */
   public get element() { return this._el; }
+  /**
+   * An array of the child elements of the camera element(`.flicking-camera`)
+   * @ko 카메라 엘리먼트(`.flicking-camera`)의 자식 엘리먼트 배열
+   * @type {HTMLElement[]}
+   * @readonly
+   */
+  public get children() { return toArray(this._el.children) as HTMLElement[]; }
   /**
    * Current position of the camera
    * @ko Camera의 현재 좌표
@@ -65,13 +77,29 @@ 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}이 도달 가능한 범위
    * @type {object}
    * @property {number} min A minimum position<ko>최소 위치</ko>
-   * @property {number} min A maximum position<ko>최대 위치</ko>
+   * @property {number} max A maximum position<ko>최대 위치</ko>
    * @readonly
    */
   public get range() { return this._range; }
@@ -111,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 현재 카메라가 도달 가능한 범위의 최소 혹은 최대점을 넘어섰는지를 나타냅니다
@@ -213,22 +241,6 @@ abstract class Camera {
     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를 초기화합니다
@@ -248,6 +260,8 @@ abstract class Camera {
     this._el = viewportEl.firstElementChild as HTMLElement;
     this._checkTranslateSupport();
 
+    this._updateMode();
+
     return this;
   }
 
@@ -272,13 +286,21 @@ 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();
+    this.applyTransform();
+
+    if (toggled) {
+      void flicking.renderer.render().then(() => {
+        this.updateOffset();
+      });
+    }
   }
 
   /**
@@ -290,7 +312,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
+      });
+    }
   }
 
   /**
@@ -302,7 +336,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
+      });
+    }
   }
 
   /**
@@ -328,16 +375,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);
   }
 
   /**
@@ -376,7 +414,7 @@ abstract class Camera {
    * @return {AnchorPoint | null}
    */
   public findActiveAnchor(): AnchorPoint | null {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const activeIndex = flicking.control.activeIndex;
 
     return find(this._anchors, anchor => anchor.panel.index === activeIndex);
@@ -389,8 +427,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);
   }
 
   /**
@@ -400,13 +437,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);
   }
 
   /**
@@ -416,9 +447,38 @@ 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.includeRange(visibleRange.min, visibleRange.max, false);
+    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());
+    }
+
+    this.updateOffset();
+
+    return this;
   }
 
   /**
@@ -449,14 +509,7 @@ abstract class Camera {
    * @return {this}
    */
   public updateAnchors(): this {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
-    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;
   }
@@ -471,7 +524,7 @@ abstract class Camera {
    * @return {this}
    */
   public updateAdaptiveHeight() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const activePanel = flicking.control.activePanel;
 
     if (!flicking.horizontal || !flicking.adaptive || !activePanel) return;
@@ -481,16 +534,26 @@ abstract class Camera {
     });
   }
 
-  public updateOffset() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
-    const unRenderedPanels = flicking.panels.filter(panel => !panel.rendered);
+  /**
+   * Update current offset of the camera
+   * @ko 현재 카메라의 오프셋을 업데이트합니다
+   * @chainable
+   * @return {this}
+   */
+  public updateOffset(): this {
+    const flicking = getFlickingAttached(this._flicking);
     const position = this._position;
+    const unRenderedPanels = flicking.panels.filter(panel => !panel.rendered);
 
     this._offset = unRenderedPanels
       .filter(panel => panel.position + panel.offset < position)
       .reduce((offset, panel) => offset + panel.sizeIncludingMargin, 0);
 
-    this._applyTransform();
+    this._circularOffset = this._mode.getCircularOffset();
+
+    this.applyTransform();
+
+    return this;
   }
 
   /**
@@ -504,18 +567,39 @@ abstract class Camera {
     return this;
   }
 
-  protected _resetInternalValues() {
+  /**
+   * 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 actualPosition = this._position - this._alignPos - this._offset + this._circularOffset;
+
+    el.style[this._transform] = flicking.horizontal
+      ? `translate(${-actualPosition}px)`
+      : `translate(0, ${-actualPosition}px)`;
+
+    return this;
+  }
+
+  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() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+  private _refreshVisiblePanels() {
+    const flicking = getFlickingAttached(this._flicking);
     const panels = flicking.renderer.panels;
 
     const newVisiblePanels = panels.filter(panel => this.canSee(panel));
@@ -536,12 +620,12 @@ abstract class Camera {
     }
   }
 
-  protected _checkNeedPanel(): void {
+  private _checkNeedPanel(): void {
     const needPanelTriggered = this._needPanelTriggered;
 
     if (needPanelTriggered.prev && needPanelTriggered.next) return;
 
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const panels = flicking.renderer.panels;
 
     if (panels.length <= 0) {
@@ -587,8 +671,8 @@ abstract class Camera {
     }
   }
 
-  protected _checkReachEnd(prevPos: number, newPos: number): void {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+  private _checkReachEnd(prevPos: number, newPos: number): void {
+    const flicking = getFlickingAttached(this._flicking);
     const range = this._range;
 
     const wasBetweenRange = prevPos > range.min && prevPos < range.max;
@@ -603,18 +687,7 @@ abstract class Camera {
     }));
   }
 
-  protected _applyTransform(): void {
-    const el = this._el;
-    const flicking = getFlickingAttached(this._flicking, "Camera");
-
-    const actualPosition = this._position - this._alignPos - this._offset;
-
-    el.style[this._transform] = flicking.horizontal
-      ? `translate(${-actualPosition}px)`
-      : `translate(0, ${-actualPosition}px)`;
-  }
-
-  protected _checkTranslateSupport = () => {
+  private _checkTranslateSupport = () => {
     const transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
 
     const supportedStyle = document.documentElement.style;
@@ -631,6 +704,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, "Camera");
+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, "Camera");
+  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;