@syncfusion/ej2-lists 20.2.36 → 20.2.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/dist/ej2-lists.umd.min.js +1 -1
  3. package/dist/global/ej2-lists.min.js +1 -1
  4. package/dist/global/index.d.ts +1 -1
  5. package/helpers/e2e/index.js +8 -6
  6. package/helpers/e2e/list-view.js +38 -22
  7. package/package.json +8 -8
  8. package/dist/ts/common/list-base.ts +0 -1283
  9. package/dist/ts/component.ts +0 -4
  10. package/dist/ts/list-view/list-view.ts +0 -2595
  11. package/dist/ts/list-view/virtualization.ts +0 -1155
  12. package/dist/ts/sortable/sortable.ts +0 -458
package/dist/ts/list-view/virtualization.ts DELETED
@@ -1,1155 +0,0 @@
1
- import { ListView, ItemCreatedArgs, classNames, Fields, UISelectedItem } from './list-view';
2
- import { EventHandler, append, isNullOrUndefined, detach, removeClass, addClass, compile, formatUnit } from '@syncfusion/ej2-base';
3
- import { debounce } from '@syncfusion/ej2-base';
4
- import { ListBase } from '../common/list-base';
5
- import { DataManager } from '@syncfusion/ej2-data';
6
-
7
- /**
8
- * ElementContext
9
- */
10
- export interface ElementContext extends HTMLElement {
11
- context: { [key: string]: string | object };
12
- }
13
-
14
- const listElementCount: number = 1.5;
15
- const windowElementCount: number = 3;
16
-
17
- export class Virtualization {
18
- constructor(instance: ListView) {
19
- this.listViewInstance = instance;
20
- }
21
-
22
- // eslint-disable-next-line
23
- private listViewInstance: any;
24
- private headerData: DataSource;
25
- private templateData: DataSource;
26
- private topElementHeight: number;
27
- private bottomElementHeight: number;
28
- public listItemHeight: number;
29
- private domItemCount: number;
30
- private expectedDomItemCount: number;
31
- private scrollPosition: number;
32
- private onVirtualScroll: EventListener;
33
- private updateUl: EventListener;
34
- private checkListWrapper: Node;
35
- private iconCssWrapper: Node;
36
- public uiFirstIndex: number;
37
- private uiLastIndex: number;
38
- private totalHeight: number;
39
- private topElement: HTMLElement;
40
- private bottomElement: HTMLElement;
41
- private activeIndex: number;
42
- private uiIndices: { [key: string]: number[] };
43
- private listDiff: number;
44
- private elementDifference: number = 0;
45
-
46
- /**
47
- * For internal use only.
48
- *
49
- * @private
50
- */
51
-
52
- public isNgTemplate(): boolean {
53
- return !isNullOrUndefined(this.listViewInstance.templateRef) && typeof this.listViewInstance.templateRef !== 'string';
54
- }
55
-
56
- /**
57
- * For internal use only.
58
- *
59
- * @private
60
- */
61
-
62
- public uiVirtualization(): void {
63
- this.wireScrollEvent(false);
64
- const curViewDS: { [key: string]: object; }[] = this.listViewInstance.curViewDS as { [key: string]: object; }[];
65
- const firstDs: { [key: string]: object }[] = curViewDS.slice(0, 1);
66
- this.listViewInstance.ulElement = this.listViewInstance.curUL = ListBase.createList(
67
- // eslint-disable-next-line
68
- this.listViewInstance.createElement, firstDs as any, this.listViewInstance.listBaseOption, null, this.listViewInstance);
69
- this.listViewInstance.contentContainer = this.listViewInstance.createElement('div', { className: classNames.content });
70
- this.listViewInstance.element.appendChild(this.listViewInstance.contentContainer);
71
- this.listViewInstance.contentContainer.appendChild(this.listViewInstance.ulElement);
72
- this.listItemHeight = this.listViewInstance.ulElement.firstElementChild.getBoundingClientRect().height;
73
- this.expectedDomItemCount = this.ValidateItemCount(10000);
74
- this.domItemCount = this.ValidateItemCount(Object.keys(this.listViewInstance.curViewDS).length);
75
- this.uiFirstIndex = 0;
76
- this.uiLastIndex = this.domItemCount - 1;
77
- const otherDs: { [key: string]: object; }[] = curViewDS.slice(1, this.domItemCount);
78
- const listItems: HTMLElement[] = ListBase.createListItemFromJson(
79
- // eslint-disable-next-line
80
- this.listViewInstance.createElement, otherDs as any, this.listViewInstance.listBaseOption, null, null, this.listViewInstance);
81
- append(listItems, this.listViewInstance.ulElement);
82
- this.listViewInstance.liCollection = <HTMLElement[] & NodeListOf<HTMLLIElement>>
83
- this.listViewInstance.curUL.querySelectorAll('li');
84
- this.topElement = this.listViewInstance.createElement('div');
85
- this.listViewInstance.ulElement.insertBefore(this.topElement, this.listViewInstance.ulElement.firstElementChild);
86
- this.bottomElement = this.listViewInstance.createElement('div');
87
- this.listViewInstance.ulElement.insertBefore(this.bottomElement, null);
88
- this.totalHeight = (Object.keys(curViewDS).length * this.listItemHeight) - (this.domItemCount * this.listItemHeight);
89
- this.topElement.style.height = 0 + 'px';
90
- this.bottomElement.style.height = this.totalHeight + 'px';
91
- this.topElementHeight = 0;
92
- this.bottomElementHeight = this.totalHeight;
93
- this.listDiff = 0;
94
- this.uiIndicesInitialization();
95
- }
96
-
97
- private wireScrollEvent(destroy: boolean): void {
98
- if (!destroy) {
99
- if (this.listViewInstance.isWindow) {
100
- this.onVirtualScroll = this.onVirtualUiScroll.bind(this);
101
- window.addEventListener('scroll', this.onVirtualScroll);
102
- } else {
103
- EventHandler.add(this.listViewInstance.element, 'scroll', this.onVirtualUiScroll, this);
104
- }
105
- } else {
106
- if (this.listViewInstance.isWindow === true) {
107
- window.removeEventListener('scroll', this.onVirtualScroll);
108
- window.removeEventListener('scroll', this.updateUl);
109
- }
110
- else {
111
- EventHandler.remove(this.listViewInstance.element, 'scroll', this.onVirtualUiScroll);
112
- EventHandler.remove(this.listViewInstance.element, 'scroll', this.updateUlContainer);
113
- }
114
- }
115
- }
116
-
117
- private updateUlContainer(e: Event): void {
118
- let listDiff: number;
119
- const virtualElementContainer: HTMLElement = this.listViewInstance.ulElement.querySelector('.' + classNames.virtualElementContainer);
120
- if (isNullOrUndefined(this.listViewInstance.liElementHeight)) {
121
- this.listViewInstance.updateLiElementHeight();
122
- }
123
-
124
- if (this.listViewInstance.isWindow) {
125
- // eslint-disable-next-line
126
- listDiff = Math.round((e as any).target.documentElement.scrollTop / this.listViewInstance.liElementHeight) - 2;
127
- } else {
128
- // eslint-disable-next-line
129
- listDiff = Math.round((e as any).target.scrollTop / this.listViewInstance.liElementHeight) - 2;
130
- }
131
- if (((listDiff - 1) * this.listViewInstance.liElementHeight) < 0) {
132
- virtualElementContainer.style.top = '0px';
133
- } else {
134
- virtualElementContainer.style.top = (listDiff) * this.listViewInstance.liElementHeight + 'px';
135
- }
136
- }
137
-
138
- private ValidateItemCount(dataSourceLength: number): number {
139
- const height: number = parseFloat(formatUnit(this.listViewInstance.height));
140
- let itemCount: number;
141
- if (this.listViewInstance.isWindow) {
142
- itemCount = Math.round((window.innerHeight / this.listItemHeight) * windowElementCount);
143
- } else {
144
- if (typeof this.listViewInstance.height === 'string' && this.listViewInstance.height.indexOf('%') !== -1) {
145
- // eslint-disable-next-line max-len
146
- itemCount = Math.round((this.listViewInstance.element.getBoundingClientRect().height / this.listItemHeight) * listElementCount);
147
- } else {
148
- itemCount = Math.round((height / this.listItemHeight) * listElementCount);
149
- }
150
- }
151
- if (itemCount > dataSourceLength) {
152
- itemCount = dataSourceLength;
153
- }
154
- return itemCount;
155
- }
156
-
157
- private uiIndicesInitialization(): void {
158
- this.uiIndices = { 'activeIndices': [], 'disabledItemIndices': [], 'hiddenItemIndices': [] };
159
- const data: DataSource[] = this.listViewInstance.curViewDS as DataSource[];
160
- for (let i: number = 0; i < data.length; i++) {
161
- if (this.listViewInstance.showCheckBox && data[i][this.listViewInstance.fields.isChecked]) {
162
- this.uiIndices.activeIndices.push(i);
163
- }
164
- // eslint-disable-next-line
165
- if (!isNullOrUndefined((data[i] as any)[this.listViewInstance.fields.enabled]) &&
166
- !data[i][this.listViewInstance.fields.enabled]) {
167
- // eslint-disable-next-line
168
- (this.uiIndices.disabledItemIndices.push(i)) as any;
169
- }
170
- }
171
- if (this.isNgTemplate()) {
172
- const items: ElementContext[] = this.listViewInstance.element.querySelectorAll('.' + classNames.listItem);
173
- for (let index: number = 0; index < items.length; index++) {
174
- items[index].context = this.listViewInstance.viewContainerRef.get(index).context;
175
- }
176
- }
177
- }
178
-
179
- public refreshItemHeight(): void {
180
- if (this.listViewInstance.curViewDS.length) {
181
- const curViewDS: { [key: string]: object; }[] = this.listViewInstance.curViewDS as { [key: string]: object; }[];
182
- this.listItemHeight = (this.topElement.nextSibling as HTMLElement).getBoundingClientRect().height;
183
- this.totalHeight = (Object.keys(curViewDS).length * this.listItemHeight) - (this.domItemCount * this.listItemHeight);
184
- this.bottomElementHeight = this.totalHeight;
185
- this.bottomElement.style.height = this.totalHeight + 'px';
186
- }
187
- }
188
-
189
- private getscrollerHeight(startingHeight: number): number {
190
- return this.listViewInstance.isWindow ? (((pageYOffset - startingHeight) <= 0) ? 0 :
191
- (pageYOffset - startingHeight)) : ((this.listViewInstance.element.scrollTop - startingHeight) <= 0) ? 0 :
192
- (this.listViewInstance.element.scrollTop - startingHeight);
193
- }
194
-
195
- private onVirtualUiScroll(e: Event): void {
196
- let startingHeight: number;
197
- if (this.listViewInstance.isWindow) {
198
- startingHeight = this.listViewInstance.ulElement.getBoundingClientRect().top -
199
- document.documentElement.getBoundingClientRect().top;
200
- } else {
201
- startingHeight = this.listViewInstance.headerEle ? this.listViewInstance.headerEle.getBoundingClientRect().height : 0;
202
- }
203
- this.scrollPosition = isNullOrUndefined(this.scrollPosition) ? 0 : this.scrollPosition;
204
- const scroll: number = this.getscrollerHeight(startingHeight);
205
- this.topElementHeight = this.listItemHeight * Math.floor(scroll / this.listItemHeight);
206
- this.bottomElementHeight = this.totalHeight - this.topElementHeight;
207
- [this.topElementHeight, this.bottomElementHeight] = scroll <= this.totalHeight ?
208
- [this.topElementHeight, this.bottomElementHeight] : [this.totalHeight, 0];
209
- if (this.topElementHeight !== parseFloat(this.topElement.style.height)) {
210
- this.topElement.style.height = this.topElementHeight + 'px';
211
- this.bottomElement.style.height = this.bottomElementHeight + 'px';
212
- if (scroll > this.scrollPosition) {
213
- const listDiff: number = Math.round(((this.topElementHeight / this.listItemHeight) - this.listDiff));
214
- if (listDiff > (this.expectedDomItemCount + 5)) {
215
- this.onLongScroll(listDiff, true);
216
- } else {
217
- this.onNormalScroll(listDiff, true);
218
- }
219
- } else {
220
- const listDiff: number = Math.round((this.listDiff - (this.topElementHeight / this.listItemHeight)));
221
- if (listDiff > (this.expectedDomItemCount + 5)) {
222
- this.onLongScroll(listDiff, false);
223
- } else {
224
- this.onNormalScroll(listDiff, false);
225
- }
226
- }
227
- }
228
- this.listDiff = Math.round(this.topElementHeight / this.listItemHeight);
229
- if (typeof this.listViewInstance.onUIScrolled === 'function') {
230
- this.listViewInstance.onUIScrolled();
231
- }
232
- this.scrollPosition = scroll;
233
- }
234
-
235
- private onLongScroll(listDiff: number, isScrollingDown: boolean): void {
236
- let index: number = isScrollingDown ? (this.uiFirstIndex + listDiff) : (this.uiFirstIndex - listDiff);
237
- const elements: HTMLElement[] = this.listViewInstance.ulElement.querySelectorAll('li');
238
- for (let i: number = 0; i < elements.length; i++) {
239
- this.updateUI(elements[i], index);
240
- index++;
241
- }
242
- this.uiLastIndex = isScrollingDown ? (this.uiLastIndex + listDiff) : (this.uiLastIndex - listDiff);
243
- this.uiFirstIndex = isScrollingDown ? (this.uiFirstIndex + listDiff) : (this.uiFirstIndex - listDiff);
244
- }
245
-
246
- private onNormalScroll(listDiff: number, isScrollingDown: boolean): void {
247
- if (isScrollingDown) {
248
- for (let i: number = 0; i < listDiff; i++) {
249
- const index: number = ++this.uiLastIndex;
250
- this.updateUI(this.topElement.nextElementSibling as HTMLElement, index, this.bottomElement);
251
- this.uiFirstIndex++;
252
- }
253
- } else {
254
- for (let i: number = 0; i < listDiff; i++) {
255
- const index: number = --this.uiFirstIndex;
256
- const target: HTMLElement = this.topElement.nextSibling as HTMLElement;
257
- this.updateUI(this.bottomElement.previousElementSibling as HTMLElement, index, target);
258
- this.uiLastIndex--;
259
- }
260
- }
261
- }
262
-
263
- private updateUiContent(element: HTMLElement, index: number): void {
264
- // eslint-disable-next-line
265
- const curViewDs: { [key: string]: any; }[] = this.listViewInstance.curViewDS as DataSource[];
266
- if (typeof (this.listViewInstance.dataSource as string[])[0] === 'string' ||
267
- typeof (this.listViewInstance.dataSource as number[])[0] === 'number') {
268
- element.dataset.uid = ListBase.generateId();
269
- element.getElementsByClassName(classNames.listItemText)[0].innerHTML =
270
- (this.listViewInstance.curViewDS as string[] | number[])[index].toString();
271
- } else {
272
- // eslint-disable-next-line
273
- element.dataset.uid = (curViewDs[index][this.listViewInstance.fields.id]) as any ?
274
- // eslint-disable-next-line
275
- (curViewDs[index][this.listViewInstance.fields.id]) as any : (ListBase.generateId() as any);
276
- element.getElementsByClassName(classNames.listItemText)[0].innerHTML =
277
- // eslint-disable-next-line
278
- (curViewDs[index][this.listViewInstance.fields.text]) as any;
279
- }
280
- if (this.listViewInstance.showIcon) {
281
- if (element.querySelector('.' + classNames.listIcon)) {
282
- detach(element.querySelector('.' + classNames.listIcon));
283
- }
284
- if ((this.listViewInstance.curViewDS[index] as { [key: string]: object; })[this.listViewInstance.fields.iconCss]) {
285
- const textContent: Element = element.querySelector('.' + classNames.textContent);
286
- const target: Element = this.listViewInstance.createElement('div', {
287
- className: classNames.listIcon + ' ' +
288
- (this.listViewInstance.curViewDS[index] as { [key: string]: object; })[this.listViewInstance.fields.iconCss]
289
- });
290
- textContent.insertBefore(target, element.querySelector('.' + classNames.listItemText));
291
- }
292
- }
293
- if (this.listViewInstance.showCheckBox && this.listViewInstance.fields.groupBy) {
294
- if (!this.checkListWrapper) {
295
- this.checkListWrapper = this.listViewInstance.curUL.querySelector('.' + classNames.checkboxWrapper).cloneNode(true);
296
- }
297
- const textContent: Element = element.querySelector('.' + classNames.textContent);
298
- if ((this.listViewInstance.curViewDS[index] as { [key: string]: object; }).isHeader) {
299
- if (element.querySelector('.' + classNames.checkboxWrapper)) {
300
- element.classList.remove(classNames.checklist);
301
- textContent.classList.remove(classNames.checkbox);
302
- detach(element.querySelector('.' + classNames.checkboxWrapper));
303
- }
304
- } else {
305
- if (!element.querySelector('.' + classNames.checkboxWrapper)) {
306
- element.classList.add(classNames.checklist);
307
- textContent.classList.add(classNames.checkbox);
308
- textContent.insertBefore(this.checkListWrapper.cloneNode(true), element.querySelector('.' + classNames.listItemText));
309
- }
310
- }
311
- }
312
- }
313
- private changeElementAttributes(element: Element, index: number): void {
314
- element.classList.remove(classNames.disable);
315
- if (this.uiIndices.disabledItemIndices.length && this.uiIndices.disabledItemIndices.indexOf(index) !== -1) {
316
- element.classList.add(classNames.disable);
317
- }
318
- (element as HTMLElement).style.display = '';
319
- if (this.uiIndices.hiddenItemIndices.length && this.uiIndices.hiddenItemIndices.indexOf(index) !== -1) {
320
- (element as HTMLElement).style.display = 'none';
321
- }
322
- if (this.listViewInstance.showCheckBox) {
323
- const checklistElement: Element = element.querySelector('.' + classNames.checkboxWrapper);
324
- element.classList.remove(classNames.selected);
325
- element.classList.remove(classNames.focused);
326
- if (checklistElement) {
327
- checklistElement.removeAttribute('aria-checked');
328
- checklistElement.firstElementChild.classList.remove(classNames.checked);
329
- }
330
- if (this.uiIndices.activeIndices.length && this.uiIndices.activeIndices.indexOf(index) !== -1 &&
331
- !this.listViewInstance.curUL.querySelector(classNames.selected)) {
332
- element.classList.add(classNames.selected);
333
- checklistElement.firstElementChild.classList.add(classNames.checked);
334
- checklistElement.setAttribute('aria-checked', 'true');
335
- if (this.activeIndex === index) {
336
- element.classList.add(classNames.focused);
337
- }
338
- }
339
- } else {
340
- element.classList.remove(classNames.selected);
341
- element.removeAttribute('aria-selected');
342
- if (!isNullOrUndefined(this.activeIndex) && this.activeIndex === index &&
343
- !this.listViewInstance.curUL.querySelector(classNames.selected)) {
344
- element.classList.add(classNames.selected);
345
- element.setAttribute('aria-selected', 'true');
346
- }
347
- }
348
- if (this.listViewInstance.fields.groupBy) {
349
- if ((this.listViewInstance.curViewDS as { [key: string]: object; }[])[index].isHeader) {
350
- if (element.classList.contains(classNames.listItem)) {
351
- element.classList.remove(classNames.listItem);
352
- element.setAttribute('role', 'group');
353
- element.classList.add(classNames.groupListItem);
354
- }
355
- } else {
356
- if (element.classList.contains(classNames.groupListItem)) {
357
- element.classList.remove(classNames.groupListItem);
358
- element.setAttribute('role', 'listitem');
359
- element.classList.add(classNames.listItem);
360
- }
361
- }
362
- }
363
- }
364
-
365
- private findDSAndIndexFromId(
366
- ds: DataSource[] | string[] | number[], fields: Fields | Element): DataSource {
367
- const resultJSON: { [key: string]: object | number } = {};
368
- fields = this.listViewInstance.getElementUID(fields);
369
- if (!isNullOrUndefined(fields)) {
370
- (ds as { [key: string]: object; }[]).some((data: { [key: string]: object; }, index: number) => {
371
- if (((fields as { [key: string]: object; })[this.listViewInstance.fields.id] &&
372
- // eslint-disable-next-line
373
- (fields as { [key: string]: any; })[this.listViewInstance.fields.id]
374
- // eslint-disable-next-line
375
- === (data[this.listViewInstance.fields.id] && data[this.listViewInstance.fields.id] as any) || fields === data)) {
376
- resultJSON.index = index;
377
- resultJSON.data = data;
378
- return true;
379
- } else {
380
- return false;
381
- }
382
- });
383
- }
384
-
385
- return resultJSON as DataSource;
386
- }
387
-
388
- public getSelectedItems(): UISelectedItem {
389
- if (!isNullOrUndefined(this.activeIndex) || (this.listViewInstance.showCheckBox && this.uiIndices.activeIndices.length)) {
390
- const dataCollection: string[] | { [key: string]: object; }[] = [];
391
- const textCollection: string[] = [];
392
- if (typeof (this.listViewInstance.dataSource as string[])[0] === 'string' ||
393
- typeof (this.listViewInstance.dataSource as number[])[0] === 'number') {
394
- const curViewDS: string[] | number[] = this.listViewInstance.curViewDS as string[] | number[];
395
- if (this.listViewInstance.showCheckBox) {
396
- const indices: number[] = this.uiIndices.activeIndices;
397
- for (let i: number = 0; i < indices.length; i++) {
398
- (dataCollection as string[]).push((curViewDS as string[])[indices[i]]);
399
- }
400
- return {
401
- text: dataCollection as string[],
402
- // eslint-disable-next-line
403
- data: dataCollection as any,
404
- index: this.uiIndices.activeIndices.map((index: number) =>
405
- (this.listViewInstance.dataSource as string[]).indexOf((curViewDS as string[])[index]))
406
- };
407
- } else {
408
- return {
409
- text: curViewDS[this.activeIndex],
410
- data: curViewDS[this.activeIndex],
411
- index: (this.listViewInstance.dataSource as string[]).indexOf((curViewDS as string[])[this.activeIndex])
412
- };
413
- }
414
- } else {
415
- const curViewDS: { [key: string]: object | string }[] = this.listViewInstance.curViewDS as { [key: string]: object; }[];
416
- const text: string = this.listViewInstance.fields.text;
417
- if (this.listViewInstance.showCheckBox) {
418
- const indexArray: number[] = this.uiIndices.activeIndices;
419
- for (let i: number = 0; i < indexArray.length; i++) {
420
- textCollection.push((curViewDS[indexArray[i]] as { [key: string]: string; })[text]);
421
- // eslint-disable-next-line
422
- (dataCollection as { [key: string]: any; }[]).push(curViewDS[indexArray[i]] as DataSource);
423
- }
424
- // eslint-disable-next-line
425
- const dataSource: { [key: string]: any; }[] =
426
- this.listViewInstance.dataSource instanceof DataManager
427
- ? curViewDS : this.listViewInstance.dataSource;
428
- return {
429
- text: textCollection,
430
- // eslint-disable-next-line
431
- data: dataCollection as any,
432
- index: this.uiIndices.activeIndices.map((index: number) =>
433
- dataSource.indexOf(curViewDS[index] as DataSource))
434
- };
435
- } else {
436
- // eslint-disable-next-line
437
- const dataSource: { [key: string]: any; }[] =
438
- this.listViewInstance.dataSource instanceof DataManager
439
- ? curViewDS : this.listViewInstance.dataSource;
440
- return {
441
- text: curViewDS[this.activeIndex][this.listViewInstance.fields.text] as string,
442
- // eslint-disable-next-line
443
- data: curViewDS[this.activeIndex] as any,
444
- index: dataSource.indexOf(curViewDS[this.activeIndex])
445
- };
446
- }
447
- }
448
- } else {
449
- return undefined;
450
- }
451
- }
452
-
453
- public selectItem(obj: Fields | HTMLElement | Element): void {
454
- // eslint-disable-next-line
455
- const resutJSON: { [key: string]: any | number } = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
456
- if (Object.keys(resutJSON).length) {
457
- const isSelected: boolean = this.activeIndex === resutJSON.index;
458
- let isChecked: boolean;
459
- this.activeIndex = resutJSON.index as number;
460
- if (this.listViewInstance.showCheckBox) {
461
- if (this.uiIndices.activeIndices.indexOf(resutJSON.index as number) === -1) {
462
- isChecked = true;
463
- this.uiIndices.activeIndices.push(resutJSON.index as number);
464
- } else {
465
- isChecked = false;
466
- this.uiIndices.activeIndices.splice(this.uiIndices.activeIndices.indexOf(resutJSON.index as number), 1);
467
- }
468
- if (this.listViewInstance.curUL.querySelector('.' + classNames.focused)) {
469
- this.listViewInstance.curUL.querySelector('.' + classNames.focused).classList.remove(classNames.focused);
470
- }
471
- }
472
- if (this.listViewInstance.getLiFromObjOrElement(obj)) {
473
- if (this.listViewInstance.showCheckBox) {
474
- this.listViewInstance.setCheckboxLI(this.listViewInstance.getLiFromObjOrElement(obj));
475
- } else {
476
- this.listViewInstance.setSelectLI(this.listViewInstance.getLiFromObjOrElement(obj));
477
- }
478
- } else {
479
- // eslint-disable-next-line
480
- let eventArgs: { [key: string]: any; };
481
- if (typeof (this.listViewInstance.dataSource as string[])[0] === 'string' ||
482
- typeof (this.listViewInstance.dataSource as number[])[0] === 'number') {
483
- eventArgs = {
484
- text: (this.listViewInstance.curViewDS as number[] | string[])[this.activeIndex],
485
- data: (this.listViewInstance.curViewDS as number[] | string[])[this.activeIndex],
486
- index: this.activeIndex
487
- };
488
- } else {
489
- const curViewDS: { [key: string]: object; }[] = this.listViewInstance.curViewDS as { [key: string]: object; }[];
490
- eventArgs = {
491
- text: curViewDS[this.activeIndex][this.listViewInstance.fields.text],
492
- data: curViewDS[this.activeIndex],
493
- index: this.activeIndex
494
- };
495
- }
496
- if (this.listViewInstance.showCheckBox) {
497
- eventArgs.isChecked = isChecked;
498
- this.listViewInstance.trigger('select', eventArgs);
499
- } else if (!isSelected) {
500
- this.listViewInstance.removeSelect();
501
- this.listViewInstance.trigger('select', eventArgs);
502
- }
503
- }
504
- } else if (isNullOrUndefined(obj) && !this.listViewInstance.showCheckBox) {
505
- this.listViewInstance.removeSelect();
506
- this.activeIndex = undefined;
507
- }
508
- }
509
-
510
- public enableItem(obj: Fields | HTMLElement | Element): void {
511
- // eslint-disable-next-line
512
- const resutJSON: { [key: string]: any | number } = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
513
- if (Object.keys(resutJSON).length) {
514
- this.uiIndices.disabledItemIndices.splice(this.uiIndices.disabledItemIndices.indexOf(resutJSON.index as number), 1);
515
- }
516
- }
517
-
518
- public disableItem(obj: Fields | HTMLElement | Element): void {
519
- // eslint-disable-next-line
520
- const resutJSON: { [key: string]: any | number } = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
521
- if (Object.keys(resutJSON).length && this.uiIndices.disabledItemIndices.indexOf(resutJSON.index as number) === -1) {
522
- this.uiIndices.disabledItemIndices.push(resutJSON.index as number);
523
- }
524
- }
525
- public showItem(obj: Fields | HTMLElement | Element): void {
526
- // eslint-disable-next-line
527
- const resutJSON: { [key: string]: any | number } = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
528
- if (Object.keys(resutJSON).length) {
529
- this.uiIndices.hiddenItemIndices.splice(this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index as number), 1);
530
- }
531
- }
532
-
533
- public hideItem(obj: Fields | HTMLElement | Element): void {
534
- // eslint-disable-next-line
535
- const resutJSON: { [key: string]: any | number } = this.findDSAndIndexFromId(this.listViewInstance.curViewDS, obj);
536
- if (Object.keys(resutJSON).length && this.uiIndices.hiddenItemIndices.indexOf(resutJSON.index as number) === -1) {
537
- this.uiIndices.hiddenItemIndices.push(resutJSON.index as number);
538
- }
539
- }
540
-
541
- public removeItem(obj: HTMLElement | Element | Fields): void {
542
- let dataSource: DataSource;
543
- const curViewDS: DataSource[] = this.listViewInstance.curViewDS;
544
- // eslint-disable-next-line
545
- const resutJSON: { [key: string]: any | number } = this.findDSAndIndexFromId(curViewDS, obj);
546
- // eslint-disable-next-line
547
- if (Object.keys(resutJSON).length) {
548
- dataSource = resutJSON.data as DataSource;
549
- if (curViewDS[(resutJSON.index as number) - 1] &&
550
- curViewDS[(resutJSON.index as number) - 1].isHeader &&
551
- ((curViewDS[(resutJSON.index as number) - 1])
552
- .items as { [key: string]: any; }[]).length === 1) {
553
- this.removeUiItem((resutJSON.index as number) - 1);
554
- this.removeUiItem((resutJSON.index as number) - 1);
555
- } else {
556
- this.removeUiItem((resutJSON.index as number));
557
- }
558
- }
559
- const listDataSource: DataSource[] = this.listViewInstance.dataSource instanceof DataManager
560
- ? this.listViewInstance.localData : this.listViewInstance.dataSource;
561
- const index: number = listDataSource.indexOf(dataSource);
562
- if (index !== -1) {
563
- listDataSource.splice(index, 1);
564
- this.listViewInstance.setViewDataSource(listDataSource);
565
- }
566
- // recollect all the list item into collection
567
-
568
- this.listViewInstance.liCollection =
569
- <HTMLElement[] & NodeListOf<HTMLLIElement>>this.listViewInstance.curUL.querySelectorAll('li');
570
-
571
- }
572
-
573
- // eslint-disable-next-line
574
- public setCheckboxLI(li: HTMLElement | Element, e?: MouseEvent | KeyboardEvent | FocusEvent): void {
575
- const index: number = Array.prototype.indexOf.call(this.listViewInstance.curUL.querySelectorAll('li'), li) + this.uiFirstIndex;
576
- this.activeIndex = Array.prototype.indexOf.call(this.listViewInstance.curUL.querySelectorAll('li'), li) + this.uiFirstIndex;
577
- if (li.classList.contains(classNames.selected)) {
578
- if (this.uiIndices.activeIndices.indexOf(index) === -1) {
579
- this.uiIndices.activeIndices.push(index);
580
- }
581
- } else {
582
- this.uiIndices.activeIndices.splice(this.uiIndices.activeIndices.indexOf(index), 1);
583
- }
584
- }
585
-
586
- // eslint-disable-next-line
587
- public setSelectLI(li: HTMLElement | Element, e?: MouseEvent | KeyboardEvent | FocusEvent): void {
588
- this.activeIndex = Array.prototype.indexOf.call(this.listViewInstance.curUL.querySelectorAll('li'), li) + this.uiFirstIndex;
589
- }
590
- public checkedItem(checked: boolean): void {
591
- if (checked) {
592
- this.uiIndices.activeIndices = [];
593
- this.activeIndex = undefined;
594
- const data: DataSource[] = this.listViewInstance.curViewDS as DataSource[];
595
- for (let index: number = 0; index < data.length; index++) {
596
- if (!data[index].isHeader) {
597
- this.uiIndices.activeIndices.push(index);
598
- }
599
- }
600
-
601
- } else {
602
- this.activeIndex = undefined;
603
- this.uiIndices.activeIndices = [];
604
- }
605
-
606
- }
607
-
608
- private addUiItem(index: number): void {
609
- // virtually new add list item based on the scollbar position
610
- // if the scroll bar is at the top, just pretend the new item has been added since no UI
611
- // change is required for the item that has been added at last but when scroll bar is at the bottom
612
- // just detach top and inject into bottom to mimic new item is added
613
- const curViewDs: DataSource[] = this.listViewInstance.curViewDS as DataSource[];
614
- this.changeUiIndices(index, true);
615
- if (this.activeIndex && this.activeIndex >= index) {
616
- this.activeIndex++;
617
- }
618
- if (this.listViewInstance.showCheckBox &&
619
- (curViewDs[index] as { [key: string]: object; })[this.listViewInstance.fields.isChecked]) {
620
- this.uiIndices.activeIndices.push(index);
621
- }
622
- if (!parseFloat(this.bottomElement.style.height) && !parseFloat(this.topElement.style.height)) {
623
- this.bottomElement.style.height = parseFloat(this.bottomElement.style.height) + this.listItemHeight + 'px';
624
- }
625
- if (parseFloat(this.bottomElement.style.height)) {
626
- const liItem: HTMLElement = this.listViewInstance.curUL.lastElementChild.previousSibling as HTMLElement;
627
- const target: HTMLElement = this.listViewInstance.getLiFromObjOrElement(curViewDs[index + 1]) ||
628
- this.listViewInstance.getLiFromObjOrElement(curViewDs[index + 2]);
629
- if (target) {
630
- this.bottomElement.style.height = parseFloat(this.bottomElement.style.height) + this.listItemHeight + 'px';
631
- this.updateUI(liItem, index, target);
632
- }
633
- } else {
634
- const liItem: HTMLElement = this.listViewInstance.curUL.firstElementChild.nextSibling as HTMLElement;
635
- let target: HTMLElement;
636
- if ((Object.keys(this.listViewInstance.curViewDS).length - 1) === index) {
637
- target = this.listViewInstance.curUL.lastElementChild as HTMLElement;
638
- } else {
639
- target = this.listViewInstance.getLiFromObjOrElement(curViewDs[index + 1]) ||
640
- this.listViewInstance.getLiFromObjOrElement(curViewDs[index + 2]);
641
- }
642
- this.topElement.style.height = parseFloat(this.topElement.style.height) + this.listItemHeight + 'px';
643
- this.uiFirstIndex++;
644
- this.uiLastIndex++;
645
- if (target) {
646
- this.updateUI(liItem, index, target);
647
- if (this.listViewInstance.isWindow === true) {
648
- window.scrollTo(0, (pageYOffset + this.listItemHeight));
649
- }
650
- else {
651
- this.listViewInstance.element.scrollTop += this.listItemHeight;
652
- }
653
- }
654
- }
655
- this.totalHeight += this.listItemHeight;
656
- this.listDiff = Math.round(parseFloat(this.topElement.style.height) / this.listItemHeight);
657
- }
658
-
659
- private removeUiItem(index: number): void {
660
- this.totalHeight -= this.listItemHeight;
661
- const curViewDS: DataSource = (this.listViewInstance.curViewDS as { [key: string]: object; }[])[index];
662
- const liItem: HTMLElement = this.listViewInstance.getLiFromObjOrElement(curViewDS);
663
- (this.listViewInstance.curViewDS as { [key: string]: object; }[]).splice(index, 1);
664
- if (this.activeIndex && this.activeIndex >= index) {
665
- this.activeIndex--;
666
- }
667
- if (liItem) {
668
- if (this.domItemCount > Object.keys(this.listViewInstance.curViewDS).length) {
669
- detach(liItem);
670
- this.domItemCount--;
671
- this.uiLastIndex--;
672
- this.totalHeight = 0;
673
- } else {
674
- if (liItem.classList.contains(classNames.disable)) {
675
- liItem.classList.remove(classNames.disable);
676
- this.uiIndices.disabledItemIndices.splice(this.uiIndices.disabledItemIndices.indexOf(index), 1);
677
- }
678
- if (liItem.style.display === 'none') {
679
- liItem.style.display = '';
680
- this.uiIndices.hiddenItemIndices.splice(this.uiIndices.hiddenItemIndices.indexOf(index), 1);
681
- }
682
- if (this.listViewInstance.showCheckBox && liItem.classList.contains(classNames.selected)) {
683
- this.listViewInstance.removeSelect();
684
- this.uiIndices.activeIndices.splice(this.uiIndices.activeIndices.indexOf(index), 1);
685
- const checklistElement: Element = liItem.querySelector('.' + classNames.checkboxWrapper);
686
- checklistElement.removeAttribute('aria-checked');
687
- checklistElement.firstElementChild.classList.remove(classNames.checked);
688
- if (liItem.classList.contains(classNames.focused)) {
689
- liItem.classList.remove(classNames.focused);
690
- this.activeIndex = undefined;
691
- }
692
- } else if (liItem.classList.contains(classNames.selected)) {
693
- this.listViewInstance.removeSelect();
694
- this.activeIndex = undefined;
695
- }
696
- if (!parseFloat(this.bottomElement.style.height) && !parseFloat(this.topElement.style.height)) {
697
- this.updateUI(liItem, this.uiLastIndex, this.bottomElement);
698
- } else if (parseFloat(this.bottomElement.style.height)) {
699
- this.bottomElement.style.height = parseFloat(this.bottomElement.style.height) - this.listItemHeight + 'px';
700
- this.updateUI(liItem, this.uiLastIndex, this.bottomElement);
701
- } else {
702
- this.topElement.style.height = parseFloat(this.topElement.style.height) - this.listItemHeight + 'px';
703
- this.updateUI(liItem, (this.uiFirstIndex - 1), this.topElement.nextSibling as HTMLElement);
704
- this.uiLastIndex--;
705
- this.uiFirstIndex--;
706
- }
707
- }
708
- }
709
- this.changeUiIndices(index, false);
710
- this.listDiff = Math.round(parseFloat(this.topElement.style.height) / this.listItemHeight);
711
- }
712
-
713
- private changeUiIndices(index: number, increment: boolean): void {
714
- const keys: string[] = Object.keys(this.uiIndices);
715
- for (let ind: number = 0; ind < keys.length; ind++) {
716
- this.uiIndices[keys[ind]] = this.uiIndices[keys[ind]].map((i: number) => {
717
- if (i >= index) {
718
- return increment ? ++i : --i;
719
- } else {
720
- return i;
721
- }
722
- });
723
- }
724
- }
725
-
726
- public addItem(data: DataSource[], fields: Fields, dataSource: DataSource[]): void {
727
- for (let i: number = 0; i < data.length; i++) {
728
- const currentItem: { [key: string]: object; } = data[i];
729
- // push the given data to main data array
730
- dataSource.push(currentItem);
731
- // recalculate all the group data or other datasource related things
732
- this.listViewInstance.setViewDataSource(dataSource);
733
- // render list items for first time due to no datasource present earlier
734
- if (!this.domItemCount) {
735
- // fresh rendering for first time
736
- if ((this.listViewInstance.template || this.listViewInstance.groupTemplate) && !this.isNgTemplate()) {
737
- this.listViewInstance.listBaseOption.template = null;
738
- this.listViewInstance.listBaseOption.groupTemplate = null;
739
- this.listViewInstance.listBaseOption.itemCreated = this.createUIItem.bind(this);
740
- }
741
- this.uiVirtualization();
742
- // when expected expected DOM count doesn't meet the condition we need to create and inject new item into DOM
743
- } else if (this.domItemCount < this.expectedDomItemCount) {
744
- const ds: DataSource = this.listViewInstance.findItemFromDS(dataSource, fields);
745
-
746
- if (ds instanceof Array) {
747
- if (this.listViewInstance.ulElement) {
748
- let index: number = (this.listViewInstance.curViewDS as DataSource[]).indexOf(currentItem);
749
- // inject new list item into DOM
750
- this.createAndInjectNewItem(currentItem, index);
751
-
752
- // check for group header item
753
- const curViewDS: DataSource =
754
- (this.listViewInstance.curViewDS as DataSource[])[index - 1];
755
- if (curViewDS && curViewDS.isHeader && (curViewDS.items as DataSource[]).length === 1) {
756
- // target group item index in datasource
757
- --index;
758
- // inject new group header into DOM for previously created list item
759
- this.createAndInjectNewItem(curViewDS, index);
760
- }
761
- }
762
- // recollect all the list item into collection
763
- this.listViewInstance.liCollection =
764
- <HTMLElement[] & NodeListOf<HTMLLIElement>>this.listViewInstance.curUL.querySelectorAll('li');
765
- }
766
- } else {
767
- // eslint-disable-next-line
768
- const index: number = (this.listViewInstance.curViewDS as { [key: string]: any; }[]).indexOf(currentItem);
769
- // virtually new add list item based on the scollbar position
770
- this.addUiItem(index);
771
- // check for group header item needs to be added
772
- const curViewDS: DataSource = (this.listViewInstance.curViewDS as DataSource[])[index - 1];
773
- if (curViewDS && curViewDS.isHeader && (curViewDS.items as DataSource[]).length === 1) {
774
- this.addUiItem(index - 1);
775
- }
776
- }
777
- }
778
- }
779
-
780
- private createAndInjectNewItem(itemData: DataSource, index: number): void {
781
- // generate li item for given datasource
782
- let target: HTMLElement;
783
- const li: HTMLElement[] = ListBase.createListItemFromJson(
784
- this.listViewInstance.createElement,
785
- // eslint-disable-next-line
786
- [itemData] as any,
787
- this.listViewInstance.listBaseOption,
788
- null,
789
- null,
790
- this.listViewInstance);
791
- // check for target element whether to insert before last item or group item
792
- if ((Object.keys(this.listViewInstance.curViewDS).length - 1) === index) {
793
- target = this.listViewInstance.curUL.lastElementChild as HTMLElement;
794
- } else {
795
- // target group header's first child item to append its header
796
- target = this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index + 1]) ||
797
- this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index + 2]);
798
- }
799
- if (this.listViewInstance.fields.groupBy && this.listViewInstance.curViewDS[index + 1] && this.listViewInstance.curViewDS[index + 1].isHeader) {
800
- let targetEle: HTMLElement = this.listViewInstance.getLiFromObjOrElement(this.listViewInstance.curViewDS[index - 1]);
801
- if (targetEle) {
802
- target = targetEle.nextElementSibling as HTMLElement;
803
- }
804
- }
805
- // insert before the target element
806
- this.listViewInstance.ulElement.insertBefore(li[0], target);
807
- // increment internal DOM count, last index count for new element
808
- this.domItemCount++;
809
- if (this.bottomElementHeight <= 0) {
810
- this.uiLastIndex++;
811
- }
812
- // recalculate the current item height, to avoid jumpy scroller
813
- this.refreshItemHeight();
814
- }
815
-
816
- public createUIItem(args: ItemCreatedArgs): void {
817
- const virtualTemplate: string = this.listViewInstance.template;
818
- const template: HTMLElement = this.listViewInstance.createElement('div');
819
- let commonTemplate: string = '<div class="e-text-content" role="presentation"> ' +
820
- '<span class="e-list-text"> ${' + this.listViewInstance.fields.text + '} </span></div>';
821
- if (this.listViewInstance.isReact) {
822
- commonTemplate = null;
823
- }
824
- if (this.listViewInstance.showCheckBox) {
825
- // eslint-disable-next-line
826
- (this.listViewInstance as any).renderCheckbox(args);
827
- if ((!isNullOrUndefined(this.listViewInstance.virtualCheckBox)) &&
828
- (!isNullOrUndefined(this.listViewInstance.virtualCheckBox.outerHTML))) {
829
- const div: HTMLElement = document.createElement('div');
830
- div.innerHTML = this.listViewInstance.template || commonTemplate;
831
- if (div.children && div.children[0]) {
832
- div.children[0].classList.add('e-checkbox');
833
- if (this.listViewInstance.checkBoxPosition === 'Left') {
834
- div.children[0].classList.add('e-checkbox-left');
835
- }
836
- else {
837
- div.children[0].classList.add('e-checkbox-right');
838
- }
839
- if (this.listViewInstance.checkBoxPosition === 'Left') {
840
- div.children[0].insertBefore(this.listViewInstance.virtualCheckBox, (div.childNodes[0] as HTMLElement).children[0]);
841
- } else {
842
- div.children[0].appendChild(this.listViewInstance.virtualCheckBox);
843
- }
844
- this.listViewInstance.template = div.innerHTML;
845
- }
846
- }
847
- template.innerHTML = this.listViewInstance.template;
848
- this.listViewInstance.template = virtualTemplate;
849
- } else {
850
- template.innerHTML = this.listViewInstance.template || commonTemplate;
851
- }
852
- // eslint-disable-next-line
853
- const templateElements: any = template.getElementsByTagName('*');
854
- const groupTemplate: HTMLElement = this.listViewInstance.createElement('div');
855
- if (this.listViewInstance.fields.groupBy) {
856
- groupTemplate.innerHTML = this.listViewInstance.groupTemplate || commonTemplate;
857
- }
858
- // eslint-disable-next-line
859
- let groupTemplateElements: any = groupTemplate.getElementsByTagName('*');
860
- if (args.curData.isHeader) {
861
- this.headerData = args.curData;
862
- }
863
- this.templateData = args.curData.isHeader ? (args.curData as { [key: string]: any[]; }).items[0] as DataSource :
864
- args.curData;
865
- if (!this.listViewInstance.isReact || (typeof this.listViewInstance.template == "string" && !args.item.classList.contains("e-list-group-item")) ||
866
- (typeof this.listViewInstance.groupTemplate == "string" && args.item.classList.contains("e-list-group-item"))) {
867
- args.item.innerHTML = '';
868
- }
869
- (<ElementContext>args.item).context = { data: args.curData, nodes: { flatTemplateNodes: [], groupTemplateNodes: [] } };
870
- for (let i: number = 0; i < templateElements.length; i++) {
871
- this.compileTemplate(templateElements[i] as HTMLElement, args.item, false);
872
- }
873
- for (let i: number = 0; i < groupTemplateElements.length; i++) {
874
- this.compileTemplate(groupTemplateElements[i] as HTMLElement, args.item, true);
875
- }
876
- (<ElementContext>args.item).context.template = args.curData.isHeader ? template.firstElementChild :
877
- groupTemplate.firstElementChild;
878
- (<ElementContext>args.item).context.type = args.curData.isHeader ? 'flatList' : 'groupList';
879
- const element: HTMLElement = args.curData.isHeader ? groupTemplate : template;
880
- if (element.firstElementChild) {
881
- args.item.insertBefore(element.firstElementChild, null);
882
- }
883
- }
884
-
885
- private compileTemplate(element: HTMLElement, item: HTMLElement, isHeader: boolean): void {
886
- this.textProperty(element, item, isHeader);
887
- this.classProperty(element, item, isHeader);
888
- this.attributeProperty(element, item, isHeader);
889
- }
890
-
891
- private onChange(newData: DataSource, listElement: HTMLElement): void {
892
- (<ElementContext>listElement).context.data = newData;
893
- // eslint-disable-next-line max-len
894
- const groupTemplateNodes: object[] = ((<ElementContext>listElement).context.nodes as { [key: string]: object[] }).groupTemplateNodes;
895
- // eslint-disable-next-line max-len
896
- const flatTemplateNodes: object[] = ((<ElementContext>listElement).context.nodes as { [key: string]: object[] }).flatTemplateNodes;
897
- // eslint-disable-next-line
898
- if (!isNullOrUndefined(newData.isHeader as any) && newData.isHeader as any && (<ElementContext>listElement).context.type as any === 'groupList' as any) {
899
- // eslint-disable-next-line
900
- const element: HTMLElement = listElement.firstElementChild as HTMLElement as any;
901
- detach(listElement.firstElementChild);
902
- listElement.insertBefore((<ElementContext>listElement).context.template as HTMLElement, null);
903
- (<ElementContext>listElement).context.template = element;
904
- (<ElementContext>listElement).context.type = 'flatList';
905
- for (let i: number = 0; i < groupTemplateNodes.length; i++) {
906
- // eslint-disable-next-line
907
- (groupTemplateNodes[i] as { [key: string]: Function }).onChange(newData);
908
- }
909
- } else if (!newData.isHeader && (<ElementContext>listElement).context.type === 'flatList') {
910
- const element: HTMLElement = listElement.firstElementChild as HTMLElement;
911
- detach(listElement.firstElementChild);
912
- listElement.insertBefore((<ElementContext>listElement).context.template as HTMLElement, null);
913
- (<ElementContext>listElement).context.template = element;
914
- (<ElementContext>listElement).context.type = 'groupList';
915
- for (let i: number = 0; i < flatTemplateNodes.length; i++) {
916
- // eslint-disable-next-line
917
- (flatTemplateNodes[i] as { [key: string]: Function }).onChange(newData);
918
- }
919
- } else if (!newData.isHeader) {
920
- for (let i: number = 0; i < flatTemplateNodes.length; i++) {
921
- // eslint-disable-next-line
922
- (flatTemplateNodes[i] as { [key: string]: Function }).onChange(newData);
923
- }
924
- } else {
925
- for (let i: number = 0; i < groupTemplateNodes.length; i++) {
926
- // eslint-disable-next-line
927
- (groupTemplateNodes[i] as { [key: string]: Function }).onChange(newData);
928
- }
929
- }
930
- }
931
-
932
- // eslint-disable-next-line
933
- private updateContextData(listElement: HTMLElement, node: { [key: string]: string | Function | string[] }, isHeader: Boolean): void {
934
- if (isHeader) {
935
- ((<ElementContext>listElement).context.nodes as { [key: string]: object[] }).groupTemplateNodes.push(node);
936
- } else {
937
- ((<ElementContext>listElement).context.nodes as { [key: string]: object[] }).flatTemplateNodes.push(node);
938
- }
939
- }
940
- private classProperty(element: HTMLElement, listElement: HTMLElement, isHeader: boolean): void {
941
- const regex: RegExp = new RegExp('\\${([^}]*)}', 'g');
942
- const resultantOutput: RegExpExecArray[] = [];
943
- let regexMatch: RegExpExecArray;
944
- while (regexMatch !== null) {
945
- const match: RegExpExecArray = regex.exec(element.className);
946
- resultantOutput.push(match);
947
- regexMatch = match;
948
- if (regexMatch === null) {
949
- resultantOutput.pop();
950
- }
951
- }
952
- if (resultantOutput && resultantOutput.length) {
953
- for (let i: number = 0; i < resultantOutput.length; i++) {
954
- const classNameMatch: RegExpExecArray = resultantOutput[i];
955
- // eslint-disable-next-line
956
- let classFunction: Function;
957
- if (classNameMatch[1].indexOf('?') !== -1 && classNameMatch[1].indexOf(':') !== -1) {
958
- // tslint:disable-next-line:no-function-constructor-with-string-args
959
- classFunction = new Function('data', 'return ' + classNameMatch[1].replace(/\$/g, 'data.'));
960
- } else {
961
- // tslint:disable-next-line:no-function-constructor-with-string-args
962
- classFunction = new Function('data', 'return ' + 'data.' + classNameMatch[1]);
963
- }
964
- // eslint-disable-next-line
965
- const subNode: { [key: string]: string | Function } = {};
966
- if (isHeader) {
967
- subNode.bindedvalue = classFunction(this.headerData);
968
- } else {
969
- subNode.bindedvalue = classFunction(this.templateData);
970
- }
971
- subNode.onChange = (value: DataSource) => {
972
- if (subNode.bindedvalue) {
973
- removeClass([element], (subNode.bindedvalue as string).split(' ').filter((css: string) => css));
974
- }
975
- const newCss: string = classFunction(value) as string;
976
- if (newCss) {
977
- addClass([element], (newCss).split(' ').filter((css: string) => css));
978
- }
979
- subNode.bindedvalue = newCss;
980
- };
981
- const className: string[] = classNameMatch[0].split(' ');
982
- for (let i: number = 0; i < className.length; i++) { element.classList.remove(className[i]); }
983
- if (subNode.bindedvalue) {
984
- addClass([element], (subNode.bindedvalue as string).split(' ').filter((css: string) => css));
985
- }
986
- this.updateContextData(listElement, subNode, isHeader);
987
- }
988
- }
989
- }
990
- private attributeProperty(element: HTMLElement, listElement: HTMLElement, isHeader: boolean): void {
991
- const attributeNames: string[] = [];
992
- for (let i: number = 0; i < element.attributes.length; i++) {
993
- attributeNames.push(element.attributes[i].nodeName);
994
- }
995
- if (attributeNames.indexOf('class') !== -1) {
996
- attributeNames.splice(attributeNames.indexOf('class'), 1);
997
- }
998
- for (let i: number = 0; i < attributeNames.length; i++) {
999
- const attributeName: string = attributeNames[i];
1000
- const attrNameMatch: RegExpExecArray | string[] = new RegExp('\\${([^}]*)}', 'g').exec(attributeName) || [];
1001
- const attrValueMatch: RegExpExecArray | string[] = new RegExp('\\${([^}]*)}', 'g').exec(element.getAttribute(attributeName))
1002
- || [];
1003
- // eslint-disable-next-line
1004
- let attributeNameFunction: Function;
1005
- // eslint-disable-next-line
1006
- let attributeValueFunction: Function;
1007
- if (attrNameMatch.length || attrValueMatch.length) {
1008
- if (attrNameMatch[1]) {
1009
- // tslint:disable-next-line:no-function-constructor-with-string-args
1010
- attributeNameFunction = new Function('data', 'return ' + 'data.' + attrNameMatch[1]);
1011
- }
1012
- if (attrValueMatch[1]) {
1013
- if (attrValueMatch[1].indexOf('?') !== -1 && attrValueMatch[1].indexOf(':') !== -1) {
1014
- // tslint:disable-next-line:no-function-constructor-with-string-args
1015
- attributeValueFunction = new Function('data', 'return ' + attrValueMatch[1].replace(/\$/g, 'data.'));
1016
- } else {
1017
- // tslint:disable-next-line:no-function-constructor-with-string-args
1018
- attributeValueFunction = new Function('data', 'return ' + 'data.' + attrValueMatch[1]);
1019
- }
1020
- }
1021
- // eslint-disable-next-line @typescript-eslint/ban-types
1022
- const subNode: { [key: string]: string[] | Function | string } = {};
1023
- if (isHeader) {
1024
- subNode.bindedvalue = [attrNameMatch[1] === undefined ? undefined : attributeNameFunction(this.headerData),
1025
- attrValueMatch[1] === undefined ? undefined : attributeValueFunction(this.headerData)];
1026
- } else {
1027
- subNode.bindedvalue = [attrNameMatch[1] === undefined ? undefined : attributeNameFunction(this.templateData),
1028
- attrValueMatch[1] === undefined ? undefined : attributeValueFunction(this.templateData)];
1029
- }
1030
- subNode.attrName = (subNode.bindedvalue as string[])[0] === undefined ?
1031
- attributeName : (subNode.bindedvalue as string[])[0];
1032
- subNode.onChange = (value: DataSource) => {
1033
- const bindedvalue: string = (subNode.bindedvalue as string[])[1] === undefined ?
1034
- element.getAttribute(subNode.attrName as string) : attributeValueFunction(value);
1035
- element.removeAttribute(subNode.attrName as string);
1036
- subNode.attrName = (subNode.bindedvalue as string[])[0] === undefined ? subNode.attrName : attributeNameFunction(value);
1037
- element.setAttribute(subNode.attrName as string, bindedvalue);
1038
- subNode.bindedvalue = [(subNode.bindedvalue as string[])[0] === undefined ? undefined : attributeNameFunction(value),
1039
- (subNode.bindedvalue as string[])[1] === undefined ? undefined : attributeValueFunction(value)];
1040
- };
1041
- const attributeValue: string = (subNode.bindedvalue as string[])[1] === undefined ? element.getAttribute(attributeName) :
1042
- (subNode.bindedvalue as string[])[1];
1043
- element.removeAttribute(attributeName as string);
1044
- element.setAttribute(subNode.attrName as string, attributeValue as string);
1045
- this.updateContextData(listElement, subNode, isHeader);
1046
- }
1047
- }
1048
-
1049
- }
1050
-
1051
- private textProperty(element: HTMLElement, listElement: HTMLElement, isHeader: boolean): void {
1052
- const regex: RegExp = new RegExp('\\${([^}]*)}', 'g');
1053
- const resultantOutput: RegExpExecArray[] = [];
1054
- let regexMatch: RegExpExecArray;
1055
- while (regexMatch !== null) {
1056
- const match: RegExpExecArray = regex.exec(element.innerText);
1057
- resultantOutput.push(match);
1058
- regexMatch = match;
1059
- if (regexMatch === null) {
1060
- resultantOutput.pop();
1061
- }
1062
- }
1063
- const isChildHasTextContent: boolean = Array.prototype.some.call(element.children, (element: HTMLElement) => {
1064
- if (new RegExp('\\${([^}]*)}', 'g').exec(element.innerText)) {
1065
- return true;
1066
-
1067
- } else {
1068
- return false;
1069
- }
1070
- });
1071
- if (resultantOutput && resultantOutput.length && !isChildHasTextContent) {
1072
- for (let i: number = 0; i < resultantOutput.length; i++) {
1073
- const textPropertyMatch: RegExpExecArray = resultantOutput[i];
1074
- // eslint-disable-next-line
1075
- const subNode: { [key: string]: string | Function } = {};
1076
- // eslint-disable-next-line
1077
- let textFunction: Function;
1078
- if (textPropertyMatch[1].indexOf('?') !== -1 && textPropertyMatch[1].indexOf(':') !== -1) {
1079
- // tslint:disable-next-line:no-function-constructor-with-string-args
1080
- textFunction = new Function('data', 'return ' + textPropertyMatch[1].replace(/\$/g, 'data.'));
1081
- } else {
1082
- // tslint:disable-next-line:no-function-constructor-with-string-args
1083
- textFunction = new Function('data', 'return ' + 'data.' + textPropertyMatch[1]);
1084
- }
1085
- if (isHeader) {
1086
- subNode.bindedvalue = textFunction(this.headerData);
1087
- } else {
1088
- subNode.bindedvalue = textFunction(this.templateData);
1089
- }
1090
- subNode.onChange = (value: DataSource) => {
1091
- element.innerText = element.innerText.replace(subNode.bindedvalue as string, textFunction(value));
1092
- subNode.bindedvalue = textFunction(value);
1093
- };
1094
- element.innerText = element.innerText.replace(textPropertyMatch[0], subNode.bindedvalue as string);
1095
- this.updateContextData(listElement, subNode, isHeader);
1096
- }
1097
- }
1098
- }
1099
-
1100
- public reRenderUiVirtualization(): void {
1101
- this.wireScrollEvent(true);
1102
- if (this.listViewInstance.contentContainer) {
1103
- detach(this.listViewInstance.contentContainer);
1104
- }
1105
- this.listViewInstance.preRender();
1106
- // resetting the dom count to 0, to avoid edge case of dataSource suddenly becoming zero
1107
- // and then manually adding item using addItem API
1108
- this.domItemCount = 0;
1109
- this.listViewInstance.header();
1110
- this.listViewInstance.setLocalData();
1111
- }
1112
-
1113
- private updateUI(element: HTMLElement, index: number, targetElement?: HTMLElement): void {
1114
- // eslint-disable-next-line @typescript-eslint/ban-types
1115
- const onChange: Function = this.isNgTemplate() ? this.onNgChange : this.onChange;
1116
- if (this.listViewInstance.template || this.listViewInstance.groupTemplate) {
1117
- const curViewDS: DataSource = (this.listViewInstance.curViewDS as DataSource[])[index];
1118
- // eslint-disable-next-line
1119
- element.dataset.uid = (curViewDS[this.listViewInstance.fields.id]) as any ?
1120
- // eslint-disable-next-line
1121
- (curViewDS[this.listViewInstance.fields.id]) as any : ListBase.generateId() as any;
1122
- onChange(curViewDS, element, this);
1123
- } else {
1124
- this.updateUiContent(element, index);
1125
- }
1126
- this.changeElementAttributes(element, index);
1127
- if (targetElement) {
1128
- this.listViewInstance.ulElement.insertBefore(element, targetElement);
1129
- }
1130
- }
1131
-
1132
- private onNgChange(newData: DataSource, listElement: ElementContext, virtualThis: Virtualization): void {
1133
- // compile given target element with template for new data
1134
- // eslint-disable-next-line
1135
- const templateCompiler: Function = compile(virtualThis.listViewInstance.template);
1136
- const resultElement: NodeList = templateCompiler(newData);
1137
- while (listElement.lastChild) {
1138
- listElement.removeChild(listElement.lastChild);
1139
- }
1140
- listElement.appendChild(resultElement[0]);
1141
- }
1142
-
1143
- public getModuleName(): string {
1144
- return 'virtualization';
1145
- }
1146
-
1147
- public destroy(): void {
1148
- this.wireScrollEvent(true);
1149
- }
1150
- }
1151
-
1152
- interface DataSource {
1153
- [key: string]: object;
1154
- }
1155
-