@egjs/flicking 4.4.2 → 4.6.0

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

@@ -2,12 +2,16 @@ import { DiffResult } from "@egjs/list-differ";
 
 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;
   const panels = renderer.panels;
   const prevList = [...diffResult.prevList];
 
+  const added: Panel[] = [];
+  const removed: Panel[] = [];
+
   if (diffResult.removed.length > 0) {
     let endIdx = -1;
     let prevIdx = -1;
@@ -18,7 +22,7 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
       }
 
       if (prevIdx >= 0 && removedIdx !== prevIdx - 1) {
-        batchRemove(renderer, prevIdx, endIdx + 1);
+        removed.push(...batchRemove(renderer, prevIdx, endIdx + 1));
 
         endIdx = removedIdx;
         prevIdx = removedIdx;
@@ -29,30 +33,30 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
       prevList.splice(removedIdx, 1);
     });
 
-    batchRemove(renderer, prevIdx, endIdx + 1);
+    removed.push(...batchRemove(renderer, prevIdx, endIdx + 1));
   }
 
-  diffResult.ordered.forEach(([prevIdx, newIdx]) => {
-    const prevPanel = panels[prevIdx];
-    const indexDiff = newIdx - prevIdx;
-
-    if (indexDiff > 0) {
-      const middlePanels = panels.slice(prevIdx + 1, newIdx + 1);
-
-      prevPanel.increaseIndex(indexDiff);
-      middlePanels.forEach(panel => panel.decreaseIndex(1));
-    } else {
-      const middlePanels = panels.slice(newIdx, prevIdx);
-
-      prevPanel.decreaseIndex(-indexDiff);
-      middlePanels.forEach(panel => panel.increaseIndex(1));
-    }
-    // Update position
-    prevPanel.resize();
+  diffResult.ordered.forEach(([from, to]) => {
+    const prevPanel = panels.splice(from, 1)[0];
+    panels.splice(to, 0, prevPanel);
   });
 
   if (diffResult.ordered.length > 0) {
+    panels.forEach((panel, idx) => {
+      const indexDiff = idx - panel.index;
+
+      if (indexDiff > 0) {
+        panel.increaseIndex(indexDiff);
+      } else {
+        panel.decreaseIndex(-indexDiff);
+      }
+    });
+
     panels.sort((panel1, panel2) => panel1.index - panel2.index);
+
+    panels.forEach(panel => {
+      panel.updatePosition();
+    });
   }
 
   if (diffResult.added.length > 0) {
@@ -67,7 +71,7 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
       }
 
       if (prevIdx >= 0 && addedIdx !== prevIdx + 1) {
-        batchInsert(renderer, diffResult, addedElements, startIdx, idx + 1);
+        added.push(...batchInsert(renderer, diffResult, addedElements, startIdx, idx + 1));
 
         startIdx = -1;
         prevIdx = -1;
@@ -77,13 +81,15 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
     });
 
     if (startIdx >= 0) {
-      batchInsert(renderer, diffResult, addedElements, startIdx);
+      added.push(...batchInsert(renderer, diffResult, addedElements, startIdx));
     }
   }
