@egjs/flicking 4.3.0 → 4.4.2

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

@@ -7,18 +7,18 @@ import Panel from "../core/panel/Panel";
 import Renderer from "./Renderer";
 
 /**
- *
+ * @internal
  */
 abstract class ExternalRenderer extends Renderer {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected _insertPanelElements(panels: Panel[], nextSibling: Panel | null): void {
-    // DO NOTHING
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  protected _removePanelElements(panels: Panel[]): void {
+    // DO NOTHING, overrided to prevent an unexpected error
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected _removePanelElements(panels: Panel[]): void {
-    // DO NOTHING
+  protected _removeAllChildsFromCamera(): void {
+    // DO NOTHING, overrided to prevent an unexpected error
   }
+  /* eslint-enable @typescript-eslint/no-unused-vars */
 }
 
 export default ExternalRenderer;

package/src/renderer/Renderer.ts

@@ -10,10 +10,13 @@ import Panel, { PanelOptions } from "../core/panel/Panel";
 import FlickingError from "../core/FlickingError";
 import { ALIGN, EVENTS } from "../const/external";
 import * as ERROR from "../const/error";
-import { getFlickingAttached, getMinusCompensatedIndex, includes } from "../utils";
+import { getFlickingAttached, getMinusCompensatedIndex, includes, parsePanelAlign } from "../utils";
+
+import RenderingStrategy from "./strategy/RenderingStrategy";
 
 export interface RendererOptions {
-  align: FlickingOptions["align"];
+  align?: FlickingOptions["align"];
+  strategy: RenderingStrategy;
 }
 
 /**
@@ -26,7 +29,8 @@ abstract class Renderer {
   protected _panels: Panel[];
 
   // Options
-  protected _align: RendererOptions["align"];
+  protected _align: NonNullable<RendererOptions["align"]>;
+  protected _strategy: RendererOptions["strategy"];
 
   // Internal states Getter
   /**
@@ -44,6 +48,10 @@ abstract class Renderer {
    * @readonly
    */
   public get panelCount() { return this._panels.length; }
+  /**
+   * @internal
+   */
+  public get strategy() { return this._strategy; }
 
   // Options Getter
   /**
@@ -54,25 +62,28 @@ abstract class Renderer {
   public get align() { return this._align; }
 
   // Options Setter
-  public set align(val: RendererOptions["align"]) {
+  public set align(val: NonNullable<RendererOptions["align"]>) {
     this._align = val;
 
-    const panelAlign = this._getPanelAlign();
+    const panelAlign = parsePanelAlign(val);
     this._panels.forEach(panel => { panel.align = panelAlign; });
   }
 
   /**
    * @param {object} options An options object<ko>옵션 오브젝트</ko>
-   * @param {Constants.ALIGN | string | number} [options.align] An {@link Flicking#align align} value that will be applied to all panels<ko>전체 패널에 적용될 {@link Flicking#align align} 값</ko>
+   * @param {Constants.ALIGN | string | number} [options.align="center"] An {@link Flicking#align align} value that will be applied to all panels<ko>전체 패널에 적용될 {@link Flicking#align align} 값</ko>
+   * @param {object} [options.strategy] An instance of RenderingStrategy(internal module)<ko>RenderingStrategy의 인스턴스(내부 모듈)</ko>
    */
   public constructor({
-    align = ALIGN.CENTER
-  }: Partial<RendererOptions> = {}) {
+    align = ALIGN.CENTER,
+    strategy
+  }: RendererOptions) {
     this._flicking = null;
     this._panels = [];
 
     // Bind options
     this._align = align;
+    this._strategy = strategy;
   }
 
   /**
@@ -87,12 +98,9 @@ abstract class Renderer {
    * @return {this}
    */
   public abstract render(): Promise<void>;
-  public abstract forceRenderAllPanels(): Promise<void>;
 
   protected abstract _collectPanels(): void;
-  protected abstract _createPanel(el: any, options: PanelOptions): Panel;
-  protected abstract _insertPanelElements(panels: Panel[], nextSibling: Panel | null): void;
-  protected abstract _removePanelElements(panels: Panel[]): void;
+  protected abstract _createPanel(el: any, options: Omit<PanelOptions, "elementProvider">): Panel;
 
   /**
    * Initialize Renderer
@@ -128,6 +136,12 @@ abstract class Renderer {
     return this._panels[index] || null;
   }
 
+  public forceRenderAllPanels(): Promise<void> {
+    this._panels.forEach(panel => panel.markForShow());
+
+    return Promise.resolve();
+  }
+
   /**
    * Update all panel sizes
    * @ko 모든 패널의 크기를 업데이트합니다
@@ -135,10 +149,16 @@ abstract class Renderer {
    * @return {this}
    */
   public updatePanelSize(): this {
-    const flicking = getFlickingAttached(this._flicking, "Renderer");
+    const flicking = getFlickingAttached(this._flicking);
+    const panels = this._panels;
+
+    if (panels.length <= 0) return this;
 
     if (flicking.panelsPerView > 0) {
-      this._updatePanelSizeByGrid(flicking);
+      const firstPanel = panels[0];
+      firstPanel.resize();
+
+      this._updatePanelSizeByGrid(firstPanel, panels);
     } else {
       flicking.panels.forEach(panel => panel.resize());
     }
@@ -151,19 +171,23 @@ abstract class Renderer {
    * This will increase index of panels after by the number of panels added
    * @ko 주어진 인덱스에 새로운 패널들을 추가합니다
    * 해당 인덱스보다 같거나 큰 인덱스를 가진 기존 패널들은 추가한 패널의 개수만큼 인덱스가 증가합니다.
-   * @param {number} index Index to insert new panels at<ko>새로 패널들을 추가할 인덱스</ko>
-   * @param {any[]} elements An array of element or framework component with element in it<ko>엘리먼트의 배열 혹은 프레임워크에서 엘리먼트를 포함한 컴포넌트들의 배열</ko>
+   * @param {Array<object>} items An array of items to insert<ko>추가할 아이템들의 배열</ko>
+   * @param {number} [items.index] Index to insert new panels at<ko>새로 패널들을 추가할 인덱스</ko>
+   * @param {any[]} [items.elements] An array of element or framework component with element in it<ko>엘리먼트의 배열 혹은 프레임워크에서 엘리먼트를 포함한 컴포넌트들의 배열</ko>
+   * @param {boolean} [items.hasDOMInElements] Whether it contains actual DOM elements. If set to true, renderer will add them to the camera element<ko>내부에 실제 DOM 엘리먼트들을 포함하고 있는지 여부. true로 설정할 경우, 렌더러는 해당 엘리먼트들을 카메라 엘리먼트 내부에 추가합니다</ko>
    * @return {Panel[]} An array of prepended panels<ko>추가된 패널들의 배열</ko>
    */
   public batchInsert(...items: Array<{
     index: number;
     elements: any[];
+    hasDOMInElements: boolean;
   }>): Panel[] {
     const panels = this._panels;
-    const flicking = getFlickingAttached(this._flicking, "Renderer");
+    const flicking = getFlickingAttached(this._flicking);
 
     const { control } = flicking;
-    const align = this._getPanelAlign();
+    const prevFirstPanel = panels[0];
+    const align = parsePanelAlign(this._align);
 
     const allPanelsInserted = items.reduce((addedPanels, item) => {
       const insertingIdx = getMinusCompensatedIndex(item.index, panels.length);
@@ -172,11 +196,19 @@ abstract class Renderer {
 
       panels.splice(insertingIdx, 0, ...panelsInserted);
 
-      // Insert the actual elements as camera element's children
-      this._insertPanelElements(panelsInserted, panelsPushed[0] ?? null);
+      if (item.hasDOMInElements) {
+        // Insert the actual elements as camera element's children
+        this._insertPanelElements(panelsInserted, panelsPushed[0] ?? null);
+      }
 
       // Resize the newly added panels
-      panelsInserted.forEach(panel => panel.resize());
+      if (flicking.panelsPerView > 0) {
+        const firstPanel = prevFirstPanel || panelsInserted[0].resize();
+
+        this._updatePanelSizeByGrid(firstPanel, panelsInserted);
+      } else {
+        panelsInserted.forEach(panel => panel.resize());
+      }
 
       // Update panel indexes & positions
       panelsPushed.forEach(panel => {
@@ -219,13 +251,15 @@ abstract class Renderer {
    * This will decrease index of panels after by the number of panels removed
    * @ko 주어진 인덱스의 패널을 제거합니다
    * 해당 인덱스보다 큰 인덱스를 가진 기존 패널들은 제거한 패널의 개수만큼 인덱스가 감소합니다
-   * @param {number} index Index of panel to remove<ko>제거할 패널의 인덱스</ko>
-   * @param {number} [deleteCount=1] Number of panels to remove from index<ko>`index` 이후로 제거할 패널의 개수</ko>
+   * @param {Array<object>} items An array of items to remove<ko>제거할 아이템들의 배열</ko>
+   * @param {number} [items.index] Index of panel to remove<ko>제거할 패널의 인덱스</ko>
+   * @param {number} [items.deleteCount=1] Number of panels to remove from index<ko>`index` 이후로 제거할 패널의 개수</ko>
+   * @param {boolean} [items.hasDOMInElements=1] Whether it contains actual DOM elements. If set to true, renderer will remove them from the camera element<ko>내부에 실제 DOM 엘리먼트들을 포함하고 있는지 여부. true로 설정할 경우, 렌더러는 해당 엘리먼트들을 카메라 엘리먼트 내부에서 제거합니다</ko>
    * @return An array of removed panels<ko>제거된 패널들의 배열</ko>
    */
-  public batchRemove(...items: Array<{ index: number; deleteCount: number }>): Panel[] {
+  public batchRemove(...items: Array<{ index: number; deleteCount: number; hasDOMInElements: boolean }>): Panel[] {
     const panels = this._panels;
-    const flicking = getFlickingAttached(this._flicking, "Renderer");
+    const flicking = getFlickingAttached(this._flicking);
 
     const { camera, control } = flicking;
     const activePanel = control.activePanel;
@@ -246,14 +280,13 @@ abstract class Renderer {
         panel.updatePosition();
       });
 
-      this._removePanelElements(panelsRemoved);
+      if (item.hasDOMInElements) {
+        this._removePanelElements(panelsRemoved);
+      }
 
       // Remove panel elements
       panelsRemoved.forEach(panel => panel.destroy());
 
-      // Update camera & control
-      this._updateCameraAndControl();
-
       if (includes(panelsRemoved, activePanel)) {
         control.resetActive();
       }
@@ -261,6 +294,9 @@ abstract class Renderer {
       return [...removed, ...panelsRemoved];
     }, []);
 
+    // Update camera & control
+    this._updateCameraAndControl();
+
     void this.render();
 
     // FIXME: fix for animating case
@@ -293,10 +329,11 @@ abstract class Renderer {
    * @internal
    */
   public checkPanelContentsReady(checkingPanels: Panel[]) {
-    const resizeOnContentsReady = getFlickingAttached(this._flicking, "Renderer").resizeOnContentsReady;
+    const flicking = getFlickingAttached(this._flicking);
+    const resizeOnContentsReady = flicking.resizeOnContentsReady;
     const panels = this._panels;
 
-    if (!resizeOnContentsReady) return;
+    if (!resizeOnContentsReady || flicking.virtualEnabled) return;
 
     const hasContents = (panel: Panel) => !!panel.element.querySelector("img, video");
     checkingPanels = checkingPanels.filter(panel => hasContents(panel));
@@ -310,9 +347,7 @@ abstract class Renderer {
     });
 
     contentsReadyChecker.on("readyElement", e => {
-      const flicking = this._flicking;
-
-      if (!flicking) {
+      if (!this._flicking) {
         // Renderer's destroy() is called before
         contentsReadyChecker.destroy();
         return;
@@ -362,16 +397,8 @@ abstract class Renderer {
     contentsReadyChecker.check(checkingPanels.map(panel => panel.element));
   }
 
-  protected _getPanelAlign() {
-    const align = this._align;
-
-    return typeof align === "object"
-      ? (align as { panel: string | number }).panel
-      : align;
-  }
-
   protected _updateCameraAndControl() {
-    const flicking = getFlickingAttached(this._flicking, "Renderer");
+    const flicking = getFlickingAttached(this._flicking);
     const { camera, control } = flicking;
 
     camera.updateRange();
@@ -380,16 +407,6 @@ abstract class Renderer {
     control.updateInput();
   }
 
-  protected _updateRenderingPanels(): void {
-    const flicking = getFlickingAttached(this._flicking, "Renderer");
-
-    if (flicking.renderOnlyVisible) {
-      this._showOnlyVisiblePanels(flicking);
-    } else {
-      flicking.panels.forEach(panel => panel.markForShow());
-    }
-  }
-
   protected _showOnlyVisiblePanels(flicking: Flicking) {
     const panels = flicking.renderer.panels;
     const camera = flicking.camera;
@@ -408,12 +425,10 @@ abstract class Renderer {
         panel.markForHide();
       }
     });
-
-    camera.updateOffset();
   }
 
-  protected _updatePanelSizeByGrid(flicking: Flicking) {
-    const panels = flicking.panels;
+  protected _updatePanelSizeByGrid(referencePanel: Panel, panels: Panel[]) {
+    const flicking = getFlickingAttached(this._flicking);
     const panelsPerView = flicking.panelsPerView;
 
     if (panelsPerView <= 0) {
@@ -421,12 +436,8 @@ abstract class Renderer {
     }
     if (panels.length <= 0) return;
 
-    // resize only the first panel
-    const firstPanel = panels[0];
-    firstPanel.resize();
-
     const viewportSize = flicking.camera.size;
-    const gap = firstPanel.margin.prev + firstPanel.margin.next;
+    const gap = referencePanel.margin.prev + referencePanel.margin.next;
 
     const panelSize = (viewportSize - gap * (panelsPerView - 1)) / panelsPerView;
     const panelSizeObj = flicking.horizontal
@@ -434,16 +445,46 @@ abstract class Renderer {
       : { height: panelSize };
     const firstPanelSizeObj = {
       size: panelSize,
-      height: firstPanel.height,
-      margin: firstPanel.margin
+      height: referencePanel.height,
+      margin: referencePanel.margin
     };
 
     if (!flicking.noPanelStyleOverride) {
-      flicking.panels.forEach(panel => panel.setSize(panelSizeObj));
+      this._strategy.updatePanelSizes(flicking, panelSizeObj);
     }
 
     flicking.panels.forEach(panel => panel.resize(firstPanelSizeObj));
   }
+
+  protected _removeAllChildsFromCamera() {
+    const flicking = getFlickingAttached(this._flicking);
+    const cameraElement = flicking.camera.element;
+
+    // Remove other elements
+    while (cameraElement.firstChild) {
+      cameraElement.removeChild(cameraElement.firstChild);
+    }
+  }
+
+  protected _insertPanelElements(panels: Panel[], nextSibling: Panel | null = null) {
+    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);
+  }
+
+  protected _removePanelElements(panels: Panel[]) {
+    const flicking = getFlickingAttached(this._flicking);
+    const cameraElement = flicking.camera.element;
+
+    panels.forEach(panel => {
+      cameraElement.removeChild(panel.element);
+    });
+  }
 }
 
 export default Renderer;

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,106 @@
+/*
+ * 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;
+}
+
+
+class NormalRenderingStrategy implements RenderingStrategy {
+  private _providerCtor: NormalRenderingStrategyOptions["providerCtor"];
+
+  public constructor({ providerCtor }: NormalRenderingStrategyOptions) {
+    this._providerCtor = providerCtor;
+  }
+
+  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 Panel({
+      index,
+      elementProvider: new this._providerCtor(el),
+      align,
+      flicking
+    }));
+  }
+
+  public createPanel(
+    element: any,
+    options: Omit<PanelOptions, "elementProvider">
+  ) {
+    return new Panel({
+      ...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;