ng-devui
Version:
DevUI components based on Angular
96 lines • 13.1 kB
JavaScript
import { Directive, ElementRef, EventEmitter, Input, Output } from '@angular/core';
import { fromEvent } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import * as i0 from "@angular/core";
export class LazyLoadDirective {
constructor(el) {
this.el = el;
// 启用懒加载，默认不启用
this.enableLazyLoad = false;
// 懒加载模式，默认列表模式
this.contentMode = 'list';
// 懒加载滚动方向
this.direction = 'vertical';
// 加载更多
this.loadMore = new EventEmitter();
// 触发懒加载的距离
this.loadFactor = 5;
}
ngOnChanges(changes) {
const element = this.target ? this.target : this.el.nativeElement;
if (changes?.enableLazyLoad) {
if (changes.enableLazyLoad.currentValue) {
const scrollEvent = fromEvent(element, 'scroll');
let scrollEventFormat = scrollEvent;
if (this.contentMode === 'list') {
scrollEventFormat = scrollEvent.pipe(debounceTime(300), distinctUntilChanged());
}
this.scrollSubscription = scrollEventFormat.subscribe((event) => this.scrollList(event));
}
else if (this.scrollSubscription) {
this.scrollSubscription.unsubscribe();
}
else {
return;
}
}
}
ngAfterViewInit() {
if (this.contentMode === 'img') {
setTimeout(() => {
const target = this.target ? this.target : this.el.nativeElement;
const mockEvent = { target };
this.scrollList(mockEvent);
});
}
}
ngOnDestroy() {
if (this.scrollSubscription) {
this.scrollSubscription.unsubscribe();
}
}
scrollList(event) {
const targetEl = event.target.scrollingElement ? event.target.scrollingElement : event.target;
const { clientWidth, clientHeight, scrollLeft, scrollTop, scrollWidth, scrollHeight } = targetEl;
if (this.contentMode === 'img') {
const rect = this.el.nativeElement.getBoundingClientRect();
const imgCondition = this.direction === 'vertical'
? rect.top >= 0 && clientHeight >= rect.top + this.loadFactor
: rect.left >= 0 && clientWidth >= rect.left + this.loadFactor;
if (imgCondition) {
if (this.imgLoadSrc) {
this.el.nativeElement.src = this.imgLoadSrc;
}
this.loadMore.emit(event);
this.scrollSubscription.unsubscribe();
}
}
else {
const etcCondition = this.direction === 'vertical'
? scrollTop !== 0 && scrollTop + clientHeight + this.loadFactor >= scrollHeight
: scrollLeft !== 0 && scrollLeft + clientWidth + this.loadFactor >= scrollWidth;
if (etcCondition) {
this.loadMore.emit(event);
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LazyLoadDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: LazyLoadDirective, selector: "[dLazyLoad]", inputs: { enableLazyLoad: "enableLazyLoad", contentMode: "contentMode", target: "target", imgLoadSrc: "imgLoadSrc", direction: "direction" }, outputs: { loadMore: "loadMore" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LazyLoadDirective, decorators: [{
type: Directive,
args: [{ selector: '[dLazyLoad]' }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { enableLazyLoad: [{
type: Input
}], contentMode: [{
type: Input
}], target: [{
type: Input
}], imgLoadSrc: [{
type: Input
}], direction: [{
type: Input
}], loadMore: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF6eS1sb2FkLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2RldnVpL3V0aWxzL2xhenktbG9hZC9sYXp5LWxvYWQuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBaUIsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUF3QixNQUFNLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZJLE9BQU8sRUFBZ0IsU0FBUyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9DLE9BQU8sRUFBRSxZQUFZLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7QUFHcEUsTUFBTSxPQUFPLGlCQUFpQjtJQW1CNUIsWUFBb0IsRUFBYztRQUFkLE9BQUUsR0FBRixFQUFFLENBQVk7UUFsQmxDLGNBQWM7UUFDTCxtQkFBYyxHQUFHLEtBQUssQ0FBQztRQUNoQyxlQUFlO1FBQ04sZ0JBQVcsR0FBbUIsTUFBTSxDQUFDO1FBSzlDLFVBQVU7UUFDRCxjQUFTLEdBQThCLFVBQVUsQ0FBQztRQUMzRCxPQUFPO1FBQ0csYUFBUSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFJN0MsV0FBVztRQUNYLGVBQVUsR0FBRyxDQUFDLENBQUM7SUFFc0IsQ0FBQztJQUV0QyxXQUFXLENBQUMsT0FBc0I7UUFDaEMsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUM7UUFDbEUsSUFBSSxPQUFPLEVBQUUsY0FBYyxFQUFFLENBQUM7WUFDNUIsSUFBSSxPQUFPLENBQUMsY0FBYyxDQUFDLFlBQVksRUFBRSxDQUFDO2dCQUN4QyxNQUFNLFdBQVcsR0FBRyxTQUFTLENBQUMsT0FBTyxFQUFFLFFBQVEsQ0FBQyxDQUFDO2dCQUNqRCxJQUFJLGlCQUFpQixH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QUFHLFlBQVksR0FBRyxJQUFJLENBQUMsVUFBVSxJQUFJLFlBQVk7Z0JBQy9FLENBQUMsQ0FBQyxVQUFVLEtBQUssQ0FBQyxJQUFJLFVBQVUsR0FBRyxXQUFXLEdBQUcsSUFBSSxDQUFDLFVBQVUsSUFBSSxXQUFXLENBQUM7WUFDcEYsSUFBSSxZQUFZLEVBQUUsQ0FBQztnQkFDakIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDNUIsQ0FBQztRQUNILENBQUM7SUFDSCxDQUFDOytHQWhGVSxpQkFBaUI7bUdBQWpCLGlCQUFpQjs7NEZBQWpCLGlCQUFpQjtrQkFEN0IsU0FBUzttQkFBQyxFQUFFLFFBQVEsRUFBRSxhQUFhLEVBQUU7K0VBRzNCLGNBQWM7c0JBQXRCLEtBQUs7Z0JBRUcsV0FBVztzQkFBbkIsS0FBSztnQkFFRyxNQUFNO3NCQUFkLEtBQUs7Z0JBRUcsVUFBVTtzQkFBbEIsS0FBSztnQkFFRyxTQUFTO3NCQUFqQixLQUFLO2dCQUVJLFFBQVE7c0JBQWpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uQ2hhbmdlcywgT25EZXN0cm95LCBPdXRwdXQsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgU3Vic2NyaXB0aW9uLCBmcm9tRXZlbnQgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgZGVib3VuY2VUaW1lLCBkaXN0aW5jdFVudGlsQ2hhbmdlZCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcclxuXHJcbkBEaXJlY3RpdmUoeyBzZWxlY3RvcjogJ1tkTGF6eUxvYWRdJyB9KVxyXG5leHBvcnQgY2xhc3MgTGF6eUxvYWREaXJlY3RpdmUgaW1wbGVtZW50cyBPbkRlc3Ryb3ksIE9uQ2hhbmdlcywgQWZ0ZXJWaWV3SW5pdCB7XHJcbiAgLy8g5ZCv55So5oeS5Yqg6L2977yM6buY6K6k5LiN5ZCv55SoXHJcbiAgQElucHV0KCkgZW5hYmxlTGF6eUxvYWQgPSBmYWxzZTtcclxuICAvLyDmh5LliqDovb3mqKHlvI/vvIzpu5jorqTliJfooajmqKHlvI9cclxuICBASW5wdXQoKSBjb250ZW50TW9kZTogJ2ltZycgfCAnbGlzdCcgPSAnbGlzdCc7XHJcbiAgLy8g5rua5Yqo55uR5ZCs55qE55uu5qCH77yM6buY6K6k5piv5a6/5Li777yMXHJcbiAgQElucHV0KCkgdGFyZ2V0OiBIVE1MRWxlbWVudCB8IFdpbmRvdztcclxuICAvLyDlm77niYfmh5LliqDovb3mqKHlvI/nmoTlm77niYflnLDlnYBcclxuICBASW5wdXQoKSBpbWdMb2FkU3JjOiBzdHJpbmc7XHJcbiAgLy8g5oeS5Yqg6L295rua5Yqo5pa55ZCRXHJcbiAgQElucHV0KCkgZGlyZWN0aW9uOiAndmVydGljYWwnIHwgJ2hvcml6b250YWwnID0gJ3ZlcnRpY2FsJztcclxuICAvLyDliqDovb3mm7TlpJpcclxuICBAT3V0cHV0KCkgbG9hZE1vcmUgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuXHJcbiAgc2Nyb2xsU3Vic2NyaXB0aW9uOiBTdWJzY3JpcHRpb247XHJcblxyXG4gIC8vIOinpuWPkeaHkuWKoOi9veeahOi3neemu1xyXG4gIGxvYWRGYWN0b3IgPSA1O1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsOiBFbGVtZW50UmVmKSB7fVxyXG5cclxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XHJcbiAgICBjb25zdCBlbGVtZW50ID0gdGhpcy50YXJnZXQgPyB0aGlzLnRhcmdldCA6IHRoaXMuZWwubmF0aXZlRWxlbWVudDtcclxuICAgIGlmIChjaGFuZ2VzPy5lbmFibGVMYXp5TG9hZCkge1xyXG4gICAgICBpZiAoY2hhbmdlcy5lbmFibGVMYXp5TG9hZC5jdXJyZW50VmFsdWUpIHtcclxuICAgICAgICBjb25zdCBzY3JvbGxFdmVudCA9IGZyb21FdmVudChlbGVtZW50LCAnc2Nyb2xsJyk7XHJcbiAgICAgICAgbGV0IHNjcm9sbEV2ZW50Rm9ybWF0ID0gc2Nyb2xsRXZlbnQ7XHJcbiAgICAgICAgaWYgKHRoaXMuY29udGVudE1vZGUgPT09ICdsaXN0Jykge1xyXG4gICAgICAgICAgc2Nyb2xsRXZlbnRGb3JtYXQgPSBzY3JvbGxFdmVudC5waXBlKGRlYm91bmNlVGltZSgzMDApLCBkaXN0aW5jdFVudGlsQ2hhbmdlZCgpKTtcclxuICAgICAgICB9XHJcbiAgICAgICAgdGhpcy5zY3JvbGxTdWJzY3JpcHRpb24gPSBzY3JvbGxFdmVudEZvcm1hdC5zdWJzY3JpYmUoKGV2ZW50KSA9PiB0aGlzLnNjcm9sbExpc3QoZXZlbnQpKTtcclxuICAgICAgfSBlbHNlIGlmICh0aGlzLnNjcm9sbFN1YnNjcmlwdGlvbikge1xyXG4gICAgICAgIHRoaXMuc2Nyb2xsU3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XHJcbiAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgcmV0dXJuO1xyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyVmlld0luaXQoKSB7XHJcbiAgICBpZiAodGhpcy5jb250ZW50TW9kZSA9PT0gJ2ltZycpIHtcclxuICAgICAgc2V0VGltZW91dCgoKSA9PiB7XHJcbiAgICAgICAgY29uc3QgdGFyZ2V0ID0gdGhpcy50YXJnZXQgPyB0aGlzLnRhcmdldCA6IHRoaXMuZWwubmF0aXZlRWxlbWVudDtcclxuICAgICAgICBjb25zdCBtb2NrRXZlbnQgPSB7IHRhcmdldCB9O1xyXG4gICAgICAgIHRoaXMuc2Nyb2xsTGlzdChtb2NrRXZlbnQpO1xyXG4gICAgICB9KTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIG5nT25EZXN0cm95KCkge1xyXG4gICAgaWYgKHRoaXMuc2Nyb2xsU3Vic2NyaXB0aW9uKSB7XHJcbiAgICAgIHRoaXMuc2Nyb2xsU3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBzY3JvbGxMaXN0KGV2ZW50KSB7XHJcbiAgICBjb25zdCB0YXJnZXRFbCA9IGV2ZW50LnRhcmdldC5zY3JvbGxpbmdFbGVtZW50ID8gZXZlbnQudGFyZ2V0LnNjcm9sbGluZ0VsZW1lbnQgOiBldmVudC50YXJnZXQ7XHJcbiAgICBjb25zdCB7IGNsaWVudFdpZHRoLCBjbGllbnRIZWlnaHQsIHNjcm9sbExlZnQsIHNjcm9sbFRvcCwgc2Nyb2xsV2lkdGgsIHNjcm9sbEhlaWdodCB9ID0gdGFyZ2V0RWw7XHJcbiAgICBpZiAodGhpcy5jb250ZW50TW9kZSA9PT0gJ2ltZycpIHtcclxuICAgICAgY29uc3QgcmVjdCA9IHRoaXMuZWwubmF0aXZlRWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcclxuICAgICAgY29uc3QgaW1nQ29uZGl0aW9uID1cclxuICAgICAgICB0aGlzLmRpcmVjdGlvbiA9PT0gJ3ZlcnRpY2FsJ1xyXG4gICAgICAgICAgPyByZWN0LnRvcCA+PSAwICYmIGNsaWVudEhlaWdodCA+PSByZWN0LnRvcCArIHRoaXMubG9hZEZhY3RvclxyXG4gICAgICAgICAgOiByZWN0LmxlZnQgPj0gMCAmJiBjbGllbnRXaWR0aCA+PSByZWN0LmxlZnQgKyB0aGlzLmxvYWRGYWN0b3I7XHJcbiAgICAgIGlmIChpbWdDb25kaXRpb24pIHtcclxuICAgICAgICBpZiAodGhpcy5pbWdMb2FkU3JjKSB7XHJcbiAgICAgICAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuc3JjID0gdGhpcy5pbWdMb2FkU3JjO1xyXG4gICAgICAgIH1cclxuICAgICAgICB0aGlzLmxvYWRNb3JlLmVtaXQoZXZlbnQpO1xyXG4gICAgICAgIHRoaXMuc2Nyb2xsU3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XHJcbiAgICAgIH1cclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIGNvbnN0IGV0Y0NvbmRpdGlvbiA9XHJcbiAgICAgICAgdGhpcy5kaXJlY3Rpb24gPT09ICd2ZXJ0aWNhbCdcclxuICAgICAgICAgID8gc2Nyb2xsVG9wICE9PSAwICYmIHNjcm9sbFRvcCArIGNsaWVudEhlaWdodCArIHRoaXMubG9hZEZhY3RvciA+PSBzY3JvbGxIZWlnaHRcclxuICAgICAgICAgIDogc2Nyb2xsTGVmdCAhPT0gMCAmJiBzY3JvbGxMZWZ0ICsgY2xpZW50V2lkdGggKyB0aGlzLmxvYWRGYWN0b3IgPj0gc2Nyb2xsV2lkdGg7XHJcbiAgICAgIGlmIChldGNDb25kaXRpb24pIHtcclxuICAgICAgICB0aGlzLmxvYWRNb3JlLmVtaXQoZXZlbnQpO1xyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiJdfQ==