@egjs/flicking 4.9.3 → 4.10.1

package/package.json

@@ -1,10 +1,13 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.9.3",
+	"version": "4.10.1",
 	"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",
 	"types": "declaration/index.d.ts",
 	"scripts": {
@@ -136,7 +139,7 @@
 		"typescript-transform-paths": "^2.2.3"
 	},
 	"dependencies": {
-		"@egjs/axes": "^3.8.0",
+		"@egjs/axes": "^3.8.1",
 		"@egjs/component": "^3.0.1",
 		"@egjs/imready": "^1.1.3",
 		"@egjs/list-differ": "^1.0.0"

package/src/Flicking.ts

@@ -1094,6 +1094,48 @@ class Flicking extends Component<FlickingEvents> {
     });
   }
 
+  /**
+   * Change the destination and duration of the animation currently playing
+   * @ko 재생 중인 애니메이션의 목적지와 재생 시간을 변경합니다
+   * @param {number} index The index of the 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>
+   * @throws {FlickingError}
+   * {@link ERROR_CODE INDEX_OUT_OF_RANGE} When the root is not either string or HTMLElement
+   * <ko>{@link ERROR_CODE INDEX_OUT_OF_RANGE} 해당 인덱스를 가진 패널이 존재하지 않을 경우</ko>
+   * @return {void}
+   */
+  public updateAnimation(index: number, duration?: number, direction?: ValueOf<typeof DIRECTION>): void {
+    if (!this._control.animating) {
+      return;
+    }
+
+    const renderer = this._renderer;
+    const panelCount = renderer.panelCount;
+
+    const panel = renderer.getPanel(index);
+
+    if (!panel) {
+      throw new FlickingError(ERROR.MESSAGE.INDEX_OUT_OF_RANGE(index, 0, panelCount - 1), ERROR.CODE.INDEX_OUT_OF_RANGE);
+    }
+
+    this._control.updateAnimation(panel, duration, direction);
+  }
+
+  /**
+   * Stops the animation currently playing
+   * @ko 재생 중인 애니메이션을 중단시킵니다
+   * @fires Flicking#moveEnd
+   * @return {void}
+   */
+  public stopAnimation(): void {
+    if (!this._control.animating) {
+      return;
+    }
+
+    this._control.stopAnimation();
+  }
+
   /**
    * Return the {@link Panel} at the given index. `null` if it doesn't exists.
    * @ko 주어진 인덱스에 해당하는 {@link Panel}을 반환합니다. 주어진 인덱스에 해당하는 패널이 존재하지 않을 경우 `null`을 반환합니다.

package/src/control/AxesController.ts

@@ -139,6 +139,7 @@ class AxesController {
     });
     this._panInput = new PanInput(flicking.viewport.element, {
       inputType: flicking.inputType,
+      threshold: 1,
       iOSEdgeSwipeThreshold: flicking.iOSEdgeSwipeThreshold,
       scale: flicking.horizontal ? [-1, 0] : [0, -1],
       releaseOnScroll: true
@@ -214,6 +215,39 @@ class AxesController {
     return this;
   }
 
+  /**
+   * 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
    * @ko {@link https://naver.github.io/egjs-axes/ @egjs/axes}의 상태를 갱신합니다

package/src/control/Control.ts

@@ -173,6 +173,43 @@ abstract class Control {
     return this;
   }
 
+  /**
+   * 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
    * @ko resize 이후에 position을 업데이트합니다
@@ -267,41 +304,7 @@ abstract class Control {
     direction?: ValueOf<typeof DIRECTION>;
     axesEvent?: OnRelease;
   }) {
-    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);
 
     return this._animateToPosition({ position, duration, newActivePanel: panel, axesEvent });
@@ -380,6 +383,45 @@ abstract class Control {
       });
     }
   }
+
+  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;