@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
73 lines • 10.7 kB
JavaScript
import { Directive, ElementRef, EventEmitter, inject, Input, Output } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as i0 from "@angular/core";
export class OverflowDirective {
constructor() {
this._elementRef = inject(ElementRef);
/** Allow overflow to be within a range before emitting */
this.tolerance = 0;
/** Emit when there is a change to the overflow state - horizontal or vertical */
this.uxOverflowObserver = new EventEmitter();
/** Emit when there is a change to overflow on the horizontal axis */
this.uxOverflowHorizontalObserver = new EventEmitter();
/** Emit when there is a change to overflow on the vertical axis */
this.uxOverflowVerticalObserver = new EventEmitter();
/** Store the overflow state on both axis */
this._state = { horizontalOverflow: false, verticalOverflow: false };
/** Unsubscribe from all the observables */
this._onDestroy = new Subject();
}
/** Set up the trigger if specified */
ngOnInit() {
if (this.trigger) {
this.trigger.pipe(takeUntil(this._onDestroy)).subscribe(() => this.checkForOverflow());
}
}
/** Perform an intial check for overflow */
ngAfterViewInit() {
requestAnimationFrame(() => this.checkForOverflow());
}
/** Unsubscribe from the trigger */
ngOnDestroy() {
this._onDestroy.next();
this._onDestroy.complete();
}
/** Programmatically trigger check for overflow */
checkForOverflow() {
const { offsetWidth, offsetHeight, scrollWidth, scrollHeight } = this._elementRef.nativeElement;
const horizontalOverflow = (scrollWidth - offsetWidth) > this.tolerance;
const verticalOverflow = (scrollHeight - offsetHeight) > this.tolerance;
if (horizontalOverflow !== this._state.horizontalOverflow) {
this.uxOverflowHorizontalObserver.emit(horizontalOverflow);
}
if (verticalOverflow !== this._state.verticalOverflow) {
this.uxOverflowVerticalObserver.emit(verticalOverflow);
}
if (horizontalOverflow !== this._state.horizontalOverflow || verticalOverflow !== this._state.verticalOverflow) {
this.uxOverflowObserver.emit((horizontalOverflow || verticalOverflow));
}
// store the state
this._state = { horizontalOverflow, verticalOverflow };
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OverflowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: OverflowDirective, selector: "[uxOverflowObserver], [uxOverflowHorizontalObserver], [uxOverflowVerticalObserver]", inputs: { trigger: "trigger", tolerance: "tolerance" }, outputs: { uxOverflowObserver: "uxOverflowObserver", uxOverflowHorizontalObserver: "uxOverflowHorizontalObserver", uxOverflowVerticalObserver: "uxOverflowVerticalObserver" }, exportAs: ["ux-overflow-observer"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OverflowDirective, decorators: [{
type: Directive,
args: [{
selector: '[uxOverflowObserver], [uxOverflowHorizontalObserver], [uxOverflowVerticalObserver]',
exportAs: 'ux-overflow-observer'
}]
}], propDecorators: { trigger: [{
type: Input
}], tolerance: [{
type: Input
}], uxOverflowObserver: [{
type: Output
}], uxOverflowHorizontalObserver: [{
type: Output
}], uxOverflowVerticalObserver: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3ZlcmZsb3ctb2JzZXJ2ZXIuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2RpcmVjdGl2ZXMvb2JzZXJ2ZXJzL292ZXJmbG93L292ZXJmbG93LW9ic2VydmVyLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWlCLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQXFCLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM3SCxPQUFPLEVBQWMsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzNDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7QUFNM0MsTUFBTSxPQUFPLGlCQUFpQjtJQUo5QjtRQUttQixnQkFBVyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUtsRCwwREFBMEQ7UUFDakQsY0FBUyxHQUFXLENBQUMsQ0FBQztRQUUvQixpRkFBaUY7UUFDdkUsdUJBQWtCLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUUzRCxxRUFBcUU7UUFDM0QsaUNBQTRCLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUVyRSxtRUFBbUU7UUFDekQsK0JBQTBCLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUVuRSw0Q0FBNEM7UUFDcEMsV0FBTSxHQUFHLEVBQUUsa0JBQWtCLEVBQUUsS0FBSyxFQUFFLGdCQUFnQixFQUFFLEtBQUssRUFBRSxDQUFDO1FBRXhFLDJDQUEyQztRQUMxQixlQUFVLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztLQTBDbkQ7SUF4Q0Msc0NBQXNDO0lBQ3RDLFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNqQixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDLENBQUM7UUFDekYsQ0FBQztJQUNILENBQUM7SUFFRCwyQ0FBMkM7SUFDM0MsZUFBZTtRQUNiLHFCQUFxQixDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDLENBQUM7SUFDdkQsQ0FBQztJQUVELG1DQUFtQztJQUNuQyxXQUFXO1FBQ1QsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN2QixJQUFJLENBQUMsVUFBVSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQzdCLENBQUM7SUFFRCxrREFBa0Q7SUFDbEQsZ0JBQWdCO1FBRWQsTUFBTSxFQUFFLFdBQVcsRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLFlBQVksRUFBRSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDO1FBQ2hHLE1BQU0sa0JBQWtCLEdBQUcsQ0FBQyxXQUFXLEdBQUcsV0FBVyxDQUFDLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQztRQUN4RSxNQUFNLGdCQUFnQixHQUFHLENBQUMsWUFBWSxHQUFHLFlBQVksQ0FBQyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUM7UUFFeEUsSUFBSSxrQkFBa0IsS0FBSyxJQUFJLENBQUMsTUFBTSxDQUFDLGtCQUFrQixFQUFFLENBQUM7WUFDMUQsSUFBSSxDQUFDLDRCQUE0QixDQUFDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1FBQzdELENBQUM7UUFFRCxJQUFJLGdCQUFnQixLQUFLLElBQUksQ0FBQyxNQUFNLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztZQUN0RCxJQUFJLENBQUMsMEJBQTBCLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFDekQsQ0FBQztRQUVELElBQUksa0JBQWtCLEtBQUssSUFBSSxDQUFDLE1BQU0sQ0FBQyxrQkFBa0IsSUFBSSxnQkFBZ0IsS0FBSyxJQUFJLENBQUMsTUFBTSxDQUFDLGdCQUFnQixFQUFFLENBQUM7WUFDL0csSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxDQUFDLGtCQUFrQixJQUFJLGdCQUFnQixDQUFDLENBQUMsQ0FBQztRQUN6RSxDQUFDO1FBRUQsa0JBQWtCO1FBQ2xCLElBQUksQ0FBQyxNQUFNLEdBQUcsRUFBRSxrQkFBa0IsRUFBRSxnQkFBZ0IsRUFBRSxDQUFDO0lBQ3pELENBQUM7K0dBL0RVLGlCQUFpQjttR0FBakIsaUJBQWlCOzs0RkFBakIsaUJBQWlCO2tCQUo3QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxvRkFBb0Y7b0JBQzlGLFFBQVEsRUFBRSxzQkFBc0I7aUJBQ2pDOzhCQUtVLE9BQU87c0JBQWYsS0FBSztnQkFHRyxTQUFTO3NCQUFqQixLQUFLO2dCQUdJLGtCQUFrQjtzQkFBM0IsTUFBTTtnQkFHRyw0QkFBNEI7c0JBQXJDLE1BQU07Z0JBR0csMEJBQTBCO3NCQUFuQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIGluamVjdCwgSW5wdXQsIE9uRGVzdHJveSwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE9ic2VydmFibGUsIFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3V4T3ZlcmZsb3dPYnNlcnZlcl0sIFt1eE92ZXJmbG93SG9yaXpvbnRhbE9ic2VydmVyXSwgW3V4T3ZlcmZsb3dWZXJ0aWNhbE9ic2VydmVyXScsXG4gIGV4cG9ydEFzOiAndXgtb3ZlcmZsb3ctb2JzZXJ2ZXInXG59KVxuZXhwb3J0IGNsYXNzIE92ZXJmbG93RGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3kge1xuICBwcml2YXRlIHJlYWRvbmx5IF9lbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuXG4gIC8qKiBBbGxvdyBhIG9ic2VydmFibGUgdG8gYmUgdXNlZCB0byBjaGVjayBmb3Igb3ZlcmZsb3cgKi9cbiAgQElucHV0KCkgdHJpZ2dlcjogT2JzZXJ2YWJsZTx2b2lkPjtcblxuICAvKiogQWxsb3cgb3ZlcmZsb3cgdG8gYmUgd2l0aGluIGEgcmFuZ2UgYmVmb3JlIGVtaXR0aW5nICovXG4gIEBJbnB1dCgpIHRvbGVyYW5jZTogbnVtYmVyID0gMDtcblxuICAvKiogRW1pdCB3aGVuIHRoZXJlIGlzIGEgY2hhbmdlIHRvIHRoZSBvdmVyZmxvdyBzdGF0ZSAtIGhvcml6b250YWwgb3IgdmVydGljYWwgKi9cbiAgQE91dHB1dCgpIHV4T3ZlcmZsb3dPYnNlcnZlciA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICAvKiogRW1pdCB3aGVuIHRoZXJlIGlzIGEgY2hhbmdlIHRvIG92ZXJmbG93IG9uIHRoZSBob3Jpem9udGFsIGF4aXMgKi9cbiAgQE91dHB1dCgpIHV4T3ZlcmZsb3dIb3Jpem9udGFsT2JzZXJ2ZXIgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgLyoqIEVtaXQgd2hlbiB0aGVyZSBpcyBhIGNoYW5nZSB0byBvdmVyZmxvdyBvbiB0aGUgdmVydGljYWwgYXhpcyAqL1xuICBAT3V0cHV0KCkgdXhPdmVyZmxvd1ZlcnRpY2FsT2JzZXJ2ZXIgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgLyoqIFN0b3JlIHRoZSBvdmVyZmxvdyBzdGF0ZSBvbiBib3RoIGF4aXMgKi9cbiAgcHJpdmF0ZSBfc3RhdGUgPSB7IGhvcml6b250YWxPdmVyZmxvdzogZmFsc2UsIHZlcnRpY2FsT3ZlcmZsb3c6IGZhbHNlIH07XG5cbiAgLyoqIFVuc3Vic2NyaWJlIGZyb20gYWxsIHRoZSBvYnNlcnZhYmxlcyAqL1xuICBwcml2YXRlIHJlYWRvbmx5IF9vbkRlc3Ryb3kgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gIC8qKiBTZXQgdXAgdGhlIHRyaWdnZXIgaWYgc3BlY2lmaWVkICovXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLnRyaWdnZXIpIHtcbiAgICAgIHRoaXMudHJpZ2dlci5waXBlKHRha2VVbnRpbCh0aGlzLl9vbkRlc3Ryb3kpKS5zdWJzY3JpYmUoKCkgPT4gdGhpcy5jaGVja0Zvck92ZXJmbG93KCkpO1xuICAgIH1cbiAgfVxuXG4gIC8qKiBQZXJmb3JtIGFuIGludGlhbCBjaGVjayBmb3Igb3ZlcmZsb3cgKi9cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB0aGlzLmNoZWNrRm9yT3ZlcmZsb3coKSk7XG4gIH1cblxuICAvKiogVW5zdWJzY3JpYmUgZnJvbSB0aGUgdHJpZ2dlciAqL1xuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLl9vbkRlc3Ryb3kubmV4dCgpO1xuICAgIHRoaXMuX29uRGVzdHJveS5jb21wbGV0ZSgpO1xuICB9XG5cbiAgLyoqIFByb2dyYW1tYXRpY2FsbHkgdHJpZ2dlciBjaGVjayBmb3Igb3ZlcmZsb3cgKi9cbiAgY2hlY2tGb3JPdmVyZmxvdygpOiB2b2lkIHtcblxuICAgIGNvbnN0IHsgb2Zmc2V0V2lkdGgsIG9mZnNldEhlaWdodCwgc2Nyb2xsV2lkdGgsIHNjcm9sbEhlaWdodCB9ID0gdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xuICAgIGNvbnN0IGhvcml6b250YWxPdmVyZmxvdyA9IChzY3JvbGxXaWR0aCAtIG9mZnNldFdpZHRoKSA+IHRoaXMudG9sZXJhbmNlO1xuICAgIGNvbnN0IHZlcnRpY2FsT3ZlcmZsb3cgPSAoc2Nyb2xsSGVpZ2h0IC0gb2Zmc2V0SGVpZ2h0KSA+IHRoaXMudG9sZXJhbmNlO1xuXG4gICAgaWYgKGhvcml6b250YWxPdmVyZmxvdyAhPT0gdGhpcy5fc3RhdGUuaG9yaXpvbnRhbE92ZXJmbG93KSB7XG4gICAgICB0aGlzLnV4T3ZlcmZsb3dIb3Jpem9udGFsT2JzZXJ2ZXIuZW1pdChob3Jpem9udGFsT3ZlcmZsb3cpO1xuICAgIH1cblxuICAgIGlmICh2ZXJ0aWNhbE92ZXJmbG93ICE9PSB0aGlzLl9zdGF0ZS52ZXJ0aWNhbE92ZXJmbG93KSB7XG4gICAgICB0aGlzLnV4T3ZlcmZsb3dWZXJ0aWNhbE9ic2VydmVyLmVtaXQodmVydGljYWxPdmVyZmxvdyk7XG4gICAgfVxuXG4gICAgaWYgKGhvcml6b250YWxPdmVyZmxvdyAhPT0gdGhpcy5fc3RhdGUuaG9yaXpvbnRhbE92ZXJmbG93IHx8IHZlcnRpY2FsT3ZlcmZsb3cgIT09IHRoaXMuX3N0YXRlLnZlcnRpY2FsT3ZlcmZsb3cpIHtcbiAgICAgIHRoaXMudXhPdmVyZmxvd09ic2VydmVyLmVtaXQoKGhvcml6b250YWxPdmVyZmxvdyB8fCB2ZXJ0aWNhbE92ZXJmbG93KSk7XG4gICAgfVxuXG4gICAgLy8gc3RvcmUgdGhlIHN0YXRlXG4gICAgdGhpcy5fc3RhdGUgPSB7IGhvcml6b250YWxPdmVyZmxvdywgdmVydGljYWxPdmVyZmxvdyB9O1xuICB9XG59XG4iXX0=