@egjs/flicking 4.9.3 → 4.10.1

package/dist/flicking.pkgd.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
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -2426,7 +2426,7 @@ version: 4.9.3
     license: MIT
     author: NAVER Corp.
     repository: https://github.com/naver/egjs-axes
-    version: 3.8.0
+    version: 3.8.1
     */
 
     /*! *****************************************************************************
@@ -4548,6 +4548,8 @@ version: 4.9.3
       };
 
       __proto.updateAnimation = function (options) {
+        var _a;
+
         var animateParam = this._animateParam;
 
         if (!animateParam) {
@@ -4556,7 +4558,7 @@ version: 4.9.3
 
         var diffTime = new Date().getTime() - animateParam.startTime;
         var pos = (options === null || options === void 0 ? void 0 : options.destPos) || animateParam.destPos;
-        var duration = (options === null || options === void 0 ? void 0 : options.duration) || animateParam.duration;
+        var duration = (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : animateParam.duration;
 
         if ((options === null || options === void 0 ? void 0 : options.restart) || duration <= diffTime) {
           this.setTo(pos, duration - diffTime);
@@ -5087,6 +5089,7 @@ version: 4.9.3
 
       __proto.stopAnimation = function () {
         this.animationManager.stopAnimation();
+        this.animationManager.finish(false);
         return this;
       };
       /**
@@ -5176,7 +5179,7 @@ version: 4.9.3
        */
 
 
-      Axes.VERSION = "3.8.0";
+      Axes.VERSION = "3.8.1";
       /* eslint-enable */
 
       /**
@@ -5288,7 +5291,7 @@ version: 4.9.3
      * @param {Number} [scale[1]=1] vertical axis scale <ko>수직축 배율</ko>
      * @param {Number} [thresholdAngle=45] The threshold value that determines whether user action is horizontal or vertical (0~90) <ko>사용자의 동작이 가로 방향인지 세로 방향인지 판단하는 기준 각도(0~90)</ko>
      * @param {Number} [threshold=0] Minimal pan distance required before recognizing <ko>사용자의 Pan 동작을 인식하기 위해산 최소한의 거리</ko>
-     * @param {Boolean} [preventClickOnDrag=false] Whether to cancel the {@link https://developer.mozilla.org/en/docs/Web/API/Element/click_event click} event when the user finishes dragging more than 1 pixel <ko>사용자가 1픽셀 이상 드래그를 마쳤을 때 {@link https://developer.mozilla.org/ko/docs/Web/API/Element/click_event click} 이벤트 취소 여부/ko>
+     * @param {Boolean} [preventClickOnDrag=false] Whether to cancel the {@link https://developer.mozilla.org/en/docs/Web/API/Element/click_event click} event when the user finishes dragging more than 1 pixel <ko>사용자가 1픽셀 이상 드래그를 마쳤을 때 {@link https://developer.mozilla.org/ko/docs/Web/API/Element/click_event click} 이벤트 취소 여부</ko>
      * @param {Number} [iOSEdgeSwipeThreshold=30] Area (px) that can go to the next page when swiping the right edge in iOS safari <ko>iOS Safari에서 오른쪽 엣지를 스와이프 하는 경우 다음 페이지로 넘어갈 수 있는 영역(px)</ko>
      * @param {String} [touchAction=null] Value that overrides the element's "touch-action" css property. If set to null, it is automatically set to prevent scrolling in the direction of the connected axis. <ko>엘리먼트의 "touch-action" CSS 속성을 덮어쓰는 값. 만약 null로 설정된 경우, 연결된 축 방향으로의 스크롤을 방지하게끔 자동으로 설정된다.</ko>
      **/
@@ -5334,6 +5337,7 @@ version: 4.9.3
         this._atRightEdge = false;
         this._rightEdgeTimer = 0;
         this._dragged = false;
