@thejlifex/ngx-scroll-spy
Version:
An Angular library that can spy the position of elements (inside a scrollable container) and emit the currently active (visible) element in the viewport.
53 lines • 6.43 kB
JavaScript
import { isPlatformServer } from '@angular/common';
import { Directive, Input, Inject, PLATFORM_ID } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "./scroll-spy.service";
/**
* Adds this element as spy-target and starts to observe this target.
*
* Automatically removes this element as spy-target and stops observing this target when the element is destroyed.
*/
export class SpyTargetDirective {
constructor(elementRef, scrollSpyService, platformId) {
this.elementRef = elementRef;
this.scrollSpyService = scrollSpyService;
this.platformId = platformId;
}
ngOnInit() {
if (isPlatformServer(this.platformId)) {
return;
}
if (!this.spyTargetId) {
throw new Error('SpyTargetDirective: spyTargetId needs to be set.');
}
this.target = {
id: this.spyTargetId,
element: this.elementRef.nativeElement,
containerId: this.spyTargetContainerId
};
this.scrollSpyService.addTarget(this.target);
}
ngOnDestroy() {
if (isPlatformServer(this.platformId)) {
return;
}
this.scrollSpyService.removeTarget(this.target);
}
}
SpyTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: SpyTargetDirective, deps: [{ token: i0.ElementRef }, { token: i1.ScrollSpyService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
SpyTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.4", type: SpyTargetDirective, isStandalone: true, selector: "[spyTarget]", inputs: { spyTargetId: "spyTargetId", spyTargetContainerId: "spyTargetContainerId" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: SpyTargetDirective, decorators: [{
type: Directive,
args: [{
selector: '[spyTarget]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ScrollSpyService }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }]; }, propDecorators: { spyTargetId: [{
type: Input
}], spyTargetContainerId: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3B5LXRhcmdldC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2Nyb2xsLXNweS9zcmMvbGliL3NweS10YXJnZXQuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ25ELE9BQU8sRUFBRSxTQUFTLEVBQWMsS0FBSyxFQUFxQixNQUFNLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFJckc7Ozs7R0FJRztBQUtILE1BQU0sT0FBTyxrQkFBa0I7SUFnQjdCLFlBQ1UsVUFBK0IsRUFDL0IsZ0JBQWtDLEVBQ2IsVUFBa0I7UUFGdkMsZUFBVSxHQUFWLFVBQVUsQ0FBcUI7UUFDL0IscUJBQWdCLEdBQWhCLGdCQUFnQixDQUFrQjtRQUNiLGVBQVUsR0FBVixVQUFVLENBQVE7SUFDN0MsQ0FBQztJQUVMLFFBQVE7UUFDTixJQUFJLGdCQUFnQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsRUFBRTtZQUNyQyxPQUFPO1NBQ1I7UUFDRCxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUNyQixNQUFNLElBQUksS0FBSyxDQUFDLGtEQUFrRCxDQUFDLENBQUM7U0FDckU7UUFDRCxJQUFJLENBQUMsTUFBTSxHQUFHO1lBQ1osRUFBRSxFQUFFLElBQUksQ0FBQyxXQUFXO1lBQ3BCLE9BQU8sRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWE7WUFDdEMsV0FBVyxFQUFFLElBQUksQ0FBQyxvQkFBb0I7U0FDdkMsQ0FBQztRQUNGLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQy9DLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEVBQUU7WUFDckMsT0FBTztTQUNSO1FBQ0QsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDbEQsQ0FBQzs7K0dBMUNVLGtCQUFrQiw0RUFtQm5CLFdBQVc7bUdBbkJWLGtCQUFrQjsyRkFBbEIsa0JBQWtCO2tCQUo5QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxhQUFhO29CQUN2QixVQUFVLEVBQUUsSUFBSTtpQkFDakI7OzBCQW9CSSxNQUFNOzJCQUFDLFdBQVc7NENBZFosV0FBVztzQkFBbkIsS0FBSztnQkFPRyxvQkFBb0I7c0JBQTVCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBpc1BsYXRmb3JtU2VydmVyIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBJbnB1dCwgT25Jbml0LCBPbkRlc3Ryb3ksIEluamVjdCwgUExBVEZPUk1fSUQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgU2Nyb2xsU3B5U2VydmljZSB9IGZyb20gJy4vc2Nyb2xsLXNweS5zZXJ2aWNlJztcclxuaW1wb3J0IHsgU3B5VGFyZ2V0IH0gZnJvbSAnLi9tb2RlbHMvc3B5LXRhcmdldCc7XHJcblxyXG4vKipcclxuICogQWRkcyB0aGlzIGVsZW1lbnQgYXMgc3B5LXRhcmdldCBhbmQgc3RhcnRzIHRvIG9ic2VydmUgdGhpcyB0YXJnZXQuXHJcbiAqXHJcbiAqIEF1dG9tYXRpY2FsbHkgcmVtb3ZlcyB0aGlzIGVsZW1lbnQgYXMgc3B5LXRhcmdldCBhbmQgc3RvcHMgb2JzZXJ2aW5nIHRoaXMgdGFyZ2V0IHdoZW4gdGhlIGVsZW1lbnQgaXMgZGVzdHJveWVkLlxyXG4gKi9cclxuQERpcmVjdGl2ZSh7XHJcbiAgc2VsZWN0b3I6ICdbc3B5VGFyZ2V0XScsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZVxyXG59KVxyXG5leHBvcnQgY2xhc3MgU3B5VGFyZ2V0RGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xyXG5cclxuICAvKipcclxuICAgKiBJRCBmb3IgdGhpcyBzcHlUYXJnZXQuXHJcbiAgICovXHJcbiAgQElucHV0KCkgc3B5VGFyZ2V0SWQhOiBzdHJpbmc7XHJcblxyXG4gIC8qKlxyXG4gICAqIEBvcHRpb25hbFxyXG4gICAqXHJcbiAgICogSUQgZm9yIHRoZSBzcHlUYXJnZXRDb250YWluZXIgY29udGFpbmluZyB0aGlzIHNweVRhcmdldC5cclxuICAgKi9cclxuICBASW5wdXQoKSBzcHlUYXJnZXRDb250YWluZXJJZD86IHN0cmluZztcclxuXHJcbiAgcHJpdmF0ZSB0YXJnZXQhOiBTcHlUYXJnZXQ7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmPEVsZW1lbnQ+LFxyXG4gICAgcHJpdmF0ZSBzY3JvbGxTcHlTZXJ2aWNlOiBTY3JvbGxTcHlTZXJ2aWNlLFxyXG4gICAgQEluamVjdChQTEFURk9STV9JRCkgcHJpdmF0ZSBwbGF0Zm9ybUlkOiBzdHJpbmdcclxuICApIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIGlmIChpc1BsYXRmb3JtU2VydmVyKHRoaXMucGxhdGZvcm1JZCkpIHtcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG4gICAgaWYgKCF0aGlzLnNweVRhcmdldElkKSB7XHJcbiAgICAgIHRocm93IG5ldyBFcnJvcignU3B5VGFyZ2V0RGlyZWN0aXZlOiBzcHlUYXJnZXRJZCBuZWVkcyB0byBiZSBzZXQuJyk7XHJcbiAgICB9XHJcbiAgICB0aGlzLnRhcmdldCA9IHtcclxuICAgICAgaWQ6IHRoaXMuc3B5VGFyZ2V0SWQsXHJcbiAgICAgIGVsZW1lbnQ6IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LFxyXG4gICAgICBjb250YWluZXJJZDogdGhpcy5zcHlUYXJnZXRDb250YWluZXJJZFxyXG4gICAgfTtcclxuICAgIHRoaXMuc2Nyb2xsU3B5U2VydmljZS5hZGRUYXJnZXQodGhpcy50YXJnZXQpO1xyXG4gIH1cclxuXHJcbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XHJcbiAgICBpZiAoaXNQbGF0Zm9ybVNlcnZlcih0aGlzLnBsYXRmb3JtSWQpKSB7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuICAgIHRoaXMuc2Nyb2xsU3B5U2VydmljZS5yZW1vdmVUYXJnZXQodGhpcy50YXJnZXQpO1xyXG4gIH1cclxufVxyXG4iXX0=