10557177632

Committed 26 Aug 2024 09:22AM UTC coverage: 38.327% (-44.5%) from 82.855%

Build # 10557177632

Build Type

Pull #886

github

Committed by

daybrush

Commit Message

fix: recalculate camera offset

Pull Request Pull Request #886: fix: recalculate camera offset

Run Details

2039 of 7372 branches covered (27.66%)

Branch coverage included in aggregate %.

11 of 29 new or added lines in 2 files covered. (37.93%)

5575 existing lines in 46 files now uncovered.

5099 of 11252 relevant lines covered (45.32%)

10.91 hits per line

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

61.18

/src/core/VirtualManager.ts

/*
 * Copyright (c) 2015 NAVER Corp.
 * egjs projects are licensed under the MIT license
 */
import Flicking from "../Flicking";
import { range } from "../utils";
import { CLASS } from "../const/external";

import VirtualPanel from "./panel/VirtualPanel";

export interface VirtualOptions {
  renderPanel: (panel: VirtualPanel, index: number) => string;
  initialPanelCount: number;
  cache?: boolean;
  panelClass?: string;
}

/**
 * A manager class to add / remove virtual panels
 */
class VirtualManager {
  private _flicking: Flicking;

  private _renderPanel: (panel: VirtualPanel, index: number) => string;
  private _initialPanelCount: number;
  private _cache: boolean;
  private _panelClass: string;

  private _elements: Array<{ nativeElement: HTMLElement; visible: boolean }>;

  public get elements() { return this._elements; }

  // Options
  /**
   * A rendering function for the panel element's innerHTML
   * @ko 패널 엘리먼트의 innerHTML을 렌더링하는 함수
   * @type {function}
   * @param {VirtualPanel} panel Instance of the panel<ko>패널 인스턴스</ko>
   * @param {number} index Index of the panel<ko>패널 인덱스</ko>
   * @default "() => {}"
   */
  public get renderPanel() { return this._renderPanel; }
  /**
   * Initial panel count to render
   * @ko 최초로 렌더링할 패널의 개수
   * @readonly
   * @type {number}
   * @default -1
   */
  public get initialPanelCount() { return this._initialPanelCount; }
  /**
   * Whether to cache rendered panel's innerHTML
   * @ko 렌더링된 패널의 innerHTML 정보를 캐시할지 여부
   * @type {boolean}
   * @default false
   */
  public get cache() { return this._cache; }
  /**
   * The class name that will be applied to rendered panel elements
   * @ko 렌더링되는 패널 엘리먼트에 적용될 클래스 이름
   * @type {string}
   * @default "flicking-panel"
   */
  public get panelClass() { return this._panelClass; }

  public set renderPanel(val: VirtualOptions["renderPanel"]) {
    this._renderPanel = val;
    this._flicking.renderer.panels.forEach((panel: VirtualPanel) => panel.uncacheRenderResult());
  }

  public set cache(val: NonNullable<VirtualOptions["cache"]>) { this._cache = val; }
  public set panelClass(val: NonNullable<VirtualOptions["panelClass"]>) { this._panelClass = val; }

  public constructor(flicking: Flicking, options: VirtualOptions | null) {
    this._flicking = flicking;

    this._renderPanel = options?.renderPanel ?? (() => "");
    this._initialPanelCount = options?.initialPanelCount ?? -1;
    this._cache = options?.cache ?? false;
    this._panelClass = options?.panelClass ?? CLASS.DEFAULT_VIRTUAL;

    this._elements = [];
  }

  public init() {
    const flicking = this._flicking;

    if (!flicking.virtualEnabled) return;

    if (!flicking.externalRenderer && !flicking.renderExternal) {
      this._initVirtualElements();
    }

    const virtualElements = flicking.camera.children;
    this._elements = virtualElements.map(el => ({ nativeElement: el, visible: true }));
  }

  public show(index: number) {
    const el = this._elements[index];
    const nativeEl = el.nativeElement;

    el.visible = true;

    if (nativeEl.style.display) {
      nativeEl.style.display = "";
    }
  }

  public hide(index: number) {
    const el = this._elements[index];
    const nativeEl = el.nativeElement;

    el.visible = false;
    nativeEl.style.display = "none";
  }

  /**
   * Add new virtual panels at the end of the list
   * @ko 새로운 가상 패널들을 리스트의 끝에 추가합니다
   * @param {number} count The number of panels to add<ko>추가할 패널의 개수</ko>
   * @returns {Array<VirtualPanel>} The new panels added<ko>새롭게 추가된 패널들</ko>
   */
  public append(count: number = 1): VirtualPanel[] {
    const flicking = this._flicking;

    return this.insert(flicking.panels.length, count);
  }

