ng-virtual-list 20.4.0 → 20.4.2
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.
- package/README.md +2 -2
- package/fesm2022/ng-virtual-list.mjs +202 -193
- package/fesm2022/ng-virtual-list.mjs.map +1 -1
- package/index.d.ts +201 -451
- package/package.json +1 -1
- package/esm2022/lib/components/ng-virtual-list-item.component.mjs +0 -132
- package/esm2022/lib/const/index.mjs +0 -44
- package/esm2022/lib/enums/direction.mjs +0 -2
- package/esm2022/lib/enums/directions.mjs +0 -18
- package/esm2022/lib/enums/index.mjs +0 -4
- package/esm2022/lib/enums/snapping-method.mjs +0 -2
- package/esm2022/lib/enums/snapping-methods.mjs +0 -18
- package/esm2022/lib/models/base-virtual-list-item-component.mjs +0 -9
- package/esm2022/lib/models/collection.model.mjs +0 -3
- package/esm2022/lib/models/component.model.mjs +0 -2
- package/esm2022/lib/models/index.mjs +0 -3
- package/esm2022/lib/models/item.model.mjs +0 -2
- package/esm2022/lib/models/render-collection.model.mjs +0 -3
- package/esm2022/lib/models/render-item-config.model.mjs +0 -2
- package/esm2022/lib/models/render-item.model.mjs +0 -3
- package/esm2022/lib/models/scroll-direction.model.mjs +0 -2
- package/esm2022/lib/models/scroll-event.model.mjs +0 -2
- package/esm2022/lib/models/sticky-map.model.mjs +0 -2
- package/esm2022/lib/ng-virtual-list.component.mjs +0 -537
- package/esm2022/lib/ng-virtual-list.module.mjs +0 -20
- package/esm2022/lib/types/id.mjs +0 -2
- package/esm2022/lib/types/index.mjs +0 -2
- package/esm2022/lib/types/rect.mjs +0 -2
- package/esm2022/lib/types/size.mjs +0 -2
- package/esm2022/lib/utils/browser.mjs +0 -3
- package/esm2022/lib/utils/buffer-interpolation.mjs +0 -27
- package/esm2022/lib/utils/cacheMap.mjs +0 -168
- package/esm2022/lib/utils/debounce.mjs +0 -31
- package/esm2022/lib/utils/eventEmitter.mjs +0 -105
- package/esm2022/lib/utils/index.mjs +0 -9
- package/esm2022/lib/utils/isDirection.mjs +0 -15
- package/esm2022/lib/utils/scrollEvent.mjs +0 -42
- package/esm2022/lib/utils/snapping-method.mjs +0 -9
- package/esm2022/lib/utils/toggleClassName.mjs +0 -15
- package/esm2022/lib/utils/trackBox.mjs +0 -754
- package/esm2022/lib/utils/tracker.mjs +0 -135
- package/esm2022/ng-virtual-list.mjs +0 -5
- package/esm2022/public-api.mjs +0 -10
- package/lib/components/ng-virtual-list-item.component.d.ts +0 -36
- package/lib/const/index.d.ts +0 -42
- package/lib/enums/direction.d.ts +0 -8
- package/lib/enums/directions.d.ts +0 -16
- package/lib/enums/index.d.ts +0 -7
- package/lib/enums/snapping-method.d.ts +0 -10
- package/lib/enums/snapping-methods.d.ts +0 -16
- package/lib/models/base-virtual-list-item-component.d.ts +0 -25
- package/lib/models/collection.model.d.ts +0 -9
- package/lib/models/component.model.d.ts +0 -3
- package/lib/models/index.d.ts +0 -9
- package/lib/models/item.model.d.ts +0 -14
- package/lib/models/render-collection.model.d.ts +0 -9
- package/lib/models/render-item-config.model.d.ts +0 -41
- package/lib/models/render-item.model.d.ts +0 -33
- package/lib/models/scroll-direction.model.d.ts +0 -5
- package/lib/models/scroll-event.model.d.ts +0 -50
- package/lib/models/sticky-map.model.d.ts +0 -14
- package/lib/ng-virtual-list.component.d.ts +0 -171
- package/lib/ng-virtual-list.module.d.ts +0 -9
- package/lib/types/id.d.ts +0 -7
- package/lib/types/index.d.ts +0 -4
- package/lib/types/rect.d.ts +0 -17
- package/lib/types/size.d.ts +0 -16
- package/lib/utils/browser.d.ts +0 -2
- package/lib/utils/buffer-interpolation.d.ts +0 -5
- package/lib/utils/cacheMap.d.ts +0 -60
- package/lib/utils/debounce.d.ts +0 -16
- package/lib/utils/eventEmitter.d.ts +0 -40
- package/lib/utils/index.d.ts +0 -9
- package/lib/utils/isDirection.d.ts +0 -8
- package/lib/utils/scrollEvent.d.ts +0 -39
- package/lib/utils/snapping-method.d.ts +0 -3
- package/lib/utils/toggleClassName.d.ts +0 -7
- package/lib/utils/trackBox.d.ts +0 -204
- package/lib/utils/tracker.d.ts +0 -46
- package/public-api.d.ts +0 -6
package/README.md
CHANGED
|
@@ -492,8 +492,8 @@ Methods
|
|
|
492
492
|
| 19.x | 19.4.0 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.4.0](https://www.npmjs.com/package/ng-virtual-list/v/19.4.0) |
|
|
493
493
|
| 18.x | 18.4.0 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.4.0](https://www.npmjs.com/package/ng-virtual-list/v/18.4.0) |
|
|
494
494
|
| 17.x | 17.4.0 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.4.0](https://www.npmjs.com/package/ng-virtual-list/v/17.4.0) |
|
|
495
|
-
| 16.x | 16.4.
|
|
496
|
-
| 15.x | 15.4.
|
|
495
|
+
| 16.x | 16.4.1 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.4.1](https://www.npmjs.com/package/ng-virtual-list/v/16.4.1) |
|
|
496
|
+
| 15.x | 15.4.1 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.4.1](https://www.npmjs.com/package/ng-virtual-list/v/15.4.1) |
|
|
497
497
|
| 14.x | 14.4.0 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.4.0](https://www.npmjs.com/package/ng-virtual-list/v/14.4.0) |
|
|
498
498
|
|
|
499
499
|
<br/>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { signal, inject, ElementRef, ChangeDetectionStrategy, Component,
|
|
4
|
+
import { signal, inject, ElementRef, viewChild, ChangeDetectionStrategy, Component, output, input, ViewContainerRef, ViewChild, ViewEncapsulation } from '@angular/core';
|
|
5
5
|
import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
6
6
|
import { tap, filter, map, combineLatest, distinctUntilChanged, switchMap, of } from 'rxjs';
|
|
7
7
|
|
|
@@ -85,7 +85,7 @@ const CLASS_LIST_HORIZONTAL = 'horizontal';
|
|
|
85
85
|
|
|
86
86
|
/**
|
|
87
87
|
* Virtual List Item Interface
|
|
88
|
-
* @link https://github.com/DjonnyX/ng-virtual-list/blob/
|
|
88
|
+
* @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/models/base-virtual-list-item-component.ts
|
|
89
89
|
* @author Evgenii Grebennikov
|
|
90
90
|
* @email djonnyx@gmail.com
|
|
91
91
|
*/
|
|
@@ -137,6 +137,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
|
|
|
137
137
|
get element() {
|
|
138
138
|
return this._elementRef.nativeElement;
|
|
139
139
|
}
|
|
140
|
+
_listItemRef = viewChild('listItem');
|
|
140
141
|
constructor() {
|
|
141
142
|
super();
|
|
142
143
|
this._id = NgVirtualListItemComponent.__nextId = NgVirtualListItemComponent.__nextId === Number.MAX_SAFE_INTEGER
|
|
@@ -206,7 +207,7 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
|
|
|
206
207
|
styles.zIndex = HIDDEN_ZINDEX;
|
|
207
208
|
}
|
|
208
209
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
209
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: NgVirtualListItemComponent, isStandalone: true, selector: "ng-virtual-list-item", host: { classAttribute: "ngvl__item" }, usesInheritance: true, ngImport: i0, template: "@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n 'snapped-out': item.config.snappedOut}\">\r\n @if (renderer) {\r\n <ng-container [ngTemplateOutlet]=\"renderer\"\r\n [ngTemplateOutletContext]=\"{data: item.data || {}, config: item.config}\" />\r\n }\r\n </li>\r\n}", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
210
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: NgVirtualListItemComponent, isStandalone: true, selector: "ng-virtual-list-item", host: { classAttribute: "ngvl__item" }, viewQueries: [{ propertyName: "_listItemRef", first: true, predicate: ["listItem"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n 'snapped-out': item.config.snappedOut}\">\r\n @if (renderer) {\r\n <ng-container [ngTemplateOutlet]=\"renderer\"\r\n [ngTemplateOutletContext]=\"{data: item.data || {}, config: item.config}\" />\r\n }\r\n </li>\r\n}", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
210
211
|
}
|
|
211
212
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: NgVirtualListItemComponent, decorators: [{
|
|
212
213
|
type: Component,
|
|
@@ -215,20 +216,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
|
|
|
215
216
|
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let item = data();\r\n@let renderer = itemRenderer();\r\n\r\n@if (item) {\r\n <li #listItem part=\"item\" class=\"ngvl-item__container\" [ngClass]=\"{'snapped': item.config.snapped,\r\n 'snapped-out': item.config.snappedOut}\">\r\n @if (renderer) {\r\n <ng-container [ngTemplateOutlet]=\"renderer\"\r\n [ngTemplateOutletContext]=\"{data: item.data || {}, config: item.config}\" />\r\n }\r\n </li>\r\n}", styles: [":host{display:block;position:absolute;left:0;top:0;box-sizing:border-box;overflow:hidden}.ngvl-item__container{margin:0;padding:0;overflow:hidden;background-color:#fff;width:inherit;height:inherit}\n"] }]
|
|
216
217
|
}], ctorParameters: () => [] });
|
|
217
218
|
|
|
218
|
-
const HORIZONTAL_ALIASES = [Directions.HORIZONTAL, 'horizontal'], VERTICAL_ALIASES = [Directions.VERTICAL, 'vertical'];
|
|
219
|
-
/**
|
|
220
|
-
* Determines the axis membership of a virtual list
|
|
221
|
-
* @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/isDirection.ts
|
|
222
|
-
* @author Evgenii Grebennikov
|
|
223
|
-
* @email djonnyx@gmail.com
|
|
224
|
-
*/
|
|
225
|
-
const isDirection = (src, expected) => {
|
|
226
|
-
if (HORIZONTAL_ALIASES.includes(expected)) {
|
|
227
|
-
return HORIZONTAL_ALIASES.includes(src);
|
|
228
|
-
}
|
|
229
|
-
return VERTICAL_ALIASES.includes(src);
|
|
230
|
-
};
|
|
231
|
-
|
|
232
219
|
/**
|
|
233
220
|
* Simple debounce function.
|
|
234
221
|
* @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/debounce.ts
|
|
@@ -276,137 +263,44 @@ const toggleClassName = (el, className, removeClassName) => {
|
|
|
276
263
|
};
|
|
277
264
|
|
|
278
265
|
/**
|
|
279
|
-
*
|
|
280
|
-
* @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/
|
|
266
|
+
* Scroll event.
|
|
267
|
+
* @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/scrollEvent.ts
|
|
281
268
|
* @author Evgenii Grebennikov
|
|
282
269
|
* @email djonnyx@gmail.com
|
|
283
270
|
*/
|
|
284
|
-
class
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
get
|
|
303
|
-
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
this.
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
this.
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
return;
|
|
318
|
-
}
|
|
319
|
-
const idPropName = this._trackingPropertyName, untrackedItems = [...components], isDown = direction === 0 || direction === 1;
|
|
320
|
-
let isRegularSnapped = false;
|
|
321
|
-
for (let i = isDown ? 0 : items.length - 1, l = isDown ? items.length : 0; isDown ? i < l : i >= l; isDown ? i++ : i--) {
|
|
322
|
-
const item = items[i], itemTrackingProperty = item[idPropName];
|
|
323
|
-
if (this._trackMap) {
|
|
324
|
-
if (this._trackMap.hasOwnProperty(itemTrackingProperty)) {
|
|
325
|
-
const diId = this._trackMap[itemTrackingProperty], compIndex = this._displayObjectIndexMapById[diId], comp = components[compIndex];
|
|
326
|
-
const compId = comp?.instance?.id;
|
|
327
|
-
if (comp !== undefined && compId === diId) {
|
|
328
|
-
const indexByUntrackedItems = untrackedItems.findIndex(v => {
|
|
329
|
-
return v.instance.id === compId;
|
|
330
|
-
});
|
|
331
|
-
if (indexByUntrackedItems > -1) {
|
|
332
|
-
if (snapedComponent) {
|
|
333
|
-
if (item['config']['snapped'] || item['config']['snappedOut']) {
|
|
334
|
-
isRegularSnapped = true;
|
|
335
|
-
snapedComponent.instance.item = item;
|
|
336
|
-
snapedComponent.instance.show();
|
|
337
|
-
}
|
|
338
|
-
}
|
|
339
|
-
comp.instance.item = item;
|
|
340
|
-
if (snapedComponent) {
|
|
341
|
-
if (item['config']['snapped'] || item['config']['snappedOut']) {
|
|
342
|
-
comp.instance.hide();
|
|
343
|
-
}
|
|
344
|
-
else {
|
|
345
|
-
comp.instance.show();
|
|
346
|
-
}
|
|
347
|
-
}
|
|
348
|
-
else {
|
|
349
|
-
comp.instance.show();
|
|
350
|
-
}
|
|
351
|
-
untrackedItems.splice(indexByUntrackedItems, 1);
|
|
352
|
-
continue;
|
|
353
|
-
}
|
|
354
|
-
}
|
|
355
|
-
delete this._trackMap[itemTrackingProperty];
|
|
356
|
-
}
|
|
357
|
-
}
|
|
358
|
-
if (untrackedItems.length > 0) {
|
|
359
|
-
const comp = untrackedItems.shift(), item = items[i];
|
|
360
|
-
if (comp) {
|
|
361
|
-
if (snapedComponent) {
|
|
362
|
-
if (item['config']['snapped'] || item['config']['snappedOut']) {
|
|
363
|
-
isRegularSnapped = true;
|
|
364
|
-
snapedComponent.instance.item = item;
|
|
365
|
-
snapedComponent.instance.show();
|
|
366
|
-
}
|
|
367
|
-
}
|
|
368
|
-
comp.instance.item = item;
|
|
369
|
-
if (snapedComponent) {
|
|
370
|
-
if (item['config']['snapped'] || item['config']['snappedOut']) {
|
|
371
|
-
comp.instance.hide();
|
|
372
|
-
}
|
|
373
|
-
else {
|
|
374
|
-
comp.instance.show();
|
|
375
|
-
}
|
|
376
|
-
}
|
|
377
|
-
else {
|
|
378
|
-
comp.instance.show();
|
|
379
|
-
}
|
|
380
|
-
if (this._trackMap) {
|
|
381
|
-
this._trackMap[itemTrackingProperty] = comp.instance.id;
|
|
382
|
-
}
|
|
383
|
-
}
|
|
384
|
-
}
|
|
385
|
-
}
|
|
386
|
-
if (untrackedItems.length) {
|
|
387
|
-
for (let i = 0, l = untrackedItems.length; i < l; i++) {
|
|
388
|
-
const comp = untrackedItems[i];
|
|
389
|
-
comp.instance.hide();
|
|
390
|
-
}
|
|
391
|
-
}
|
|
392
|
-
if (!isRegularSnapped) {
|
|
393
|
-
if (snapedComponent) {
|
|
394
|
-
snapedComponent.instance.item = null;
|
|
395
|
-
snapedComponent.instance.hide();
|
|
396
|
-
}
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
untrackComponentByIdProperty(component) {
|
|
400
|
-
if (!component) {
|
|
401
|
-
return;
|
|
402
|
-
}
|
|
403
|
-
const propertyIdName = this._trackingPropertyName;
|
|
404
|
-
if (this._trackMap && component[propertyIdName] !== undefined) {
|
|
405
|
-
delete this._trackMap[propertyIdName];
|
|
406
|
-
}
|
|
407
|
-
}
|
|
408
|
-
dispose() {
|
|
409
|
-
this._trackMap = null;
|
|
271
|
+
class ScrollEvent {
|
|
272
|
+
_direction = 1;
|
|
273
|
+
get direction() { return this._direction; }
|
|
274
|
+
_scrollSize = 0;
|
|
275
|
+
get scrollSize() { return this._scrollSize; }
|
|
276
|
+
_scrollWeight = 0;
|
|
277
|
+
get scrollWeight() { return this._scrollWeight; }
|
|
278
|
+
_isVertical = true;
|
|
279
|
+
get isVertical() { return this._isVertical; }
|
|
280
|
+
_listSize = 0;
|
|
281
|
+
get listSize() { return this._listSize; }
|
|
282
|
+
_size = 0;
|
|
283
|
+
get size() { return this._size; }
|
|
284
|
+
_isStart = true;
|
|
285
|
+
get isStart() { return this._isStart; }
|
|
286
|
+
_isEnd = false;
|
|
287
|
+
get isEnd() { return this._isEnd; }
|
|
288
|
+
_delta = 0;
|
|
289
|
+
get delta() { return this._delta; }
|
|
290
|
+
_scrollDelta = 0;
|
|
291
|
+
get scrollDelta() { return this._scrollDelta; }
|
|
292
|
+
constructor(params) {
|
|
293
|
+
const { direction, isVertical, container, list, delta, scrollDelta } = params;
|
|
294
|
+
this._direction = direction;
|
|
295
|
+
this._isVertical = isVertical;
|
|
296
|
+
this._scrollSize = isVertical ? container.scrollTop : container.scrollLeft;
|
|
297
|
+
this._scrollWeight = isVertical ? container.scrollHeight : container.scrollWidth;
|
|
298
|
+
this._listSize = isVertical ? list.offsetHeight : list.offsetWidth;
|
|
299
|
+
this._size = isVertical ? container.offsetHeight : container.offsetWidth;
|
|
300
|
+
this._isEnd = (this._scrollSize + this._size) === this._scrollWeight;
|
|
301
|
+
this._delta = delta;
|
|
302
|
+
this._scrollDelta = scrollDelta;
|
|
303
|
+
this._isStart = this._scrollSize === 0;
|
|
410
304
|
}
|
|
411
305
|
}
|
|
412
306
|
|
|
@@ -681,6 +575,141 @@ class CacheMap extends EventEmitter {
|
|
|
681
575
|
}
|
|
682
576
|
}
|
|
683
577
|
|
|
578
|
+
/**
|
|
579
|
+
* Tracks display items by property
|
|
580
|
+
* @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/tracker.ts
|
|
581
|
+
* @author Evgenii Grebennikov
|
|
582
|
+
* @email djonnyx@gmail.com
|
|
583
|
+
*/
|
|
584
|
+
class Tracker {
|
|
585
|
+
/**
|
|
586
|
+
* display objects dictionary of indexes by id
|
|
587
|
+
*/
|
|
588
|
+
_displayObjectIndexMapById = {};
|
|
589
|
+
set displayObjectIndexMapById(v) {
|
|
590
|
+
if (this._displayObjectIndexMapById === v) {
|
|
591
|
+
return;
|
|
592
|
+
}
|
|
593
|
+
this._displayObjectIndexMapById = v;
|
|
594
|
+
}
|
|
595
|
+
get displayObjectIndexMapById() {
|
|
596
|
+
return this._displayObjectIndexMapById;
|
|
597
|
+
}
|
|
598
|
+
/**
|
|
599
|
+
* Dictionary displayItems propertyNameId by items propertyNameId
|
|
600
|
+
*/
|
|
601
|
+
_trackMap = {};
|
|
602
|
+
get trackMap() {
|
|
603
|
+
return this._trackMap;
|
|
604
|
+
}
|
|
605
|
+
_trackingPropertyName;
|
|
606
|
+
set trackingPropertyName(v) {
|
|
607
|
+
this._trackingPropertyName = v;
|
|
608
|
+
}
|
|
609
|
+
constructor(trackingPropertyName) {
|
|
610
|
+
this._trackingPropertyName = trackingPropertyName;
|
|
611
|
+
}
|
|
612
|
+
/**
|
|
613
|
+
* tracking by propName
|
|
614
|
+
*/
|
|
615
|
+
track(items, components, snapedComponent, direction) {
|
|
616
|
+
if (!items) {
|
|
617
|
+
return;
|
|
618
|
+
}
|
|
619
|
+
const idPropName = this._trackingPropertyName, untrackedItems = [...components], isDown = direction === 0 || direction === 1;
|
|
620
|
+
let isRegularSnapped = false;
|
|
621
|
+
for (let i = isDown ? 0 : items.length - 1, l = isDown ? items.length : 0; isDown ? i < l : i >= l; isDown ? i++ : i--) {
|
|
622
|
+
const item = items[i], itemTrackingProperty = item[idPropName];
|
|
623
|
+
if (this._trackMap) {
|
|
624
|
+
if (this._trackMap.hasOwnProperty(itemTrackingProperty)) {
|
|
625
|
+
const diId = this._trackMap[itemTrackingProperty], compIndex = this._displayObjectIndexMapById[diId], comp = components[compIndex];
|
|
626
|
+
const compId = comp?.instance?.id;
|
|
627
|
+
if (comp !== undefined && compId === diId) {
|
|
628
|
+
const indexByUntrackedItems = untrackedItems.findIndex(v => {
|
|
629
|
+
return v.instance.id === compId;
|
|
630
|
+
});
|
|
631
|
+
if (indexByUntrackedItems > -1) {
|
|
632
|
+
if (snapedComponent) {
|
|
633
|
+
if (item['config']['snapped'] || item['config']['snappedOut']) {
|
|
634
|
+
isRegularSnapped = true;
|
|
635
|
+
snapedComponent.instance.item = item;
|
|
636
|
+
snapedComponent.instance.show();
|
|
637
|
+
}
|
|
638
|
+
}
|
|
639
|
+
comp.instance.item = item;
|
|
640
|
+
if (snapedComponent) {
|
|
641
|
+
if (item['config']['snapped'] || item['config']['snappedOut']) {
|
|
642
|
+
comp.instance.hide();
|
|
643
|
+
}
|
|
644
|
+
else {
|
|
645
|
+
comp.instance.show();
|
|
646
|
+
}
|
|
647
|
+
}
|
|
648
|
+
else {
|
|
649
|
+
comp.instance.show();
|
|
650
|
+
}
|
|
651
|
+
untrackedItems.splice(indexByUntrackedItems, 1);
|
|
652
|
+
continue;
|
|
653
|
+
}
|
|
654
|
+
}
|
|
655
|
+
delete this._trackMap[itemTrackingProperty];
|
|
656
|
+
}
|
|
657
|
+
}
|
|
658
|
+
if (untrackedItems.length > 0) {
|
|
659
|
+
const comp = untrackedItems.shift(), item = items[i];
|
|
660
|
+
if (comp) {
|
|
661
|
+
if (snapedComponent) {
|
|
662
|
+
if (item['config']['snapped'] || item['config']['snappedOut']) {
|
|
663
|
+
isRegularSnapped = true;
|
|
664
|
+
snapedComponent.instance.item = item;
|
|
665
|
+
snapedComponent.instance.show();
|
|
666
|
+
}
|
|
667
|
+
}
|
|
668
|
+
comp.instance.item = item;
|
|
669
|
+
if (snapedComponent) {
|
|
670
|
+
if (item['config']['snapped'] || item['config']['snappedOut']) {
|
|
671
|
+
comp.instance.hide();
|
|
672
|
+
}
|
|
673
|
+
else {
|
|
674
|
+
comp.instance.show();
|
|
675
|
+
}
|
|
676
|
+
}
|
|
677
|
+
else {
|
|
678
|
+
comp.instance.show();
|
|
679
|
+
}
|
|
680
|
+
if (this._trackMap) {
|
|
681
|
+
this._trackMap[itemTrackingProperty] = comp.instance.id;
|
|
682
|
+
}
|
|
683
|
+
}
|
|
684
|
+
}
|
|
685
|
+
}
|
|
686
|
+
if (untrackedItems.length) {
|
|
687
|
+
for (let i = 0, l = untrackedItems.length; i < l; i++) {
|
|
688
|
+
const comp = untrackedItems[i];
|
|
689
|
+
comp.instance.hide();
|
|
690
|
+
}
|
|
691
|
+
}
|
|
692
|
+
if (!isRegularSnapped) {
|
|
693
|
+
if (snapedComponent) {
|
|
694
|
+
snapedComponent.instance.item = null;
|
|
695
|
+
snapedComponent.instance.hide();
|
|
696
|
+
}
|
|
697
|
+
}
|
|
698
|
+
}
|
|
699
|
+
untrackComponentByIdProperty(component) {
|
|
700
|
+
if (!component) {
|
|
701
|
+
return;
|
|
702
|
+
}
|
|
703
|
+
const propertyIdName = this._trackingPropertyName;
|
|
704
|
+
if (this._trackMap && component[propertyIdName] !== undefined) {
|
|
705
|
+
delete this._trackMap[propertyIdName];
|
|
706
|
+
}
|
|
707
|
+
}
|
|
708
|
+
dispose() {
|
|
709
|
+
this._trackMap = null;
|
|
710
|
+
}
|
|
711
|
+
}
|
|
712
|
+
|
|
684
713
|
const DEFAULT_EXTRA = {
|
|
685
714
|
extremumThreshold: 2,
|
|
686
715
|
bufferSize: 10,
|
|
@@ -757,11 +786,16 @@ class TrackBox extends CacheMap {
|
|
|
757
786
|
* Set the trackBy property
|
|
758
787
|
*/
|
|
759
788
|
set trackingPropertyName(v) {
|
|
760
|
-
this._tracker.trackingPropertyName = v;
|
|
789
|
+
this._trackingPropertyName = this._tracker.trackingPropertyName = v;
|
|
761
790
|
}
|
|
791
|
+
_trackingPropertyName = TRACK_BY_PROPERTY_NAME;
|
|
762
792
|
constructor(trackingPropertyName) {
|
|
763
793
|
super();
|
|
764
|
-
this.
|
|
794
|
+
this._trackingPropertyName = trackingPropertyName;
|
|
795
|
+
this.initialize();
|
|
796
|
+
}
|
|
797
|
+
initialize() {
|
|
798
|
+
this._tracker = new Tracker(this._trackingPropertyName);
|
|
765
799
|
}
|
|
766
800
|
set(id, bounds) {
|
|
767
801
|
if (this._map.has(id)) {
|
|
@@ -1303,6 +1337,9 @@ class TrackBox extends CacheMap {
|
|
|
1303
1337
|
if (snap) {
|
|
1304
1338
|
const startIndex = itemsFromStartToScrollEnd + itemsOnDisplayLength - 1;
|
|
1305
1339
|
for (let i = Math.min(startIndex, totalLength > 0 ? totalLength - 1 : 0), l = totalLength; i < l; i++) {
|
|
1340
|
+
if (!items[i]) {
|
|
1341
|
+
continue;
|
|
1342
|
+
}
|
|
1306
1343
|
const id = items[i].id, sticky = stickyMap[id], size = dynamicSize
|
|
1307
1344
|
? this.get(id)?.[sizeProperty] || typicalItemSize
|
|
1308
1345
|
: typicalItemSize;
|
|
@@ -1337,6 +1374,9 @@ class TrackBox extends CacheMap {
|
|
|
1337
1374
|
if (i >= totalLength) {
|
|
1338
1375
|
break;
|
|
1339
1376
|
}
|
|
1377
|
+
if (!items[i]) {
|
|
1378
|
+
continue;
|
|
1379
|
+
}
|
|
1340
1380
|
const id = items[i].id, size = dynamicSize ? this.get(id)?.[sizeProperty] || typicalItemSize : typicalItemSize;
|
|
1341
1381
|
if (id !== stickyItem?.id && id !== endStickyItem?.id) {
|
|
1342
1382
|
const snapped = snap && (stickyMap[id] === 1 && pos <= scrollSize || stickyMap[id] === 2 && pos >= scrollSize + boundsSize - size), measures = {
|
|
@@ -1455,48 +1495,6 @@ class TrackBox extends CacheMap {
|
|
|
1455
1495
|
}
|
|
1456
1496
|
}
|
|
1457
1497
|
|
|
1458
|
-
/**
|
|
1459
|
-
* Scroll event.
|
|
1460
|
-
* @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/scrollEvent.ts
|
|
1461
|
-
* @author Evgenii Grebennikov
|
|
1462
|
-
* @email djonnyx@gmail.com
|
|
1463
|
-
*/
|
|
1464
|
-
class ScrollEvent {
|
|
1465
|
-
_direction = 1;
|
|
1466
|
-
get direction() { return this._direction; }
|
|
1467
|
-
_scrollSize = 0;
|
|
1468
|
-
get scrollSize() { return this._scrollSize; }
|
|
1469
|
-
_scrollWeight = 0;
|
|
1470
|
-
get scrollWeight() { return this._scrollWeight; }
|
|
1471
|
-
_isVertical = true;
|
|
1472
|
-
get isVertical() { return this._isVertical; }
|
|
1473
|
-
_listSize = 0;
|
|
1474
|
-
get listSize() { return this._listSize; }
|
|
1475
|
-
_size = 0;
|
|
1476
|
-
get size() { return this._size; }
|
|
1477
|
-
_isStart = true;
|
|
1478
|
-
get isStart() { return this._isStart; }
|
|
1479
|
-
_isEnd = false;
|
|
1480
|
-
get isEnd() { return this._isEnd; }
|
|
1481
|
-
_delta = 0;
|
|
1482
|
-
get delta() { return this._delta; }
|
|
1483
|
-
_scrollDelta = 0;
|
|
1484
|
-
get scrollDelta() { return this._scrollDelta; }
|
|
1485
|
-
constructor(params) {
|
|
1486
|
-
const { direction, isVertical, container, list, delta, scrollDelta } = params;
|
|
1487
|
-
this._direction = direction;
|
|
1488
|
-
this._isVertical = isVertical;
|
|
1489
|
-
this._scrollSize = isVertical ? container.scrollTop : container.scrollLeft;
|
|
1490
|
-
this._scrollWeight = isVertical ? container.scrollHeight : container.scrollWidth;
|
|
1491
|
-
this._listSize = isVertical ? list.offsetHeight : list.offsetWidth;
|
|
1492
|
-
this._size = isVertical ? container.offsetHeight : container.offsetWidth;
|
|
1493
|
-
this._isEnd = (this._scrollSize + this._size) === this._scrollWeight;
|
|
1494
|
-
this._delta = delta;
|
|
1495
|
-
this._scrollDelta = scrollDelta;
|
|
1496
|
-
this._isStart = this._scrollSize === 0;
|
|
1497
|
-
}
|
|
1498
|
-
}
|
|
1499
|
-
|
|
1500
1498
|
const ADVANCED_PATTERNS = [SnappingMethods.ADVANCED, 'advanced'], DEFAULT_PATTERN = [SnappingMethods.NORMAL, 'normal'];
|
|
1501
1499
|
const isSnappingMethodAdvenced = (method) => {
|
|
1502
1500
|
return ADVANCED_PATTERNS.includes(method);
|
|
@@ -1508,6 +1506,20 @@ const isSnappingMethodDefault = (method) => {
|
|
|
1508
1506
|
const IS_FIREFOX = navigator.userAgent.toLowerCase().includes('firefox');
|
|
1509
1507
|
const FIREFOX_SCROLLBAR_OVERLAP_SIZE = 12;
|
|
1510
1508
|
|
|
1509
|
+
const HORIZONTAL_ALIASES = [Directions.HORIZONTAL, 'horizontal'], VERTICAL_ALIASES = [Directions.VERTICAL, 'vertical'];
|
|
1510
|
+
/**
|
|
1511
|
+
* Determines the axis membership of a virtual list
|
|
1512
|
+
* @link https://github.com/DjonnyX/ng-virtual-list/blob/20.x/projects/ng-virtual-list/src/lib/utils/isDirection.ts
|
|
1513
|
+
* @author Evgenii Grebennikov
|
|
1514
|
+
* @email djonnyx@gmail.com
|
|
1515
|
+
*/
|
|
1516
|
+
const isDirection = (src, expected) => {
|
|
1517
|
+
if (HORIZONTAL_ALIASES.includes(expected)) {
|
|
1518
|
+
return HORIZONTAL_ALIASES.includes(src);
|
|
1519
|
+
}
|
|
1520
|
+
return VERTICAL_ALIASES.includes(src);
|
|
1521
|
+
};
|
|
1522
|
+
|
|
1511
1523
|
/**
|
|
1512
1524
|
* Virtual list component.
|
|
1513
1525
|
* Maximum performance for extremely large lists.
|
|
@@ -1765,9 +1777,6 @@ class NgVirtualListComponent {
|
|
|
1765
1777
|
}
|
|
1766
1778
|
return of(displayItems);
|
|
1767
1779
|
})).subscribe();
|
|
1768
|
-
this.setupRenderer();
|
|
1769
|
-
}
|
|
1770
|
-
setupRenderer() {
|
|
1771
1780
|
const $itemRenderer = toObservable(this.itemRenderer);
|
|
1772
1781
|
$itemRenderer.pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(v => !!v), tap(v => {
|
|
1773
1782
|
this._itemRenderer.set(v);
|
|
@@ -2042,5 +2051,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
|
|
|
2042
2051
|
* Generated bundle index. Do not edit.
|
|
2043
2052
|
*/
|
|
2044
2053
|
|
|
2045
|
-
export {
|
|
2054
|
+
export { Directions, NgVirtualListComponent, NgVirtualListItemComponent, ScrollEvent, SnappingMethods, debounce, toggleClassName };
|
|
2046
2055
|
//# sourceMappingURL=ng-virtual-list.mjs.map
|