@egjs/flicking 4.9.2 → 4.9.3-beta.0

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.2
+version: 4.9.3-beta.0
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -2426,7 +2426,7 @@ version: 4.9.2
     license: MIT
     author: NAVER Corp.
     repository: https://github.com/naver/egjs-axes
-    version: 3.6.0
+    version: 3.8.0
     */
 
     /*! *****************************************************************************
@@ -2772,15 +2772,6 @@ version: 4.9.2
         return DIRECTION_NONE;
       }
     };
-    var getInitialPos = function (axis, startPos) {
-      return __assign$1(__assign$1({}, Object.keys(axis).reduce(function (result, key) {
-        var _a;
-
-        var _b, _c;
-
-        return Object.assign(result, (_a = {}, _a[key] = (_c = (_b = axis[key].startPos) !== null && _b !== void 0 ? _b : axis[key].range[0]) !== null && _c !== void 0 ? _c : 0, _a));
-      }, {})), startPos);
-    };
     var useDirection = function (checkType, direction, userDirection) {
       if (userDirection) {
         return !!(direction === DIRECTION_ALL || direction & checkType && userDirection & checkType);
@@ -3299,9 +3290,9 @@ version: 4.9.2
 
         this._complementOptions();
 
-        this._pos = Object.keys(this._axis).reduce(function (acc, v) {
-          acc[v] = _this._axis[v].range[0];
-          return acc;
+        this._pos = Object.keys(this._axis).reduce(function (pos, v) {
+          pos[v] = _this._axis[v].startPos;
+          return pos;
         }, {});
       }
 
@@ -3385,6 +3376,20 @@ version: 4.9.2
       __proto.getAxisOptions = function (key) {
         return this._axis[key];
       };
+
+      __proto.setAxis = function (axis) {
+        var _this = this;
+
+        Object.keys(axis).forEach(function (key) {
+          if (!_this._axis[key]) {
+            throw new Error("Axis ".concat(key, " does not exist in Axes instance"));
+          }
+
+          _this._axis[key] = __assign$1(__assign$1({}, _this._axis[key]), axis[key]);
+        });
+
+        this._complementOptions();
+      };
       /**
        * set up 'css' expression
        * @private
@@ -3564,7 +3569,16 @@ version: 4.9.2
         return;
       };
 
-      __proto.getTouches = function () {
+      __proto.getTouches = function (event, inputButton) {
+        if (inputButton) {
+          var buttonCodeMap = {
+            1: MOUSE_LEFT,
+            2: MOUSE_MIDDLE,
+            3: MOUSE_RIGHT
+          };
+          return this._isValidButton(buttonCodeMap[event.which], inputButton) && this.end.indexOf(event.type) === -1 ? 1 : 0;
+        }
+
         return 0;
       };
 
@@ -4629,7 +4643,7 @@ version: 4.9.2
     /**
      * @typedef {Object} AxisOption The Axis information. The key of the axis specifies the name to use as the logical virtual coordinate system.
      * @ko 축 정보. 축의 키는 논리적인 가상 좌표계로 사용할 이름을 지정한다.
-     * @param {Number[]} [range] The coordinate of range <ko>좌표 범위</ko>
+     * @param {Number[]} [range] The range of coordinate <ko>좌표 범위</ko>
      * @param {Number} [range[0]=0] The coordinate of the minimum <ko>최소 좌표</ko>
      * @param {Number} [range[1]=0] The coordinate of the maximum <ko>최대 좌표</ko>
      * @param {Number} [startPos=range[0]] The coordinates to be moved when creating an instance <ko>인스턴스 생성시 이동할 좌표</ko>
@@ -4667,7 +4681,7 @@ version: 4.9.2
      *
      * @param {Object.<string, AxisOption>} axis Axis information managed by eg.Axes. The key of the axis specifies the name to use as the logical virtual coordinate system.  <ko>eg.Axes가 관리하는 축 정보. 축의 키는 논리적인 가상 좌표계로 사용할 이름을 지정한다.</ko>
      * @param {AxesOption} [options={}] The option object of the eg.Axes module<ko>eg.Axes 모듈의 옵션 객체</ko>
-     * @param {Object.<string, number>} [startPos=null] The coordinates to be moved when creating an instance. It is applied with higher priority than startPos of axisOption.<ko>인스턴스 생성시 이동할 좌표, axisOption의 startPos보다 높은 우선순위로 적용된다.</ko>
+     * @param {Object.<string, number>} [startPos={}] The coordinates to be moved when creating an instance. It is applied with higher priority than startPos of axisOption.<ko>인스턴스 생성시 이동할 좌표, axisOption의 startPos보다 높은 우선순위로 적용된다.</ko>
      *
      * @support {"ie": "10+", "ch" : "latest", "ff" : "latest",  "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.3+ (except 3.x)"}
      * @example
@@ -4749,7 +4763,7 @@ version: 4.9.2
         }
 
         if (startPos === void 0) {
-          startPos = null;
+          startPos = {};
         }
 
         var _this = _super.call(this) || this;
@@ -4767,6 +4781,9 @@ version: 4.9.2
           round: null,
           nested: false
         }, options);
+        Object.keys(startPos).forEach(function (key) {
+          _this.axis[key].startPos = startPos[key];
+        });
         _this.interruptManager = new InterruptManager(_this.options);
         _this.axisManager = new AxisManager(_this.axis);
         _this.eventManager = new EventManager(_this);
@@ -4775,7 +4792,7 @@ version: 4.9.2
 
         _this.eventManager.setAnimationManager(_this.animationManager);
 
-        _this.eventManager.triggerChange(getInitialPos(axis, startPos));
+        _this.eventManager.triggerChange(_this.axisManager.get());
 
         return _this;
       }
@@ -4984,6 +5001,70 @@ version: 4.9.2
         this.animationManager.setBy(pos, duration);
         return this;
       };
+      /**
+       * Change the options of Axes instance.
+       * @ko 인스턴스의 옵션을 변경한다.
+       * @param {AxesOption} options Axes options to change <ko>변경할 옵션 목록</ko>
+       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       * }, {
+       *   round: 10,
+       * });
+       *
+       * axes.setTo({"x": 48});
+       * axes.get(); // {"x": 50}
+       *
+       * axes.setOptions({
+       *   round: 1,
+       * });
+       *
+       * axes.setTo({"x": 48});
+       * axes.get(); // {"x": 48}
+       * ```
+       */
+
+
+      __proto.setOptions = function (options) {
+        this.options = __assign$1(__assign$1({}, this.options), options);
+        return this;
+      };
+      /**
+       * Change the information of an existing axis.
+       * @ko 존재하는 축의 정보를 변경한다.
+       * @param {Object.<string, AxisOption>} axis Axis options to change <ko>변경할 축의 정보</ko>
+       * @return {eg.Axes} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+       * @example
+       * ```js
+       * const axes = new eg.Axes({
+       *   "x": {
+       *      range: [0, 100]
+       *   },
+       * });
+       *
+       * axes.setTo({"x": 150});
+       * axes.get(); // {"x": 100}
+       *
+       * axes.setAxis({
+       *   "x": {
+       *      range: [0, 200]
+       *   },
+       * });
+       *
+       * axes.setTo({"x": 150});
+       * axes.get(); // {"x": 150}
+       * ```
+       */
+
+
+      __proto.setAxis = function (axis) {
+        this.axisManager.setAxis(axis);
+        return this;
+      };
       /**
        * Stop an animation in progress.
        * @ko 재생 중인 애니메이션을 정지한다.
@@ -5095,7 +5176,7 @@ version: 4.9.2
        */
 
 
