@egjs/flicking 4.2.4 → 4.4.0

package/src/renderer/VanillaRenderer.ts

@@ -4,7 +4,6 @@
  */
 import { getFlickingAttached, toArray } from "../utils";
 import Panel, { PanelOptions } from "../core/panel/Panel";
-import ElementPanel from "../core/panel/ElementPanel";
 
 import Renderer from "./Renderer";
 
@@ -14,112 +13,55 @@ import Renderer from "./Renderer";
 class VanillaRenderer extends Renderer {
   // eslint-disable-next-line @typescript-eslint/require-await
   public async render() {
-    const flicking = getFlickingAttached(this._flicking, "Renderer");
-    const cameraEl = flicking.camera.element;
-    const wasRenderedPanels = this._panels.filter(panel => panel.element.parentElement === cameraEl);
-
-    this._updateRenderingPanels();
-    const renderingPanels = this._getRenderingPanelsByOrder();
-
-    this._removePanelElements(wasRenderedPanels.filter(panel => !panel.rendered));
-    this._insertPanelElements(renderingPanels.filter(panel => panel.element.parentElement !== cameraEl), null);
-    this._resetPanelElementOrder(renderingPanels);
-  }
-
-  // eslint-disable-next-line @typescript-eslint/require-await
-  public async forceRenderAllPanels() {
-    const flicking = getFlickingAttached(this._flicking, "Renderer");
-    const camera = flicking.camera;
-    const cameraElement = camera.element;
-    const fragment = document.createDocumentFragment();
-
-    this._panels.forEach(panel => fragment.appendChild(panel.element));
+    const flicking = getFlickingAttached(this._flicking);
+    const strategy = this._strategy;
 
-    this._removeAllChildsFromCamera();
+    strategy.updateRenderingPanels(flicking);
+    strategy.renderPanels(flicking);
 
-    cameraElement.appendChild(fragment);
+    this._resetPanelElementOrder();
   }
 
   protected _collectPanels() {
-    const flicking = getFlickingAttached(this._flicking, "Renderer");
-
-    const cameraElement = flicking.camera.element;
-
-    // Remove all text nodes in the camera element
-    toArray(cameraElement.childNodes).forEach(node => {
-      if (node.nodeType === Node.TEXT_NODE) {
-        cameraElement.removeChild(node);
-      }
-    });
-
-    const align = this._getPanelAlign();
-    const cameraChilds = toArray(cameraElement.children);
-
-    this._panels = cameraChilds.map(
-      (el: HTMLElement, index: number) => new ElementPanel({ flicking, el, index, align })
-    );
-  }
-
-  protected _createPanel(el: HTMLElement, options: PanelOptions): ElementPanel {
-    return new ElementPanel({ el, ...options });
-  }
-
-  protected _insertPanelElements(panels: Panel[], nextSibling: Panel | null) {
-    const flicking = getFlickingAttached(this._flicking, "Renderer");
+    const flicking = getFlickingAttached(this._flicking);
     const camera = flicking.camera;
-    const cameraElement = camera.element;
-    const nextSiblingElement = nextSibling?.element || null;
-    const fragment = document.createDocumentFragment();
-
-    panels.forEach(panel => fragment.appendChild(panel.element));
-    cameraElement.insertBefore(fragment, nextSiblingElement);
 
-    return this;
+    this._removeAllTextNodes();
+    this._panels = this._strategy.collectPanels(flicking, camera.children);
   }
 
-  protected _removePanelElements(panels: Panel[]): this {
-    const flicking = getFlickingAttached(this._flicking, "Renderer");
-    const cameraElement = flicking.camera.element;
-
-    panels.forEach(panel => {
-      cameraElement.removeChild(panel.element);
-    });
-
-    return this;
+  protected _createPanel(el: HTMLElement, options: Omit<PanelOptions, "elementProvider">): Panel {
+    return this._strategy.createPanel(el, options);
   }
 
-  private _resetPanelElementOrder(panels: Panel[]) {
-    const flicking = getFlickingAttached(this._flicking, "Renderer");
+  private _resetPanelElementOrder() {
+    const flicking = getFlickingAttached(this._flicking);
     const cameraEl = flicking.camera.element;
 
     // We're using reversed panels here as last panel should be the last element of camera element
-    const reversedPanels = [...panels].reverse();
-    reversedPanels.forEach((panel, idx) => {
-      const nextPanel = reversedPanels[idx - 1];
-      const nextPanelEl = nextPanel ? nextPanel.element : null;
+    const reversedElements = this._strategy
+      .getRenderingElementsByOrder(flicking)
+      .reverse();
+
+    reversedElements.forEach((el, idx) => {
+      const nextEl = reversedElements[idx - 1] ? reversedElements[idx - 1] : null;
 
-      if (panel.element.nextElementSibling !== nextPanelEl) {
-        cameraEl.insertBefore(panel.element, nextPanelEl);
+      if (el.nextElementSibling !== nextEl) {
+        cameraEl.insertBefore(el, nextEl);
       }
     });
   }
 
-  private _removeAllChildsFromCamera() {
-    const flicking = getFlickingAttached(this._flicking, "Renderer");
+  private _removeAllTextNodes() {
+    const flicking = getFlickingAttached(this._flicking);
     const cameraElement = flicking.camera.element;
 
-    // Remove other elements
-    while (cameraElement.firstChild) {
-      cameraElement.removeChild(cameraElement.firstChild);
-    }
-  }
-
-  private _getRenderingPanelsByOrder(): Panel[] {
-    const flicking = getFlickingAttached(this._flicking, "Renderer");
-    const panels = flicking.renderer.panels;
-
-    return panels.filter(panel => panel.rendered)
-      .sort((a, b) => (a.position + a.offset) - (b.position + b.offset));
+    // Remove all text nodes in the camera element
+    toArray(cameraElement.childNodes).forEach(node => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        cameraElement.removeChild(node);
+      }
+    });
   }
 }
 

package/src/renderer/index.ts

@@ -6,6 +6,8 @@ import Renderer, { RendererOptions } from "./Renderer";
 import VanillaRenderer from "./VanillaRenderer";
 import ExternalRenderer from "./ExternalRenderer";
 
+export * from "./strategy";
+
 export {
   Renderer,
   VanillaRenderer,

package/src/renderer/strategy/NormalRenderingStrategy.ts

@@ -0,0 +1,109 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Flicking from "../../Flicking";
+import Panel, { PanelOptions } from "../../core/panel/Panel";
+import ElementProvider from "../../core/panel/provider/ElementProvider";
+import { DIRECTION } from "../../const/external";
+import { parsePanelAlign } from "../../utils";
+
+import RenderingStrategy from "./RenderingStrategy";
+
+export interface NormalRenderingStrategyOptions {
+  providerCtor: new (...args: any) => ElementProvider;
+  panelCtor: new (options: PanelOptions) => Panel;
+}
+
+
+class NormalRenderingStrategy implements RenderingStrategy {
+  private _providerCtor: NormalRenderingStrategyOptions["providerCtor"];
+  private _panelCtor: NormalRenderingStrategyOptions["panelCtor"];
+
+  public constructor({ providerCtor, panelCtor }: NormalRenderingStrategyOptions) {
+    this._providerCtor = providerCtor;
+    this._panelCtor = panelCtor;
+  }
+
+  public renderPanels() {
+    // DO_NOTHING
+  }
+
+  public getRenderingIndexesByOrder(flicking: Flicking) {
+    const renderedPanels = flicking.renderer.panels.filter(panel => panel.rendered);
+    const toggledPrev = renderedPanels.filter(panel => panel.toggled && panel.toggleDirection === DIRECTION.PREV);
+    const toggledNext = renderedPanels.filter(panel => panel.toggled && panel.toggleDirection === DIRECTION.NEXT);
+    const notToggled = renderedPanels.filter(panel => !panel.toggled);
+
+    return [...toggledPrev, ...notToggled, ...toggledNext].map(panel => panel.index);
+  }
+
+  public getRenderingElementsByOrder(flicking: Flicking) {
+    const panels = flicking.panels;
+
+    return this.getRenderingIndexesByOrder(flicking).map(index => panels[index].element);
+  }
+
+  public updateRenderingPanels(flicking: Flicking) {
+    if (flicking.renderOnlyVisible) {
+      this._showOnlyVisiblePanels(flicking);
+    } else {
+      flicking.panels.forEach(panel => panel.markForShow());
+    }
+  }
+
+  public collectPanels(
+    flicking: Flicking,
+    elements: any[]
+  ) {
+    const align = parsePanelAlign(flicking.renderer.align);
+
+    return elements.map((el, index) => new this._panelCtor({
+      index,
+      elementProvider: new this._providerCtor(el),
+      align,
+      flicking
+    }));
+  }
+
+  public createPanel(
+    element: any,
+    options: Omit<PanelOptions, "elementProvider">
+  ) {
+    return new this._panelCtor({
+      ...options,
+      elementProvider: new this._providerCtor(element)
+    });
+  }
+
+  public updatePanelSizes(flicking: Flicking, size: Partial<{
+    width: number | string;
+    height: number | string;
+  }>) {
+    flicking.panels.forEach(panel => panel.setSize(size));
+  }
+
+  private _showOnlyVisiblePanels(flicking: Flicking) {
+    const panels = flicking.renderer.panels;
+    const camera = flicking.camera;
+
+    const visibleIndexes = camera.visiblePanels.reduce((visibles, panel) => {
+      visibles[panel.index] = true;
+      return visibles;
+    }, {});
+
+    panels.forEach(panel => {
+      if (panel.index in visibleIndexes || panel.loading) {
+        panel.markForShow();
+      } else if (!flicking.holding) {
+        // During the input sequence,
+        // Do not remove panel elements as it won't trigger touchend event.
+        panel.markForHide();
+      }
+    });
+
+    camera.updateOffset();
+  }
+}
+
+export default NormalRenderingStrategy;

package/src/renderer/strategy/RenderingStrategy.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Flicking from "../../Flicking";
+import Panel, { PanelOptions } from "../../core/panel/Panel";
+
+/**
+ * @internal
+ */
+interface RenderingStrategy {
+  renderPanels(flicking: Flicking): void;
+  getRenderingIndexesByOrder(flicking: Flicking): number[];
+  getRenderingElementsByOrder(flicking: Flicking): HTMLElement[];
+  updateRenderingPanels(flicking: Flicking): void;
+  createPanel(element: any, options: Omit<PanelOptions, "elementProvider">): Panel;
+  collectPanels(flicking: Flicking, elements: any[]): Panel[];
+  updatePanelSizes(flicking: Flicking, size: Partial<{ width: number | string; height: number | string }>): void;
+}
+
+export default RenderingStrategy;

package/src/renderer/strategy/VirtualRenderingStrategy.ts

@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Flicking from "../../Flicking";
+import { PanelOptions } from "../../core/panel/Panel";
+import VirtualPanel from "../../core/panel/VirtualPanel";
+import VirtualElementProvider from "../../core/panel/provider/VirtualElementProvider";
+import { parsePanelAlign, range, setSize } from "../../utils";
+
+import RenderingStrategy from "./RenderingStrategy";
+
+class VirtualRenderingStrategy implements RenderingStrategy {
+  public renderPanels(flicking: Flicking) {
+    const virtualManager = flicking.virtual;
+    const visiblePanels = flicking.visiblePanels as VirtualPanel[];
+    const invisibleIndexes = range(flicking.panelsPerView + 1);
+
+    visiblePanels.forEach(panel => {
+      const elementIndex = panel.elementIndex;
+
+      panel.render();
+
+      virtualManager.show(elementIndex);
+      invisibleIndexes[elementIndex] = -1;
+    });
+
+    invisibleIndexes
+      .filter(val => val >= 0)
+      .forEach(idx => {
+        virtualManager.hide(idx);
+      });
+  }
+
+  public getRenderingIndexesByOrder(flicking: Flicking) {
+    const virtualManager = flicking.virtual;
+    const visiblePanels = [...flicking.visiblePanels]
+      .filter(panel => panel.rendered)
+      .sort((panel1, panel2) => {
+        return (panel1.position + panel1.offset) - (panel2.position + panel2.offset);
+      }) as VirtualPanel[];
+
+    if (visiblePanels.length <= 0) return virtualManager.elements.map((_, idx) => idx);
+
+    const visibleIndexes = visiblePanels.map(panel => panel.elementIndex);
+    const invisibleIndexes = virtualManager.elements
+      .map((el, idx) => ({ ...el, idx }))
+      .filter(el => !el.visible)
+      .map(el => el.idx);
+
+    return [...visibleIndexes, ...invisibleIndexes];
+  }
+
+  public getRenderingElementsByOrder(flicking: Flicking) {
+    const virtualManager = flicking.virtual;
+    const elements = virtualManager.elements;
+
+    return this.getRenderingIndexesByOrder(flicking).map(index => elements[index].nativeElement);
+  }
+
+  public updateRenderingPanels(flicking: Flicking) {
+    const panels = flicking.renderer.panels;
+    const camera = flicking.camera;
+
+    const visibleIndexes = camera.visiblePanels.reduce((visibles, panel) => {
+      visibles[panel.index] = true;
+      return visibles;
+    }, {});
+
+    panels.forEach(panel => {
+      if (panel.index in visibleIndexes || panel.loading) {
+        panel.markForShow();
+      } else {
+        panel.markForHide();
+      }
+    });
+
+    camera.updateOffset();
+  }
+
+  public collectPanels(flicking: Flicking) {
+    const align = parsePanelAlign(flicking.renderer.align);
+
+    return range(flicking.virtual.initialPanelCount).map(index => new VirtualPanel({
+      index,
+      elementProvider: new VirtualElementProvider(flicking),
+      align,
+      flicking
+    }));
+  }
+
+  public createPanel(_el: any, options: PanelOptions) {
+    return new VirtualPanel({
+      ...options,
+      elementProvider: new VirtualElementProvider(options.flicking)
+    });
+  }
+
+  public updatePanelSizes(flicking: Flicking, size: Partial<{
+    width: number | string;
+    height: number | string;
+  }>) {
+    flicking.virtual.elements.forEach(el => {
+      setSize(el.nativeElement, size);
+    });
+    flicking.panels.forEach(panel => panel.setSize(size));
+  }
+}
+
+export default VirtualRenderingStrategy;

package/src/renderer/strategy/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import RenderingStrategy from "./RenderingStrategy";
+import NormalRenderingStrategy, { NormalRenderingStrategyOptions } from "./NormalRenderingStrategy";
+import VirtualRenderingStrategy from "./VirtualRenderingStrategy";
+
+export {
+  NormalRenderingStrategy,
+  VirtualRenderingStrategy
+};
+
+export type {
+  RenderingStrategy,
+  NormalRenderingStrategyOptions
+};

package/src/utils.ts

@@ -49,9 +49,9 @@ export const checkExistence = (value: any, nameOnErrMsg: string) => {
 
 export const clamp = (x: number, min: number, max: number) => Math.max(Math.min(x, max), min);
 
-export const getFlickingAttached = (val: Flicking | null, nameToThrowOnError: string): Flicking => {
+export const getFlickingAttached = (val: Flicking | null): Flicking => {
   if (!val) {
-    throw new FlickingError(ERROR.MESSAGE.NOT_ATTACHED_TO_FLICKING(nameToThrowOnError), ERROR.CODE.NOT_ATTACHED_TO_FLICKING);
+    throw new FlickingError(ERROR.MESSAGE.NOT_ATTACHED_TO_FLICKING, ERROR.CODE.NOT_ATTACHED_TO_FLICKING);
   }
 
   return val;
@@ -163,6 +163,10 @@ export const parseArithmeticExpression = (cssValue: number | string): { percenta
 
 export const parseCSSSizeValue = (val: string | number): string => isString(val) ? val : `${val}px`;
 
+export const parsePanelAlign = (align: FlickingOptions["align"]) => typeof align === "object"
+  ? (align as { panel: string | number }).panel
+  : align;
+
 export const getDirection = (start: number, end: number): ValueOf<typeof DIRECTION> => {
   if (start === end) return DIRECTION.NONE;
   return start < end ? DIRECTION.NEXT : DIRECTION.PREV;
@@ -254,6 +258,26 @@ export const getProgress = (pos: number, prev: number, next: number) => (pos - p
 // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 export const getStyle = (el: HTMLElement): CSSStyleDeclaration => window.getComputedStyle(el) || (el as any).currentStyle as CSSStyleDeclaration;
 
+export const setSize = (el: HTMLElement, { width, height }: Partial<{
+  width: number | string;
+  height: number | string;
+}>) => {
+  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`;
+    }
+  }
+};
+
 export const isBetween = (val: number, min: number, max: number) => val >= min && val <= max;
 
 export const circulateIndex = (index: number, max: number): number => {
@@ -266,6 +290,16 @@ export const circulateIndex = (index: number, max: number): number => {
   }
 };
 
+export const range = (end: number): number[] => {
+  const arr = new Array(end);
+
+  for (let i = 0; i < end; i++) {
+    arr[i] = i;
+  }
+
+  return arr;
+};
+
 export const setPrototypeOf = Object.setPrototypeOf || ((obj, proto) => {
   obj.__proto__ = proto;
   return obj;

package/declaration/core/panel/ElementPanel.d.ts

@@ -1,14 +0,0 @@
-import Panel, { PanelOptions } from "./Panel";
-export interface ElementPanelOptions extends PanelOptions {
-    el: HTMLElement;
-}
-declare class ElementPanel extends Panel {
-    private _el;
-    private _rendered;
-    get element(): HTMLElement;
-    get rendered(): boolean;
-    constructor(options: ElementPanelOptions);
-    markForShow(): void;
-    markForHide(): void;
-}
-export default ElementPanel;

package/declaration/exports.d.ts

@@ -1,10 +0,0 @@
-import type { FlickingOptions, FlickingEvents } from "./Flicking";
-export * from "./core";
-export * from "./camera";
-export * from "./control";
-export * from "./renderer";
-export * from "./const/external";
-export * from "./type/event";
-export * from "./type/external";
-export * from "./cfc";
-export type { FlickingOptions, FlickingEvents };

package/src/core/panel/ElementPanel.ts

@@ -1,52 +0,0 @@
-/*
- * Copyright (c) 2015 NAVER Corp.
- * egjs projects are licensed under the MIT license
- */
-import Panel, { PanelOptions } from "./Panel";
-
-export interface ElementPanelOptions extends PanelOptions {
-  el: HTMLElement;
-}
-
-/**
- * An slide data component that holds information of a single HTMLElement
- * @ko 슬라이드 데이터 컴포넌트로, 단일 HTMLElement의 정보를 갖고 있습니다
- */
-class ElementPanel extends Panel {
-  private _el: HTMLElement;
-  private _rendered: boolean;
-
-  /**
-   * `HTMLElement` that panel's referencing
-   * @ko 패널이 참조하고 있는 `HTMLElement`
-   * @type {HTMLElement}
-   * @readonly
-   */
-  public get element() { return this._el; }
-
-  public get rendered() { return this._rendered; }
-
-  /**
-   * @param {object} options An options object<ko>옵션 오브젝트</ko>
-   * @param {HTMLElement} [options.el] A `HTMLElement` panel's referencing<ko>패널이 참조하는 `HTMLElement`</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: ElementPanelOptions) {
-    super(options);
-
-    this._el = options.el;
-    this._rendered = true;
-  }
-
-  public markForShow() {
-    this._rendered = true;
-  }
-
-  public markForHide() {
-    this._rendered = false;
-  }
-}
-
-export default ElementPanel;

package/src/exports.ts

@@ -1,16 +0,0 @@
-/*
- * Copyright (c) 2015 NAVER Corp.
- * egjs projects are licensed under the MIT license
- */
-import type { FlickingOptions, FlickingEvents } from "./Flicking";
-
-export * from "./core";
-export * from "./camera";
-export * from "./control";
-export * from "./renderer";
-export * from "./const/external";
-export * from "./type/event";
-export * from "./type/external";
-export * from "./cfc";
-
-export type { FlickingOptions, FlickingEvents };