+
+  renderer.updateAfterPanelChange(added, removed);
 };
 
 const batchInsert = (renderer: Renderer, diffResult: DiffResult<any>, addedElements: any[], startIdx: number, endIdx?: number) => {
-  renderer.batchInsert(
+  return renderer.batchInsertDefer(
     ...diffResult.added.slice(startIdx, endIdx).map((index, elIdx) => ({ index, elements: [addedElements[elIdx]], hasDOMInElements: false }))
   );
 };
@@ -91,6 +97,6 @@ const batchInsert = (renderer: Renderer, diffResult: DiffResult<any>, addedEleme
 const batchRemove = (renderer: Renderer, startIdx: number, endIdx?: number) => {
   const removed = renderer.panels.slice(startIdx, endIdx);
 
-  renderer.batchRemove({ index: startIdx, deleteCount: removed.length, hasDOMInElements: false });
+  return renderer.batchRemoveDefer({ index: startIdx, deleteCount: removed.length, hasDOMInElements: false });
 };
 

package/src/cfc/withFlickingMethods.ts

@@ -19,7 +19,7 @@ import Flicking from "../Flicking";
  */
 const withFlickingMethods = (prototype: any, flickingName: string) => {
   [Component.prototype, Flicking.prototype].forEach(proto => {
-    Object.getOwnPropertyNames(proto).filter(name => !prototype[name] && !name.startsWith("_") && name !== "constructor")
+    Object.getOwnPropertyNames(proto).filter(name => !prototype[name] && name.indexOf("_") !== 0 && name !== "constructor")
       .forEach((name: string) => {
         const descriptor = Object.getOwnPropertyDescriptor(proto, name)!;
 
@@ -34,7 +34,8 @@ const withFlickingMethods = (prototype: any, flickingName: string) => {
           const getterDescriptor: { get?: () => any; set?: (val: any) => void } = {};
           if (descriptor.get) {
             getterDescriptor.get = function() {
-              return descriptor.get?.call(this[flickingName]);
+              const flicking = this[flickingName];
+              return flicking && descriptor.get?.call(flicking);
             };
           }
           if (descriptor.set) {

package/src/const/external.ts

@@ -98,3 +98,15 @@ export const CLASS = {
   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/StrictControl.ts

@@ -141,6 +141,16 @@ class StrictControl extends Control {
     return this;
   }
 
+  public async moveToPanel(panel: Panel, options: Parameters<Control["moveToPanel"]>[1]): Promise<void> {
+    const flicking = getFlickingAttached(this._flicking);
+    const camera = flicking.camera;
+    const controller = this._controller;
+
+    controller.update(camera.controlParams);
+
+    return super.moveToPanel(panel, options);
+  }
+
   /**
    * Move {@link Camera} to the given position
    * @ko {@link Camera}를 주어진 좌표로 이동합니다

package/src/core/AutoResizer.ts

@@ -8,6 +8,8 @@ class AutoResizer {
   private _flicking: Flicking;
   private _enabled: boolean;
   private _resizeObserver: ResizeObserver | null;
+  private _resizeTimer: number;
+  private _maxResizeDebounceTimer: number;
 
   public get enabled() { return this._enabled; }
 
@@ -15,6 +17,8 @@ class AutoResizer {
     this._flicking = flicking;
     this._enabled = false;
     this._resizeObserver = null;
+    this._resizeTimer = -1;
+    this._maxResizeDebounceTimer = -1;
   }
 
   public enable(): this {
@@ -61,6 +65,35 @@ class AutoResizer {
   }
 
   private _onResize = () => {
+    const flicking = this._flicking;
+    const resizeDebounce = flicking.resizeDebounce;
+    const maxResizeDebounce = flicking.maxResizeDebounce;
+
+    if (resizeDebounce <= 0) {
+      void flicking.resize();
+    } else {
+      if (this._maxResizeDebounceTimer <= 0) {
+        if (maxResizeDebounce > 0 && maxResizeDebounce >= resizeDebounce) {
+          this._maxResizeDebounceTimer = window.setTimeout(this._doScheduledResize, maxResizeDebounce);
+        }
+      }
+
+      if (this._resizeTimer > 0) {
+        clearTimeout(this._resizeTimer);
+        this._resizeTimer = 0;
+      }
+
+      this._resizeTimer = window.setTimeout(this._doScheduledResize, resizeDebounce);
+    }
+  };
+
+  private _doScheduledResize = () => {
+    clearTimeout(this._resizeTimer);
+    clearTimeout(this._maxResizeDebounceTimer);
+
+    this._maxResizeDebounceTimer = -1;
+    this._resizeTimer = -1;
+
     void this._flicking.resize();
   };
 

package/src/core/ResizeWatcher.ts

@@ -0,0 +1,133 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Component from "@egjs/component";
+
+import { isString } from "../utils";
+
+export interface ResizeWatherOptions {
+  resizeDebounce?: number;
+  maxResizeDebounce?: number;
+  useResizeObserver?: boolean;
+  useWindowResize?: boolean;
+  watchDirection?: "width" | "height" | "box" | false;
+  rectBox?: "border-box" | "content-box";
+}
+
+class ResizeWatcher {
+  private _container: HTMLElement;
+  private _rect = { width: 0, height: 0 };
+  private _resizeTimer = 0;
+  private _maxResizeDebounceTimer = 0;
+  private _emitter: Component<{ resize: void }>;
+  private _observer: ResizeObserver | null;
+  private _options!: Required<ResizeWatherOptions>;
+
+  public constructor(container: HTMLElement | string, options: ResizeWatherOptions = {}) {
+    this._options = {
+      resizeDebounce: 100,
+      maxResizeDebounce: 0,
+      useResizeObserver: false,
+      useWindowResize: true,
+      watchDirection: false,
+      rectBox: "content-box",
+      ...options
+    };
+
+    this._container = isString(container) ? document.querySelector<HTMLElement>(container)! : container;
+    this._init();
+  }
+
+  public getRect() {
+    return this._rect;
+  }
+
+  public setRect(rect: { width: number; height: number }) {
+    this._rect = { ...rect };
+  }
+
+  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
+    });
+  }
+
+  public listen(callback: () => void) {
+    this._emitter.on("resize", callback);
+    return this;
+  }
+
+  public destroy() {
+    this._observer?.disconnect();
+    if (this._options.useWindowResize) {
+      window.removeEventListener("reisze", this._onResize);
+    }
+  }
+
+  private _init() {
+    const container = this._container;
+    const options = this._options;
+
+    this._emitter = new Component();
+    if (options.useResizeObserver && !!window.ResizeObserver) {
+      this._observer = new window.ResizeObserver(this._scheduleResize);
+      this._observer.observe(container, {
+        box: options.rectBox
+      });
+    }
+    if (options.useWindowResize) {
+      window.addEventListener("resize", this._scheduleResize);
+    }
+    this.resize();
+  }
+
+  private _onResize = () => {
+    clearTimeout(this._resizeTimer);
+    clearTimeout(this._maxResizeDebounceTimer);
+
+    this._maxResizeDebounceTimer = 0;
+    this._resizeTimer = 0;
+
+    const watchDirection = this._options.watchDirection;
+    const prevRect = this._rect;
+    this.resize();
+    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);
+
+    if (isResize) {
+      this._emitter.trigger("resize");
+    }
+  };
+
+  private _scheduleResize = () => {
+    const {
+      resizeDebounce,
+      maxResizeDebounce
+    } = this._options;
+
+
+    if (!this._maxResizeDebounceTimer && maxResizeDebounce >= resizeDebounce) {
+      this._maxResizeDebounceTimer = window.setTimeout(this._onResize, maxResizeDebounce);
+    }
+
+    if (this._resizeTimer) {
+      clearTimeout(this._resizeTimer);
+      this._resizeTimer = 0;
+    }
+
+    this._resizeTimer = window.setTimeout(this._onResize, resizeDebounce);
+  };
+}
+
+export default ResizeWatcher;