-      Axes.VERSION = "3.6.0";
+      Axes.VERSION = "3.8.0";
       /* eslint-enable */
 
       /**
@@ -5207,6 +5288,7 @@ version: 4.9.2
      * @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 {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>
      **/
@@ -5243,12 +5325,24 @@ version: 4.9.2
        *
        */
       function PanInput(el, options) {
+        var _this = this;
+
         this.axes = [];
         this.element = null;
         this._enabled = false;
         this._activeEvent = null;
         this._atRightEdge = false;
         this._rightEdgeTimer = 0;
+        this._dragged = false;
+
+        this._preventClickWhenDragged = function (e) {
+          if (_this._dragged) {
+            e.preventDefault();
+            e.stopPropagation();
+          }
+
+          _this._dragged = false;
+        };
 
         this._voidFunction = function () {};
 
@@ -5259,6 +5353,7 @@ version: 4.9.2
           scale: [1, 1],
           thresholdAngle: 45,
           threshold: 0,
+          preventClickOnDrag: false,
           iOSEdgeSwipeThreshold: IOS_EDGE_THRESHOLD,
           releaseOnScroll: false,
           touchAction: null
@@ -5362,15 +5457,17 @@ version: 4.9.2
       };
 
       __proto._onPanstart = function (event) {
+        var inputButton = this.options.inputButton;
         var activeEvent = this._activeEvent;
-        var panEvent = activeEvent.onEventStart(event, this.options.inputButton);
+        var panEvent = activeEvent.onEventStart(event, inputButton);
 
-        if (!panEvent || !this._enabled || activeEvent.getTouches(event) > 1) {
+        if (!panEvent || !this._enabled || activeEvent.getTouches(event, inputButton) > 1) {
           return;
         }
 
         if (panEvent.srcEvent.cancelable !== false) {
           var edgeThreshold = this.options.iOSEdgeSwipeThreshold;
+          this._dragged = false;
 
           this._observer.hold(this, panEvent);
 
@@ -5385,24 +5482,27 @@ version: 4.9.2
       __proto._onPanmove = function (event) {
         var _this = this;
 
-        var activeEvent = this._activeEvent;
-        var panEvent = activeEvent.onEventMove(event, this.options.inputButton);
-
-        if (!panEvent || !this._enabled || activeEvent.getTouches(event) > 1) {
-          return;
-        }
-
         var _a = this.options,
             iOSEdgeSwipeThreshold = _a.iOSEdgeSwipeThreshold,
-            releaseOnScroll = _a.releaseOnScroll;
-        var userDirection = getDirectionByAngle(panEvent.angle, this.options.thresholdAngle);
+            releaseOnScroll = _a.releaseOnScroll,
+            inputButton = _a.inputButton,
+            thresholdAngle = _a.thresholdAngle;
+        var activeEvent = this._activeEvent;
+        var panEvent = activeEvent.onEventMove(event, inputButton);
+        var touches = activeEvent.getTouches(event, inputButton);
 
-        if (releaseOnScroll && !panEvent.srcEvent.cancelable) {
+        if (touches === 0 || releaseOnScroll && panEvent && !panEvent.srcEvent.cancelable) {
           this._onPanend(event);
 
           return;
         }
 
+        if (!panEvent || !this._enabled || touches > 1) {
+          return;
+        }
+
+        var userDirection = getDirectionByAngle(panEvent.angle, thresholdAngle);
+
         if (activeEvent.prevEvent && IS_IOS_SAFARI) {
           var swipeLeftToRight = panEvent.center.x < 0;
 
@@ -5443,6 +5543,8 @@ version: 4.9.2
         panEvent.preventSystemEvent = prevent;
 
         if (prevent) {
+          this._dragged = true;
+
           this._observer.change(this, panEvent, toAxis(this.axes, offset));
         }
 
@@ -5450,10 +5552,11 @@ version: 4.9.2
       };
 
       __proto._onPanend = function (event) {
+        var inputButton = this.options.inputButton;
         var activeEvent = this._activeEvent;
         activeEvent.onEventEnd(event);
 
-        if (!this._enabled || activeEvent.getTouches(event) !== 0) {
+        if (!this._enabled || activeEvent.getTouches(event, inputButton) !== 0) {
           return;
         }
 
@@ -5504,24 +5607,30 @@ version: 4.9.2
         var _this = this;
 
         var activeEvent = convertInputType(this.options.inputType);
+        var element = this.element;
 
         if (!activeEvent) {
           return;
         }
 
+        if (!element) {
+          throw new Error("Element to connect input does not exist.");
+        }
+
         this._observer = observer;
         this._enabled = true;
         this._activeEvent = activeEvent;
-        activeEvent.start.forEach(function (event) {
-          var _a;
 
-          (_a = _this.element) === null || _a === void 0 ? void 0 : _a.addEventListener(event, _this._onPanstart);
+        if (this.options.preventClickOnDrag) {
+          element.addEventListener("click", this._preventClickWhenDragged, true);
+        }
+
+        activeEvent.start.forEach(function (event) {
+          element.addEventListener(event, _this._onPanstart);
         }); // adding event listener to element prevents invalid behavior in iOS Safari
 
         activeEvent.move.forEach(function (event) {
-          var _a;
-
-          (_a = _this.element) === null || _a === void 0 ? void 0 : _a.addEventListener(event, _this._voidFunction);
+          element.addEventListener(event, _this._voidFunction);
         });
       };
 
@@ -5529,16 +5638,21 @@ version: 4.9.2
         var _this = this;
 
         var activeEvent = this._activeEvent;
-        activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.start.forEach(function (event) {
-          var _a;
+        var element = this.element;
 
-          (_a = _this.element) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, _this._onPanstart);
-        });
-        activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.move.forEach(function (event) {
-          var _a;
+        if (element) {
+          if (this.options.preventClickOnDrag) {
+            element.removeEventListener("click", this._preventClickWhenDragged, true);
+          }
+
+          activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.start.forEach(function (event) {
+            element.removeEventListener(event, _this._onPanstart);
+          });
+          activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.move.forEach(function (event) {
+            element.removeEventListener(event, _this._voidFunction);
+          });
+        }
 
-          (_a = _this.element) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, _this._voidFunction);
-        });
         this._enabled = false;
         this._observer = null;
       };
@@ -13767,7 +13881,7 @@ version: 4.9.2
        */
 
 
-      Flicking.VERSION = "4.9.2";
+      Flicking.VERSION = "4.9.3-beta.0";
       return Flicking;
     }(Component);