+        this._isOverThreshold = false;
 
         this._preventClickWhenDragged = function (e) {
           if (_this._dragged) {
@@ -5468,6 +5472,7 @@ version: 4.9.3
         if (panEvent.srcEvent.cancelable !== false) {
           var edgeThreshold = this.options.iOSEdgeSwipeThreshold;
           this._dragged = false;
+          this._isOverThreshold = false;
 
           this._observer.hold(this, panEvent);
 
@@ -5486,6 +5491,7 @@ version: 4.9.3
             iOSEdgeSwipeThreshold = _a.iOSEdgeSwipeThreshold,
             releaseOnScroll = _a.releaseOnScroll,
             inputButton = _a.inputButton,
+            threshold = _a.threshold,
             thresholdAngle = _a.thresholdAngle;
         var activeEvent = this._activeEvent;
         var panEvent = activeEvent.onEventMove(event, inputButton);
@@ -5502,6 +5508,8 @@ version: 4.9.3
         }
 
         var userDirection = getDirectionByAngle(panEvent.angle, thresholdAngle);
+        var useHorizontal = useDirection(DIRECTION_HORIZONTAL, this._direction, userDirection);
+        var useVertical = useDirection(DIRECTION_VERTICAL, this._direction, userDirection);
 
         if (activeEvent.prevEvent && IS_IOS_SAFARI) {
           var swipeLeftToRight = panEvent.center.x < 0;
@@ -5526,7 +5534,9 @@ version: 4.9.3
           }
         }
 
-        var offset = this._getOffset([panEvent.offsetX, panEvent.offsetY], [useDirection(DIRECTION_HORIZONTAL, this._direction, userDirection), useDirection(DIRECTION_VERTICAL, this._direction, userDirection)]);
+        var distance = this._getDistance([panEvent.deltaX, panEvent.deltaY], [useHorizontal, useVertical]);
+
+        var offset = this._getOffset([panEvent.offsetX, panEvent.offsetY], [useHorizontal, useVertical]);
 
         var prevent = offset.some(function (v) {
           return v !== 0;
@@ -5542,8 +5552,9 @@ version: 4.9.3
 
         panEvent.preventSystemEvent = prevent;
 
-        if (prevent) {
+        if (prevent && (this._isOverThreshold || distance >= threshold)) {
           this._dragged = true;
+          this._isOverThreshold = true;
 
           this._observer.change(this, panEvent, toAxis(this.axes, offset));
         }
@@ -5564,9 +5575,7 @@ version: 4.9.3
 
         clearTimeout(this._rightEdgeTimer);
         var prevEvent = activeEvent.prevEvent;
-
-        var velocity = this._getOffset([Math.abs(prevEvent.velocityX) * (prevEvent.offsetX < 0 ? -1 : 1), Math.abs(prevEvent.velocityY) * (prevEvent.offsetY < 0 ? -1 : 1)], [useDirection(DIRECTION_HORIZONTAL, this._direction), useDirection(DIRECTION_VERTICAL, this._direction)]);
-
+        var velocity = this._isOverThreshold ? this._getOffset([Math.abs(prevEvent.velocityX) * (prevEvent.offsetX < 0 ? -1 : 1), Math.abs(prevEvent.velocityY) * (prevEvent.offsetY < 0 ? -1 : 1)], [useDirection(DIRECTION_HORIZONTAL, this._direction), useDirection(DIRECTION_VERTICAL, this._direction)]) : [0, 0];
         activeEvent.onRelease();
 
         this._observer.release(this, prevEvent, velocity);
@@ -5603,6 +5612,10 @@ version: 4.9.3
         return [direction[0] ? properties[0] * scale[0] : 0, direction[1] ? properties[1] * scale[1] : 0];
       };
 
+      __proto._getDistance = function (delta, direction) {
+        return Math.sqrt(Number(direction[0]) * Math.pow(delta[0], 2) + Number(direction[1]) * Math.pow(delta[1], 2));
+      };
+
       __proto._attachElementEvent = function (observer) {
         var _this = this;
 
@@ -6403,10 +6416,6 @@ version: 4.9.3
       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}의 이벤트를 처리하는 컨트롤러 컴포넌트
@@ -6616,6 +6625,7 @@ version: 4.9.3
         });
         this._panInput = new PanInput(flicking.viewport.element, {
           inputType: flicking.inputType,
+          threshold: 1,
           iOSEdgeSwipeThreshold: flicking.iOSEdgeSwipeThreshold,
           scale: flicking.horizontal ? [-1, 0] : [0, -1],
           releaseOnScroll: true
@@ -6701,6 +6711,44 @@ version: 4.9.3
         (_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$2(__assign$2({}, 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}의 상태를 갱신합니다
@@ -7025,6 +7073,47 @@ version: 4.9.3
 
         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을 업데이트합니다
@@ -7120,38 +7209,9 @@ version: 4.9.3
             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);
 
@@ -7268,6 +7328,45 @@ version: 4.9.3
         });
       };
 
+      __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;
     }();
 
@@ -13338,6 +13437,49 @@ version: 4.9.3
           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`을 반환합니다.
@@ -13881,7 +14023,7 @@ version: 4.9.3
        */
 
 
-      Flicking.VERSION = "4.9.3";
+      Flicking.VERSION = "4.10.1";
       return Flicking;
     }(Component);