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

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.2
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@egjs/component'), require('@egjs/axes'), require('@egjs/imready')) :
@@ -387,6 +387,8 @@ version: 4.12.0-beta.0
       STRICT: "strict"
     };
     var CLASS = {
+      VIEWPORT: "flicking-viewport",
+      CAMERA: "flicking-camera",
       VERTICAL: "vertical",
       HIDDEN: "flicking-hidden",
       DEFAULT_VIRTUAL: "flicking-panel"
@@ -413,6 +415,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 +436,7 @@ version: 4.12.0-beta.0
         CLASS: CLASS,
         CIRCULAR_FALLBACK: CIRCULAR_FALLBACK,
         ORDER: ORDER,
+        MOVE_DIRECTION: MOVE_DIRECTION,
         ERROR_CODE: CODE
     };
 
@@ -7955,10 +7969,243 @@ 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.2";
       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
+      // 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);
+          }
+        };
+        var horizontalPanels = toArray(getElement(root).children[0].children);
+        // Internal states
+        _this._verticalState = _this._createVerticalState(horizontalPanels);
+        _this._moveDirection = null;
+        _this._nextIndex = 0;
+        // Bind options
+        _this._verticalOptions = verticalOptions;
+        // Create core components
+        _this._verticalFlicking = _this._createVerticalFlicking(horizontalPanels);
+        return _this;
+      }
+      var __proto = CrossFlicking.prototype;
+      Object.defineProperty(__proto, "verticalFlicking", {
+        // Components
+        /**
+         * {@link Control} instance of the Flicking
+         * @ko 현재 Flicking에 활성화된 {@link Control} 인스턴스
+         * @type {Control}
+         * @default SnapControl
+         * @readonly
+         * @see Control
+         * @see SnapControl
+         * @see FreeControl
+         */
+        get: function () {
+          return this._verticalFlicking;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "verticalState", {
+        // Internal States
+        /**
+         * Whether Flicking's {@link Flicking#init init()} is called.
+         * This is `true` when {@link Flicking#init init()} is called, and is `false` after calling {@link Flicking#destroy destroy()}.
+         * @ko Flicking의 {@link Flicking#init init()}이 호출되었는지를 나타내는 멤버 변수.
+         * 이 값은 {@link Flicking#init init()}이 호출되었으면 `true`로 변하고, {@link Flicking#destroy destroy()}호출 이후에 다시 `false`로 변경됩니다.
+         * @type {boolean}
+         * @default false
+         * @readonly
+         */
+        get: function () {
+          return this._verticalState;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "verticalOptions", {
+        // Options Getter
+        /**
+         * 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 () {
+          return _this._addComponentEvents();
+        });
+      };
+      __proto._addComponentEvents = function () {
+        var _this = this;
+        this.on(EVENTS.HOLD_START, this._onHorizontalHoldStart);
+        this.on(EVENTS.MOVE, this._onHorizontalMove);
+        this.on(EVENTS.MOVE_END, this._onHorizontalMoveEnd);
+        this._verticalFlicking.forEach(function (flicking) {
+          flicking.on(EVENTS.HOLD_START, _this._onVerticalHoldStart);
+          flicking.on(EVENTS.MOVE, _this._onVerticalMove);
+          flicking.on(EVENTS.MOVE_END, _this._onVerticalMoveEnd);
+          flicking.on(EVENTS.CHANGED, _this._onVerticalChanged);
+        });
+      };
+      __proto._createVerticalState = function (panels) {
+        // data-index로 분류하기 전에 임시로 모든 children에 대해 vertical flicking으로 해보자.
+        // panels에 data-attributes가 붙어있을 때와 안 붙어있을 때를 다르게 처리
+        // 붙어있다면 가상의 viewport들을 index 갯수만큼 만들어줘야 한다
+        var verticalPanels = "";
+        var verticalState = panels.reduce(function (state, panel) {
+          var start = state.length ? +state[state.length - 1].end + 1 : 0;
+          verticalPanels += panel.innerHTML;
+          return __spread(state, [{
+            start: start,
+            end: start + panel.children.length - 1,
+            element: panel
+          }]);
+        }, []);
+        var verticalCamera = document.createElement("div");
+        verticalCamera.classList.add(CLASS.CAMERA);
+        verticalCamera.innerHTML = verticalPanels;
+        panels.forEach(function (panel) {
+          [CLASS.VIEWPORT, CLASS.VERTICAL].forEach(function (className) {
+            if (!panel.classList.contains(className)) {
+              panel.classList.add(className);
+            }
+          });
+          panel.innerHTML = verticalCamera.outerHTML;
+        });
+        return verticalState;
+      };
+      __proto._createVerticalFlicking = function (panels) {
+        var _this = this;
+        return panels.map(function (panel, i) {
+          return new Flicking(panel, __assign(__assign({}, _this.verticalOptions), {
+            horizontal: false,
+            panelsPerView: 1,
+            defaultIndex: _this._verticalState[i].start
+          }));
+        });
+      };
+      __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 +8451,7 @@ version: 4.12.0-beta.0
     merge(Flicking, Constants);
     merge(Flicking, CFC);
     merge(Flicking, Utils);
+    merge(Flicking, CrossFlicking$1);
 
     return Flicking;