@egjs/flicking 4.11.3 → 4.12.0-beta.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.11.3
+version: 4.12.0-beta.1
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -820,6 +820,17 @@ version: 4.11.3
       LTR: "ltr",
       RTL: "rtl"
     };
+    /**
+     * An object that contains the direction that {@link Flicking} is moving
+     * @ko {@link Flicking}이 움직이는 방향을 담고 있는 객체
+     * @type {object}
+     * @property {"horizontal"} HORIZONTAL horizontal<ko>수평 방향</ko>
+     * @property {"vertical"} VERTICAL vertical<ko>수직 방향</ko>
+     */
+    var MOVE_DIRECTION = {
+      HORIZONTAL: "horizontal",
+      VERTICAL: "vertical"
+    };
 
     var Constants = {
         __proto__: null,
@@ -830,6 +841,7 @@ version: 4.11.3
         CLASS: CLASS,
         CIRCULAR_FALLBACK: CIRCULAR_FALLBACK,
         ORDER: ORDER,
+        MOVE_DIRECTION: MOVE_DIRECTION,
         ERROR_CODE: CODE
     };
 
@@ -6305,7 +6317,7 @@ version: 4.11.3
         });
         this._panInput = new PanInput(flicking.viewport.element, {
           inputType: flicking.inputType,
-          threshold: 1,
+          threshold: flicking.dragThreshold,
           iOSEdgeSwipeThreshold: flicking.iOSEdgeSwipeThreshold,
           preventDefaultOnDrag: flicking.preventDefaultOnDrag,
           scale: flicking.horizontal ? [flicking.camera.panelOrder === ORDER.RTL ? 1 : -1, 0] : [0, -1],
@@ -11133,40 +11145,42 @@ version: 4.11.3
           moveType = _v === void 0 ? "snap" : _v,
           _w = _b.threshold,
           threshold = _w === void 0 ? 40 : _w,
-          _x = _b.interruptable,
-          interruptable = _x === void 0 ? true : _x,
-          _y = _b.bounce,
-          bounce = _y === void 0 ? "20%" : _y,
-          _z = _b.iOSEdgeSwipeThreshold,
-          iOSEdgeSwipeThreshold = _z === void 0 ? 30 : _z,
-          _0 = _b.preventClickOnDrag,
-          preventClickOnDrag = _0 === void 0 ? true : _0,
-          _1 = _b.preventDefaultOnDrag,
-          preventDefaultOnDrag = _1 === void 0 ? false : _1,
-          _2 = _b.disableOnInit,
-          disableOnInit = _2 === void 0 ? false : _2,
-          _3 = _b.changeOnHold,
-          changeOnHold = _3 === void 0 ? false : _3,
-          _4 = _b.renderOnlyVisible,
-          renderOnlyVisible = _4 === void 0 ? false : _4,
-          _5 = _b.virtual,
-          virtual = _5 === void 0 ? null : _5,
-          _6 = _b.autoInit,
-          autoInit = _6 === void 0 ? true : _6,
-          _7 = _b.autoResize,
-          autoResize = _7 === void 0 ? true : _7,
-          _8 = _b.useResizeObserver,
-          useResizeObserver = _8 === void 0 ? true : _8,
-          _9 = _b.resizeDebounce,
-          resizeDebounce = _9 === void 0 ? 0 : _9,
-          _10 = _b.maxResizeDebounce,
-          maxResizeDebounce = _10 === void 0 ? 100 : _10,
-          _11 = _b.useFractionalSize,
-          useFractionalSize = _11 === void 0 ? false : _11,
-          _12 = _b.externalRenderer,
-          externalRenderer = _12 === void 0 ? null : _12,
-          _13 = _b.renderExternal,
-          renderExternal = _13 === void 0 ? null : _13;
+          _x = _b.dragThreshold,
+          dragThreshold = _x === void 0 ? 1 : _x,
+          _y = _b.interruptable,
+          interruptable = _y === void 0 ? true : _y,
+          _z = _b.bounce,
+          bounce = _z === void 0 ? "20%" : _z,
+          _0 = _b.iOSEdgeSwipeThreshold,
+          iOSEdgeSwipeThreshold = _0 === void 0 ? 30 : _0,
+          _1 = _b.preventClickOnDrag,
+          preventClickOnDrag = _1 === void 0 ? true : _1,
+          _2 = _b.preventDefaultOnDrag,
+          preventDefaultOnDrag = _2 === void 0 ? false : _2,
+          _3 = _b.disableOnInit,
+          disableOnInit = _3 === void 0 ? false : _3,
+          _4 = _b.changeOnHold,
+          changeOnHold = _4 === void 0 ? false : _4,
+          _5 = _b.renderOnlyVisible,
+          renderOnlyVisible = _5 === void 0 ? false : _5,
+          _6 = _b.virtual,
+          virtual = _6 === void 0 ? null : _6,
+          _7 = _b.autoInit,
+          autoInit = _7 === void 0 ? true : _7,
+          _8 = _b.autoResize,
+          autoResize = _8 === void 0 ? true : _8,
+          _9 = _b.useResizeObserver,
+          useResizeObserver = _9 === void 0 ? true : _9,
+          _10 = _b.resizeDebounce,
+          resizeDebounce = _10 === void 0 ? 0 : _10,
+          _11 = _b.maxResizeDebounce,
+          maxResizeDebounce = _11 === void 0 ? 100 : _11,
+          _12 = _b.useFractionalSize,
+          useFractionalSize = _12 === void 0 ? false : _12,
+          _13 = _b.externalRenderer,
+          externalRenderer = _13 === void 0 ? null : _13,
+          _14 = _b.renderExternal,
+          renderExternal = _14 === void 0 ? null : _14;
         var _this = _super.call(this) || this;
         // Internal states
         _this._initialized = false;
@@ -11192,6 +11206,7 @@ version: 4.11.3
         _this._inputType = inputType;
         _this._moveType = moveType;
         _this._threshold = threshold;
+        _this._dragThreshold = dragThreshold;
         _this._interruptable = interruptable;
         _this._bounce = bounce;
         _this._iOSEdgeSwipeThreshold = iOSEdgeSwipeThreshold;
@@ -11506,7 +11521,7 @@ version: 4.11.3
       Object.defineProperty(__proto, "defaultIndex", {
         /**
          * Index of the panel to move when Flicking's {@link Flicking#init init()} is called. A zero-based integer
-         * @ko Flicking의 {@link Flicking#init init()}이 호출될 때 이동할 디폴트 패널의 인덱스로, 0부터 시작하는 정수입니다
+         * @ko Flicking의 {@link Flicking#init init()}이 호출될 때 이동할 디폴트 패널의 인덱스로, 0부터 시작하는 정수입니다.
          * @type {number}
          * @default 0
          * @see {@link https://naver.github.io/egjs-flicking/Options#defaultindex defaultIndex ( Options )}
@@ -11871,7 +11886,7 @@ version: 4.11.3
       Object.defineProperty(__proto, "threshold", {
         /**
          * Movement threshold to change panel (unit: px). It should be dragged above the threshold to change the current panel.
-         * @ko 패널 변경을 위한 이동 임계값 (단위: px). 주어진 값 이상으로 스크롤해야만 패널 변경이 가능하다.
+         * @ko 패널 변경을 위한 이동 임계값 (단위: px). 주어진 값 이상으로 스크롤해야만 패널 변경이 가능합니다.
          * @type {number}
          * @default 40
          * @see {@link https://naver.github.io/egjs-flicking/Options#threshold Threshold ( Options )}
@@ -11885,6 +11900,27 @@ version: 4.11.3
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "dragThreshold", {
+        /**
+         * Minimal distance of user input before recognizing (unit: px). It should be dragged above the dragThreshold to move the panel.
+         * @ko 사용자의 입력을 인식하기 위한 최소한의 거리 (단위: px). 주어진 값 이상으로 스크롤해야만 패널이 움직입니다.
+         * @type {number}
+         * @default 1
+         * @see {@link https://naver.github.io/egjs-flicking/Options#dragThreshold dragThreshold ( Options )}
+         */
+        get: function () {
+          return this._dragThreshold;
+        },
+        set: function (val) {
+          this._dragThreshold = val;
+          var panInput = this._control.controller.panInput;
+          if (panInput) {
+            panInput.options.threshold = val;
+          }
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "interruptable", {
         /**
          * Set animation to be interruptable by click/touch.
@@ -12959,10 +12995,189 @@ version: 4.11.3
        * Flicking.VERSION;  // ex) 4.0.0
        * ```
        */
-      Flicking.VERSION = "4.11.3";
+      Flicking.VERSION = "4.12.0-beta.1";
       return Flicking;
     }(Component);
 
+    /*
+     * Copyright (c) 2015 NAVER Corp.
+     * egjs projects are licensed under the MIT license
+     */
+    /**
+     * @extends Component
+     * @support {"ie": "9+(with polyfill)", "ch" : "latest", "ff" : "latest",  "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "4.X+"}
+     * @requires {@link https://github.com/naver/egjs-component|@egjs/component}
+     * @requires {@link https://github.com/naver/egjs-axes|@egjs/axes}
+     */
+    var CrossFlicking = /*#__PURE__*/function (_super) {
+      __extends$3(CrossFlicking, _super);
+      // Options Setter
+      // UI / LAYOUT
+      // public set align(val: FlickingOptions["align"]) {
+      //   this._align = val;
+      // }
+      function CrossFlicking(root, _a) {
+        var _b = (_a === void 0 ? {} : _a).verticalOptions,
+          verticalOptions = _b === void 0 ? undefined : _b;
+        var _this = _super.call(this, root) || this;
+        _this._onHorizontalHoldStart = function () {
+          _this.dragThreshold = 10;
+          _this._moveDirection = null;
+        };
+        _this._onHorizontalMove = function (e) {
+          if (e.isTrusted && !_this._moveDirection) {
+            _this._verticalFlicking.forEach(function (child) {
+              child.dragThreshold = Infinity;
+            });
+            _this._moveDirection = MOVE_DIRECTION.HORIZONTAL;
+          }
+        };
+        _this._onHorizontalMoveEnd = function (e) {
+          var visiblePanels = _this.visiblePanels;
+          _this._verticalFlicking.forEach(function (child) {
+            child.dragThreshold = 10;
+          });
+          _this._moveDirection = null;
+          if (visiblePanels.length > 1) {
+            _this._nextIndex = e.direction === "NEXT" ? visiblePanels[1].index : visiblePanels[0].index;
+          } else {
+            _this._nextIndex = visiblePanels[0].index;
+          }
+          _this._verticalFlicking.forEach(function (child, i) {
+            if (_this._nextIndex !== i) {
+              var _a = _this._verticalState[i],
+                start = _a.start,
+                end = _a.end;
+              if (child.index < start) {
+                child.stopAnimation();
+                void child.moveTo(start, 0);
+              } else if (child.index > end) {
+                child.stopAnimation();
+                void child.moveTo(end, 0);
+              }
+            }
+          });
+          if (e.isTrusted) {
+            _this._syncToCategory(_this._verticalFlicking[_this._nextIndex].index, _this._nextIndex);
+          }
+        };
+        _this._onVerticalHoldStart = function () {
+          _this._verticalFlicking.forEach(function (child) {
+            child.dragThreshold = 10;
+          });
+          _this._moveDirection = null;
+        };
+        _this._onVerticalMove = function (e) {
+          if (e.isTrusted && !_this._moveDirection) {
+            _this.dragThreshold = Infinity;
+            _this._moveDirection = MOVE_DIRECTION.VERTICAL;
+          }
+        };
+        _this._onVerticalMoveEnd = function () {
+          _this.dragThreshold = 10;
+          _this._moveDirection = null;
+        };
+        _this._onVerticalChanged = function (e) {
+          // this.visiblePanels.length 가 2보다 크다면 가로 방향 Flicking이 조작 중이라는 것을 의미합니다.
+          // 이 경우 가로 방향 Flicking의 이동이 완전히 끝난 뒤 _onHorizontalMoveEnd 에서 syncToCategory할 것이므로 여기서는 하지 않습니다.
+          if (_this.visiblePanels.length < 2 && _this._verticalFlicking[_this.index] === e.currentTarget) {
+            _this._syncToCategory(e.index, _this.index);
+          }
+        };
+        // Internal states
+        _this._verticalState = [];
+        _this._moveDirection = null;
+        _this._nextIndex = 0;
+        // Bind options
+        _this._verticalOptions = verticalOptions;
+        return _this;
+        // Create core components
+        // this._viewport = new Viewport(this, getElement(root));
+      }
+      var __proto = CrossFlicking.prototype;
+      Object.defineProperty(__proto, "verticalOptions", {
+        // Components
+        /**
+         * Change active panel index on mouse/touch hold while animating.
+         * `index` of the `willChange`/`willRestore` event will be used as new index.
+         * @ko 애니메이션 도중 마우스/터치 입력시 현재 활성화된 패널의 인덱스를 변경합니다.
+         * `willChange`/`willRestore` 이벤트의 `index`값이 새로운 인덱스로 사용될 것입니다.
+         * @type {FlickingOptions}
+         * @default undefined
+         * @see {@link https://naver.github.io/egjs-flicking/Options#changeonhold changeOnHold ( Options )}
+         */
+        get: function () {
+          return this._verticalOptions;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      /**
+       * Initialize Flicking and move to the default index
+       * This is automatically called on Flicking's constructor when `autoInit` is true(default)
+       * @ko Flicking을 초기화하고, 디폴트 인덱스로 이동합니다
+       * 이 메소드는 `autoInit` 옵션이 true(default)일 경우 Flicking이 생성될 때 자동으로 호출됩니다
+       * @fires Flicking#ready
+       * @return {Promise<void>}
+       */
+      __proto.init = function () {
+        var _this = this;
+        return _super.prototype.init.call(this).then(function () {
+          // data-index로 분류하기 전에 임시로 모든 children에 대해 vertical flicking으로 해보자.
+          // camera.children들에 대해 갯수 세기
+          var verticalPanels = "";
+          _this._verticalState = _this.camera.children.reduce(function (state, child) {
+            var start = state.length ? +state[state.length - 1].end + 1 : 0;
+            verticalPanels += child.children[0].innerHTML;
+            return __spread$1(state, [{
+              start: start,
+              end: start + child.children[0].children.length - 1,
+              element: child
+            }]);
+          }, []);
+          _this.camera.children.forEach(function (child) {
+            child.children[0].innerHTML = verticalPanels;
+          });
+          _this._verticalFlicking = _this.camera.children.map(function (child, i) {
+            return new Flicking(child, __assign$2(__assign$2({}, _this.verticalOptions), {
+              horizontal: false,
+              panelsPerView: 1,
+              defaultIndex: _this._verticalState[i].start
+            }));
+          });
+          _this.on(EVENTS.HOLD_START, _this._onHorizontalHoldStart);
+          _this.on(EVENTS.MOVE, _this._onHorizontalMove);
+          _this.on(EVENTS.MOVE_END, _this._onHorizontalMoveEnd);
+          _this._verticalFlicking.forEach(function (child) {
+            child.on(EVENTS.HOLD_START, _this._onVerticalHoldStart);
+            child.on(EVENTS.MOVE, _this._onVerticalMove);
+            child.on(EVENTS.MOVE_END, _this._onVerticalMoveEnd);
+            child.on(EVENTS.CHANGED, _this._onVerticalChanged);
+          });
+        });
+      };
+      __proto._syncToCategory = function (index, outerIndex) {
+        var _this = this;
+        this.stopAnimation();
+        this._verticalFlicking.forEach(function (child, i) {
+          var _a = _this._verticalState[i],
+            start = _a.start,
+            end = _a.end;
+          if (start <= index && end >= index && outerIndex !== i) {
+            child.stopAnimation();
+            void child.moveTo(index, 0);
+            void _this.moveTo(i, 0);
+          }
+        });
+      };
+      return CrossFlicking;
+    }(Flicking);
+
+    var CrossFlicking$1 = {
+        __proto__: null,
+        CrossFlicking: CrossFlicking
+    };
+
     /*
      * Copyright (c) 2015 NAVER Corp.
      * egjs projects are licensed under the MIT license
@@ -13208,6 +13423,7 @@ version: 4.11.3
     merge(Flicking, Constants);
     merge(Flicking, CFC);
     merge(Flicking, Utils);
+    merge(Flicking, CrossFlicking$1);
 
     return Flicking;