UNPKG

ng-mat-select-infinite-scroll

Version:

Adds missing infinite scroll functionality for the angular material select component

64 lines 9.4 kB
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