@egjs/flicking 4.3.1 → 4.4.0

package/src/core/panel/Panel.ts

@@ -3,25 +3,34 @@
  * egjs projects are licensed under the MIT license
  */
 import Flicking from "../../Flicking";
-import { getProgress, getStyle, isString, parseAlign } from "../../utils";
+import { getProgress, getStyle, parseAlign, setSize } from "../../utils";
 import { ALIGN, DIRECTION } from "../../const/external";
 import { LiteralUnion, ValueOf } from "../../type/internal";
 
+import ElementProvider from "./provider/ElementProvider";
+
 export interface PanelOptions {
   index: number;
   align: LiteralUnion<ValueOf<typeof ALIGN>> | number;
   flicking: Flicking;
+  elementProvider: ElementProvider;
 }
 
-abstract class Panel {
+/**
+ * A slide data component that holds information of a single HTMLElement
+ * @ko 슬라이드 데이터 컴포넌트로, 단일 HTMLElement의 정보를 갖고 있습니다
+ */
+class Panel {
   // Internal States
   protected _flicking: Flicking;
+  protected _elProvider: ElementProvider;
   protected _index: number;
   protected _pos: number;
   protected _size: number;
   protected _height: number;
   protected _margin: { prev: number; next: number };
   protected _alignPos: number; // Actual align pos
+  protected _rendered: boolean;
   protected _removed: boolean;
   protected _loading: boolean;
   protected _toggleDirection: ValueOf<typeof DIRECTION>;
@@ -38,7 +47,12 @@ abstract class Panel {
    * @type {HTMLElement}
    * @readonly
    */
-  abstract get element(): HTMLElement;
+  public get element() { return this._elProvider.element; }
+  /**
+   * @internal
+   * @readonly
+   */
+  public get elementProvider() { return this._elProvider; }
   /**
    * Index of the panel
    * @ko 패널의 인덱스
@@ -104,19 +118,19 @@ abstract class Panel {
    */
   public get removed() { return this._removed; }
   /**
-   * A value indicating whether the panel's image/video is not loaded and waiting for resize
-   * @ko 패널 내부의 이미지/비디오가 아직 로드되지 않아 {@link Panel#resize resize}될 것인지를 나타내는 값
+   * A value indicating whether the panel's element is being rendered on the screen
+   * @ko 패널의 엘리먼트가 화면상에 렌더링되고있는지 여부를 나타내는 값
    * @type {boolean}
    * @readonly
    */
-  public get loading() { return this._loading; }
+  public get rendered() { return this._rendered; }
   /**
-   * A value indicating whether the panel's element is being rendered on the screen
-   * @ko 패널의 엘리먼트가 화면상에 렌더링되고있는지 여부를 나타내는 값
+   * A value indicating whether the panel's image/video is not loaded and waiting for resize
+   * @ko 패널 내부의 이미지/비디오가 아직 로드되지 않아 {@link Panel#resize resize}될 것인지를 나타내는 값
    * @type {boolean}
    * @readonly
    */
-  public abstract get rendered();
+  public get loading() { return this._loading; }
   /**
    * Panel element's range of the bounding box
    * @ko 패널 엘리먼트의 Bounding box 범위
@@ -247,18 +261,22 @@ abstract class Panel {
    * @param {number} [options.index] An initial index of the panel<ko>패널의 초기 인덱스</ko>
    * @param {Constants.ALIGN | string | number} [options.align] An initial {@link Flicking#align align} value of the panel<ko>패널의 초기 {@link Flicking#align align}값</ko>
    * @param {Flicking} [options.flicking] A Flicking instance panel's referencing<ko>패널이 참조하는 {@link Flicking} 인스턴스</ko>
+   * @param {Flicking} [options.elementProvider] A provider instance that redirects elements<ko>실제 엘리먼트를 반환하는 엘리먼트 공급자의 인스턴스</ko>
    */
   public constructor({
     index,
     align,
-    flicking
+    flicking,
+    elementProvider
   }: PanelOptions) {
     this._index = index;
     this._flicking = flicking;
+    this._elProvider = elementProvider;
 
     this._align = align;
 
     this._removed = false;
+    this._rendered = true;
     this._loading = false;
     this._resetInternalStates();
   }
@@ -267,13 +285,19 @@ abstract class Panel {
    * Mark panel element to be appended on the camera element
    * @internal
    */
-  public abstract markForShow();
+  public markForShow() {
+    this._rendered = true;
+    this._elProvider.show(this._flicking);
+  }
 
   /**
    * Mark panel element to be removed from the camera element
    * @internal
    */
-  public abstract markForHide();
+  public markForHide() {
+    this._rendered = false;
+    this._elProvider.hide(this._flicking);
+  }
 
   /**
    * Update size of the panel
@@ -288,7 +312,6 @@ abstract class Panel {
     margin: { prev: number; next: number };
   }): this {
     const el = this.element;
-    const elStyle = getStyle(el);
     const flicking = this._flicking;
     const horizontal = flicking.horizontal;
 
@@ -297,6 +320,8 @@ abstract class Panel {
       this._margin = { ...cached.margin };
       this._height = cached.height;
     } else {
+      const elStyle = getStyle(el);
+
       this._size = horizontal ? el.offsetWidth : el.offsetHeight;
       this._margin = horizontal
         ? {
@@ -324,29 +349,11 @@ abstract class Panel {
    * @chainable
    * @return {this}
    */
-  public setSize({
-    width,
-    height
-  }: Partial<{
+  public setSize(size: Partial<{
     width: number | string;
     height: number | string;
   }>): this {
-    const el = this.element;
-
-    if (width != null) {
-      if (isString(width)) {
-        el.style.width = width;
-      } else {
-        el.style.width = `${width}px`;
-      }
-    }
-    if (height != null) {
-      if (isString(height)) {
-        el.style.height = height;
-      } else {
-        el.style.height = `${height}px`;
-      }
-    }
+    setSize(this.element, size);
 
     return this;
   }
@@ -383,7 +390,7 @@ abstract class Panel {
   }
 
   /**
-   * Check whether the given range is fully included in this panel's area
+   * Check whether the given range is fully included in this panel's area (inclusive)
    * @ko 주어진 범위가 이 패널 내부에 완전히 포함되는지를 반환합니다
    * @param {number} min Minimum value of the range to check<ko>확인하고자 하는 최소 범위</ko>
    * @param {number} max Maximum value of the range to check<ko>확인하고자 하는 최대 범위</ko>
@@ -402,6 +409,19 @@ abstract class Panel {
     return max >= panelRange.min && min <= panelRange.max;
   }
 
+  /**
+   * Check whether the panel is visble in the given range (exclusive)
+   * @ko 주어진 범위 내에서 이 패널의 일부가 보여지는지를 반환합니다
+   * @param {number} min Minimum value of the range to check<ko>확인하고자 하는 최소 범위</ko>
+   * @param {number} max Maximum value of the range to check<ko>확인하고자 하는 최대 범위</ko>
+   * @returns {boolean} A Boolean value indicating whether the panel is visible<ko>해당 범위 내에서 패널을 볼 수 있는지 여부</ko>
+   */
+  public isVisibleOnRange(min: number, max: number): boolean {
+    const panelRange = this.range;
+
+    return max > panelRange.min && min < panelRange.max;
+  }
+
   /**
    * Move {@link Camera} to this panel
    * @ko {@link Camera}를 이 패널로 이동합니다

package/src/core/panel/VirtualPanel.ts

@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import { DIRECTION } from "../../const/external";
+import { circulateIndex } from "../../utils";
+
+import Panel, { PanelOptions } from "./Panel";
+import VirtualElementProvider from "./provider/VirtualElementProvider";
+
+interface VirtualPanelOptions extends PanelOptions {
+  elementProvider: VirtualElementProvider;
+}
+
+/**
+ * An slide data component that holds information of a single HTMLElement
+ * @ko 슬라이드 데이터 컴포넌트로, 단일 HTMLElement의 정보를 갖고 있습니다
+ */
+class VirtualPanel extends Panel {
+  protected _elProvider: VirtualElementProvider;
+  protected _cachedInnerHTML: string | null;
+
+  /**
+   * `HTMLElement` that panel's referencing
+   * @ko 패널이 참조하고 있는 `HTMLElement`
+   * @type {HTMLElement}
+   * @readonly
+   */
+  public get element() { return this._elProvider.element; }
+
+  /**
+   * Cached innerHTML by the previous render function
+   * @ko 이전 렌더링에서 캐시된 innerHTML 정보
+   * @type {string|null}
+   * @readonly
+   */
+  public get cachedInnerHTML() { return this._cachedInnerHTML; }
+
+  /**
+   * An number for indexing which element it will be rendered on
+   * @ko 몇 번째 엘리먼트에 렌더링될 것인지를 나타내는 숫자
+   * @type {number}
+   * @readonly
+   */
+  public get elementIndex() {
+    const flicking = this._flicking;
+    const virtualElCount = flicking.panelsPerView + 1;
+    const panelCount = flicking.panelCount;
+    let index = this._index;
+
+    if (this._toggled) {
+      // To prevent element duplication
+      index = this._toggleDirection === DIRECTION.NEXT
+        ? index + panelCount
+        : index - panelCount;
+    }
+
+    return circulateIndex(index, virtualElCount);
+  }
+
+  /**
+   * @param {object} options An options object<ko>옵션 오브젝트</ko>
+   * @param {number} [options.index] An initial index of the panel<ko>패널의 초기 인덱스</ko>
+   * @param {Constants.ALIGN | string | number} [options.align] An initial {@link Flicking#align align} value of the panel<ko>패널의 초기 {@link Flicking#align align}값</ko>
+   * @param {Flicking} [options.flicking] A Flicking instance panel's referencing<ko>패널이 참조하는 {@link Flicking} 인스턴스</ko>
+   */
+  public constructor(options: VirtualPanelOptions) {
+    super(options);
+
+    options.elementProvider.init(this);
+    this._elProvider = options.elementProvider;
+    this._cachedInnerHTML = null;
+  }
+
+  public cacheRenderResult(result: string) {
+    this._cachedInnerHTML = result;
+  }
+
+  public uncacheRenderResult() {
+    this._cachedInnerHTML = null;
+  }
+
+  public render() {
+    const flicking = this._flicking;
+    const { renderPanel, cache } = flicking.virtual;
+
+    const element = this._elProvider.element;
+    const newInnerHTML = this._cachedInnerHTML || renderPanel(this, this._index);
+
+    if (newInnerHTML === element.innerHTML) return;
+
+    element.innerHTML = newInnerHTML;
+
+    if (cache) {
+      this.cacheRenderResult(newInnerHTML);
+    }
+  }
+
+  public increaseIndex(val: number) {
+    this.uncacheRenderResult();
+    return super.increaseIndex(val);
+  }
+
+  public decreaseIndex(val: number) {
+    this.uncacheRenderResult();
+    return super.decreaseIndex(val);
+  }
+}
+
+export default VirtualPanel;

package/src/core/panel/index.ts

@@ -3,17 +3,18 @@
  * egjs projects are licensed under the MIT license
  */
 import Panel, { PanelOptions } from "./Panel";
-import ElementPanel, { ElementPanelOptions } from "./ElementPanel";
 import ExternalPanel, { ExternalPanelOptions } from "./ExternalPanel";
+import VirtualPanel from "./VirtualPanel";
+
+export * from "./provider";
 
 export {
   Panel,
-  ElementPanel,
-  ExternalPanel
+  ExternalPanel,
+  VirtualPanel
 };
 
 export type {
   PanelOptions,
-  ElementPanelOptions,
   ExternalPanelOptions
 };

package/src/core/panel/provider/ElementProvider.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Flicking from "../../../Flicking";
+
+interface ElementProvider {
+  element: HTMLElement;
+  show(flicking: Flicking): void;
+  hide(flicking: Flicking): void;
+}
+
+export default ElementProvider;

package/src/core/panel/provider/ExternalElementProvider.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Flicking from "../../../Flicking";
+
+import ElementProvider from "./ElementProvider";
+
+interface ExternalElementProvider extends ElementProvider {
+  rendered: boolean;
+  show(flicking: Flicking): any;
+  hide(flicking: Flicking): any;
+}
+
+export default ExternalElementProvider;

package/src/core/panel/provider/VanillaElementProvider.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Flicking from "../../../Flicking";
+
+import ElementProvider from "./ElementProvider";
+
+/**
+ * @internal
+ */
+class VanillaElementProvider implements ElementProvider {
+  private _element: HTMLElement;
+
+  public get element() { return this._element; }
+
+  public constructor(element: HTMLElement) {
+    this._element = element;
+  }
+
+  public show(flicking: Flicking): void {
+    const el = this.element;
+    const cameraEl = flicking.camera.element;
+
+    if (el.parentElement !== cameraEl) {
+      cameraEl.appendChild(el);
+    }
+  }
+
+  public hide(flicking: Flicking): void {
+    const el = this.element;
+    const cameraEl = flicking.camera.element;
+
+    if (el.parentElement === cameraEl) {
+      cameraEl.removeChild(el);
+    }
+  }
+}
+
+export default VanillaElementProvider;

package/src/core/panel/provider/VirtualElementProvider.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+
+import Flicking from "../../../Flicking";
+import VirtualPanel from "../VirtualPanel";
+
+import ElementProvider from "./ElementProvider";
+
+/**
+ * @internal
+ */
+class VirtualElementProvider implements ElementProvider {
+  private _flicking: Flicking;
+  private _panel: VirtualPanel;
+
+  public get element() {
+    const flicking = this._flicking;
+    const elIndex = this._panel.elementIndex;
+    const virtualElements = flicking.virtual.elements;
+
+    return virtualElements[elIndex].nativeElement;
+  }
+
+  public constructor(flicking: Flicking) {
+    this._flicking = flicking;
+  }
+
+  public init(panel: VirtualPanel) {
+    this._panel = panel;
+  }
+
+  public show(): void {
+    // DO_NOTHING
+    // Actual element visibility is controlled by VirtualManager
+  }
+
+  public hide(): void {
+    // DO_NOTHING
+    // Actual element visibility is controlled by VirtualManager
+  }
+}
+
+export default VirtualElementProvider;

package/src/core/panel/provider/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import ElementProvider from "./ElementProvider";
+import ExternalElementProvider from "./ExternalElementProvider";
+import VanillaElementProvider from "./VanillaElementProvider";
+import VirtualElementProvider from "./VirtualElementProvider";
+
+export {
+  VanillaElementProvider,
+  VirtualElementProvider
+};
+
+export type {
+  ElementProvider,
+  ExternalElementProvider
+};

package/src/index.ts

@@ -3,7 +3,18 @@
  * egjs projects are licensed under the MIT license
  */
 import Flicking from "./Flicking";
+import type { FlickingOptions, FlickingEvents } from "./Flicking";
 
-export * from "./exports";
+export * from "./core";
+export * from "./camera";
+export * from "./control";
+export * from "./renderer";
+export * from "./const/external";
+export * from "./cfc";
+export * from "./utils";
+
+export * from "./type/event";
+export * from "./type/external";
+export type { FlickingOptions, FlickingEvents };
 
 export default Flicking;

package/src/index.umd.ts

@@ -9,6 +9,7 @@ import * as Control from "./control";
 import * as Renderer from "./renderer";
 import * as Constants from "./const/external";
 import * as CFC from "./cfc";
+import * as Utils from "./utils";
 import { merge } from "./utils";
 
 merge(Flicking, Core);
@@ -17,5 +18,6 @@ merge(Flicking, Control);
 merge(Flicking, Renderer);
 merge(Flicking, Constants);
 merge(Flicking, CFC);
+merge(Flicking, Utils);
 
 export default Flicking;

package/src/renderer/ExternalRenderer.ts

@@ -10,15 +10,47 @@ import Renderer from "./Renderer";
  *
  */
 abstract class ExternalRenderer extends Renderer {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  /* eslint-disable @typescript-eslint/no-unused-vars */
   protected _insertPanelElements(panels: Panel[], nextSibling: Panel | null): void {
-    // DO NOTHING
+    // DO NOTHING, overrided to prevent an unexpected error
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   protected _removePanelElements(panels: Panel[]): void {
-    // DO NOTHING
+    // DO NOTHING, overrided to prevent an unexpected error
   }
+
+  protected _removeAllChildsFromCamera(): void {
+    // DO NOTHING, overrided to prevent an unexpected error
+  }
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+
+  // protected _renderVirtualPanels() {
+  //   const flicking = getFlickingAttached(this._flicking);
+  //   const virtualManager = this._virtualManager;
+
+  //   if (!virtualManager) return;
+
+  //   const elements = virtualManager.elements;
+  //   const visiblePanels = flicking.visiblePanels as VirtualPanel[];
+  //   const invisibles = elements.map((_, idx) => idx);
+
+  //   visiblePanels.forEach(panel => {
+  //     const virtualEl = panel.virtualElement;
+
+  //     invisibles[virtualEl.index] = -1;
+  //     virtualEl.renderingPanel = panel;
+  //     virtualEl.show();
+  //     panel.markForShow();
+  //   });
+
+  //   invisibles.filter(val => val >= 0)
+  //     .forEach(idx => {
+  //       const virtualEl = elements[idx];
+  //       virtualEl.hide();
+  //       virtualEl.renderingPanel?.markForHide();
+  //       virtualEl.renderingPanel = null;
+  //     });
+  // }
 }
 
 export default ExternalRenderer;