@egjs/flicking - npm Package Compare versions

Comparing version 4.9.3 to 4.10.0

declaration/control/AxesController.d.ts

@@ -31,2 +31,4 @@ import Axes, { OnRelease } from "@egjs/axes";
     release(): this;
+    updateAnimation(position: number, duration?: number): this;
+    stopAnimation(): this;
     update(controlParams: ControlParams): this;
@@ -33,0 +35,0 @@ addPreventClickHandler(): this;

declaration/control/Control.d.ts

@@ -23,2 +23,4 @@ import { OnRelease } from "@egjs/axes";
     release(): this;
+    updateAnimation(panel: Panel, duration?: number, direction?: ValueOf<typeof DIRECTION>): this;
+    stopAnimation(): this;
     updatePosition(progressInPanel: number): void;
@@ -40,3 +42,4 @@ updateInput(): this;
     }): Promise<void>;
+    private _getPosition;
 }
 export default Control;

declaration/Flicking.d.ts

@@ -209,2 +209,4 @@ import Component from "@egjs/component";
     moveTo(index: number, duration?: number, direction?: ValueOf<typeof DIRECTION>): Promise<void>;
+    updateAnimation(index: number, duration?: number, direction?: ValueOf<typeof DIRECTION>): void;
+    stopAnimation(): void;
     getPanel(index: number): Panel | null;
@@ -211,0 +213,0 @@ enableInput(): this;

