@egjs/flicking 4.3.1 → 4.4.0

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 };