@egjs/flicking 4.7.0 → 4.7.3

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.7.0
+version: 4.7.3
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -2281,7 +2281,7 @@ version: 4.7.0
     license: MIT
     author: NAVER Corp.
     repository: https://github.com/naver/egjs-axes
-    version: 3.1.1-snapshot
+    version: 3.2.2
     */
 
     /*! *****************************************************************************
@@ -2379,8 +2379,7 @@ version: 4.7.0
 
       return "";
     }();
-    var PREVENT_SCROLL_CSSPROPS = {
-      "touch-action": "none",
+    var PREVENT_DRAG_CSSPROPS = {
       "user-select": "none",
       "-webkit-user-drag": "none"
     };
@@ -2590,11 +2589,28 @@ version: 4.7.0
     var getAngle = function (posX, posY) {
       return Math.atan2(posY, posX) * 180 / Math.PI;
     };
-    var setCssProps = function (element, originalCssProps) {
+    var isCssPropsFromAxes = function (originalCssProps) {
+      var same = true;
+      Object.keys(PREVENT_DRAG_CSSPROPS).forEach(function (prop) {
+        if (!originalCssProps || originalCssProps[prop] !== PREVENT_DRAG_CSSPROPS[prop]) {
+          same = false;
+        }
+      });
+      return same;
+    };
+    var setCssProps = function (element, option, direction) {
+      var _a;
+
+      var touchActionMap = (_a = {}, _a[DIRECTION_NONE] = "auto", _a[DIRECTION_ALL] = "none", _a[DIRECTION_VERTICAL] = "pan-x", _a[DIRECTION_HORIZONTAL] = "pan-y", _a);
       var oldCssProps = {};
 
       if (element && element.style) {
-        var newCssProps_1 = originalCssProps ? originalCssProps : PREVENT_SCROLL_CSSPROPS;
+        var touchAction = option.touchAction ? option.touchAction : touchActionMap[direction];
+
+        var newCssProps_1 = __assign$1(__assign$1({}, PREVENT_DRAG_CSSPROPS), {
+          "touch-action": element.style["touch-action"] === "none" ? "none" : touchAction
+        });
+
         Object.keys(newCssProps_1).forEach(function (prop) {
           oldCssProps[prop] = element.style[prop];
           element.style[prop] = newCssProps_1[prop];
@@ -2603,6 +2619,15 @@ version: 4.7.0
 
       return oldCssProps;
     };
+    var revertCssProps = function (element, originalCssProps) {
+      if (element && element.style && originalCssProps) {
+        Object.keys(originalCssProps).forEach(function (prop) {
+          element.style[prop] = originalCssProps[prop];
+        });
+      }
+
+      return;
+    };
 
     var EventManager =
     /*#__PURE__*/
@@ -3354,8 +3379,8 @@ version: 4.7.0
       __proto._getMovement = function (event) {
         var prev = this.prevEvent.srcEvent;
         return {
-          x: event.pageX - prev.pageX,
-          y: event.pageY - prev.pageY
+          x: event.clientX - prev.clientX,
+          y: event.clientY - prev.clientY
         };
       };
 
@@ -3428,8 +3453,8 @@ version: 4.7.0
         }
 
         return {
-          x: event.touches[0].pageX - prev.touches[0].pageX,
-          y: event.touches[0].pageY - prev.touches[0].pageY
+          x: event.touches[0].clientX - prev.touches[0].clientX,
+          y: event.touches[0].clientY - prev.touches[0].clientY
         };
       };
 
@@ -3520,8 +3545,8 @@ version: 4.7.0
         }
 
         return {
-          x: event.pageX - prev.pageX,
-          y: event.pageY - prev.pageY
+          x: event.clientX - prev.clientX,
+          y: event.clientY - prev.clientY
         };
       };
 
