@alauda-fe/common
Version:
Alauda frontend team common codes.
77 lines • 10.8 kB
JavaScript
import { observeResizeOn } from '@alauda/ui';
import { ScrollDispatcher } from '@angular/cdk/overlay';
import { Directive, EventEmitter, Injector, Input, Output, ViewContainerRef, } from '@angular/core';
import { debounceTime, fromEvent, map, pairwise, startWith, Subject, takeUntil, merge, } from 'rxjs';
import * as i0 from "@angular/core";
const defaultDistance = 60;
// 监测滚动到边界并触发回调
export class ScrollBorderObserverDirective {
constructor(injector) {
this.scrollBorder = new EventEmitter();
this.scrollBottomBorder = new EventEmitter();
this.destroy$$ = new Subject();
this.scrollDispatcher = injector.get(ScrollDispatcher);
this.viewContainerRef = injector.get(ViewContainerRef);
}
ngOnInit() {
if (this.option === false) {
return;
}
this.scrollEl =
this.scrollDispatcher
.getAncestorScrollContainers(this.viewContainerRef.element.nativeElement)
.pop()
?.getElementRef()?.nativeElement ?? window;
this.setupScroll();
}
ngOnDestroy() {
this.destroy$$.next();
this.destroy$$.complete();
}
setupScroll() {
const viewEl = this.scrollEl === window
? document.documentElement
: this.scrollEl;
merge(observeResizeOn(viewEl), fromEvent(this.scrollEl, 'scroll').pipe(startWith(viewEl.scrollTop)))
.pipe(debounceTime(50), map(() => viewEl.scrollTop), pairwise(), takeUntil(this.destroy$$))
.subscribe(([prev, cur]) => {
let direction;
const option = typeof this.option === 'number'
? {
topDistance: this.option,
bottomDistance: this.option,
}
: this.option || {};
if (cur > prev &&
viewEl.scrollTop >
viewEl.scrollHeight -
viewEl.clientHeight -
(option.bottomDistance || defaultDistance)) {
direction = 'bottom';
}
else if (cur < prev &&
viewEl.scrollTop < (option.topDistance || defaultDistance)) {
direction = 'top';
}
this.scrollBorder.emit(direction);
direction === 'bottom' && this.scrollBottomBorder.emit();
});
}
static { this.ɵfac = function ScrollBorderObserverDirective_Factory(t) { return new (t || ScrollBorderObserverDirective)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ScrollBorderObserverDirective, selectors: [["", "aclScrollBorderObserver", ""]], inputs: { option: [0, "aclScrollBorderObserver", "option"] }, outputs: { scrollBorder: "scrollBorder", scrollBottomBorder: "scrollBottomBorder" }, standalone: true }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ScrollBorderObserverDirective, [{
type: Directive,
args: [{
selector: '[aclScrollBorderObserver]',
standalone: true,
}]
}], () => [{ type: i0.Injector }], { option: [{
type: Input,
args: ['aclScrollBorderObserver']
}], scrollBorder: [{
type: Output
}], scrollBottomBorder: [{
type: Output
}] }); })();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Nyb2xsLWJvcmRlci1vYnNlcnZlci5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbW1vbi9zcmMvY29yZS9kaXJlY3RpdmVzL3Njcm9sbC1ib3JkZXItb2JzZXJ2ZXIuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxZQUFZLENBQUM7QUFDN0MsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDeEQsT0FBTyxFQUNMLFNBQVMsRUFDVCxZQUFZLEVBQ1osUUFBUSxFQUNSLEtBQUssRUFHTCxNQUFNLEVBQ04sZ0JBQWdCLEdBQ2pCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFDTCxZQUFZLEVBQ1osU0FBUyxFQUNULEdBQUcsRUFDSCxRQUFRLEVBQ1IsU0FBUyxFQUNULE9BQU8sRUFDUCxTQUFTLEVBQ1QsS0FBSyxHQUNOLE1BQU0sTUFBTSxDQUFDOztBQUVkLE1BQU0sZUFBZSxHQUFHLEVBQUUsQ0FBQztBQU8zQixlQUFlO0FBS2YsTUFBTSxPQUFPLDZCQUE2QjtJQWV4QyxZQUFZLFFBQWtCO1FBVjlCLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQW9CLENBQUM7UUFHcEQsdUJBQWtCLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUcvQixjQUFTLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztRQUt2QyxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsUUFBUSxDQUFDLEdBQUcsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBQ3ZELElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxRQUFRLENBQUMsR0FBRyxDQUFDLGdCQUFnQixDQUFDLENBQUM7SUFDekQsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxNQUFNLEtBQUssS0FBSyxFQUFFLENBQUM7WUFDMUIsT0FBTztRQUNULENBQUM7UUFDRCxJQUFJLENBQUMsUUFBUTtZQUNYLElBQUksQ0FBQyxnQkFBZ0I7aUJBQ2xCLDJCQUEyQixDQUMxQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FDNUM7aUJBQ0EsR0FBRyxFQUFFO2dCQUNOLEVBQUUsYUFBYSxFQUFFLEVBQUUsYUFBYSxJQUFJLE1BQU0sQ0FBQztRQUUvQyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3RCLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDNUIsQ0FBQztJQUVPLFdBQVc7UUFDakIsTUFBTSxNQUFNLEdBQ1YsSUFBSSxDQUFDLFFBQVEsS0FBSyxNQUFNO1lBQ3RCLENBQUMsQ0FBQyxRQUFRLENBQUMsZUFBZTtZQUMxQixDQUFDLENBQUUsSUFBSSxDQUFDLFFBQXdCLENBQUM7UUFDckMsS0FBSyxDQUNILGVBQWUsQ0FBQyxNQUFNLENBQUMsRUFDdkIsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsUUFBUSxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FDckU7YUFDRSxJQUFJLENBQ0gsWUFBWSxDQUFDLEVBQUUsQ0FBQyxFQUNoQixHQUFHLENBQUMsR0FBRyxFQUFFLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxFQUMzQixRQUFRLEVBQUUsRUFDVixTQUFTLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUMxQjthQUNBLFNBQVMsQ0FBQyxDQUFDLENBQUMsSUFBSSxFQUFFLEdBQUcsQ0FBQyxFQUFFLEVBQUU7WUFDekIsSUFBSSxTQUEyQixDQUFDO1lBQ2hDLE1BQU0sTUFBTSxHQUNWLE9BQU8sSUFBSSxDQUFDLE1BQU0sS0FBSyxRQUFRO2dCQUM3QixDQUFDLENBQUM7b0JBQ0UsV0FBVyxFQUFFLElBQUksQ0FBQyxNQUFNO29CQUN4QixjQUFjLEVBQUUsSUFBSSxDQUFDLE1BQU07aUJBQzVCO2dCQUNILENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxJQUFLLEVBQWEsQ0FBQztZQUNwQyxJQUNFLEdBQUcsR0FBRyxJQUFJO2dCQUNWLE1BQU0sQ0FBQyxTQUFTO29CQUNkLE1BQU0sQ0FBQyxZQUFZO3dCQUNqQixNQUFNLENBQUMsWUFBWTt3QkFDbkIsQ0FBQyxNQUFNLENBQUMsY0FBYyxJQUFJLGVBQWUsQ0FBQyxFQUM5QyxDQUFDO2dCQUNELFNBQVMsR0FBRyxRQUFRLENBQUM7WUFDdkIsQ0FBQztpQkFBTSxJQUNMLEdBQUcsR0FBRyxJQUFJO2dCQUNWLE1BQU0sQ0FBQyxTQUFTLEdBQUcsQ0FBQyxNQUFNLENBQUMsV0FBVyxJQUFJLGVBQWUsQ0FBQyxFQUMxRCxDQUFDO2dCQUNELFNBQVMsR0FBRyxLQUFLLENBQUM7WUFDcEIsQ0FBQztZQUNELElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1lBQ2xDLFNBQVMsS0FBSyxRQUFRLElBQUksSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksRUFBRSxDQUFDO1FBQzNELENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQzs4RkFqRlUsNkJBQTZCO29FQUE3Qiw2QkFBNkI7O2lGQUE3Qiw2QkFBNkI7Y0FKekMsU0FBUztlQUFDO2dCQUNULFFBQVEsRUFBRSwyQkFBMkI7Z0JBQ3JDLFVBQVUsRUFBRSxJQUFJO2FBQ2pCO3lDQUdDLE1BQU07a0JBREwsS0FBSzttQkFBQyx5QkFBeUI7WUFJaEMsWUFBWTtrQkFEWCxNQUFNO1lBSVAsa0JBQWtCO2tCQURqQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgb2JzZXJ2ZVJlc2l6ZU9uIH0gZnJvbSAnQGFsYXVkYS91aSc7XG5pbXBvcnQgeyBTY3JvbGxEaXNwYXRjaGVyIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL292ZXJsYXknO1xuaW1wb3J0IHtcbiAgRGlyZWN0aXZlLFxuICBFdmVudEVtaXR0ZXIsXG4gIEluamVjdG9yLFxuICBJbnB1dCxcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbiAgVmlld0NvbnRhaW5lclJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICBkZWJvdW5jZVRpbWUsXG4gIGZyb21FdmVudCxcbiAgbWFwLFxuICBwYWlyd2lzZSxcbiAgc3RhcnRXaXRoLFxuICBTdWJqZWN0LFxuICB0YWtlVW50aWwsXG4gIG1lcmdlLFxufSBmcm9tICdyeGpzJztcblxuY29uc3QgZGVmYXVsdERpc3RhbmNlID0gNjA7XG5cbmludGVyZmFjZSBPcHRpb24ge1xuICBib3R0b21EaXN0YW5jZT86IG51bWJlcjtcbiAgdG9wRGlzdGFuY2U/OiBudW1iZXI7XG59XG5cbi8vIOebkea1i+a7muWKqOWIsOi+ueeVjOW5tuinpuWPkeWbnuiwg1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2FjbFNjcm9sbEJvcmRlck9ic2VydmVyXScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIFNjcm9sbEJvcmRlck9ic2VydmVyRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBASW5wdXQoJ2FjbFNjcm9sbEJvcmRlck9ic2VydmVyJylcbiAgb3B0aW9uOiBPcHRpb24gfCAnJyB8IGZhbHNlIHwgbnVtYmVyO1xuXG4gIEBPdXRwdXQoKVxuICBzY3JvbGxCb3JkZXIgPSBuZXcgRXZlbnRFbWl0dGVyPCd0b3AnIHwgJ2JvdHRvbSc+KCk7XG5cbiAgQE91dHB1dCgpXG4gIHNjcm9sbEJvdHRvbUJvcmRlciA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBzY3JvbGxFbDogSFRNTEVsZW1lbnQgfCBXaW5kb3c7XG4gIHJlYWRvbmx5IGRlc3Ryb3kkJCA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG4gIHByaXZhdGUgcmVhZG9ubHkgc2Nyb2xsRGlzcGF0Y2hlcjogU2Nyb2xsRGlzcGF0Y2hlcjtcbiAgcHJpdmF0ZSByZWFkb25seSB2aWV3Q29udGFpbmVyUmVmOiBWaWV3Q29udGFpbmVyUmVmO1xuXG4gIGNvbnN0cnVjdG9yKGluamVjdG9yOiBJbmplY3Rvcikge1xuICAgIHRoaXMuc2Nyb2xsRGlzcGF0Y2hlciA9IGluamVjdG9yLmdldChTY3JvbGxEaXNwYXRjaGVyKTtcbiAgICB0aGlzLnZpZXdDb250YWluZXJSZWYgPSBpbmplY3Rvci5nZXQoVmlld0NvbnRhaW5lclJlZik7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICBpZiAodGhpcy5vcHRpb24gPT09IGZhbHNlKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuc2Nyb2xsRWwgPVxuICAgICAgdGhpcy5zY3JvbGxEaXNwYXRjaGVyXG4gICAgICAgIC5nZXRBbmNlc3RvclNjcm9sbENvbnRhaW5lcnMoXG4gICAgICAgICAgdGhpcy52aWV3Q29udGFpbmVyUmVmLmVsZW1lbnQubmF0aXZlRWxlbWVudCxcbiAgICAgICAgKVxuICAgICAgICAucG9wKClcbiAgICAgICAgPy5nZXRFbGVtZW50UmVmKCk/Lm5hdGl2ZUVsZW1lbnQgPz8gd2luZG93O1xuXG4gICAgdGhpcy5zZXR1cFNjcm9sbCgpO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5kZXN0cm95JCQubmV4dCgpO1xuICAgIHRoaXMuZGVzdHJveSQkLmNvbXBsZXRlKCk7XG4gIH1cblxuICBwcml2YXRlIHNldHVwU2Nyb2xsKCkge1xuICAgIGNvbnN0IHZpZXdFbCA9XG4gICAgICB0aGlzLnNjcm9sbEVsID09PSB3aW5kb3dcbiAgICAgICAgPyBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnRcbiAgICAgICAgOiAodGhpcy5zY3JvbGxFbCBhcyBIVE1MRWxlbWVudCk7XG4gICAgbWVyZ2UoXG4gICAgICBvYnNlcnZlUmVzaXplT24odmlld0VsKSxcbiAgICAgIGZyb21FdmVudCh0aGlzLnNjcm9sbEVsLCAnc2Nyb2xsJykucGlwZShzdGFydFdpdGgodmlld0VsLnNjcm9sbFRvcCkpLFxuICAgIClcbiAgICAgIC5waXBlKFxuICAgICAgICBkZWJvdW5jZVRpbWUoNTApLFxuICAgICAgICBtYXAoKCkgPT4gdmlld0VsLnNjcm9sbFRvcCksXG4gICAgICAgIHBhaXJ3aXNlKCksXG4gICAgICAgIHRha2VVbnRpbCh0aGlzLmRlc3Ryb3kkJCksXG4gICAgICApXG4gICAgICAuc3Vic2NyaWJlKChbcHJldiwgY3VyXSkgPT4ge1xuICAgICAgICBsZXQgZGlyZWN0aW9uOiAndG9wJyB8ICdib3R0b20nO1xuICAgICAgICBjb25zdCBvcHRpb24gPVxuICAgICAgICAgIHR5cGVvZiB0aGlzLm9wdGlvbiA9PT0gJ251bWJlcidcbiAgICAgICAgICAgID8ge1xuICAgICAgICAgICAgICAgIHRvcERpc3RhbmNlOiB0aGlzLm9wdGlvbixcbiAgICAgICAgICAgICAgICBib3R0b21EaXN0YW5jZTogdGhpcy5vcHRpb24sXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIDogdGhpcy5vcHRpb24gfHwgKHt9IGFzIE9wdGlvbik7XG4gICAgICAgIGlmIChcbiAgICAgICAgICBjdXIgPiBwcmV2ICYmXG4gICAgICAgICAgdmlld0VsLnNjcm9sbFRvcCA+XG4gICAgICAgICAgICB2aWV3RWwuc2Nyb2xsSGVpZ2h0IC1cbiAgICAgICAgICAgICAgdmlld0VsLmNsaWVudEhlaWdodCAtXG4gICAgICAgICAgICAgIChvcHRpb24uYm90dG9tRGlzdGFuY2UgfHwgZGVmYXVsdERpc3RhbmNlKVxuICAgICAgICApIHtcbiAgICAgICAgICBkaXJlY3Rpb24gPSAnYm90dG9tJztcbiAgICAgICAgfSBlbHNlIGlmIChcbiAgICAgICAgICBjdXIgPCBwcmV2ICYmXG4gICAgICAgICAgdmlld0VsLnNjcm9sbFRvcCA8IChvcHRpb24udG9wRGlzdGFuY2UgfHwgZGVmYXVsdERpc3RhbmNlKVxuICAgICAgICApIHtcbiAgICAgICAgICBkaXJlY3Rpb24gPSAndG9wJztcbiAgICAgICAgfVxuICAgICAgICB0aGlzLnNjcm9sbEJvcmRlci5lbWl0KGRpcmVjdGlvbik7XG4gICAgICAgIGRpcmVjdGlvbiA9PT0gJ2JvdHRvbScgJiYgdGhpcy5zY3JvbGxCb3R0b21Cb3JkZXIuZW1pdCgpO1xuICAgICAgfSk7XG4gIH1cbn1cbiJdfQ==