2626679556

Build Type

github

Committed by GitHub

Commit Message

Merge 5a5a2940d into 51086fa02

Pull Request Pull Request #701: fix: panelsPerView not working with adaptive

Run Details

500 of 1373 branches covered (36.42%)

Branch coverage included in aggregate %.

11 of 11 new or added lines in 3 files covered. (100.0%)

4 existing lines in 2 files now uncovered.

2192 of 3421 relevant lines covered (64.07%)

38.01 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

60.51

/src/renderer/Renderer.ts

/*
 * Copyright (c) 2015 NAVER Corp.
 * egjs projects are licensed under the MIT license
 */
import { ComponentEvent } from "@egjs/component";
import ImReady from "@egjs/imready";

import Flicking, { FlickingOptions } from "../Flicking";
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, parsePanelAlign } from "../utils";

import RenderingStrategy from "./strategy/RenderingStrategy";

export interface RendererOptions {
  align?: FlickingOptions["align"];
  strategy: RenderingStrategy;
}

/**
 * A component that manages {@link Panel} and its elements
 * @ko {@link Panel}과 그 엘리먼트들을 관리하는 컴포넌트
 */
abstract class Renderer {
  // Internal States
  protected _flicking: Flicking | null;
  protected _panels: Panel[];
  protected _rendering: boolean;

  // Options
  protected _align: NonNullable<RendererOptions["align"]>;
  protected _strategy: RendererOptions["strategy"];

  // Internal states Getter
  /**
   * Array of panels
   * @ko 전체 패널들의 배열
   * @type {Panel[]}
   * @readonly
   * @see Panel
   */
  public get panels() { return this._panels; }
  /**
   * A boolean value indicating whether rendering is in progress
   * @ko 현재 렌더링이 시작되어 끝나기 전까지의 상태인지의 여부
   * @type {boolean}
   * @readonly
   * @internal
   */
  public get rendering() { return this._rendering; }
  /**
   * Count of panels
   * @ko 전체 패널의 개수
   * @type {number}
   * @readonly
   */
  public get panelCount() { return this._panels.length; }
  /**
   * @internal
   */
  public get strategy() { return this._strategy; }

  // Options Getter
  /**
   * A {@link Panel}'s {@link Panel#align align} value that applied to all panels
   * @ko {@link Panel}에 공통적으로 적용할 {@link Panel#align align} 값
   * @type {Constants.ALIGN | string | number}
   */
  public get align() { return this._align; }

