@egjs/flicking 4.3.0 → 4.4.2

package/src/camera/CircularCamera.ts

@@ -68,12 +68,38 @@ class CircularCamera extends Camera {
     if (!this._circularEnabled) return super.findAnchorIncludePosition(position);
 
     const range = this._range;
+    const anchors = this._anchors;
+    const rangeDiff = this.rangeDiff;
+    const anchorCount = anchors.length;
     const positionInRange = circulatePosition(position, range.min, range.max);
-    const anchorInRange = super.findAnchorIncludePosition(positionInRange);
 
-    if (!anchorInRange) return null;
+    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);
+    }
 
-    const rangeDiff = this.rangeDiff;
+    if (!anchorInRange) return null;
 
     if (position < range.min) {
       const loopCount = -Math.floor((range.min - position) / rangeDiff) - 1;
@@ -124,9 +150,9 @@ class CircularCamera extends Camera {
 
     // Check looped visible area for circular case
     if (visibleRange.min < range.min) {
-      return visibleInCurrentRange || panel.includeRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff, false);
+      return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff);
     } else if (visibleRange.max > range.max) {
-      return visibleInCurrentRange || panel.includeRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff, false);
+      return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff);
     }
 
     return visibleInCurrentRange;
@@ -142,7 +168,7 @@ class CircularCamera extends Camera {
    * @return {this}
    */
   public updateRange() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const renderer = flicking.renderer;
 
     const panels = renderer.panels;
@@ -171,13 +197,19 @@ class CircularCamera extends Camera {
       this._range = { min: firstPanel.position, max: lastPanel.position };
     }
 
-    this._updateCircularOffset();
+    this.updateOffset();
 
     return this;
   }
 
+  public updateOffset() {
+    this._updateCircularOffset();
+
+    return super.updateOffset();
+  }
+
   public lookAt(pos: number) {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const prevPos = this._position;
 
     if (pos === prevPos) return super.lookAt(pos);
@@ -186,24 +218,26 @@ class CircularCamera extends Camera {
     const toggled = panels.map(panel => panel.toggle(prevPos, pos));
 
     this._position = pos;
+    super.lookAt(pos);
 
     if (toggled.some(isToggled => isToggled)) {
-      this._updateCircularOffset();
-      void flicking.renderer.render();
+      void flicking.renderer.render().then(() => {
+        this.updateOffset();
+      });
     }
-
-    return super.lookAt(pos);
   }
 
-  protected _applyTransform(): void {
+  public applyTransform(): this {
     const el = this._el;
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    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;
   }
 
   protected _resetInternalValues() {
@@ -222,19 +256,10 @@ class CircularCamera extends Camera {
       return;
     }
 
-    const flicking = getFlickingAttached(this._flicking, "Camera");
-    const toggledPrev: Panel[] = [];
-    const toggledNext: Panel[] = [];
-
-    flicking.panels
-      .filter(panel => panel.toggled)
-      .forEach(panel => {
-        if (panel.toggleDirection === DIRECTION.PREV) {
-          toggledPrev.push(panel);
-        } else {
-          toggledNext.push(panel);
-        }
-      });
+    const flicking = getFlickingAttached(this._flicking);
+    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);
 
     this._circularOffset = this._calcPanelAreaSum(toggledPrev) - this._calcPanelAreaSum(toggledNext);
   }

package/src/camera/LinearCamera.ts

@@ -21,7 +21,7 @@ class LinearCamera extends Camera {
    * @return {this}
    */
   public updateRange() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const renderer = flicking.renderer;
 
     const firstPanel = renderer.getPanel(0);

package/src/cfc/sync.ts

@@ -6,6 +6,7 @@ import Renderer from "../renderer/Renderer";
 export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]) => {
   const renderer = flicking.renderer;
   const panels = renderer.panels;
+  const prevList = [...diffResult.prevList];
 
   if (diffResult.removed.length > 0) {
     let endIdx = -1;
@@ -24,6 +25,8 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
       } else {
         prevIdx = removedIdx;
       }
+
+      prevList.splice(removedIdx, 1);
     });
 
     batchRemove(renderer, prevIdx, endIdx + 1);
@@ -56,13 +59,15 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
     let startIdx = -1;
     let prevIdx = -1;
 