  /**
   * Add new virtual panels at the start of the list
   * @ko 새로운 가상 패널들을 리스트의 시작에 추가합니다
   * @param {number} count The number of panels to add<ko>추가할 패널의 개수</ko>
   * @returns {Array<VirtualPanel>} The new panels added<ko>새롭게 추가된 패널들</ko>
   */
  public prepend(count: number = 1): VirtualPanel[] {
    return this.insert(0, count);
  }

  /**
   * Add new virtual panels at the given index
   * @ko 새로운 가상 패널들을 주어진 인덱스에 추가합니다
   * @param {number} count The number of panels to add<ko>추가할 패널의 개수</ko>
   * @returns {Array<VirtualPanel>} The new panels added<ko>새롭게 추가된 패널들</ko>
   */
  public insert(index: number, count: number = 1): VirtualPanel[] {
    if (count <= 0) return [];

    const flicking = this._flicking;

    return flicking.renderer.batchInsert({ index, elements: range(count), hasDOMInElements: false }) as VirtualPanel[];
  }

  /**
   * Remove panels at the given index
   * @ko 주어진 인덱스에서 패널들을 삭제합니다
   * @param {number} count The number of panels to remove<ko>삭제할 패널의 개수</ko>
   * @returns {Array<VirtualPanel>} The panels removed<ko>삭제된 패널들</ko>
   */
  public remove(index: number, count: number): VirtualPanel[] {
    if (count <= 0) return [];

    const flicking = this._flicking;

    return flicking.renderer.batchRemove({ index, deleteCount: count, hasDOMInElements: false }) as VirtualPanel[];
  }

  private _initVirtualElements() {
    const flicking = this._flicking;
    const cameraElement = flicking.camera.element;
    const panelsPerView = flicking.panelsPerView;
    const fragment = document.createDocumentFragment();

    const newElements = range(panelsPerView + 1).map(idx => {
      const panelEl = document.createElement("div");
      panelEl.className = this._panelClass;
      panelEl.dataset.elementIndex = idx.toString();
      return panelEl;
    });

    newElements.forEach(el => {
      fragment.appendChild(el);
    });

    cameraElement.appendChild(fragment);
  }
}

export default VirtualManager;