  // Options Setter
  public set align(val: NonNullable<RendererOptions["align"]>) {
    this._align = val;

    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="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,
    strategy
  }: RendererOptions) {
    this._flicking = null;
    this._panels = [];
    this._rendering = false;

    // Bind options
    this._align = align;
    this._strategy = strategy;
  }

  /**
   * Render panel elements inside the camera element
   * @ko 패널 엘리먼트들을 카메라 엘리먼트 내부에 렌더링합니다
   * @method
   * @abstract
   * @memberof Renderer
   * @instance
   * @name render
   * @chainable
   * @return {this}
   */
  public abstract render(): Promise<void>;

  protected abstract _collectPanels(): void;
  protected abstract _createPanel(el: any, options: Omit<PanelOptions, "elementProvider">): Panel;

  /**
   * Initialize Renderer
   * @ko Renderer를 초기화합니다
   * @param {Flicking} flicking An instance of {@link Flicking}<ko>Flicking의 인스턴스</ko>
   * @chainable
   * @return {this}
   */
  public init(flicking: Flicking): this {
    this._flicking = flicking;
    this._collectPanels();

    return this;
  }

  /**
   * Destroy Renderer and return to initial state
   * @ko Renderer를 초기 상태로 되돌립니다
   * @return {void}
   */
  public destroy(): void {
    this._flicking = null;
    this._panels = [];
  }

  /**
   * Return the {@link Panel} at the given index. `null` if it doesn't exists.
   * @ko 주어진 인덱스에 해당하는 {@link Panel}을 반환합니다. 주어진 인덱스에 해당하는 패널이 존재하지 않을 경우 `null`을 반환합니다.
   * @return {Panel | null} Panel at the given index<ko>주어진 인덱스에 해당하는 패널</ko>
   * @see Panel
   */
  public getPanel(index: number): Panel | null {
    return this._panels[index] || null;
  }

  public forceRenderAllPanels(): Promise<void> {
    this._panels.forEach(panel => panel.markForShow());

    return Promise.resolve();
  }

  /**
   * Update all panel sizes
   * @ko 모든 패널의 크기를 업데이트합니다
   * @chainable
   * @return {this}
   */
  public updatePanelSize(): this {
    const flicking = getFlickingAttached(this._flicking);
    const panels = this._panels;

    if (panels.length <= 0) return this;

    if (flicking.panelsPerView > 0) {
      const firstPanel = panels[0];
      firstPanel.resize();

      this._updatePanelSizeByGrid(firstPanel, panels);
    } else {
      flicking.panels.forEach(panel => panel.resize());
    }

    return this;
  }

  /**
   * Insert new panels at given index
   * This will increase index of panels after by the number of panels added
   * @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 allPanelsInserted = this.batchInsertDefer(...items);

    if (allPanelsInserted.length <= 0) return [];

    this.updateAfterPanelChange(allPanelsInserted, []);

    return allPanelsInserted;
  }

  /**
   * Defers update
   * camera position & others will be updated after calling updateAfterPanelChange
   * @internal
   */
  public batchInsertDefer(...items: Array<{
    index: number;
    elements: any[];
    hasDOMInElements: boolean;
  }>) {
    const panels = this._panels;
    const flicking = getFlickingAttached(this._flicking);

    const prevFirstPanel = panels[0];
    const align = parsePanelAlign(this._align);

    const allPanelsInserted = items.reduce((addedPanels, item) => {
      const insertingIdx = getMinusCompensatedIndex(item.index, panels.length);
      const panelsPushed = panels.slice(insertingIdx);
      const panelsInserted = item.elements.map((el, idx) => this._createPanel(el, { index: insertingIdx + idx, align, flicking }));

      panels.splice(insertingIdx, 0, ...panelsInserted);

      if (item.hasDOMInElements) {
        // Insert the actual elements as camera element's children
        this._insertPanelElements(panelsInserted, panelsPushed[0] ?? null);
      }

      // Resize the newly added panels
      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 => {
        panel.increaseIndex(panelsInserted.length);
        panel.updatePosition();
      });

      return [...addedPanels, ...panelsInserted];
    }, []);

    return allPanelsInserted;
  }

  /**
   * Remove the panel at the given index
   * This will decrease index of panels after by the number of panels removed
   * @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;
    hasDOMInElements: boolean;
  }>): Panel[] {
    const allPanelsRemoved = this.batchRemoveDefer(...items);

    if (allPanelsRemoved.length <= 0) return [];

    this.updateAfterPanelChange([], allPanelsRemoved);

    return allPanelsRemoved;
  }

  /**
   * Defers update
   * camera position & others will be updated after calling updateAfterPanelChange
   * @internal
   */
  public batchRemoveDefer(...items: Array<{
    index: number;
    deleteCount: number;
    hasDOMInElements: boolean;
  }>) {
    const panels = this._panels;
    const flicking = getFlickingAttached(this._flicking);

    const { control } = flicking;
    const activePanel = control.activePanel;

    const allPanelsRemoved = items.reduce((removed, item) => {
      const { index, deleteCount } = item;
      const removingIdx = getMinusCompensatedIndex(index, panels.length);

      const panelsPulled = panels.slice(removingIdx + deleteCount);
      const panelsRemoved = panels.splice(removingIdx, deleteCount);

      if (panelsRemoved.length <= 0) return [];

      // Update panel indexes & positions
      panelsPulled.forEach(panel => {
        panel.decreaseIndex(panelsRemoved.length);
        panel.updatePosition();
      });

      if (item.hasDOMInElements) {
        this._removePanelElements(panelsRemoved);
      }

      // Remove panel elements
      panelsRemoved.forEach(panel => panel.destroy());

      if (includes(panelsRemoved, activePanel)) {
        control.resetActive();
      }

      return [...removed, ...panelsRemoved];
    }, []);

    return allPanelsRemoved;
  }

  /**
   * @internal
   */
  public updateAfterPanelChange(panelsAdded: Panel[], panelsRemoved: Panel[]) {
    const flicking = getFlickingAttached(this._flicking);
    const { camera, control } = flicking;
    const panels = this._panels;
    const activePanel = control.activePanel;

    // Update camera & control
    this._updateCameraAndControl();

    void this.render();

    if (!flicking.animating) {
      if (!activePanel || activePanel.removed) {
        if (panels.length <= 0) {
          // All panels removed
          camera.lookAt(0);
        } else {
          let targetIndex = activePanel?.index ?? 0;
          if (targetIndex > panels.length - 1) {
            targetIndex = panels.length - 1;
          }

          void control.moveToPanel(panels[targetIndex], {
            duration: 0
          }).catch(() => void 0);
        }
      } else {
        void control.moveToPanel(activePanel, {
          duration: 0
        }).catch(() => void 0);
      }
    }

    flicking.camera.updateOffset();

    if (panelsAdded.length > 0 || panelsRemoved.length > 0) {
      flicking.trigger(new ComponentEvent(EVENTS.PANEL_CHANGE, {
        added: panelsAdded,
        removed: panelsRemoved
      }));

      this.checkPanelContentsReady([
        ...panelsAdded,
        ...panelsRemoved
      ]);
    }
  }

  /**
   * @internal
   */
  public checkPanelContentsReady(checkingPanels: Panel[]) {
    const flicking = getFlickingAttached(this._flicking);
    const resizeOnContentsReady = flicking.resizeOnContentsReady;
    const panels = this._panels;

    if (!resizeOnContentsReady || flicking.virtualEnabled) return;

    const hasContents = (panel: Panel) => panel.element && !!panel.element.querySelector("img, video");
    checkingPanels = checkingPanels.filter(panel => hasContents(panel));

    if (checkingPanels.length <= 0) return;

    const contentsReadyChecker = new ImReady();

    checkingPanels.forEach(panel => {
      panel.loading = true;
    });

    contentsReadyChecker.on("readyElement", e => {
      if (!this._flicking) {
        // Renderer's destroy() is called before
        contentsReadyChecker.destroy();
        return;
      }

      const panel = checkingPanels[e.index];
      const camera = flicking.camera;
      const control = flicking.control;
      const prevProgressInPanel = control.activePanel
        ? camera.getProgressInPanel(control.activePanel)
        : 0;

      panel.loading = false;
      panel.resize();
      panels.slice(panel.index + 1).forEach(panelBehind => panelBehind.updatePosition());

      if (!flicking.initialized) return;

      camera.updateRange();
      camera.updateOffset();
      camera.updateAnchors();

      if (control.animating) {
        // TODO: Need Axes update
      } else {
        control.updatePosition(prevProgressInPanel);
        control.updateInput();
      }
    });

    contentsReadyChecker.on("preReady", e => {
      if (this._flicking) {
        void this.render();
      }

      if (e.readyCount === e.totalCount) {
        contentsReadyChecker.destroy();
      }
    });

    contentsReadyChecker.on("ready", () => {
      if (this._flicking) {
        void this.render();
      }
      contentsReadyChecker.destroy();
    });

    contentsReadyChecker.check(checkingPanels.map(panel => panel.element));
  }

  protected _updateCameraAndControl() {
    const flicking = getFlickingAttached(this._flicking);
    const { camera, control } = flicking;

    camera.updateRange();
    camera.updateOffset();
    camera.updateAnchors();
    camera.resetNeedPanelHistory();
    control.updateInput();
  }

  protected _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();
      }
    });
  }

  protected _updatePanelSizeByGrid(referencePanel: Panel, panels: Panel[]) {
    const flicking = getFlickingAttached(this._flicking);
    const panelsPerView = flicking.panelsPerView;

    if (panelsPerView <= 0) {
      throw new FlickingError(ERROR.MESSAGE.WRONG_OPTION("panelsPerView", panelsPerView), ERROR.CODE.WRONG_OPTION);
    }
    if (panels.length <= 0) return;

    const viewportSize = flicking.camera.size;
    const gap = referencePanel.margin.prev + referencePanel.margin.next;

    const panelSize = (viewportSize - gap * (panelsPerView - 1)) / panelsPerView;
    const panelSizeObj = flicking.horizontal
      ? { width: panelSize }
      : { height: panelSize };

    if (flicking.noPanelStyleOverride) {
      const firstPanelSizeObj = {
        size: panelSize,
        height: referencePanel.height,
        margin: referencePanel.margin
      };
      flicking.panels.forEach(panel => panel.resize(firstPanelSizeObj));
    } else {
      this._strategy.updatePanelSizes(flicking, panelSizeObj);
      flicking.panels.forEach(panel => panel.resize());
    }

  }

  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;

