@egjs/flicking 4.12.0-beta.0 → 4.12.0-beta.1

package/dist/flicking.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.12.0-beta.0
+version: 4.12.0-beta.1
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@egjs/component'), require('@egjs/axes'), require('@egjs/imready')) :
@@ -413,6 +413,17 @@ version: 4.12.0-beta.0
       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,
@@ -423,6 +434,7 @@ version: 4.12.0-beta.0
         CLASS: CLASS,
         CIRCULAR_FALLBACK: CIRCULAR_FALLBACK,
         ORDER: ORDER,
+        MOVE_DIRECTION: MOVE_DIRECTION,
         ERROR_CODE: CODE
     };
 
@@ -7955,10 +7967,189 @@ version: 4.12.0-beta.0
        * Flicking.VERSION;  // ex) 4.0.0
        * ```
        */
-      Flicking.VERSION = "4.12.0-beta.0";
+      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(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(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(__assign({}, _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
@@ -8204,6 +8395,7 @@ version: 4.12.0-beta.0
     merge(Flicking, Constants);
     merge(Flicking, CFC);
     merge(Flicking, Utils);
+    merge(Flicking, CrossFlicking$1);
 
     return Flicking;