1	/*	1✔
2	* Copyright (c) 2015 NAVER Corp.	1✔
3	* egjs projects are licensed under the MIT license	1✔
4	*/	1✔
5	import Flicking from "../Flicking";
6	import { range } from "../utils";	5✔
7	import { CLASS } from "../const/external";	5✔
8		1✔
9	import VirtualPanel from "./panel/VirtualPanel";
10
11	export interface VirtualOptions {	1✔
12	renderPanel: (panel: VirtualPanel, index: number) => string;	1!
13	initialPanelCount: number;	1!
14	cache?: boolean;	1!
15	panelClass?: string;	1!
16	}	1✔
17
18	/**	1✔
19	* A manager class to add / remove virtual panels
20	*/
21	class VirtualManager {	5✔
22	private _flicking: Flicking;
23		1✔
24	private _renderPanel: (panel: VirtualPanel, index: number) => string;
25	private _initialPanelCount: number;
26	private _cache: boolean;
27	private _panelClass: string;
28
29	private _elements: Array<{ nativeElement: HTMLElement; visible: boolean }>;
30
31	public get elements() { return this._elements; }	5✔
32
33	// Options
34	/**
35	* A rendering function for the panel element's innerHTML
36	* @ko 패널 엘리먼트의 innerHTML을 렌더링하는 함수
37	* @type {function}
38	* @param {VirtualPanel} panel Instance of the panel<ko>패널 인스턴스</ko>
39	* @param {number} index Index of the panel<ko>패널 인덱스</ko>
40	* @default "() => {}"
41	*/	1✔
42	public get renderPanel() { return this._renderPanel; }	5✔
43	/**
44	* Initial panel count to render
45	* @ko 최초로 렌더링할 패널의 개수
46	* @readonly
47	* @type {number}
48	* @default -1
49	*/
50	public get initialPanelCount() { return this._initialPanelCount; }	5✔
51	/**
52	* Whether to cache rendered panel's innerHTML
53	* @ko 렌더링된 패널의 innerHTML 정보를 캐시할지 여부	1✔
54	* @type {boolean}
55	* @default false
56	*/
57	public get cache() { return this._cache; }	5✔
58	/**
59	* The class name that will be applied to rendered panel elements
60	* @ko 렌더링되는 패널 엘리먼트에 적용될 클래스 이름
61	* @type {string}
62	* @default "flicking-panel"
63	*/
64	public get panelClass() { return this._panelClass; }	5✔
65		1✔
66	public set renderPanel(val: VirtualOptions["renderPanel"]) {
67	this._renderPanel = val;
68	this._flicking.renderer.panels.forEach((panel: VirtualPanel) => panel.uncacheRenderResult());
69	}
70
71	public set cache(val: NonNullable<VirtualOptions["cache"]>) { this._cache = val; }
UNCOV 72	public set panelClass(val: NonNullable<VirtualOptions["panelClass"]>) { this._panelClass = val; }	×
73
74	public constructor(flicking: Flicking, options: VirtualOptions \| null) {
75	this._flicking = flicking;	14✔
76
77	this._renderPanel = options?.renderPanel ?? (() => "");	15!
78	this._initialPanelCount = options?.initialPanelCount ?? -1;	15!
79	this._cache = options?.cache ?? false;	15!
80	this._panelClass = options?.panelClass ?? CLASS.DEFAULT_VIRTUAL;	15!
81		×
82	this._elements = [];	14✔
83	}
84
85	public init() {	5✔
86	const flicking = this._flicking;	14✔
87		1✔
88	if (!flicking.virtualEnabled) return;	14✔
89
UNCOV 90	if (!flicking.externalRenderer && !flicking.renderExternal) {	×
UNCOV 91	this._initVirtualElements();	×
92	}
93
94	const virtualElements = flicking.camera.children;
95	this._elements = virtualElements.map(el => ({ nativeElement: el, visible: true }));	1✔
96	}
97
98	public show(index: number) {	5✔
UNCOV 99	const el = this._elements[index];	×
100	const nativeEl = el.nativeElement;
101
102	el.visible = true;
103
104	if (nativeEl.style.display) {	×
105	nativeEl.style.display = "";
106	}
107	}	1✔
108		×
109	public hide(index: number) {	5✔
UNCOV 110	const el = this._elements[index];	×
111	const nativeEl = el.nativeElement;
112
113	el.visible = false;
114	nativeEl.style.display = "none";
115	}
116
117	/**
118	* Add new virtual panels at the end of the list	1✔
119	* @ko 새로운 가상 패널들을 리스트의 끝에 추가합니다	×
120	* @param {number} count The number of panels to add<ko>추가할 패널의 개수</ko>
121	* @returns {Array<VirtualPanel>} The new panels added<ko>새롭게 추가된 패널들</ko>
122	*/
123	public append(count: number = 1): VirtualPanel[] {	5!
124	const flicking = this._flicking;
125
126	return this.insert(flicking.panels.length, count);
127	}
128		1✔
129	/**	×
130	* Add new virtual panels at the start of the list	×
131	* @ko 새로운 가상 패널들을 리스트의 시작에 추가합니다
132	* @param {number} count The number of panels to add<ko>추가할 패널의 개수</ko>
133	* @returns {Array<VirtualPanel>} The new panels added<ko>새롭게 추가된 패널들</ko>
134	*/
135	public prepend(count: number = 1): VirtualPanel[] {	5!
136	return this.insert(0, count);
137	}
138
139	/**
140	* Add new virtual panels at the given index
141	* @ko 새로운 가상 패널들을 주어진 인덱스에 추가합니다	1✔
142	* @param {number} count The number of panels to add<ko>추가할 패널의 개수</ko>	×
143	* @returns {Array<VirtualPanel>} The new panels added<ko>새롭게 추가된 패널들</ko>
144	*/
145	public insert(index: number, count: number = 1): VirtualPanel[] {	5!
146	if (count <= 0) return [];	×
147		1✔
UNCOV 148	const flicking = this._flicking;	×
149
UNCOV 150	return flicking.renderer.batchInsert({ index, elements: range(count), hasDOMInElements: false }) as VirtualPanel[];	×
151	}
152
153	/**
154	* Remove panels at the given index
155	* @ko 주어진 인덱스에서 패널들을 삭제합니다
156	* @param {number} count The number of panels to remove<ko>삭제할 패널의 개수</ko>
157	* @returns {Array<VirtualPanel>} The panels removed<ko>삭제된 패널들</ko>
158	*/
159	public remove(index: number, count: number): VirtualPanel[] {	5✔
UNCOV 160	if (count <= 0) return [];	×
161
UNCOV 162	const flicking = this._flicking;	×
163
164	return flicking.renderer.batchRemove({ index, deleteCount: count, hasDOMInElements: false }) as VirtualPanel[];	1✔
165	}
166		1✔
167	private _initVirtualElements() {	5✔
168	const flicking = this._flicking;
169	const cameraElement = flicking.camera.element;
170	const panelsPerView = flicking.panelsPerView;
171	const fragment = document.createDocumentFragment();
172
173	const newElements = range(panelsPerView + 1).map(idx => {
174	const panelEl = document.createElement("div");
175	panelEl.className = this._panelClass;
176	panelEl.dataset.elementIndex = idx.toString();
177	return panelEl;
178	});
179
180	newElements.forEach(el => {
181	fragment.appendChild(el);
182	});
183
184	cameraElement.appendChild(fragment);
185	}
186	}	5✔
187
188	export default VirtualManager;	5✔

naver / egjs-flicking / 10557177632

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