@@ -3646,18 +3671,18 @@ version: 4.7.0
         var prev = this.prevEvent.srcEvent;
 
         var _a = [event, prev].map(function (e) {
-          if (_this._isTouchEvent(event)) {
+          if (_this._isTouchEvent(e)) {
             return {
               id: e.touches[0].identifier,
-              x: e.touches[0].pageX,
-              y: e.touches[0].pageY
+              x: e.touches[0].clientX,
+              y: e.touches[0].clientY
             };
           }
 
           return {
             id: null,
-            x: e.pageX,
-            y: e.pageY
+            x: e.clientX,
+            y: e.clientY
           };
         }),
             nextSpot = _a[0],
@@ -4868,7 +4893,7 @@ version: 4.7.0
        */
 
 
-      Axes.VERSION = "3.1.1-snapshot";
+      Axes.VERSION = "3.2.2";
       /* eslint-enable */
 
       /**
@@ -4944,6 +4969,8 @@ version: 4.7.0
       return Axes;
     }(Component);
 
+    /* eslint-disable @typescript-eslint/no-empty-function */
+
     var getDirectionByAngle = function (angle, thresholdAngle) {
       if (thresholdAngle < 0 || thresholdAngle > 90) {
         return DIRECTION_NONE;
@@ -4962,11 +4989,13 @@ version: 4.7.0
     /**
      * @typedef {Object} PanInputOption The option object of the eg.Axes.PanInput module.
      * @ko eg.Axes.PanInput 모듈의 옵션 객체
-     * @param {String[]} [inputType=["touch","mouse", "pointer"]] Types of input devices
+     * @param {String[]} [inputType=["touch", "mouse", "pointer"]] Types of input devices
      * - touch: Touch screen
-     * - mouse: Mouse <ko>입력 장치 종류
+     * - mouse: Mouse
+     * - pointer: Mouse and touch <ko>입력 장치 종류
      * - touch: 터치 입력 장치
-     * - mouse: 마우스</ko>
+     * - mouse: 마우스
+     * - pointer: 마우스 및 터치</ko>
      * @param {String[]} [inputButton=["left"]] List of buttons to allow input
      * - left: Left mouse button and normal touch
      * - middle: Mouse wheel press
@@ -4980,6 +5009,7 @@ version: 4.7.0
      * @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 {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>
      **/
 
     /**
@@ -5042,7 +5072,8 @@ version: 4.7.0
           thresholdAngle: 45,
           threshold: 0,
           iOSEdgeSwipeThreshold: IOS_EDGE_THRESHOLD,
-          releaseOnScroll: false
+          releaseOnScroll: false,
+          touchAction: null
         }, options);
         this._onPanstart = this._onPanstart.bind(this);
         this._onPanmove = this._onPanmove.bind(this);
@@ -5077,7 +5108,7 @@ version: 4.7.0
 
         this._attachElementEvent(observer);
 
-        this._originalCssProps = setCssProps(this.element);
+        this._originalCssProps = setCssProps(this.element, this.options, this._direction);
         return this;
       };
 
@@ -5086,8 +5117,8 @@ version: 4.7.0
 
         this._detachWindowEvent(this._activeEvent);
 
-        if (this._originalCssProps !== PREVENT_SCROLL_CSSPROPS) {
-          setCssProps(this.element, this._originalCssProps);
+        if (!isCssPropsFromAxes(this._originalCssProps)) {
+          revertCssProps(this.element, this._originalCssProps);
         }
 
         this._direction = DIRECTION_NONE;
@@ -5150,7 +5181,6 @@ version: 4.7.0
           this._observer.hold(this, panEvent);
 
           this._atRightEdge = IS_IOS_SAFARI && panEvent.center.x > window.innerWidth - edgeThreshold;
-          console.log("onPanStart");
 
           this._attachWindowEvent(activeEvent);
 
@@ -5242,7 +5272,6 @@ version: 4.7.0
         var velocity = this._applyScale([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)]);
 
         activeEvent.onRelease();
-        console.log("onPanEnd");
 
         this._observer.release(this, prevEvent, velocity);
       };
@@ -5251,10 +5280,14 @@ version: 4.7.0
         var _this = this;
 
         activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.move.forEach(function (event) {
-          window.addEventListener(event, _this._onPanmove);
+          window.addEventListener(event, _this._onPanmove, {
+            passive: false
+          });
         });
         activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.end.forEach(function (event) {
-          window.addEventListener(event, _this._onPanend);
+          window.addEventListener(event, _this._onPanend, {
+            passive: false
+          });
         });
       };
 
@@ -5275,16 +5308,22 @@ version: 4.7.0
         var activeEvent = convertInputType(this.options.inputType);
 
         if (!activeEvent) {
-          throw new Error("There is currently no inputType available for current device. There must be at least one available inputType.");
+          return;
         }
 
         this._observer = observer;
         this._enabled = true;
         this._activeEvent = activeEvent;
-        activeEvent === null || activeEvent === void 0 ? void 0 : activeEvent.start.forEach(function (event) {
+        activeEvent.start.forEach(function (event) {
           var _a;
 
           (_a = _this.element) === null || _a === void 0 ? void 0 : _a.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, function () {});
         });
       };
 
@@ -5297,6 +5336,11 @@ version: 4.7.0
 
           (_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;
+
+          (_a = _this.element) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, function () {});
+        });
         this._enabled = false;
         this._observer = null;
       };
@@ -10287,7 +10331,7 @@ version: 4.7.0
         if (!resizeOnContentsReady || flicking.virtualEnabled) return;
 
         var hasContents = function (panel) {
-          return !!panel.element.querySelector("img, video");
+          return panel.element && !!panel.element.querySelector("img, video");
         };
 
         checkingPanels = checkingPanels.filter(function (panel) {
@@ -13404,7 +13448,7 @@ version: 4.7.0
        */
 
 
-      Flicking.VERSION = "4.7.0";
+      Flicking.VERSION = "4.7.3";
       return Flicking;
     }(Component);