@egjs/flicking 4.6.2 → 4.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.6.2",
+	"version": "4.7.1",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",
@@ -33,6 +33,7 @@
 		"demo:prebuild-version": "cpx 'dist/**/*' docs/build/release/$npm_package_version/dist --clean",
 		"demo:prebuild-latest": "cpx 'dist/**/*' docs/build/release/latest/dist --clean",
 		"demo:deploy": "npm run docs:release && npm run build && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d docs/build/ --add --remote upstream",
+		"demo:deploy-origin": "npm run docs:release && npm run build && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d docs/build/ --add --remote origin",
 		"release": "release-helper upstream",
 		"changelog": "node ./config/changelog.js",
 		"coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
@@ -135,7 +136,7 @@
 		"typescript-transform-paths": "^2.2.3"
 	},
 	"dependencies": {
-		"@egjs/axes": "^2.8.0",
+		"@egjs/axes": "^3.2.0",
 		"@egjs/component": "^3.0.1",
 		"@egjs/imready": "^1.1.3",
 		"@egjs/list-differ": "^1.0.0"

package/src/Flicking.ts

@@ -58,6 +58,7 @@ export interface FlickingOptions {
   panelsPerView: number;
   noPanelStyleOverride: boolean;
   resizeOnContentsReady: boolean;
+  nested: boolean;
 
   // EVENT
   needPanelThreshold: number;
@@ -136,6 +137,7 @@ class Flicking extends Component<FlickingEvents> {
   private _noPanelStyleOverride: FlickingOptions["noPanelStyleOverride"];
   private _resizeOnContentsReady: FlickingOptions["resizeOnContentsReady"];
   private _virtual: FlickingOptions["virtual"];
+  private _nested: FlickingOptions["nested"];
 
   private _needPanelThreshold: FlickingOptions["needPanelThreshold"];
   private _preventEventsBeforeInit: FlickingOptions["preventEventsBeforeInit"];
@@ -413,6 +415,15 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    */
   public get resizeOnContentsReady() { return this._resizeOnContentsReady; }
+  /**
+   * If you enable this option on child Flicking when the Flicking is placed inside the Flicking, the parent Flicking will move in the same direction after the child Flicking reaches the first/last panel.
+   * If the parent Flicking and child Flicking have different horizontal option, you do not need to set this option.
+   * @ko Flicking 내부에 Flicking이 배치될 때 하위 Flicking에서 이 옵션을 활성화하면 하위 Flicking이 첫/마지막 패널에 도달한 뒤부터 같은 방향으로 상위 Flicking이 움직입니다.
+   * 만약 상위 Flicking과 하위 Flicking이 서로 다른 horizontal 옵션을 가지고 있다면 이 옵션을 설정할 필요가 없습니다.
+   * @type {boolean}
+   * @default false
+   */
+  public get nested() { return this._nested; }
   // EVENTS
   /**
    * A Threshold from viewport edge before triggering `needPanel` event
@@ -677,6 +688,7 @@ class Flicking extends Component<FlickingEvents> {
   public set panelsPerView(val: FlickingOptions["panelsPerView"]) { this._panelsPerView = val; }
   public set noPanelStyleOverride(val: FlickingOptions["noPanelStyleOverride"]) { this._noPanelStyleOverride = val; }
   public set resizeOnContentsReady(val: FlickingOptions["resizeOnContentsReady"]) { this._resizeOnContentsReady = val; }
+  public set nested(val: FlickingOptions["nested"]) { this._nested = val; }
   // EVENTS
   public set needPanelThreshold(val: FlickingOptions["needPanelThreshold"]) { this._needPanelThreshold = val; }
   public set preventEventsBeforeInit(val: FlickingOptions["preventEventsBeforeInit"]) { this._preventEventsBeforeInit = val; }
@@ -768,6 +780,7 @@ class Flicking extends Component<FlickingEvents> {
     panelsPerView = -1,
     noPanelStyleOverride = false,
     resizeOnContentsReady = false,
+    nested = false,
     needPanelThreshold = 0,
     preventEventsBeforeInit = true,
     deceleration = 0.0075,
@@ -808,6 +821,7 @@ class Flicking extends Component<FlickingEvents> {
     this._panelsPerView = panelsPerView;
     this._noPanelStyleOverride = noPanelStyleOverride;
     this._resizeOnContentsReady = resizeOnContentsReady;
+    this._nested = nested;
     this._virtual = virtual;
     this._needPanelThreshold = needPanelThreshold;
     this._preventEventsBeforeInit = preventEventsBeforeInit;

package/src/camera/Camera.ts

@@ -383,25 +383,7 @@ class Camera {
    * @return {AnchorPoint | null} The {@link AnchorPoint} nearest to the given position<ko>해당 좌표에 가장 인접한 {@link AnchorPoint}</ko>
    */
   public findNearestAnchor(position: number): AnchorPoint | null {
-    const anchors = this._anchors;
-
-    if (anchors.length <= 0) return null;
-
-    let prevDist = Infinity;
-    for (let anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
-      const anchor = anchors[anchorIdx];
-      const dist = Math.abs(anchor.position - position);
-
-      if (dist > prevDist) {
-        // Return previous anchor
-        return anchors[anchorIdx - 1];
-      }
-
-      prevDist = dist;
-    }
-
-    // Return last anchor
-    return anchors[anchors.length - 1];
+    return this._mode.findNearestAnchor(position);
   }
 
   /**

package/src/camera/mode/CameraMode.ts

@@ -44,6 +44,28 @@ abstract class CameraMode {
     }, null);
   }
 
+  public findNearestAnchor(position: number): AnchorPoint | null {
+    const anchors = this._flicking.camera.anchorPoints;
+
+    if (anchors.length <= 0) return null;
+
+    let prevDist = Infinity;
+    for (let anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
+      const anchor = anchors[anchorIdx];
+      const dist = Math.abs(anchor.position - position);
+
+      if (dist > prevDist) {
+        // Return previous anchor
+        return anchors[anchorIdx - 1];
+      }
+
+      prevDist = dist;
+    }
+
+    // Return last anchor
+    return anchors[anchors.length - 1];
+  }
+
   public clampToReachablePosition(position: number): number {
     const camera = this._flicking.camera;
     const range = camera.range;

package/src/camera/mode/CircularCameraMode.ts

@@ -64,6 +64,33 @@ class CircularCameraMode extends CameraMode {
     }));
   }
 
+  public findNearestAnchor(position: number): AnchorPoint | null {
+    const camera = this._flicking.camera;
+    const anchors = camera.anchorPoints;
+
+    if (anchors.length <= 0) return null;
+
+    const camRange = camera.range;
+    let minDist = Infinity;
+    let minDistIndex = -1;
+    for (let anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
+      const anchor = anchors[anchorIdx];
+      const dist = Math.min(
+        Math.abs(anchor.position - position),
+        Math.abs(anchor.position - camRange.min + camRange.max - position),
+        Math.abs(position - camRange.min + camRange.max - anchor.position)
+      );
+
+      if (dist < minDist) {
+        minDist = dist;
+        minDistIndex = anchorIdx;
+      }
+    }
+
+    // Return last anchor
+    return anchors[minDistIndex];
+  }
+
   public findAnchorIncludePosition(position: number): AnchorPoint | null {
     const camera = this._flicking.camera;
     const range = camera.range;

package/src/control/AxesController.ts

@@ -86,7 +86,7 @@ class AxesController {
    * @type {boolean}
    * @readonly
    */
-  public get enabled() { return this._panInput?.isEnable() ?? false; }
+  public get enabled() { return this._panInput?.isEnabled() ?? false; }
   /**
    * Current position value in {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes} instance
    * @ko {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes} 인스턴스 내부의 현재 좌표 값
@@ -134,6 +134,7 @@ class AxesController {
     }, {
       deceleration: flicking.deceleration,
       interruptable: flicking.interruptable,
+      nested: flicking.nested,
       easing: flicking.easing
     });
     this._panInput = new PanInput(flicking.viewport.element, {
@@ -220,7 +221,7 @@ class AxesController {
     axis.range = [controlParams.range.min, controlParams.range.max];
     axis.bounce = parseBounce(flicking.bounce, camera.size);
 
-    axes.axm.set({ [AXES.POSITION_KEY]: controlParams.position });
+    axes.axisManager.set({ [AXES.POSITION_KEY]: controlParams.position });
 
     return this;
   }
@@ -331,7 +332,7 @@ class AxesController {
         ? circulatePosition(position, camera.range.min, camera.range.max)
         : position;
 
-      axes.axm.set({ [AXES.POSITION_KEY]: newPos });
+      axes.axisManager.set({ [AXES.POSITION_KEY]: newPos });
 
       return Promise.resolve();
     } else {

package/src/control/StrictControl.ts

@@ -219,6 +219,10 @@ class StrictControl extends Control {
     const shouldBounceToFirst = position <= cameraRange.min && isBetween(firstAnchor.panel.index, indexRange.min, indexRange.max);
     const shouldBounceToLast = position >= cameraRange.max && isBetween(lastAnchor.panel.index, indexRange.min, indexRange.max);
 
+    const isAdjacent = adjacentAnchor && (indexRange.min <= indexRange.max
+      ? isBetween(adjacentAnchor.index, indexRange.min, indexRange.max)
+      : adjacentAnchor.index >= indexRange.min || adjacentAnchor.index <= indexRange.max);
+
     if (shouldBounceToFirst || shouldBounceToLast) {
       // In bounce area
       const targetAnchor = position < cameraRange.min ? firstAnchor : lastAnchor;
@@ -229,10 +233,10 @@ class StrictControl extends Control {
       // Move to anchor at position
       targetPanel = anchorAtPosition.panel;
       targetPos = anchorAtPosition.position;
-    } else if (isOverThreshold && adjacentAnchor && isBetween(adjacentAnchor.index, indexRange.min, indexRange.max)) {
+    } else if (isOverThreshold && isAdjacent) {
       // Move to adjacent anchor
-      targetPanel = adjacentAnchor.panel;
-      targetPos = adjacentAnchor.position;
+      targetPanel = adjacentAnchor!.panel;
+      targetPos = adjacentAnchor!.position;
     } else {
       // Restore to active panel
       targetPos = camera.clampToReachablePosition(activePanel.position);

package/src/renderer/Renderer.ts

@@ -384,7 +384,7 @@ abstract class Renderer {
 
     if (!resizeOnContentsReady || flicking.virtualEnabled) return;
 
-    const hasContents = (panel: Panel) => !!panel.element.querySelector("img, video");
+    const hasContents = (panel: Panel) => panel.element && !!panel.element.querySelector("img, video");
     checkingPanels = checkingPanels.filter(panel => hasContents(panel));
 
     if (checkingPanels.length <= 0) return;

package/TODO.md

@@ -1,3 +0,0 @@
-## React 18 대응
-- [] updateoffset을 미루기
-  - render가 완료되기 전에 updateOffset이 3번 호출되었음