1	/*	1✔
2	* Copyright (c) 2015 NAVER Corp.	1!
3	* egjs projects are licensed under the MIT license	×
4	*/
5	import { ComponentEvent } from "@egjs/component";	5✔
6	import ImReady from "@egjs/imready";	5!
7
8	import Flicking, { FlickingOptions } from "../Flicking";
9	import Panel, { PanelOptions } from "../core/panel/Panel";	1!
10	import FlickingError from "../core/FlickingError";	5✔
11	import { ALIGN, EVENTS } from "../const/external";	5✔
12	import * as ERROR from "../const/error";	5✔
13	import { getFlickingAttached, getMinusCompensatedIndex, includes, parsePanelAlign } from "../utils";	5✔
14		1✔
15	import RenderingStrategy from "./strategy/RenderingStrategy";	1!
16
17	export interface RendererOptions {	×
18	align?: FlickingOptions["align"];
19	strategy: RenderingStrategy;
20	}
21		1✔
22	/**	153✔
23	* A component that manages {@link Panel} and its elements	1,433!
24	* @ko {@link Panel}과 그 엘리먼트들을 관리하는 컴포넌트	×
25	*/
26	abstract class Renderer {	5✔
27	// Internal States
28	protected _flicking: Flicking \| null;	153✔
29	protected _panels: Panel[];
30	protected _rendering: boolean;	1✔
31		2!
32	// Options
33	protected _align: NonNullable<RendererOptions["align"]>;	1✔
34	protected _strategy: RendererOptions["strategy"];
35
36	// Internal states Getter
37	/**
38	* Array of panels	1✔
39	* @ko 전체 패널들의 배열	1✔
40	* @type {Panel[]}	1✔
41	* @readonly	1✔
42	* @see Panel	1✔
43	*/	1✔
44	public get panels() { return this._panels; }	1,556✔
45	/**
46	* A boolean value indicating whether rendering is in progress
47	* @ko 현재 렌더링이 시작되어 끝나기 전까지의 상태인지의 여부
48	* @type {boolean}	1✔
49	* @readonly
50	* @internal
51	*/
52	public get rendering() { return this._rendering; }	462✔
53	/**
54	* Count of panels
55	* @ko 전체 패널의 개수	455✔
56	* @type {number}	455✔
57	* @readonly	455✔
58	*/	455✔
59	public get panelCount() { return this._panels.length; }	22✔
60	/**	455✔
61	* @internal	455✔
62	*/
63	public get strategy() { return this._strategy; }	6✔
64
65	// Options Getter
66	/**
67	* A {@link Panel}'s {@link Panel#align align} value that applied to all panels
68	* @ko {@link Panel}에 공통적으로 적용할 {@link Panel#align align} 값
69	* @type {Constants.ALIGN \| string \| number}
70	*/
71	public get align() { return this._align; }	14✔
72		29,788✔
73	// Options Setter
74	public set align(val: NonNullable<RendererOptions["align"]>) {
75	this._align = val;
76		1✔
77	const panelAlign = parsePanelAlign(val);
78	this._panels.forEach(panel => { panel.align = panelAlign; });
79	}
80
81	/**
82	* @param {object} options An options object<ko>옵션 오브젝트</ko>
83	* @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>
84	* @param {object} [options.strategy] An instance of RenderingStrategy(internal module)<ko>RenderingStrategy의 인스턴스(내부 모듈)</ko>	7,113✔
85	*/
86	public constructor({
87	align = ALIGN.CENTER,	14!
88	strategy	15✔
89	}: RendererOptions) {
90	this._flicking = null;	14✔
91	this._panels = [];	14✔
92	this._rendering = false;	14✔
93
94	// Bind options
95	this._align = align;	8,286✔
96	this._strategy = strategy;	14✔
97	}
98
99	/**	1✔
100	* Render panel elements inside the camera element
101	* @ko 패널 엘리먼트들을 카메라 엘리먼트 내부에 렌더링합니다
102	* @method
103	* @abstract	3✔
104	* @memberof Renderer
105	* @instance
106	* @name render
107	* @chainable	1✔
108	* @return {this}
109	*/
110	public abstract render(): Promise<void>;
111
112	protected abstract _collectPanels(): void;
113	protected abstract _createPanel(el: any, options: Omit<PanelOptions, "elementProvider">): Panel;
114		422✔
115	/**
116	* Initialize Renderer
117	* @ko Renderer를 초기화합니다	2✔
118	* @param {Flicking} flicking An instance of {@link Flicking}<ko>Flicking의 인스턴스</ko>	2✔
119	* @chainable	3✔
120	* @return {this}
121	*/
122	public init(flicking: Flicking): this {	5✔
123	this._flicking = flicking;	14✔
124	this._collectPanels();	14✔
125
126	return this;	14✔
127	}
128
129	/**
130	* Destroy Renderer and return to initial state
131	* @ko Renderer를 초기 상태로 되돌립니다	1✔
132	* @return {void}	440✔
133	*/	440✔
134	public destroy(): void {	445✔
135	this._flicking = null;
136	this._panels = [];
137	}
138
139	/**
140	* Return the {@link Panel} at the given index. `null` if it doesn't exists.
141	* @ko 주어진 인덱스에 해당하는 {@link Panel}을 반환합니다. 주어진 인덱스에 해당하는 패널이 존재하지 않을 경우 `null`을 반환합니다.	1✔
142	* @return {Panel \| null} Panel at the given index<ko>주어진 인덱스에 해당하는 패널</ko>	430✔
143	* @see Panel	430✔
144	*/
145	public getPanel(index: number): Panel \| null {	5✔
146	return this._panels[index] \|\| null;	44!
147	}
148
149	public forceRenderAllPanels(): Promise<void> {	5✔
150	this._panels.forEach(panel => panel.markForShow());
151		1✔
152	return Promise.resolve();	1,516✔
153	}
154		1✔
155	/**	127✔
156	* Update all panel sizes	15✔
157	* @ko 모든 패널의 크기를 업데이트합니다
158	* @chainable
159	* @return {this}
160	*/
161	public updatePanelSize(): this {	5✔
162	const flicking = getFlickingAttached(this._flicking);	14✔
163	const panels = this._panels;	14✔
164		1✔
165	if (panels.length <= 0) return this;	451!
166		437✔
167	if (flicking.panelsPerView > 0) {	451!
168	const firstPanel = panels[0];	100✔
169	firstPanel.resize();	337✔
170		26✔
171	this._updatePanelSizeByGrid(firstPanel, panels);	26✔
172	} else {	26✔
173	flicking.panels.forEach(panel => panel.resize());	54✔
174	}
175		990✔
176	return this;	14✔
177	}	337✔
178
179	/**
180	* Insert new panels at given index
181	* This will increase index of panels after by the number of panels added
182	* @ko 주어진 인덱스에 새로운 패널들을 추가합니다
183	* 해당 인덱스보다 같거나 큰 인덱스를 가진 기존 패널들은 추가한 패널의 개수만큼 인덱스가 증가합니다.
184	* @param {Array<object>} items An array of items to insert<ko>추가할 아이템들의 배열</ko>
185	* @param {number} [items.index] Index to insert new panels at<ko>새로 패널들을 추가할 인덱스</ko>
186	* @param {any[]} [items.elements] An array of element or framework component with element in it<ko>엘리먼트의 배열 혹은 프레임워크에서 엘리먼트를 포함한 컴포넌트들의 배열</ko>
187	* @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>
188	* @return {Panel[]} An array of prepended panels<ko>추가된 패널들의 배열</ko>
189	*/
190	public batchInsert(...items: Array<{	6✔
191	index: number;	17✔
192	elements: any[];	17✔
193	hasDOMInElements: boolean;	17✔
194	}>): Panel[] {
195	const allPanelsInserted = this.batchInsertDefer(...items);	17✔
196		17!
197	if (allPanelsInserted.length <= 0) return [];	×
198		17✔
199	this.updateAfterPanelChange(allPanelsInserted, []);	17✔
200
201	return allPanelsInserted;
202	}
203
204	/**
205	* Defers update
206	* camera position & others will be updated after calling updateAfterPanelChange	1✔
207	* @internal	18✔
208	*/	18✔
209	public batchInsertDefer(...items: Array<{	23✔
210	index: number;	19✔
211	elements: any[];
212	hasDOMInElements: boolean;	18✔
213	}>) {	18✔
214	const panels = this._panels;	18✔
215	const flicking = getFlickingAttached(this._flicking);	18✔
216		18✔
217	const prevFirstPanel = panels[0];
218	const align = parsePanelAlign(this._align);	19✔
219		19✔
220	const allPanelsInserted = items.reduce((addedPanels, item) => {	631✔
221	const insertingIdx = getMinusCompensatedIndex(item.index, panels.length);	19✔
222	const panelsPushed = panels.slice(insertingIdx);	19✔
223	const panelsInserted = item.elements.map((el, idx) => this._createPanel(el, { index: insertingIdx + idx, align, flicking }));
224		11✔
225	panels.splice(insertingIdx, 0, ...panelsInserted);
226
227	if (item.hasDOMInElements) {	19!
228	// Insert the actual elements as camera element's children	6!
229	this._insertPanelElements(panelsInserted, panelsPushed[0] ?? null);	6!
230	}
231
232	// Resize the newly added panels	31✔
233	if (flicking.panelsPerView > 0) {	×
234	const firstPanel = prevFirstPanel \|\| panelsInserted[0].resize();	×
235		19✔
236	this._updatePanelSizeByGrid(firstPanel, panelsInserted);	363✔
237	} else {	363✔
238	panelsInserted.forEach(panel => panel.resize());
239	}	19✔
240
241	// Update panel indexes & positions	18✔
242	panelsPushed.forEach(panel => {
243	panel.increaseIndex(panelsInserted.length);
244	panel.updatePosition();
245	});
246
247	return [...addedPanels, ...panelsInserted];
248	}, []);
249
250	return allPanelsInserted;
251	}
252
253	/**
254	* Remove the panel at the given index	1✔
255	* This will decrease index of panels after by the number of panels removed	8✔
256	* @ko 주어진 인덱스의 패널을 제거합니다	8✔
257	* 해당 인덱스보다 큰 인덱스를 가진 기존 패널들은 제거한 패널의 개수만큼 인덱스가 감소합니다	8✔
258	* @param {Array<object>} items An array of items to remove<ko>제거할 아이템들의 배열</ko>
259	* @param {number} [items.index] Index of panel to remove<ko>제거할 패널의 인덱스</ko>	8✔
260	* @param {number} [items.deleteCount=1] Number of panels to remove from index<ko>`index` 이후로 제거할 패널의 개수</ko>	8!
261	* @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>
262	* @return An array of removed panels<ko>제거된 패널들의 배열</ko>	8✔
263	*/	8✔
264	public batchRemove(...items: Array<{	5✔
265	index: number;
266	deleteCount: number;
267	hasDOMInElements: boolean;
268	}>): Panel[] {
269	const allPanelsRemoved = this.batchRemoveDefer(...items);
270		1✔
271	if (allPanelsRemoved.length <= 0) return [];	17!
272		17✔
273	this.updateAfterPanelChange([], allPanelsRemoved);	17✔
274		17✔
275	return allPanelsRemoved;
276	}	17✔
277		17✔
278	/**	17✔
279	* Defers update	17✔
280	* camera position & others will be updated after calling updateAfterPanelChange	17✔
281	* @internal	17✔
282	*/	17✔
283	public batchRemoveDefer(...items: Array<{	22✔
284	index: number;	17✔
285	deleteCount: number;	17!
286	hasDOMInElements: boolean;
287	}>) {
288	const panels = this._panels;	17✔
289	const flicking = getFlickingAttached(this._flicking);	112✔
290		112✔
291	const { control } = flicking;
292	const activePanel = control.activePanel;	17✔
293		6✔
294	const allPanelsRemoved = items.reduce((removed, item) => {
295	const { index, deleteCount } = item;
296	const removingIdx = getMinusCompensatedIndex(index, panels.length);	85✔
297		17✔
298	const panelsPulled = panels.slice(removingIdx + deleteCount);	7✔
299	const panelsRemoved = panels.splice(removingIdx, deleteCount);
300		17✔
301	if (panelsRemoved.length <= 0) return [];	×
302		17✔
303	// Update panel indexes & positions
304	panelsPulled.forEach(panel => {
305	panel.decreaseIndex(panelsRemoved.length);
306	panel.updatePosition();
307	});	1✔
308
309	if (item.hasDOMInElements) {	31!
310	this._removePanelElements(panelsRemoved);	31✔
311	}	31✔
312		31✔
313	// Remove panel elements
314	panelsRemoved.forEach(panel => panel.destroy());	31✔
315		31✔
316	if (includes(panelsRemoved, activePanel)) {	31!
317	control.resetActive();	30✔
318	}	9✔
319
320	return [...removed, ...panelsRemoved];	2✔
321	}, []);
322
323	return allPanelsRemoved;	7!
324	}	7!
325
326	/**
327	* @internal	7✔
328	*/
329	public updateAfterPanelChange(panelsAdded: Panel[], panelsRemoved: Panel[]) {	5✔
330	const flicking = getFlickingAttached(this._flicking);
331	const { camera, control } = flicking;
332	const panels = this._panels;
333	const activePanel = control.activePanel;	21✔
334
335	// Update camera & control
336	this._updateCameraAndControl();
337
338	void this.render();	31✔
339		31!
340	if (!flicking.animating) {	31!
341	if (!activePanel \|\| activePanel.removed) {	×
342	if (panels.length <= 0) {	×
343	// All panels removed
344	camera.lookAt(0);	31✔
345	} else {
346	let targetIndex = activePanel?.index ?? 0;	×
347	if (targetIndex > panels.length - 1) {	×
348	targetIndex = panels.length - 1;
349	}
350		1✔
351	void control.moveToPanel(panels[targetIndex], {	448✔
352	duration: 0	448✔
353	}).catch(() => void 0);	448✔
354	}	448✔
355	} else {	448✔
356	void control.moveToPanel(activePanel, {	442✔
357	duration: 0	14✔
358	}).catch(() => void 0);	14✔
359	}	6!
360	}
361		6✔
362	flicking.camera.updateOffset();	6✔
363		14✔
364	if (panelsAdded.length > 0 \|\| panelsRemoved.length > 0) {	×
365	flicking.trigger(new ComponentEvent(EVENTS.PANEL_CHANGE, {	6✔
366	added: panelsAdded,	6✔
367	removed: panelsRemoved
368	}));	4✔
369		4✔
370	this.checkPanelContentsReady([
371	...panelsAdded,	2✔
372	...panelsRemoved	2✔
373	]);	2✔
374	}	2!
375	}
376
377	/**	2✔
378	* @internal	2✔
379	*/	2✔
380	public checkPanelContentsReady(checkingPanels: Panel[]) {	16!
381	const flicking = getFlickingAttached(this._flicking);	14✔
382	const resizeOnContentsReady = flicking.resizeOnContentsReady;	16✔
383	const panels = this._panels;	16✔
384		2✔
385	if (!resizeOnContentsReady \|\| flicking.virtualEnabled) return;	16!
386
387	const hasContents = (panel: Panel) => panel.element && !!panel.element.querySelector("img, video");	×
388	checkingPanels = checkingPanels.filter(panel => hasContents(panel));
389		2✔
390	if (checkingPanels.length <= 0) return;	2!
391
392	const contentsReadyChecker = new ImReady();
393		6✔
394	checkingPanels.forEach(panel => {	2!
395	panel.loading = true;	2✔
396	});
397		2!
398	contentsReadyChecker.on("readyElement", e => {	2✔
399	if (!this._flicking) {	×
400	// Renderer's destroy() is called before
401	contentsReadyChecker.destroy();	6✔
402	return;	×
403	}
404
405	const panel = checkingPanels[e.index];	×
406	const camera = flicking.camera;
407	const control = flicking.control;	14✔
408	const prevProgressInPanel = control.activePanel	×
409	? camera.getProgressInPanel(control.activePanel)	1✔
410	: 0;	31✔
411		31✔
412	panel.loading = false;	31✔
413	panel.resize();	31✔
414	panels.slice(panel.index + 1).forEach(panelBehind => panelBehind.updatePosition());	31✔
415		31✔
416	if (!flicking.initialized) return;	31!
417
418	camera.updateRange();	1✔
419	camera.updateOffset();	×
420	camera.updateAnchors();	×
421
422	if (control.animating) {	×
423	// TODO: Need Axes update
424	} else {
425	control.updatePosition(prevProgressInPanel);	×
426	control.updateInput();	×
427	}
428	});
429		×
430	contentsReadyChecker.on("preReady", e => {
431	if (this._flicking) {	×
432	void this.render();	×
433	}
434
435	if (e.readyCount === e.totalCount) {	×
436	contentsReadyChecker.destroy();	1✔
437	}	32✔
438	});	32✔
439		32!
440	contentsReadyChecker.on("ready", () => {	×
441	if (this._flicking) {	×
442	void this.render();	32!
443	}
444	contentsReadyChecker.destroy();	32✔
445	});	32✔
446		32✔
447	contentsReadyChecker.check(checkingPanels.map(panel => panel.element));	32!
448	}
449
450	protected _updateCameraAndControl() {	37✔
451	const flicking = getFlickingAttached(this._flicking);	2✔
452	const { camera, control } = flicking;
453
454	camera.updateRange();
455	camera.updateOffset();
456	camera.updateAnchors();	6✔
457	camera.resetNeedPanelHistory();
458	control.updateInput();
459	}	30✔
460		3,768✔
461	protected _showOnlyVisiblePanels(flicking: Flicking) {	5✔
462	const panels = flicking.renderer.panels;
463	const camera = flicking.camera;	1✔
464
465	const visibleIndexes = camera.visiblePanels.reduce((visibles, panel) => {	×
466	visibles[panel.index] = true;
UNCOV 467	return visibles;	×
468	}, {});
469
470	panels.forEach(panel => {
471	if (panel.index in visibleIndexes \|\| panel.loading) {	1!
472	panel.markForShow();	11!
473	} else if (!flicking.holding) {	11!
474	// During the input sequence,	11✔
475	// Do not remove panel elements as it won't trigger touchend event.	11✔
476	panel.markForHide();	11✔
477	}	11✔
478	});	29✔
479	}	11✔
480
481	protected _updatePanelSizeByGrid(referencePanel: Panel, panels: Panel[]) {	6✔
482	const flicking = getFlickingAttached(this._flicking);	6✔
483	const panelsPerView = flicking.panelsPerView;	6✔
484		6✔
485	if (panelsPerView <= 0) {	19!
486	throw new FlickingError(ERROR.MESSAGE.WRONG_OPTION("panelsPerView", panelsPerView), ERROR.CODE.WRONG_OPTION);
487	}
488	if (panels.length <= 0) return;	1!
489
490	const viewportSize = flicking.camera.size;	1✔
491	const gap = referencePanel.margin.prev + referencePanel.margin.next;
492
493	const panelSize = (viewportSize - gap * (panelsPerView - 1)) / panelsPerView;
494	const panelSizeObj = flicking.horizontal	×
495	? { width: panelSize }
496	: { height: panelSize };
497
498	if (flicking.noPanelStyleOverride) {	×
499	const firstPanelSizeObj = {
500	size: panelSize,
501	height: referencePanel.height,
502	margin: referencePanel.margin
503	};
504	flicking.panels.forEach(panel => panel.resize(firstPanelSizeObj));
505	} else {
506	this._strategy.updatePanelSizes(flicking, panelSizeObj);
507	flicking.panels.forEach(panel => panel.resize());
508	}
509
510	}
511
512	protected _removeAllChildsFromCamera() {	5✔
513	const flicking = getFlickingAttached(this._flicking);
514	const cameraElement = flicking.camera.element;
515
516	// Remove other elements
517	while (cameraElement.firstChild) {
518	cameraElement.removeChild(cameraElement.firstChild);
519	}
520	}
521
522	protected _insertPanelElements(panels: Panel[], nextSibling: Panel \| null = null) {	5!
523	const flicking = getFlickingAttached(this._flicking);
524	const camera = flicking.camera;
525	const cameraElement = camera.element;
526	const nextSiblingElement = nextSibling?.element \|\| null;	×
527	const fragment = document.createDocumentFragment();
528
529	panels.forEach(panel => fragment.appendChild(panel.element));
530	cameraElement.insertBefore(fragment, nextSiblingElement);
531	}
532
533	protected _removePanelElements(panels: Panel[]) {	5✔
534	const flicking = getFlickingAttached(this._flicking);
535	const cameraElement = flicking.camera.element;
536
537	panels.forEach(panel => {
538	cameraElement.removeChild(panel.element);
539	});
540	}
541	}	5✔
542
543	export default Renderer;	5✔

naver / egjs-flicking / 2626679556

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous