@egjs/flicking 4.12.0-beta.5 → 4.12.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.12.0-beta.5",
+	"version": "4.12.0-beta.6",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.cjs.js",
 	"module": "dist/flicking.esm.js",
@@ -139,7 +139,7 @@
 		"typescript-transform-paths": "^2.2.3"
 	},
 	"dependencies": {
-		"@egjs/axes": "^3.9.1",
+		"@egjs/axes": "^3.9.0",
 		"@egjs/component": "^3.0.1",
 		"@egjs/imready": "^1.3.1",
 		"@egjs/list-differ": "^1.0.1"

package/src/CrossFlicking.ts

@@ -0,0 +1,405 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+
+import Flicking, { FlickingOptions } from "./Flicking";
+import { ChangedEvent, MoveEndEvent, MoveEvent } from "./type/event";
+import { LiteralUnion, ValueOf } from "./type/internal";
+import { CLASS, EVENTS, MOVE_DIRECTION } from "./const/external";
+import { getDataAttributes, includes, toArray } from "./utils";
+
+/**
+ * @interface
+ */
+export interface CrossFlickingEvents {
+  // FlickingEvent 들을 확장하자...
+}
+
+/**
+ * @interface
+ */
+export interface CrossFlickingOptions extends FlickingOptions {
+  sideOptions: Partial<FlickingOptions> | undefined;
+  // 한쪽 움직이면 다른 한쪽 움직임을 막을지 여부
+  // 이전 패널 기억 여부
+}
+
+/**
+ * Flicking Status returned by {@link Flicking#getStatus}
+ * @ko {@link Flicking#getStatus}에 의해 반환된 Flicking 상태 객체
+ * @interface
+ * @property {number} index An index of the active panel<ko>활성화된 패널의 인덱스</ko>
+ * @property {object} position A info to restore camera {@link Camera#position position}<ko>카메라 {@link Camera#position position}을 설정하기 위한 정보들</ko>
+ * @property {number} [position.panel] An index of the panel camera is located at<ko>카메라가 위치한 패널의 인덱스</ko>
+ * @property {number} [position.progressInPanel] A progress of the camera position inside the panel<ko>패널 내에서의 카메라 위치의 진행도</ko>
+ * @property {number} visibleOffset An offset to visible panel's original index. This value is available only when `visiblePanelsOnly` is `true`
+ * <ko>현재 보이는 패널들을 저장했을 때, 원래의 인덱스 대비 offset. `visiblePanelsOnly` 옵션을 사용했을 때만 사용 가능합니다</ko>
+ * @property {object[]} panels A data array of panels<ko>패널의 정보를 담은 배열</ko>
+ * @property {index} [panels.index] An index of the panel<ko>패널의 인덱스</ko>
+ * @property {string | undefined} [panels.html] An `outerHTML` of the panel element<ko>패널 엘리먼트의 `outerHTML`</ko>
+ */
+export interface SideState {
+  key: string;
+  start: number;
+  end: number;
+  element: HTMLElement;
+}
+
+/**
+ * @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}
+ */
+export class CrossFlicking extends Flicking {
+  // Core components
+  private _sideFlicking: Flicking[];
+
+  // Options
+  private _sideOptions: CrossFlickingOptions["sideOptions"];
+
+  // Internal State
+  private _sideState: SideState[];
+  private _moveDirection: LiteralUnion<ValueOf<typeof MOVE_DIRECTION>> | null;
+  private _nextIndex: number;
+
+  // Components
+  /**
+   * {@link Control} instance of the Flicking
+   * @ko 현재 Flicking에 활성화된 {@link Control} 인스턴스
+   * @type {Control}
+   * @default SnapControl
+   * @readonly
+   * @see Control
+   * @see SnapControl
+   * @see FreeControl
+   */
+  public get sideFlicking() {
+    return this._sideFlicking;
+  }
+
+  // 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
+   */
+  public get sideState() {
+    return this._sideState;
+  }
+
+  // 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 )}
+   */
+  public get sideOptions() {
+    return this._sideOptions;
+  }
+
+  // Options Setter
+  // public set align(val: FlickingOptions["align"]) {
+  //   this._align = val;
+  // }
+
+  public constructor(
+    root: HTMLElement | string,
+    options: Partial<CrossFlickingOptions> = {}
+  ) {
+    super(root, options);
+
+    // Internal states
+    this._sideState = this._createSideState();
+    this._moveDirection = null;
+    this._nextIndex = 0;
+
+    // Bind options
+    this._sideOptions = options.sideOptions;
+
+    // Create core components
+    this._sideFlicking = this._createSideFlicking();
+  }
+
+  /**
+   * 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>}
+   */
+  public init(): Promise<void> {
+    return super.init().then(() => this._addComponentEvents());
+  }
+
+  /**
+   * Destroy Flicking and remove all event handlers
+   * @ko Flicking과 하위 컴포넌트들을 초기 상태로 되돌리고, 부착된 모든 이벤트 핸들러를 제거합니다
+   * @return {void}
+   */
+  public destroy(): void {
+    // TODO 모든 child flicking destroy
+    super.destroy();
+  }
+
+  private _addComponentEvents(): void {
+    this.on(EVENTS.HOLD_START, this._onHorizontalHoldStart);
+    this.on(EVENTS.MOVE, this._onHorizontalMove);
+    this.on(EVENTS.MOVE_END, this._onHorizontalMoveEnd);
+
+    this._sideFlicking.forEach((flicking) => {
+      flicking.on(EVENTS.HOLD_START, this._onSideHoldStart);
+      flicking.on(EVENTS.MOVE, this._onSideMove);
+      flicking.on(EVENTS.MOVE_END, this._onSideMoveEnd);
+      flicking.on(EVENTS.CHANGED, this._onSideChanged);
+    });
+  }
+
+  private _createSideState(): SideState[] {
+    // data-index로 분류하기 전에 임시로 모든 children에 대해 side flicking으로 해보자.
+    // panels에 data-attributes가 붙어있을 때와 안 붙어있을 때를 다르게 처리
+    // 붙어있다면 가상의 viewport들을 index 갯수만큼 만들어줘야 한다
+    const viewportEl = this.element;
+    const cameraEl = this.camera.element;
+    const panels = toArray(cameraEl.children) as HTMLElement[];
+    let sideState: SideState[] = [];
+    let sidePanels: string = "";
+
+    // check data attribute exists
+    const groupKeys: string[] = [];
+    const groupPanels: Record<string, HTMLElement[]> = {};
+    const sideCamera = document.createElement("div");
+    sideCamera.classList.add(CLASS.CAMERA);
+
+    const isCrossStructure = getDataAttributes(viewportEl, "data-cross-").structure;
+
+    if (!isCrossStructure) {
+      viewportEl.setAttribute("data-cross-structure", "true");
+
+      panels.forEach((panel) => {
+        const groupKey = getDataAttributes(panel, "data-cross-").groupkey;
+        if (groupKey && !includes(groupKeys, groupKey)) {
+          groupKeys.push(groupKey);
+          groupPanels[groupKey] = [panel];
+        } else if (groupKey) {
+          groupPanels[groupKey].push(panel);
+        }
+      });
+
+      if (groupKeys.length) {
+        sideState = groupKeys.reduce(
+          (state: SideState[], key: string) => {
+            const start = state.length ? +state[state.length - 1].end + 1 : 0;
+            const element = groupPanels[key].reduce(
+              (el: HTMLElement, panel: HTMLElement) => {
+                sidePanels += panel.outerHTML;
+                el.innerHTML += panel.outerHTML;
+                return el;
+              },
+              document.createElement("div")
+            );
+            return [
+              ...state,
+              {
+                key,
+                start,
+                end: start + groupPanels[key].length - 1,
+                element: element
+              }
+            ];
+          },
+          []
+        );
+
+        this.remove(0, this.panelCount - groupKeys.length);
+        sideState.forEach((_, i) => {
+          const panel = this.camera.children[i];
+          Array.from(panel.attributes).forEach(attribute => panel.removeAttribute(attribute.name));
+        });
+      } else {
+        sideState = panels.reduce(
+          (state: SideState[], panel: HTMLElement, i: number) => {
+            const start = state.length ? +state[state.length - 1].end + 1 : 0;
+            sidePanels += panel.innerHTML;
+            return [
+              ...state,
+              {
+                key: i.toString(),
+                start,
+                end: start + panel.children.length - 1,
+                element: panel
+              }
+            ];
+          },
+          []
+        );
+      }
+
+      sideCamera.innerHTML = sidePanels;
+      sideState.forEach((_, i) => {
+        const panel = this.camera.children[i];
+        [CLASS.VIEWPORT, CLASS.VERTICAL].forEach((className) => {
+          if (!panel.classList.contains(className)) {
+            panel.classList.add(className);
+          }
+        });
+        panel.innerHTML = sideCamera.outerHTML;
+      });
+    } else {
+      (toArray(panels[0].children[0].children) as HTMLElement[]).forEach((panel) => {
+        const groupKey = getDataAttributes(panel, "data-cross-").groupkey;
+        if (groupKey && !includes(groupKeys, groupKey)) {
+          groupKeys.push(groupKey);
+          groupPanels[groupKey] = [panel];
+        } else if (groupKey) {
+          groupPanels[groupKey].push(panel);
+        }
+      });
+
+      sideState = groupKeys.reduce(
+        (state: SideState[], key: string) => {
+          const start = state.length ? +state[state.length - 1].end + 1 : 0;
+          const element = groupPanels[key].reduce(
+            (el: HTMLElement, panel: HTMLElement) => {
+              el.innerHTML += panel.outerHTML;
+              return el;
+            },
+            document.createElement("div")
+          );
+          return [
+            ...state,
+            {
+              key,
+              start,
+              end: start + groupPanels[key].length - 1,
+              element: element
+            }
+          ];
+        },
+        []
+      );
+    }
+
+    return sideState;
+  }
+
+  private _createSideFlicking(): Flicking[] {
+    return this.sideState.map((state, i) => {
+      return new Flicking(this.camera.children[i], {
+        ...this.sideOptions,
+        horizontal: false,
+        panelsPerView: 1,
+        defaultIndex: state.start
+      });
+    });
+  }
+
+  private _syncToCategory(index: number, outerIndex: number): void {
+    this.stopAnimation();
+    this._sideFlicking.forEach((child, i) => {
+      const { start, end } = this._sideState[i];
+
+      if (start <= index && end >= index && outerIndex !== i) {
+        child.stopAnimation();
+        void child.moveTo(index, 0);
+        void this.moveTo(i, 0);
+      }
+    });
+  }
+
+  private _onHorizontalHoldStart = (): void => {
+    this.dragThreshold = 10;
+    this._moveDirection = null;
+  };
+
+  private _onHorizontalMove = (e: MoveEvent): void => {
+    if (e.isTrusted && !this._moveDirection) {
+      this._sideFlicking.forEach((child) => {
+        child.dragThreshold = Infinity;
+      });
+      this._moveDirection = MOVE_DIRECTION.HORIZONTAL;
+    }
+  };
+
+  private _onHorizontalMoveEnd = (e: MoveEndEvent): void => {
+    const visiblePanels = this.visiblePanels;
+
+    this._sideFlicking.forEach((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;
+    }
+
+    // _syncToCategory에서 완전히 가로 이동이 이루어지기 전에 세로 방향 index가 변하는 경우가 있어 timeout으로 처리
+    setTimeout(() => {
+      this._sideFlicking.forEach((child, i) => {
+        if (this._nextIndex !== i) {
+          const { start, end } = this._sideState[i];
+
+          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._sideFlicking[this._nextIndex].index,
+        this._nextIndex
+      );
+    }
+  };
+
+  private _onSideHoldStart = (): void => {
+    this._sideFlicking.forEach((child) => {
+      child.dragThreshold = 10;
+    });
+    this._moveDirection = null;
+  };
+
+  private _onSideMove = (e: MoveEvent): void => {
+    if (e.isTrusted && !this._moveDirection) {
+      this.dragThreshold = Infinity;
+      this._moveDirection = MOVE_DIRECTION.VERTICAL;
+    }
+  };
+
+  private _onSideMoveEnd = (): void => {
+    this.dragThreshold = 10;
+    this._moveDirection = null;
+  };
+
+  private _onSideChanged = (e: ChangedEvent): void => {
+    // this.visiblePanels.length 가 2보다 크다면 가로 방향 Flicking이 조작 중이라는 것을 의미합니다.
+    // 이 경우 가로 방향 Flicking의 이동이 완전히 끝난 뒤 _onHorizontalMoveEnd 에서 syncToCategory할 것이므로 여기서는 하지 않습니다.
+    if (
+      this.visiblePanels.length < 2 &&
+      this._sideFlicking[this.index] === e.currentTarget
+    ) {
+      this._syncToCategory(e.index, this.index);
+    }
+  };
+}

package/src/camera/Camera.ts

@@ -32,7 +32,6 @@ class Camera {
   private _mode: CameraMode;
   private _el: HTMLElement;
   private _transform: string;
-  private _lookedOffset = 0;
   private _position: number;
   private _alignPos: number;
   private _offset: number;
@@ -293,8 +292,6 @@ class Camera {
    * @return {this}
    */
   public lookAt(pos: number): void {
-    const prevOffset = this._offset;
-    const isChangedOffset = this._lookedOffset !== prevOffset;
     const flicking = getFlickingAttached(this._flicking);
     const prevPos = this._position;
 
@@ -307,12 +304,7 @@ class Camera {
     if (toggled) {
       void flicking.renderer.render().then(() => {
         this.updateOffset();
-        this._lookedOffset = this._offset;
       });
-    } else if (isChangedOffset) {
-      // sync offset for renderOnlyVisible on resize
-      this.updateOffset();
-      this._lookedOffset = this._offset;
     } else {
       this.applyTransform();
     }
@@ -510,8 +502,8 @@ class Camera {
   }
 
   /**
-   * Update Viewport's height to visible panel's max height
-   * @ko 현재 활성화된 패널과 보이는 패널의 최대 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
+   * Update Viewport's height to active panel's height
+   * @ko 현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
    * @throws {FlickingError}
    * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
    * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
@@ -521,22 +513,11 @@ class Camera {
   public updateAdaptiveHeight() {
     const flicking = getFlickingAttached(this._flicking);
     const activePanel = flicking.control.activePanel;
-    const visiblePanels = flicking.visiblePanels;
-
-    const selectedPanels = [...visiblePanels];
-
-    if (activePanel) {
-      selectedPanels.push(activePanel);
-    }
-
-    if (!flicking.horizontal || !flicking.adaptive || !selectedPanels.length) return;
-
-
-    const maxHeight = Math.max(...selectedPanels.map(panel => panel.height));
 
+    if (!flicking.horizontal || !flicking.adaptive || !activePanel) return;
 
     flicking.viewport.setSize({
-      height: maxHeight
+      height: activePanel.height
     });
   }
 
@@ -618,7 +599,6 @@ class Camera {
 
   private _resetInternalValues() {
     this._position = 0;
-    this._lookedOffset = 0;
     this._alignPos = 0;
     this._offset = 0;
     this._circularOffset = 0;

package/src/const/external.ts

@@ -94,6 +94,8 @@ export const MOVE_TYPE = {
 } as const;
 
 export const CLASS = {
+  VIEWPORT: "flicking-viewport",
+  CAMERA: "flicking-camera",
   VERTICAL: "vertical",
   HIDDEN: "flicking-hidden",
   DEFAULT_VIRTUAL: "flicking-panel"
@@ -122,3 +124,15 @@ export const ORDER = {
   LTR: "ltr",
   RTL: "rtl"
 } as const;
+
+/**
+ * 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>
+ */
+export const MOVE_DIRECTION = {
+  HORIZONTAL: "horizontal",
+  VERTICAL: "vertical"
+} as const;

package/src/index.ts

@@ -4,6 +4,9 @@
  */
 import Flicking from "./Flicking";
 import type { FlickingOptions, FlickingEvents } from "./Flicking";
+import type { CrossFlickingOptions } from "./CrossFlicking";
+
+export * from "./CrossFlicking";
 
 export * from "./core";
 export * from "./camera";
@@ -15,6 +18,6 @@ export * from "./utils";
 
 export * from "./type/event";
 export * from "./type/external";
-export type { FlickingOptions, FlickingEvents };
+export type { FlickingOptions, FlickingEvents, CrossFlickingOptions };
 
 export default Flicking;

package/src/index.umd.ts

@@ -3,6 +3,7 @@
  * egjs projects are licensed under the MIT license
  */
 import Flicking from "./Flicking";
+import * as CrossFlicking from "./CrossFlicking";
 import * as Core from "./core";
 import * as Camera from "./camera";
 import * as Control from "./control";
@@ -19,5 +20,6 @@ merge(Flicking, Renderer);
 merge(Flicking, Constants);
 merge(Flicking, CFC);
 merge(Flicking, Utils);
+merge(Flicking, CrossFlicking);
 
 export default Flicking;

package/src/utils.ts

@@ -349,3 +349,24 @@ export const setPrototypeOf = Object.setPrototypeOf || ((obj, proto) => {
   obj.__proto__ = proto;
   return obj;
 });
+
+export const camelize = (str: string): string => {
+  return str.replace(/[\s-_]([a-z])/g, (all, letter) => letter.toUpperCase());
+};
+
+export const getDataAttributes = (element: HTMLElement, attributePrefix: string): Record<string, string> => {
+  const dataAttributes: Record<string, string> = {};
+  const attributes = element.attributes;
+  const length = attributes.length;
+
+  for (let i = 0; i < length; ++i) {
+    const attribute = attributes[i];
+    const { name, value } = attribute;
+    if (name.indexOf(attributePrefix) === -1) {
+      continue;
+    }
+    dataAttributes[camelize(name.replace(attributePrefix, ""))] = value;
+  }
+
+  return dataAttributes;
+};