@egjs/flicking 4.9.3 → 4.10.1

package/declaration/Flicking.d.ts

@@ -206,6 +206,8 @@ declare class Flicking extends Component<FlickingEvents> {
     prev(duration?: number): Promise<void>;
     next(duration?: number): Promise<void>;
     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;
     enableInput(): this;
     disableInput(): this;

package/declaration/control/AxesController.d.ts

@@ -28,6 +28,8 @@ declare class AxesController {
     enable(): this;
     disable(): this;
     release(): this;
+    updateAnimation(position: number, duration?: number): this;
+    stopAnimation(): this;
     update(controlParams: ControlParams): this;
     addPreventClickHandler(): this;
     removePreventClickHandler(): this;

package/declaration/control/Control.d.ts

@@ -20,6 +20,8 @@ declare abstract class Control {
     enable(): this;
     disable(): this;
     release(): this;
+    updateAnimation(panel: Panel, duration?: number, direction?: ValueOf<typeof DIRECTION>): this;
+    stopAnimation(): this;
     updatePosition(progressInPanel: number): void;
     updateInput(): this;
     resetActive(): this;
@@ -36,5 +38,6 @@ declare abstract class Control {
         newActivePanel: Panel;
         axesEvent?: OnRelease;
     }): Promise<void>;
+    private _getPosition;
 }
 export default Control;

package/dist/flicking.esm.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.9.3
+version: 4.10.1
 */
 import Component, { ComponentEvent } from '@egjs/component';
 import Axes, { PanInput } from '@egjs/axes';
@@ -2166,10 +2166,6 @@ function () {
   return StateMachine;
 }();
 
-/*
- * Copyright (c) 2015 NAVER Corp.
- * egjs projects are licensed under the MIT license
- */
 /**
  * A controller that handles the {@link https://naver.github.io/egjs-axes/ @egjs/axes} events
  * @ko {@link https://naver.github.io/egjs-axes/ @egjs/axes}의 이벤트를 처리하는 컨트롤러 컴포넌트
@@ -2379,6 +2375,7 @@ function () {
     });
     this._panInput = new PanInput(flicking.viewport.element, {
       inputType: flicking.inputType,
+      threshold: 1,
       iOSEdgeSwipeThreshold: flicking.iOSEdgeSwipeThreshold,
       scale: flicking.horizontal ? [-1, 0] : [0, -1],
       releaseOnScroll: true
@@ -2464,6 +2461,44 @@ function () {
     (_a = this._panInput) === null || _a === void 0 ? void 0 : _a.release();
     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}
+   */
+
+
+  __proto.updateAnimation = function (position, duration) {
+    var _a;
+
+    var _b;
+
+    this._animatingContext = __assign(__assign({}, this._animatingContext), {
+      end: position
+    });
+    (_b = this._axes) === null || _b === void 0 ? void 0 : _b.updateAnimation({
+      destPos: (_a = {}, _a[POSITION_KEY] = position, _a),
+      duration: duration
+    });
+    return this;
+  };
+  /**
+   * Stops the animation currently playing
+   * @ko 재생 중인 애니메이션을 중단시킵니다
+   * @chainable
+   * @return {this}
+   */
+
+
+  __proto.stopAnimation = function () {
+    var _a;
+
+    (_a = this._axes) === null || _a === void 0 ? void 0 : _a.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}의 상태를 갱신합니다
@@ -2788,6 +2823,47 @@ function () {
 
     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}
+   */
+
+
+  __proto.updateAnimation = function (panel, duration, direction) {
+    var state = this._controller.state;
+
+    var position = this._getPosition(panel, direction !== null && direction !== void 0 ? direction : DIRECTION.NONE);
+
+    state.targetPanel = panel;
+
+    this._controller.updateAnimation(position, duration);
+
+    return this;
+  };
+  /**
+   * Stops the animation currently playing
+   * @ko 재생 중인 애니메이션을 중단시킵니다
+   * @chainable
+   * @return {this}
+   */
+
+
+  __proto.stopAnimation = function () {
+    var state = this._controller.state;
+    state.targetPanel = null;
+
+    this._controller.stopAnimation();
+
+    return this;
+  };
   /**
    * Update position after resizing
    * @ko resize 이후에 position을 업데이트합니다
@@ -2883,38 +2959,9 @@ function () {
         direction = _b === void 0 ? DIRECTION.NONE : _b,
         axesEvent = _a.axesEvent;
     return __awaiter(this, void 0, void 0, function () {
-      var flicking, camera, position, nearestAnchor, camPos_1, camRangeDiff, possiblePositions;
+      var position;
       return __generator(this, function (_c) {
-        flicking = getFlickingAttached(this._flicking);
-        camera = flicking.camera;
-        position = panel.position;
-        nearestAnchor = camera.findNearestAnchor(position);
-
-        if (panel.removed || !nearestAnchor) {
-          return [2
-          /*return*/
-          , Promise.reject(new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(panel.position), 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) {
-          camPos_1 = this._controller.position;
-          camRangeDiff = camera.rangeDiff;
-          possiblePositions = [position, position + camRangeDiff, position - camRangeDiff].filter(function (pos) {
-            if (direction === DIRECTION.NONE) return true;
-            return direction === DIRECTION.PREV ? pos <= camPos_1 : pos >= camPos_1;
-          });
-          position = possiblePositions.reduce(function (nearestPosition, pos) {
-            if (Math.abs(camPos_1 - pos) < Math.abs(camPos_1 - nearestPosition)) {
-              return pos;
-            } else {
-              return nearestPosition;
-            }
-          }, Infinity);
-        }
+        position = this._getPosition(panel, direction);
 
         this._triggerIndexChangeEvent(panel, panel.position, axesEvent);
 
@@ -3031,6 +3078,45 @@ function () {
     });
   };
 
