@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.61 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";
/**
* Creates a scroll-spy on this spy targets container (element).
*
* Automatically destroys the scroll-spy when the element is destroyed.
*
* This is useful:
*
* - when you have multiple (independent) scrollable elements on the same page,
* - or the scrollable element on your page is not the browser default scrollable element, for example `<mat-sidenav-content>` if you are using [Angular Material Sidenav](https://material.angular.io/components/sidenav)
*
* where you want to have a scroll-spy.
*/
export class SpyTargetContainerDirective {
constructor(scrollSpyService, platformId, elementRef) {
this.scrollSpyService = scrollSpyService;
this.platformId = platformId;
this.elementRef = elementRef;
}
ngOnInit() {
if (isPlatformServer(this.platformId)) {
return;
}
if (!this.spyTargetContainerId) {
throw new Error('SpyTargetContainerDirective: spyTargetContainerId needs to be set.');
}
this.scrollSpyService.createScrollSpy(this.spyTargetContainerId, this.elementRef.nativeElement);
}
ngOnDestroy() {
if (isPlatformServer(this.platformId)) {
return;
}
this.scrollSpyService.destroyScrollSpy(this.spyTargetContainerId);
}
}
SpyTargetContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: SpyTargetContainerDirective, deps: [{ token: i1.ScrollSpyService }, { token: PLATFORM_ID }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
SpyTargetContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.4", type: SpyTargetContainerDirective, isStandalone: true, selector: "[spyTargetContainer]", inputs: { spyTargetContainerId: "spyTargetContainerId" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: SpyTargetContainerDirective, decorators: [{
type: Directive,
args: [{
selector: '[spyTargetContainer]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.ScrollSpyService }, { type: undefined, decorators: [{
type: Inject,
args: [PLATFORM_ID]
}] }, { type: i0.ElementRef }]; }, propDecorators: { spyTargetContainerId: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3B5LXRhcmdldC1jb250YWluZXIuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNjcm9sbC1zcHkvc3JjL2xpYi9zcHktdGFyZ2V0LWNvbnRhaW5lci5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDbkQsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQXFCLE1BQU0sRUFBRSxXQUFXLEVBQWMsTUFBTSxlQUFlLENBQUM7OztBQUdyRzs7Ozs7Ozs7Ozs7R0FXRztBQUtILE1BQU0sT0FBTywyQkFBMkI7SUFPdEMsWUFDVSxnQkFBa0MsRUFDYixVQUFrQixFQUN2QyxVQUErQjtRQUYvQixxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWtCO1FBQ2IsZUFBVSxHQUFWLFVBQVUsQ0FBUTtRQUN2QyxlQUFVLEdBQVYsVUFBVSxDQUFxQjtJQUNyQyxDQUFDO0lBRUwsUUFBUTtRQUNOLElBQUksZ0JBQWdCLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxFQUFFO1lBQ3JDLE9BQU87U0FDUjtRQUNELElBQUksQ0FBQyxJQUFJLENBQUMsb0JBQW9CLEVBQUU7WUFDOUIsTUFBTSxJQUFJLEtBQUssQ0FBQyxvRUFBb0UsQ0FBQyxDQUFDO1NBQ3ZGO1FBQ0QsSUFBSSxDQUFDLGdCQUFnQixDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsb0JBQW9CLEVBQUUsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUNsRyxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksZ0JBQWdCLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxFQUFFO1lBQ3JDLE9BQU87U0FDUjtRQUNELElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsb0JBQW9CLENBQUMsQ0FBQztJQUNwRSxDQUFDOzt3SEE1QlUsMkJBQTJCLGtEQVM1QixXQUFXOzRHQVRWLDJCQUEyQjsyRkFBM0IsMkJBQTJCO2tCQUp2QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxzQkFBc0I7b0JBQ2hDLFVBQVUsRUFBRSxJQUFJO2lCQUNqQjs7MEJBVUksTUFBTTsyQkFBQyxXQUFXO3FFQUpaLG9CQUFvQjtzQkFBNUIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGlzUGxhdGZvcm1TZXJ2ZXIgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBEaXJlY3RpdmUsIElucHV0LCBPbkluaXQsIE9uRGVzdHJveSwgSW5qZWN0LCBQTEFURk9STV9JRCwgRWxlbWVudFJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBTY3JvbGxTcHlTZXJ2aWNlIH0gZnJvbSAnLi9zY3JvbGwtc3B5LnNlcnZpY2UnO1xyXG5cclxuLyoqXHJcbiAqIENyZWF0ZXMgYSBzY3JvbGwtc3B5IG9uIHRoaXMgc3B5IHRhcmdldHMgY29udGFpbmVyIChlbGVtZW50KS5cclxuICpcclxuICogQXV0b21hdGljYWxseSBkZXN0cm95cyB0aGUgc2Nyb2xsLXNweSB3aGVuIHRoZSBlbGVtZW50IGlzIGRlc3Ryb3llZC5cclxuICpcclxuICogVGhpcyBpcyB1c2VmdWw6XHJcbiAqXHJcbiAqIC0gd2hlbiB5b3UgaGF2ZSBtdWx0aXBsZSAoaW5kZXBlbmRlbnQpIHNjcm9sbGFibGUgZWxlbWVudHMgb24gdGhlIHNhbWUgcGFnZSxcclxuICogLSBvciB0aGUgc2Nyb2xsYWJsZSBlbGVtZW50IG9uIHlvdXIgcGFnZSBpcyBub3QgdGhlIGJyb3dzZXIgZGVmYXVsdCBzY3JvbGxhYmxlIGVsZW1lbnQsIGZvciBleGFtcGxlIGA8bWF0LXNpZGVuYXYtY29udGVudD5gIGlmIHlvdSBhcmUgdXNpbmcgW0FuZ3VsYXIgTWF0ZXJpYWwgU2lkZW5hdl0oaHR0cHM6Ly9tYXRlcmlhbC5hbmd1bGFyLmlvL2NvbXBvbmVudHMvc2lkZW5hdilcclxuICpcclxuICogd2hlcmUgeW91IHdhbnQgdG8gaGF2ZSBhIHNjcm9sbC1zcHkuXHJcbiAqL1xyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogJ1tzcHlUYXJnZXRDb250YWluZXJdJyxcclxuICBzdGFuZGFsb25lOiB0cnVlXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTcHlUYXJnZXRDb250YWluZXJEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XHJcblxyXG4gIC8qKlxyXG4gICAqIElEIGZvciB0aGlzIHNweVRhcmdldENvbnRhaW5lci5cclxuICAgKi9cclxuICBASW5wdXQoKSBzcHlUYXJnZXRDb250YWluZXJJZCE6IHN0cmluZztcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIHNjcm9sbFNweVNlcnZpY2U6IFNjcm9sbFNweVNlcnZpY2UsXHJcbiAgICBASW5qZWN0KFBMQVRGT1JNX0lEKSBwcml2YXRlIHBsYXRmb3JtSWQ6IHN0cmluZyxcclxuICAgIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZjxFbGVtZW50PixcclxuICApIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIGlmIChpc1BsYXRmb3JtU2VydmVyKHRoaXMucGxhdGZvcm1JZCkpIHtcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG4gICAgaWYgKCF0aGlzLnNweVRhcmdldENvbnRhaW5lcklkKSB7XHJcbiAgICAgIHRocm93IG5ldyBFcnJvcignU3B5VGFyZ2V0Q29udGFpbmVyRGlyZWN0aXZlOiBzcHlUYXJnZXRDb250YWluZXJJZCBuZWVkcyB0byBiZSBzZXQuJyk7XHJcbiAgICB9XHJcbiAgICB0aGlzLnNjcm9sbFNweVNlcnZpY2UuY3JlYXRlU2Nyb2xsU3B5KHRoaXMuc3B5VGFyZ2V0Q29udGFpbmVySWQsIHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50KTtcclxuICB9XHJcblxyXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xyXG4gICAgaWYgKGlzUGxhdGZvcm1TZXJ2ZXIodGhpcy5wbGF0Zm9ybUlkKSkge1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcbiAgICB0aGlzLnNjcm9sbFNweVNlcnZpY2UuZGVzdHJveVNjcm9sbFNweSh0aGlzLnNweVRhcmdldENvbnRhaW5lcklkKTtcclxuICB9XHJcbn1cclxuIl19