package.json

 {
 	"name": "@egjs/flicking",
-	"version": "4.9.3",
+	"version": "4.10.0",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",
-	"sideEffects": false,
+	"sideEffects": [
+		"**/*.css",
+		"**/*.sass"
+	],
 	"es2015": "dist/flicking.esm.js",
@@ -139,3 +142,3 @@ "types": "declaration/index.d.ts",
 	"dependencies": {
-		"@egjs/axes": "^3.8.0",
+		"@egjs/axes": "^3.8.1",
 		"@egjs/component": "^3.0.1",
@@ -142,0 +145,0 @@ "@egjs/imready": "^1.1.3",

src/control/AxesController.ts

@@ -218,2 +218,35 @@ /*
   /**
+   * Change the destination and duration of the animation currently playing
+   * @ko 재생 중인 애니메이션의 목적지와 재생 시간을 변경합니다
+   * @param {number} position A position to move<ko>이동할 좌표</ko>
+   * @param {number} duration Duration of the animation (unit: ms)<ko>애니메이션 진행 시간 (단위: ms)</ko>
+   * @chainable
+   * @return {this}
+   */
+  public updateAnimation(position: number, duration?: number): this {
+    this._animatingContext = {
+      ...this._animatingContext,
+      end: position
+    };
+    this._axes?.updateAnimation({
+      destPos: { [AXES.POSITION_KEY]: position },
+      duration
+    });
+
+    return this;
+  }
+
+  /**
+   * Stops the animation currently playing
+   * @ko 재생 중인 애니메이션을 중단시킵니다
+   * @chainable
+   * @return {this}
+   */
+  public stopAnimation(): this {
+    this._axes?.stopAnimation();
+
+    return this;
+  }
+
+  /**
    * Update {@link https://naver.github.io/egjs-axes/ @egjs/axes}'s state
@@ -220,0 +253,0 @@ * @ko {@link https://naver.github.io/egjs-axes/ @egjs/axes}의 상태를 갱신합니다

src/control/Control.ts

@@ -177,2 +177,39 @@ /*
   /**
+   * Change the destination and duration of the animation currently playing
+   * @ko 재생 중인 애니메이션의 목적지와 재생 시간을 변경합니다
+   * @param {Panel} panel The target panel to move<ko>이동할 패널</ko>
+   * @param {number} duration Duration of the animation (unit: ms)<ko>애니메이션 진행 시간 (단위: ms)</ko>
+   * @param {DIRECTION} direction Direction to move, only available in the {@link Flicking#circular circular} mode<ko>이동할 방향. {@link Flicking#circular circular} 옵션 활성화시에만 사용 가능합니다</ko>
+   * @chainable
+   * @throws {FlickingError}
+   * {@link ERROR_CODE POSITION_NOT_REACHABLE} When the given panel is already removed or not in the Camera's {@link Camera#range range}
+   * <ko>{@link ERROR_CODE POSITION_NOT_REACHABLE} 주어진 패널이 제거되었거나, Camera의 {@link Camera#range range} 밖에 있을 경우</ko>
+   * @return {this}
+   */
+  public updateAnimation(panel: Panel, duration?: number, direction?: ValueOf<typeof DIRECTION>): this {
+    const state = this._controller.state;
+    const position = this._getPosition(panel, direction ?? DIRECTION.NONE);
+
+    state.targetPanel = panel;
+    this._controller.updateAnimation(position, duration);
+
+    return this;
+  }
+
+  /**
+   * Stops the animation currently playing
+   * @ko 재생 중인 애니메이션을 중단시킵니다
+   * @chainable
+   * @return {this}
+   */
+  public stopAnimation(): this {
+    const state = this._controller.state;
+
+    state.targetPanel = null;
+    this._controller.stopAnimation();
+
+    return this;
+  }
+
+  /**
    * Update position after resizing
@@ -271,37 +308,3 @@ * @ko resize 이후에 position을 업데이트합니다
   }) {
-    const flicking = getFlickingAttached(this._flicking);
-    const camera = flicking.camera;
-
-    let position = panel.position;
-    const nearestAnchor = camera.findNearestAnchor(position);
-
-    if (panel.removed || !nearestAnchor) {
-      return Promise.reject(new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(panel.position), ERROR.CODE.POSITION_NOT_REACHABLE));
-    }
-    if (!camera.canReach(panel)) {
-      // Override position & panel if that panel is not reachable
-      position = nearestAnchor.position;
-      panel = nearestAnchor.panel;
-    } else if (flicking.circularEnabled) {
-      // Circular mode is enabled, find nearest distance to panel
-      const camPos = this._controller.position; // Actual position of the Axes
-      const camRangeDiff = camera.rangeDiff;
-      const possiblePositions = [position, position + camRangeDiff, position - camRangeDiff]
-        .filter(pos => {
-          if (direction === DIRECTION.NONE) return true;
-
-          return direction === DIRECTION.PREV
-            ? pos <= camPos
-            : pos >= camPos;
-        });
-
-      position = possiblePositions.reduce((nearestPosition, pos) => {
-        if (Math.abs(camPos - pos) < Math.abs(camPos - nearestPosition)) {
-          return pos;
-        } else {
-          return nearestPosition;
-        }
-      }, Infinity);
-    }
-
+    const position = this._getPosition(panel, direction);
     this._triggerIndexChangeEvent(panel, panel.position, axesEvent);
@@ -385,4 +388,43 @@
   }
+
+  private _getPosition(panel: Panel, direction: ValueOf<typeof DIRECTION> = DIRECTION.NONE) {
+    const flicking = getFlickingAttached(this._flicking);
+    const camera = flicking.camera;
+
+    let position = panel.position;
+    const nearestAnchor = camera.findNearestAnchor(position);
+
+    if (panel.removed || !nearestAnchor) {
+      throw new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(panel.position), ERROR.CODE.POSITION_NOT_REACHABLE);
+    }
+    if (!camera.canReach(panel)) {
+      // Override position & panel if that panel is not reachable
+      position = nearestAnchor.position;
+      panel = nearestAnchor.panel;
+    } else if (flicking.circularEnabled) {
+      // Circular mode is enabled, find nearest distance to panel
+      const camPos = this._controller.position; // Actual position of the Axes
+      const camRangeDiff = camera.rangeDiff;
+      const possiblePositions = [position, position + camRangeDiff, position - camRangeDiff]
+        .filter(pos => {
+          if (direction === DIRECTION.NONE) return true;
+
+          return direction === DIRECTION.PREV
+            ? pos <= camPos
+            : pos >= camPos;
+        });
+
+      position = possiblePositions.reduce((nearestPosition, pos) => {
+        if (Math.abs(camPos - pos) < Math.abs(camPos - nearestPosition)) {
+          return pos;
+        } else {
+          return nearestPosition;
+        }
+      }, Infinity);
+    }
+
+    return position;
+  }
 }
 
 export default Control;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4101372

increased by1.34%

Lines of code

38308

increased by1.12%

Dependency changes

• Updated@egjs/axes@^3.8.1