+  __proto._getPosition = function (panel, direction) {
+    if (direction === void 0) {
+      direction = DIRECTION.NONE;
+    }
+
+    var flicking = getFlickingAttached(this._flicking);
+    var camera = flicking.camera;
+    var position = panel.position;
+    var nearestAnchor = camera.findNearestAnchor(position);
+
+    if (panel.removed || !nearestAnchor) {
+      throw new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(panel.position), 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
+      var camPos_1 = this._controller.position; // Actual position of the Axes
+
+      var camRangeDiff = camera.rangeDiff;
+      var possiblePositions = [position, position + camRangeDiff, position - camRangeDiff].filter(function (pos) {
+        if (direction === DIRECTION.NONE) return true;
+        return direction === DIRECTION.PREV ? pos <= camPos_1 : pos >= camPos_1;
+      });
+      position = possiblePositions.reduce(function (nearestPosition, pos) {
+        if (Math.abs(camPos_1 - pos) < Math.abs(camPos_1 - nearestPosition)) {
+          return pos;
+        } else {
+          return nearestPosition;
+        }
+      }, Infinity);
+    }
+
+    return position;
+  };
+
   return Control;
 }();
 
@@ -8036,6 +8122,49 @@ function (_super) {
       direction: direction
     });
   };
+  /**
+   * 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}
+   */
+
+
+  __proto.updateAnimation = function (index, duration, direction) {
+    if (!this._control.animating) {
+      return;
+    }
+
+    var renderer = this._renderer;
+    var panelCount = renderer.panelCount;
+    var panel = renderer.getPanel(index);
+
+    if (!panel) {
+      throw new FlickingError(MESSAGE.INDEX_OUT_OF_RANGE(index, 0, panelCount - 1), CODE.INDEX_OUT_OF_RANGE);
+    }
+
+    this._control.updateAnimation(panel, duration, direction);
+  };
+  /**
+   * Stops the animation currently playing
+   * @ko 재생 중인 애니메이션을 중단시킵니다
+   * @fires Flicking#moveEnd
+   * @return {void}
+   */
+
+
+  __proto.stopAnimation = function () {
+    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`을 반환합니다.
@@ -8579,7 +8708,7 @@ function (_super) {
    */
 
 
-  Flicking.VERSION = "4.9.3";
+  Flicking.VERSION = "4.10.1";
   return Flicking;
 }(Component);