ng-cw-v12
Version:
Angular UI component library
60 lines • 8.71 kB
JavaScript
import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { fromEvent, Subject } from 'rxjs';
import { debounceTime, filter } from 'rxjs/operators';
import * as i0 from "@angular/core";
export class InfiniteScrollComponent {
constructor() {
this.ncReachedBottom = new EventEmitter();
this.ncDistance = 0;
this.ncDelay = 200;
this.scrollSubject = new Subject();
this.isNearBottom = false;
this.disableDetectionMode = false;
}
set ncDisableDetection(value) {
this.disableDetectionMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
ngAfterViewInit() {
this.initScrollListener();
}
initScrollListener() {
const scrollElement = this.scrollContainer.nativeElement;
fromEvent(scrollElement, 'scroll').subscribe(() => {
this.handleScroll(scrollElement);
});
this.scrollSubject.pipe(debounceTime(this.ncDelay), filter(() => !this.disableDetectionMode)).subscribe(() => {
if (this.isNearBottom) {
this.ncReachedBottom.emit();
}
});
}
handleScroll(element) {
const { scrollTop, clientHeight, scrollHeight } = element;
this.isNearBottom = scrollTop + clientHeight >= scrollHeight - this.ncDistance;
if (this.isNearBottom) {
this.scrollSubject.next();
}
}
}
InfiniteScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: InfiniteScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
InfiniteScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: InfiniteScrollComponent, selector: "nc-infinite-scroll", inputs: { ncDisableDetection: "ncDisableDetection", ncDistance: "ncDistance", ncDelay: "ncDelay" }, outputs: { ncReachedBottom: "ncReachedBottom" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div #scrollContainer class=\"nc-infinite-scroll\">\r\n <ng-content></ng-content>\r\n</div>", styles: [".nc-infinite-scroll{width:100%;height:100%;overflow:auto}.nc-infinite-scroll::-webkit-scrollbar{width:6px;height:6px}.nc-infinite-scroll::-webkit-scrollbar-thumb{background-color:#cdc9cf;border-radius:10px;-webkit-transition:background-color .3s ease;transition:background-color .3s ease}.nc-infinite-scroll::-webkit-scrollbar-thumb:hover{background-color:#766d7b}.nc-infinite-scroll::-webkit-scrollbar-track{background:#0000;cursor:pointer}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: InfiniteScrollComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-infinite-scroll',
templateUrl: './infinite-scroll.component.html',
styleUrls: ['./infinite-scroll.component.less']
}]
}], ctorParameters: function () { return []; }, propDecorators: { ncReachedBottom: [{
type: Output
}], ncDisableDetection: [{
type: Input
}], ncDistance: [{
type: Input
}], ncDelay: [{
type: Input
}], scrollContainer: [{
type: ViewChild,
args: ['scrollContainer']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5maW5pdGUtc2Nyb2xsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvaW5maW5pdGUtc2Nyb2xsL2luZmluaXRlLXNjcm9sbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL2luZmluaXRlLXNjcm9sbC9pbmZpbml0ZS1zY3JvbGwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQWMsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzdHLE9BQU8sRUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7O0FBT3RELE1BQU0sT0FBTyx1QkFBdUI7SUFZbEM7UUFYVSxvQkFBZSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFJdEMsZUFBVSxHQUFXLENBQUMsQ0FBQztRQUN2QixZQUFPLEdBQVcsR0FBRyxDQUFDO1FBRXZCLGtCQUFhLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztRQUNwQyxpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUM3Qix5QkFBb0IsR0FBWSxLQUFLLENBQUM7SUFFdEIsQ0FBQztJQVZqQixJQUFhLGtCQUFrQixDQUFDLEtBQXVCO1FBQ3JELElBQUksQ0FBQyxvQkFBb0IsR0FBRyxLQUFLLEtBQUssSUFBSSxJQUFJLEtBQUssS0FBSyxTQUFTLElBQUksS0FBSyxLQUFLLEtBQUssSUFBSSxLQUFLLEtBQUssT0FBTyxDQUFDO0lBQzVHLENBQUM7SUFVRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUM7SUFDNUIsQ0FBQztJQUVPLGtCQUFrQjtRQUN4QixNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDLGFBQWEsQ0FBQztRQUV6RCxTQUFTLENBQUMsYUFBYSxFQUFFLFFBQVEsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDaEQsSUFBSSxDQUFDLFlBQVksQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUNuQyxDQUFDLENBQUMsQ0FBQztRQUVILElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUNyQixZQUFZLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxFQUMxQixNQUFNLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsb0JBQW9CLENBQUMsQ0FDekMsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQ2YsSUFBSSxJQUFJLENBQUMsWUFBWSxFQUFFO2dCQUNyQixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksRUFBRSxDQUFDO2FBQzdCO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRU8sWUFBWSxDQUFDLE9BQW9CO1FBQ3ZDLE1BQU0sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFlBQVksRUFBRSxHQUFHLE9BQU8sQ0FBQztRQUMxRCxJQUFJLENBQUMsWUFBWSxHQUFHLFNBQVMsR0FBRyxZQUFZLElBQUksWUFBWSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUM7UUFDL0UsSUFBSSxJQUFJLENBQUMsWUFBWSxFQUFFO1lBQ3JCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDM0I7SUFDSCxDQUFDOztvSEF6Q1UsdUJBQXVCO3dHQUF2Qix1QkFBdUIsbVVDVHBDLGdHQUVNOzJGRE9PLHVCQUF1QjtrQkFMbkMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsb0JBQW9CO29CQUM5QixXQUFXLEVBQUUsa0NBQWtDO29CQUMvQyxTQUFTLEVBQUUsQ0FBQyxrQ0FBa0MsQ0FBQztpQkFDaEQ7MEVBRVcsZUFBZTtzQkFBeEIsTUFBTTtnQkFDTSxrQkFBa0I7c0JBQTlCLEtBQUs7Z0JBR0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ2dDLGVBQWU7c0JBQXBELFNBQVM7dUJBQUMsaUJBQWlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBmcm9tRXZlbnQsIFN1YmplY3QgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgZGVib3VuY2VUaW1lLCBmaWx0ZXIgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25jLWluZmluaXRlLXNjcm9sbCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2luZmluaXRlLXNjcm9sbC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vaW5maW5pdGUtc2Nyb2xsLmNvbXBvbmVudC5sZXNzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIEluZmluaXRlU2Nyb2xsQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XHJcbiAgQE91dHB1dCgpIG5jUmVhY2hlZEJvdHRvbSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICBASW5wdXQoKSBzZXQgbmNEaXNhYmxlRGV0ZWN0aW9uKHZhbHVlOiBib29sZWFuIHwgc3RyaW5nKSB7XHJcbiAgICB0aGlzLmRpc2FibGVEZXRlY3Rpb25Nb2RlID0gdmFsdWUgIT09IG51bGwgJiYgdmFsdWUgIT09IHVuZGVmaW5lZCAmJiB2YWx1ZSAhPT0gZmFsc2UgJiYgdmFsdWUgIT09ICdmYWxzZSc7XHJcbiAgfVxyXG4gIEBJbnB1dCgpIG5jRGlzdGFuY2U6IG51bWJlciA9IDA7XHJcbiAgQElucHV0KCkgbmNEZWxheTogbnVtYmVyID0gMjAwO1xyXG4gIEBWaWV3Q2hpbGQoJ3Njcm9sbENvbnRhaW5lcicpIHByaXZhdGUgc2Nyb2xsQ29udGFpbmVyITogRWxlbWVudFJlZjtcclxuICBwcml2YXRlIHNjcm9sbFN1YmplY3QgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xyXG4gIHByaXZhdGUgaXNOZWFyQm90dG9tID0gZmFsc2U7XHJcbiAgZGlzYWJsZURldGVjdGlvbk1vZGU6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7IH1cclxuXHJcbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xyXG4gICAgdGhpcy5pbml0U2Nyb2xsTGlzdGVuZXIoKTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgaW5pdFNjcm9sbExpc3RlbmVyKCk6IHZvaWQge1xyXG4gICAgY29uc3Qgc2Nyb2xsRWxlbWVudCA9IHRoaXMuc2Nyb2xsQ29udGFpbmVyLm5hdGl2ZUVsZW1lbnQ7XHJcblxyXG4gICAgZnJvbUV2ZW50KHNjcm9sbEVsZW1lbnQsICdzY3JvbGwnKS5zdWJzY3JpYmUoKCkgPT4ge1xyXG4gICAgICB0aGlzLmhhbmRsZVNjcm9sbChzY3JvbGxFbGVtZW50KTtcclxuICAgIH0pO1xyXG5cclxuICAgIHRoaXMuc2Nyb2xsU3ViamVjdC5waXBlKFxyXG4gICAgICBkZWJvdW5jZVRpbWUodGhpcy5uY0RlbGF5KSxcclxuICAgICAgZmlsdGVyKCgpID0+ICF0aGlzLmRpc2FibGVEZXRlY3Rpb25Nb2RlKVxyXG4gICAgKS5zdWJzY3JpYmUoKCkgPT4ge1xyXG4gICAgICBpZiAodGhpcy5pc05lYXJCb3R0b20pIHtcclxuICAgICAgICB0aGlzLm5jUmVhY2hlZEJvdHRvbS5lbWl0KCk7XHJcbiAgICAgIH1cclxuICAgIH0pO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBoYW5kbGVTY3JvbGwoZWxlbWVudDogSFRNTEVsZW1lbnQpOiB2b2lkIHtcclxuICAgIGNvbnN0IHsgc2Nyb2xsVG9wLCBjbGllbnRIZWlnaHQsIHNjcm9sbEhlaWdodCB9ID0gZWxlbWVudDtcclxuICAgIHRoaXMuaXNOZWFyQm90dG9tID0gc2Nyb2xsVG9wICsgY2xpZW50SGVpZ2h0ID49IHNjcm9sbEhlaWdodCAtIHRoaXMubmNEaXN0YW5jZTtcclxuICAgIGlmICh0aGlzLmlzTmVhckJvdHRvbSkge1xyXG4gICAgICB0aGlzLnNjcm9sbFN1YmplY3QubmV4dCgpO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iLCI8ZGl2ICNzY3JvbGxDb250YWluZXIgY2xhc3M9XCJuYy1pbmZpbml0ZS1zY3JvbGxcIj5cclxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuPC9kaXY+Il19