+    const addedElements = rendered.slice(prevList.length);
+
     diffResult.added.forEach((addedIdx, idx) => {
       if (startIdx < 0) {
         startIdx = idx;
       }
 
       if (prevIdx >= 0 && addedIdx !== prevIdx + 1) {
-        batchInsert(renderer, diffResult, rendered, startIdx, idx + 1);
+        batchInsert(renderer, diffResult, addedElements, startIdx, idx + 1);
 
         startIdx = -1;
         prevIdx = -1;
@@ -72,20 +77,20 @@ export default (flicking: Flicking, diffResult: DiffResult<any>, rendered: any[]
     });
 
     if (startIdx >= 0) {
-      batchInsert(renderer, diffResult, rendered, startIdx);
+      batchInsert(renderer, diffResult, addedElements, startIdx);
     }
   }
 };
 
-const batchInsert = (renderer: Renderer, diffResult: DiffResult<any>, rendered: any[], startIdx: number, endIdx?: number) => {
+const batchInsert = (renderer: Renderer, diffResult: DiffResult<any>, addedElements: any[], startIdx: number, endIdx?: number) => {
   renderer.batchInsert(
-    ...diffResult.added.slice(startIdx, endIdx).map((index, elIdx) => ({ index, elements: [rendered[elIdx + diffResult.prevList.length]] }))
+    ...diffResult.added.slice(startIdx, endIdx).map((index, elIdx) => ({ index, elements: [addedElements[elIdx]], hasDOMInElements: false }))
   );
 };
 
 const batchRemove = (renderer: Renderer, startIdx: number, endIdx?: number) => {
   const removed = renderer.panels.slice(startIdx, endIdx);
 
-  renderer.batchRemove({ index: startIdx, deleteCount: removed.length });
+  renderer.batchRemove({ index: startIdx, deleteCount: removed.length, hasDOMInElements: false });
 };
 

package/src/const/error.ts

@@ -25,6 +25,7 @@
  * <ko>프레임워크(React, Angular, Vue ...)에서 사용 불가능한 메소드를 호출했을 경우</ko>
  * @property {number} NOT_INITIALIZED When the {@link Flicking#init} is not called before but is needed<ko>{@link Flicking#init}의 호출이 필요하나, 아직 호출되지 않았을 경우</ko>
  * @property {number} NO_ACTIVE When there're no active panel that flicking has selected. This may be due to the absence of any panels<ko>현재 Flicking이 선택한 패널이 없을 경우. 일반적으로 패널이 하나도 없는 경우에 발생할 수 있습니다</ko>
+ * @property {number} NOT_ALLOWED_IN_VIRTUAL When the non-allowed method is called while the virtual option is enabled<ko>virtual 옵션이 활성화된 상태에서 사용 불가능한 메소드가 호출되었을 경우</ko>
  */
 export const CODE = {
   WRONG_TYPE: 0,
@@ -40,14 +41,15 @@ export const CODE = {
   ANIMATION_ALREADY_PLAYING: 10,
   NOT_ALLOWED_IN_FRAMEWORK: 11,
   NOT_INITIALIZED: 12,
-  NO_ACTIVE: 13
+  NO_ACTIVE: 13,
+  NOT_ALLOWED_IN_VIRTUAL: 14
 } as const;
 
 export const MESSAGE = {
   WRONG_TYPE: (wrongVal: any, correctTypes: string[]) => `${wrongVal}(${typeof wrongVal}) is not a ${correctTypes.map(type => `"${type}"`).join(" or ")}.`,
   ELEMENT_NOT_FOUND: (selector: string) => `Element with selector "${selector}" not found.`,
   VAL_MUST_NOT_NULL: (val: any, name: string) => `${name} should be provided. Given: ${val}`,
-  NOT_ATTACHED_TO_FLICKING: (name: string) => `${name} is not attached to the Flicking instance. "init()" should be called first.`,
+  NOT_ATTACHED_TO_FLICKING: "This module is not attached to the Flicking instance. \"init()\" should be called first.",
   WRONG_OPTION: (optionName: string, val: any) => `Option "${optionName}" is not in correct format, given: ${val}`,
   INDEX_OUT_OF_RANGE: (val: number, min: number, max: number) => `Index "${val}" is out of range: should be between ${min} and ${max}.`,
   POSITION_NOT_REACHABLE: (position: number) => `Position "${position}" is not reachable.`,
@@ -57,5 +59,6 @@ export const MESSAGE = {
   ANIMATION_ALREADY_PLAYING: "Animation is already playing.",
   NOT_ALLOWED_IN_FRAMEWORK: "This behavior is not allowed in the frameworks like React, Vue, or Angular.",
   NOT_INITIALIZED: "Flicking is not initialized yet, call init() first.",
-  NO_ACTIVE: "There's no active panel that Flicking has selected. This may be due to the absence of any panels."
+  NO_ACTIVE: "There's no active panel that Flicking has selected. This may be due to the absence of any panels.",
+  NOT_ALLOWED_IN_VIRTUAL: "This behavior is not allowed when the virtual option is enabled"
 } as const;

package/src/const/external.ts

@@ -92,3 +92,9 @@ export const MOVE_TYPE = {
   FREE_SCROLL: "freeScroll",
   STRICT: "strict"
 } as const;
+
+export const CLASS = {
+  VERTICAL: "vertical",
+  HIDDEN: "flicking-hidden",
+  DEFAULT_VIRTUAL: "flicking-panel"
+};

package/src/control/AxesController.ts

@@ -211,7 +211,7 @@ class AxesController {
    * @return {this}
    */
   public update(controlParams: ControlParams): this {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const axes = this._axes!;
     const axis = axes.axis[AXES.POSITION_KEY];
@@ -231,7 +231,7 @@ class AxesController {
    * @return {this}
    */
   public addPreventClickHandler(): this {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const axes = this._axes!;
     const cameraEl = flicking.camera.element;
 
@@ -248,7 +248,7 @@ class AxesController {
    * @return {this}
    */
   public removePreventClickHandler(): this {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const axes = this._axes!;
     const cameraEl = flicking.camera.element;
 
@@ -282,17 +282,22 @@ class AxesController {
    */
   public animateTo(position: number, duration: number, axesEvent?: OnRelease): Promise<void> {
     const axes = this._axes;
+    const state = this._stateMachine.state;
 
     if (!axes) {
-      return Promise.reject(new FlickingError(ERROR.MESSAGE.NOT_ATTACHED_TO_FLICKING("Control"), ERROR.CODE.NOT_ATTACHED_TO_FLICKING));
+      return Promise.reject(new FlickingError(ERROR.MESSAGE.NOT_ATTACHED_TO_FLICKING, ERROR.CODE.NOT_ATTACHED_TO_FLICKING));
     }
 
     const startPos = axes.get([AXES.POSITION_KEY])[AXES.POSITION_KEY];
 
     if (startPos === position) {
-      const flicking = getFlickingAttached(this._flicking, "Control");
+      const flicking = getFlickingAttached(this._flicking);
 
       flicking.camera.lookAt(position);
+
+      if (state.targetPanel) {
+        flicking.control.setActive(state.targetPanel, flicking.control.activePanel, axesEvent?.isTrusted ?? false);
+      }
       return Promise.resolve();
     }
 
@@ -317,7 +322,7 @@ class AxesController {
     };
 
     if (duration === 0) {
-      const flicking = getFlickingAttached(this._flicking, "Control");
+      const flicking = getFlickingAttached(this._flicking);
       const camera = flicking.camera;
 
       animate();

package/src/control/Control.ts

@@ -172,7 +172,7 @@ abstract class Control {
    * @return {Promise<void>}
    */
   public updatePosition(_progressInPanel: number): void { // eslint-disable-line @typescript-eslint/no-unused-vars
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const activePanel = this._activePanel;
 
@@ -188,7 +188,7 @@ abstract class Control {
    * @return {this}
    */
   public updateInput(): this {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
 
     this._controller.update(camera.controlParams);
@@ -255,7 +255,7 @@ abstract class Control {
     direction?: ValueOf<typeof DIRECTION>;
     axesEvent?: OnRelease;
   }) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
 
     let position = panel.position;
@@ -299,7 +299,7 @@ abstract class Control {
    * @internal
    */
   public setActive(newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
 
     this._activePanel = newActivePanel;
 
@@ -322,7 +322,7 @@ abstract class Control {
   }
 
   protected _triggerIndexChangeEvent(panel: Panel, position: number, axesEvent?: OnRelease): void {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const triggeringEvent = panel !== this._activePanel ? EVENTS.WILL_CHANGE : EVENTS.WILL_RESTORE;
     const camera = flicking.camera;
     const activePanel = this._activePanel;
@@ -351,7 +351,7 @@ abstract class Control {
     newActivePanel: Panel;
     axesEvent?: OnRelease;
   }) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const animate = () => this._controller.animateTo(position, duration, axesEvent);
     const state = this._controller.state;
 

package/src/control/FreeControl.ts

@@ -58,7 +58,7 @@ class FreeControl extends Control {
    * @return {Promise<void>}
    */
   public updatePosition(progressInPanel: number): void {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const activePanel = this._activePanel;
 
@@ -107,7 +107,7 @@ class FreeControl extends Control {
    * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
    */
   public async moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
 
     const camera = flicking.camera;
     const targetPos = camera.clampToReachablePosition(position);

package/src/control/SnapControl.ts

@@ -85,7 +85,7 @@ class SnapControl extends Control {
    * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
    */
   public async moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const activeAnchor = camera.findActiveAnchor();
     const anchorAtCamera = camera.findNearestAnchor(camera.position);
@@ -128,7 +128,7 @@ class SnapControl extends Control {
   }
 
   private _findSnappedAnchor(position: number, anchorAtCamera: AnchorPoint): AnchorPoint {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const count = this._count;
 
@@ -191,7 +191,7 @@ class SnapControl extends Control {
   }
 
   private _findAdjacentAnchor(posDelta: number, anchorAtCamera: AnchorPoint): AnchorPoint {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const adjacentAnchor = (posDelta > 0 ? camera.getNextAnchor(anchorAtCamera) : camera.getPrevAnchor(anchorAtCamera)) ?? anchorAtCamera;
 

package/src/control/StrictControl.ts

@@ -66,7 +66,7 @@ class StrictControl extends Control {
    * @return {this}
    */
   public updateInput(): this {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const renderer = flicking.renderer;
     const controller = this._controller;
@@ -178,7 +178,7 @@ class StrictControl extends Control {
    * @return {Promise<void>} A Promise which will be resolved after reaching the target position<ko>해당 좌표 도달시에 resolve되는 Promise</ko>
    */
   public async moveToPosition(position: number, duration: number, axesEvent?: OnRelease) {
-    const flicking = getFlickingAttached(this._flicking, "Control");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
     const activePanel = this._activePanel;
     const axesRange = this._controller.range;

package/src/core/AutoResizer.ts

@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Flicking from "../Flicking";
+
+class AutoResizer {
+  private _flicking: Flicking;
+  private _enabled: boolean;
+  private _resizeObserver: ResizeObserver | null;
+
+  public get enabled() { return this._enabled; }
+
+  public constructor(flicking: Flicking) {
+    this._flicking = flicking;
+    this._enabled = false;
+    this._resizeObserver = null;
+  }
+
+  public enable(): this {
+    const flicking = this._flicking;
+    const viewport = flicking.viewport;
+
+    if (this._enabled) {
+      this.disable();
+    }
+
+    if (flicking.useResizeObserver && !!window.ResizeObserver) {
+      const viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;
+
+      const resizeObserver = viewportSizeNot0
+        ? new ResizeObserver(this._skipFirstResize)
+        : new ResizeObserver(this._onResize);
+
+      resizeObserver.observe(flicking.viewport.element);
+
+      this._resizeObserver = resizeObserver;
+    } else {
+      window.addEventListener("resize", this._onResize);
+    }
+
+    this._enabled = true;
+
+    return this;
+  }
+
+  public disable(): this {
+    if (!this._enabled) return this;
+
+    const resizeObserver = this._resizeObserver;
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      this._resizeObserver = null;
+    } else {
+      window.removeEventListener("resize", this._onResize);
+    }
+
+    this._enabled = false;
+
+    return this;
+  }
+
+  private _onResize = () => {
+    void this._flicking.resize();
+  };
+
+  // eslint-disable-next-line @typescript-eslint/member-ordering
+  private _skipFirstResize = (() => {
+    let isFirstResize = true;
+
+    return (() => {
+      if (isFirstResize) {
+        isFirstResize = false;
+        return;
+      }
+      this._onResize();
+    });
+  })();
+}
+
+export default AutoResizer;

package/src/core/Viewport.ts

@@ -124,10 +124,10 @@ class Viewport {
     this._width = el.clientWidth;
     this._height = el.clientHeight;
     this._padding = {
-      left: parseFloat(elStyle.paddingLeft),
-      right: parseFloat(elStyle.paddingRight),
-      top: parseFloat(elStyle.paddingTop),
-      bottom: parseFloat(elStyle.paddingBottom)
+      left: elStyle.paddingLeft ? parseFloat(elStyle.paddingLeft) : 0,
+      right: elStyle.paddingRight ? parseFloat(elStyle.paddingRight) : 0,
+      top: elStyle.paddingTop ? parseFloat(elStyle.paddingTop) : 0,
+      bottom: elStyle.paddingBottom ? parseFloat(elStyle.paddingBottom) : 0
     };
     this._isBorderBoxSizing = elStyle.boxSizing === "border-box";
   }