ng-mat-select-infinite-scroll
Version:
Adds missing infinite scroll functionality for the angular material select component
64 lines • 9.4 kB
JavaScript
import { Injectable } from '@angular/core';
import { fromEvent, Subject } from 'rxjs';
import { debounceTime, takeUntil, tap } from 'rxjs/operators';
import * as i0 from "@angular/core";
export class InfiniteScrollService {
constructor(ngZone) {
this.ngZone = ngZone;
this.threshold = '15%';
this.debounceTime = 150;
this.thrPx = 0;
this.thrPc = 0;
this.destroyed$ = new Subject();
}
initialize(panel, selectItemHeightPx, config) {
this.threshold = config.threshold;
this.debounceTime = config.debounceTime;
this.complete = config.complete;
this.panel = panel;
this.selectItemHeightPx = selectItemHeightPx;
this.evaluateThreshold();
}
evaluateThreshold() {
if (this.threshold.lastIndexOf('%') > -1) {
this.thrPx = 0;
this.thrPc = (parseFloat(this.threshold) / 100);
}
else {
this.thrPx = parseFloat(this.threshold);
this.thrPc = 0;
}
}
registerScrollListener(infiniteScrollCallback) {
fromEvent(this.panel, 'scroll').pipe(takeUntil(this.destroyed$), debounceTime(this.debounceTime), tap((event) => {
this.handleScrollEvent(event, infiniteScrollCallback);
})).subscribe();
}
handleScrollEvent(event, infiniteScrollCallback) {
if (this.complete || !event.target) {
return;
}
this.ngZone.runOutsideAngular(() => {
const countOfRenderedOptions = Math.round(this.panel.scrollHeight / this.selectItemHeightPx);
const infiniteScrollDistance = this.selectItemHeightPx * countOfRenderedOptions;
const threshold = this.thrPc !== 0 ? (infiniteScrollDistance * this.thrPc) : this.thrPx;
const scrolledDistance = this.panel.clientHeight + event.target.scrollTop;
if ((scrolledDistance + threshold) >= infiniteScrollDistance) {
this.ngZone.run(infiniteScrollCallback);
}
});
}
destroy() {
this.destroyed$.next();
this.destroyed$.complete();
}
}
InfiniteScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InfiniteScrollService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
InfiniteScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InfiniteScrollService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InfiniteScrollService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5maW5pdGUtc2Nyb2xsLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1tYXQtc2VsZWN0LWluZmluaXRlLXNjcm9sbC9zcmMvbGliL2luZmluaXRlLXNjcm9sbC5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxVQUFVLEVBQVMsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFDLFNBQVMsRUFBRSxPQUFPLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFDeEMsT0FBTyxFQUFDLFlBQVksRUFBRSxTQUFTLEVBQUUsR0FBRyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7O0FBSzVELE1BQU0sT0FBTyxxQkFBcUI7SUFXOUIsWUFBb0IsTUFBYztRQUFkLFdBQU0sR0FBTixNQUFNLENBQVE7UUFUMUIsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUNsQixpQkFBWSxHQUFHLEdBQUcsQ0FBQztRQUVuQixVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ1YsVUFBSyxHQUFHLENBQUMsQ0FBQztRQUNWLGVBQVUsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO0lBS3pDLENBQUM7SUFFRCxVQUFVLENBQUMsS0FBYyxFQUFFLGtCQUEwQixFQUFFLE1BSXREO1FBQ0csSUFBSSxDQUFDLFNBQVMsR0FBRyxNQUFNLENBQUMsU0FBUyxDQUFDO1FBQ2xDLElBQUksQ0FBQyxZQUFZLEdBQUcsTUFBTSxDQUFDLFlBQVksQ0FBQztRQUN4QyxJQUFJLENBQUMsUUFBUSxHQUFHLE1BQU0sQ0FBQyxRQUFRLENBQUM7UUFFaEMsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7UUFDbkIsSUFBSSxDQUFDLGtCQUFrQixHQUFHLGtCQUFrQixDQUFDO1FBQzdDLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO0lBQzdCLENBQUM7SUFFRCxpQkFBaUI7UUFDYixJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsV0FBVyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFO1lBQ3RDLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO1lBQ2YsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsR0FBRyxDQUFDLENBQUM7U0FDbkQ7YUFBTTtZQUNILElBQUksQ0FBQyxLQUFLLEdBQUcsVUFBVSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztZQUN4QyxJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQztTQUNsQjtJQUNMLENBQUM7SUFFRCxzQkFBc0IsQ0FBQyxzQkFBa0M7UUFDckQsU0FBUyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsUUFBUSxDQUFDLENBQUMsSUFBSSxDQUNoQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxFQUMxQixZQUFZLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxFQUMvQixHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRTtZQUNWLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxLQUFLLEVBQUUsc0JBQXNCLENBQUMsQ0FBQztRQUMxRCxDQUFDLENBQUMsQ0FDTCxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ2xCLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxLQUFZLEVBQUUsc0JBQWtDO1FBQzlELElBQUksSUFBSSxDQUFDLFFBQVEsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEVBQUU7WUFDaEMsT0FBTztTQUNWO1FBRUQsSUFBSSxDQUFDLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxHQUFHLEVBQUU7WUFDL0IsTUFBTSxzQkFBc0IsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1lBQzdGLE1BQU0sc0JBQXNCLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixHQUFHLHNCQUFzQixDQUFDO1lBQ2hGLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxLQUFLLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLHNCQUFzQixHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQztZQUV4RixNQUFNLGdCQUFnQixHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsWUFBWSxHQUFJLEtBQUssQ0FBQyxNQUFzQixDQUFDLFNBQVMsQ0FBQztZQUUzRixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsU0FBUyxDQUFDLElBQUksc0JBQXNCLEVBQUU7Z0JBQzFELElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLHNCQUFzQixDQUFDLENBQUM7YUFDM0M7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFRCxPQUFPO1FBQ0gsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN2QixJQUFJLENBQUMsVUFBVSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQy9CLENBQUM7O21IQXJFUSxxQkFBcUI7dUhBQXJCLHFCQUFxQixjQUZsQixNQUFNOzRGQUVULHFCQUFxQjtrQkFIakMsVUFBVTttQkFBQztvQkFDUixVQUFVLEVBQUUsTUFBTTtpQkFDckIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0luamVjdGFibGUsIE5nWm9uZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge2Zyb21FdmVudCwgU3ViamVjdH0gZnJvbSAncnhqcyc7XG5pbXBvcnQge2RlYm91bmNlVGltZSwgdGFrZVVudGlsLCB0YXB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuQEluamVjdGFibGUoe1xuICAgIHByb3ZpZGVkSW46ICdyb290J1xufSlcbmV4cG9ydCBjbGFzcyBJbmZpbml0ZVNjcm9sbFNlcnZpY2Uge1xuXG4gICAgcHJpdmF0ZSB0aHJlc2hvbGQgPSAnMTUlJztcbiAgICBwcml2YXRlIGRlYm91bmNlVGltZSA9IDE1MDtcbiAgICBwcml2YXRlIGNvbXBsZXRlITogYm9vbGVhbjtcbiAgICBwcml2YXRlIHRoclB4ID0gMDtcbiAgICBwcml2YXRlIHRoclBjID0gMDtcbiAgICBwcml2YXRlIGRlc3Ryb3llZCQgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuICAgIHByaXZhdGUgc2VsZWN0SXRlbUhlaWdodFB4ITogbnVtYmVyO1xuICAgIHByaXZhdGUgcGFuZWwhOiBFbGVtZW50O1xuXG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSBuZ1pvbmU6IE5nWm9uZSkge1xuICAgIH1cblxuICAgIGluaXRpYWxpemUocGFuZWw6IEVsZW1lbnQsIHNlbGVjdEl0ZW1IZWlnaHRQeDogbnVtYmVyLCBjb25maWc6IHtcbiAgICAgICAgdGhyZXNob2xkOiBzdHJpbmcsXG4gICAgICAgIGRlYm91bmNlVGltZTogbnVtYmVyLFxuICAgICAgICBjb21wbGV0ZTogYm9vbGVhblxuICAgIH0pIHtcbiAgICAgICAgdGhpcy50aHJlc2hvbGQgPSBjb25maWcudGhyZXNob2xkO1xuICAgICAgICB0aGlzLmRlYm91bmNlVGltZSA9IGNvbmZpZy5kZWJvdW5jZVRpbWU7XG4gICAgICAgIHRoaXMuY29tcGxldGUgPSBjb25maWcuY29tcGxldGU7XG5cbiAgICAgICAgdGhpcy5wYW5lbCA9IHBhbmVsO1xuICAgICAgICB0aGlzLnNlbGVjdEl0ZW1IZWlnaHRQeCA9IHNlbGVjdEl0ZW1IZWlnaHRQeDtcbiAgICAgICAgdGhpcy5ldmFsdWF0ZVRocmVzaG9sZCgpO1xuICAgIH1cblxuICAgIGV2YWx1YXRlVGhyZXNob2xkKCkge1xuICAgICAgICBpZiAodGhpcy50aHJlc2hvbGQubGFzdEluZGV4T2YoJyUnKSA+IC0xKSB7XG4gICAgICAgICAgICB0aGlzLnRoclB4ID0gMDtcbiAgICAgICAgICAgIHRoaXMudGhyUGMgPSAocGFyc2VGbG9hdCh0aGlzLnRocmVzaG9sZCkgLyAxMDApO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgdGhpcy50aHJQeCA9IHBhcnNlRmxvYXQodGhpcy50aHJlc2hvbGQpO1xuICAgICAgICAgICAgdGhpcy50aHJQYyA9IDA7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICByZWdpc3RlclNjcm9sbExpc3RlbmVyKGluZmluaXRlU2Nyb2xsQ2FsbGJhY2s6ICgpID0+IHZvaWQpIHtcbiAgICAgICAgZnJvbUV2ZW50KHRoaXMucGFuZWwsICdzY3JvbGwnKS5waXBlKFxuICAgICAgICAgICAgdGFrZVVudGlsKHRoaXMuZGVzdHJveWVkJCksXG4gICAgICAgICAgICBkZWJvdW5jZVRpbWUodGhpcy5kZWJvdW5jZVRpbWUpLFxuICAgICAgICAgICAgdGFwKChldmVudCkgPT4ge1xuICAgICAgICAgICAgICAgIHRoaXMuaGFuZGxlU2Nyb2xsRXZlbnQoZXZlbnQsIGluZmluaXRlU2Nyb2xsQ2FsbGJhY2spO1xuICAgICAgICAgICAgfSlcbiAgICAgICAgKS5zdWJzY3JpYmUoKTtcbiAgICB9XG5cbiAgICBoYW5kbGVTY3JvbGxFdmVudChldmVudDogRXZlbnQsIGluZmluaXRlU2Nyb2xsQ2FsbGJhY2s6ICgpID0+IHZvaWQpIHtcbiAgICAgICAgaWYgKHRoaXMuY29tcGxldGUgfHwgIWV2ZW50LnRhcmdldCkge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5uZ1pvbmUucnVuT3V0c2lkZUFuZ3VsYXIoKCkgPT4ge1xuICAgICAgICAgICAgY29uc3QgY291bnRPZlJlbmRlcmVkT3B0aW9ucyA9IE1hdGgucm91bmQodGhpcy5wYW5lbC5zY3JvbGxIZWlnaHQgLyB0aGlzLnNlbGVjdEl0ZW1IZWlnaHRQeCk7XG4gICAgICAgICAgICBjb25zdCBpbmZpbml0ZVNjcm9sbERpc3RhbmNlID0gdGhpcy5zZWxlY3RJdGVtSGVpZ2h0UHggKiBjb3VudE9mUmVuZGVyZWRPcHRpb25zO1xuICAgICAgICAgICAgY29uc3QgdGhyZXNob2xkID0gdGhpcy50aHJQYyAhPT0gMCA/IChpbmZpbml0ZVNjcm9sbERpc3RhbmNlICogdGhpcy50aHJQYykgOiB0aGlzLnRoclB4O1xuXG4gICAgICAgICAgICBjb25zdCBzY3JvbGxlZERpc3RhbmNlID0gdGhpcy5wYW5lbC5jbGllbnRIZWlnaHQgKyAoZXZlbnQudGFyZ2V0IGFzIEhUTUxFbGVtZW50KS5zY3JvbGxUb3A7XG5cbiAgICAgICAgICAgIGlmICgoc2Nyb2xsZWREaXN0YW5jZSArIHRocmVzaG9sZCkgPj0gaW5maW5pdGVTY3JvbGxEaXN0YW5jZSkge1xuICAgICAgICAgICAgICAgIHRoaXMubmdab25lLnJ1bihpbmZpbml0ZVNjcm9sbENhbGxiYWNrKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgZGVzdHJveSgpIHtcbiAgICAgICAgdGhpcy5kZXN0cm95ZWQkLm5leHQoKTtcbiAgICAgICAgdGhpcy5kZXN0cm95ZWQkLmNvbXBsZXRlKCk7XG4gICAgfVxufVxuIl19