@cisstech/nge
Version:
NG Essentials is a collection of libraries for Angular developers.
60 lines • 8.43 kB
JavaScript
import { Directive, EventEmitter, Input, Output, booleanAttribute, } from '@angular/core';
import * as i0 from "@angular/core";
export class ViewportIntersectionDirective {
constructor(element) {
this.element = element;
this.debug = false;
/**
* This event is emitted whenever the observed element intersects with the viewport or the specified scrollContainer
* according to the given threshold and rootMargin.
*/
this.intersected = new EventEmitter();
}
ngAfterViewInit() {
this.intersectionObserver = new IntersectionObserver((entries) => {
const entry = entries[0];
if (entry.isIntersecting) {
this.intersected.emit();
if (this.debug) {
this.element.nativeElement.style.border = '2px solid red';
}
}
else {
if (this.debug) {
this.element.nativeElement.style.border = '2px solid transparent';
}
}
}, {
root: this.scrollContainer ? this.scrollContainer : null,
rootMargin: this.rootMargin,
threshold: this.threshold,
});
this.intersectionObserver.observe(this.element.nativeElement);
}
ngOnDestroy() {
if (this.intersectionObserver) {
this.intersectionObserver.disconnect();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ViewportIntersectionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.1", type: ViewportIntersectionDirective, isStandalone: true, selector: "[viewportIntersection]", inputs: { scrollContainer: "scrollContainer", threshold: "threshold", rootMargin: "rootMargin", debug: ["debug", "debug", booleanAttribute] }, outputs: { intersected: "intersected" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ViewportIntersectionDirective, decorators: [{
type: Directive,
args: [{
selector: '[viewportIntersection]',
standalone: true,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { scrollContainer: [{
type: Input
}], threshold: [{
type: Input
}], rootMargin: [{
type: Input
}], debug: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], intersected: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlld3BvcnQtaW50ZXJzZWN0aW9uLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nZS9kaXJlY3RpdmVzL3NyYy92aWV3cG9ydC1pbnRlcnNlY3Rpb24uZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCxTQUFTLEVBRVQsWUFBWSxFQUNaLEtBQUssRUFFTCxNQUFNLEVBQ04sZ0JBQWdCLEdBQ2pCLE1BQU0sZUFBZSxDQUFBOztBQU10QixNQUFNLE9BQU8sNkJBQTZCO0lBaUN4QyxZQUE2QixPQUFnQztRQUFoQyxZQUFPLEdBQVAsT0FBTyxDQUF5QjtRQVZyQixVQUFLLEdBQUcsS0FBSyxDQUFBO1FBRXJEOzs7V0FHRztRQUNPLGdCQUFXLEdBQXVCLElBQUksWUFBWSxFQUFFLENBQUE7SUFJRSxDQUFDO0lBRWpFLGVBQWU7UUFDYixJQUFJLENBQUMsb0JBQW9CLEdBQUcsSUFBSSxvQkFBb0IsQ0FDbEQsQ0FBQyxPQUFPLEVBQUUsRUFBRTtZQUNWLE1BQU0sS0FBSyxHQUFHLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQTtZQUN4QixJQUFJLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztnQkFDekIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLEVBQUUsQ0FBQTtnQkFDdkIsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7b0JBQ2YsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxlQUFlLENBQUE7Z0JBQzNELENBQUM7WUFDSCxDQUFDO2lCQUFNLENBQUM7Z0JBQ04sSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7b0JBQ2YsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyx1QkFBdUIsQ0FBQTtnQkFDbkUsQ0FBQztZQUNILENBQUM7UUFDSCxDQUFDLEVBQ0Q7WUFDRSxJQUFJLEVBQUUsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsSUFBSTtZQUN4RCxVQUFVLEVBQUUsSUFBSSxDQUFDLFVBQVU7WUFDM0IsU0FBUyxFQUFFLElBQUksQ0FBQyxTQUFTO1NBQzFCLENBQ0YsQ0FBQTtRQUVELElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsQ0FBQTtJQUMvRCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksSUFBSSxDQUFDLG9CQUFvQixFQUFFLENBQUM7WUFDOUIsSUFBSSxDQUFDLG9CQUFvQixDQUFDLFVBQVUsRUFBRSxDQUFBO1FBQ3hDLENBQUM7SUFDSCxDQUFDOzhHQWhFVSw2QkFBNkI7a0dBQTdCLDZCQUE2QixvTEF1QnBCLGdCQUFnQjs7MkZBdkJ6Qiw2QkFBNkI7a0JBSnpDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLHdCQUF3QjtvQkFDbEMsVUFBVSxFQUFFLElBQUk7aUJBQ2pCOytFQUtVLGVBQWU7c0JBQXZCLEtBQUs7Z0JBU0csU0FBUztzQkFBakIsS0FBSztnQkFTRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNrQyxLQUFLO3NCQUE1QyxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFO2dCQU01QixXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgRGlyZWN0aXZlLFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkRlc3Ryb3ksXG4gIE91dHB1dCxcbiAgYm9vbGVhbkF0dHJpYnV0ZSxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSdcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3ZpZXdwb3J0SW50ZXJzZWN0aW9uXScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIFZpZXdwb3J0SW50ZXJzZWN0aW9uRGlyZWN0aXZlIGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgLyoqXG4gICAqIEFuIG9wdGlvbmFsIHJlZmVyZW5jZSB0byBhIGNvbnRhaW5lciBlbGVtZW50IHdpdGggaXRzIG93biBzY3JvbGxhYmxlIGFyZWEuIElmIG5vdCBwcm92aWRlZCwgdGhlIHZpZXdwb3J0IGlzIHVzZWQgYXMgdGhlIGRlZmF1bHQgY29udGFpbmVyLlxuICAgKi9cbiAgQElucHV0KCkgc2Nyb2xsQ29udGFpbmVyPzogSFRNTEVsZW1lbnQgfCBudWxsXG5cbiAgLyoqXG4gICAqIEEgc2luZ2xlIG51bWJlciBvciBhbiBhcnJheSBvZiBudW1iZXJzIGluZGljYXRpbmcgYXQgd2hhdCBwZXJjZW50YWdlIG9mIHRoZSB0YXJnZXQnc1xuICAgKiB2aXNpYmlsaXR5IHRoZSBvYnNlcnZlcidzIGNhbGxiYWNrIHNob3VsZCBiZSBleGVjdXRlZC5cbiAgICogRm9yIGV4YW1wbGUsIGEgdGhyZXNob2xkIG9mIDEuMCBtZWFucyB0aGUgY2FsbGJhY2sgd2lsbCB0cmlnZ2VyIHdoZW4gMTAwJSBvZiB0aGUgdGFyZ2V0IGlzIHZpc2libGUgd2l0aGluIHRoZSBvYnNlcnZlZCBhcmVhLlxuICAgKlxuICAgKiBQbGVhc2UgcmVmZXJzIHRvIHRoZSBvZmZpY2lhbCBkb2N1bWVudGF0aW9uIG9mIEludGVyc2VjdGlvbiBBUEkgZm9yIG1vcmUgaW5mb3JtYXRpb25zLlxuICAgKi9cbiAgQElucHV0KCkgdGhyZXNob2xkPzogbnVtYmVyIHwgbnVtYmVyW11cblxuICAvKipcbiAgICogQSBtYXJnaW4gYXJvdW5kIHRoZSByb290IGVsZW1lbnQuXG4gICAqIFRoaXMgbWFyZ2luIHdvcmtzIGxpa2UgdGhlIENTUyBtYXJnaW4gcHJvcGVydHksIHNldHRpbmcgaG93IG11Y2ggb2YgdGhlIHJvb3Qgc2hvdWxkIGJlIHNlZW4gYmVmb3JlIHRoZSBpbnRlcnNlY3Rpb24gaXMgb2JzZXJ2ZWQuXG4gICAqIEl0J3Mgc3BlY2lmaWVkIGluIHBpeGVscyBvciBwZXJjZW50YWdlcy5cbiAgICpcbiAgICogUGxlYXNlIHJlZmVycyB0byB0aGUgb2ZmaWNpYWwgZG9jdW1lbnRhdGlvbiBvZiBJbnRlcnNlY3Rpb24gQVBJIGZvciBtb3JlIGluZm9ybWF0aW9ucy5cbiAgICovXG4gIEBJbnB1dCgpIHJvb3RNYXJnaW4/OiBzdHJpbmdcbiAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pIGRlYnVnID0gZmFsc2VcblxuICAvKipcbiAgICogVGhpcyBldmVudCBpcyBlbWl0dGVkIHdoZW5ldmVyIHRoZSBvYnNlcnZlZCBlbGVtZW50IGludGVyc2VjdHMgd2l0aCB0aGUgdmlld3BvcnQgb3IgdGhlIHNwZWNpZmllZCBzY3JvbGxDb250YWluZXJcbiAgICogYWNjb3JkaW5nIHRvIHRoZSBnaXZlbiB0aHJlc2hvbGQgYW5kIHJvb3RNYXJnaW4uXG4gICAqL1xuICBAT3V0cHV0KCkgaW50ZXJzZWN0ZWQ6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXIoKVxuXG4gIHByaXZhdGUgaW50ZXJzZWN0aW9uT2JzZXJ2ZXI/OiBJbnRlcnNlY3Rpb25PYnNlcnZlclxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVhZG9ubHkgZWxlbWVudDogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4pIHt9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHRoaXMuaW50ZXJzZWN0aW9uT2JzZXJ2ZXIgPSBuZXcgSW50ZXJzZWN0aW9uT2JzZXJ2ZXIoXG4gICAgICAoZW50cmllcykgPT4ge1xuICAgICAgICBjb25zdCBlbnRyeSA9IGVudHJpZXNbMF1cbiAgICAgICAgaWYgKGVudHJ5LmlzSW50ZXJzZWN0aW5nKSB7XG4gICAgICAgICAgdGhpcy5pbnRlcnNlY3RlZC5lbWl0KClcbiAgICAgICAgICBpZiAodGhpcy5kZWJ1Zykge1xuICAgICAgICAgICAgdGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQuc3R5bGUuYm9yZGVyID0gJzJweCBzb2xpZCByZWQnXG4gICAgICAgICAgfVxuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIGlmICh0aGlzLmRlYnVnKSB7XG4gICAgICAgICAgICB0aGlzLmVsZW1lbnQubmF0aXZlRWxlbWVudC5zdHlsZS5ib3JkZXIgPSAnMnB4IHNvbGlkIHRyYW5zcGFyZW50J1xuICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgcm9vdDogdGhpcy5zY3JvbGxDb250YWluZXIgPyB0aGlzLnNjcm9sbENvbnRhaW5lciA6IG51bGwsXG4gICAgICAgIHJvb3RNYXJnaW46IHRoaXMucm9vdE1hcmdpbixcbiAgICAgICAgdGhyZXNob2xkOiB0aGlzLnRocmVzaG9sZCxcbiAgICAgIH1cbiAgICApXG5cbiAgICB0aGlzLmludGVyc2VjdGlvbk9ic2VydmVyLm9ic2VydmUodGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQpXG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5pbnRlcnNlY3Rpb25PYnNlcnZlcikge1xuICAgICAgdGhpcy5pbnRlcnNlY3Rpb25PYnNlcnZlci5kaXNjb25uZWN0KClcbiAgICB9XG4gIH1cbn1cbiJdfQ==