systelab-components
Version:
systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.
46 lines • 5.87 kB
JavaScript
import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
export class ScrollSpyDirective {
constructor(_el) {
this._el = _el;
this.spiedTags = ['div'];
this.querySelector = '[id^="section"]';
this.sectionChange = new EventEmitter();
}
onScroll(event) {
let nextSection;
const children = this._el.nativeElement.querySelectorAll(this.querySelector);
const scrollTop = event.target.scrollTop;
const parentOffset = event.target.offsetTop;
for (let i = 0; i < children.length; i++) {
const element = children[i];
if (this.spiedTags.some((spiedTag) => spiedTag.toLowerCase() === element.tagName.toLowerCase())) {
if (element.offsetTop - parentOffset <= scrollTop) {
nextSection = element.id;
}
}
}
if (nextSection && nextSection !== this.currentSection) {
this.currentSection = nextSection;
this.sectionChange.emit(this.currentSection);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ScrollSpyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: ScrollSpyDirective, selector: "[scrollSpy]", inputs: { spiedTags: "spiedTags", querySelector: "querySelector" }, outputs: { sectionChange: "sectionChange" }, host: { listeners: { "scroll": "onScroll($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ScrollSpyDirective, decorators: [{
type: Directive,
args: [{
selector: '[scrollSpy]',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { spiedTags: [{
type: Input
}], querySelector: [{
type: Input
}], sectionChange: [{
type: Output
}], onScroll: [{
type: HostListener,
args: ['scroll', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Nyb2xsLXNweS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zeXN0ZWxhYi1jb21wb25lbnRzL3NyYy9saWIvc3B5LW1lbnUvc2Nyb2xsLXNweS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBS2pHLE1BQU0sT0FBTyxrQkFBa0I7SUFNN0IsWUFBb0IsR0FBZTtRQUFmLFFBQUcsR0FBSCxHQUFHLENBQVk7UUFMbkIsY0FBUyxHQUFrQixDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ25DLGtCQUFhLEdBQUcsaUJBQWlCLENBQUM7UUFDakMsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0lBR3RCLENBQUM7SUFHdkMsUUFBUSxDQUFDLEtBQVU7UUFDakIsSUFBSSxXQUFtQixDQUFDO1FBQ3hCLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUM3RSxNQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQztRQUN6QyxNQUFNLFlBQVksR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQztRQUM1QyxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsUUFBUSxDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUN4QyxNQUFNLE9BQU8sR0FBRyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDNUIsSUFBSSxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUMsUUFBUSxDQUFDLFdBQVcsRUFBRSxLQUFLLE9BQU8sQ0FBQyxPQUFPLENBQUMsV0FBVyxFQUFFLENBQUMsRUFBRTtnQkFDL0YsSUFBSSxPQUFPLENBQUMsU0FBUyxHQUFHLFlBQVksSUFBSSxTQUFTLEVBQUU7b0JBQ2pELFdBQVcsR0FBRyxPQUFPLENBQUMsRUFBRSxDQUFDO2lCQUMxQjthQUNGO1NBQ0Y7UUFDRCxJQUFJLFdBQVcsSUFBSSxXQUFXLEtBQUssSUFBSSxDQUFDLGNBQWMsRUFBRTtZQUN0RCxJQUFJLENBQUMsY0FBYyxHQUFHLFdBQVcsQ0FBQztZQUNsQyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7U0FDOUM7SUFDSCxDQUFDOzhHQTFCVSxrQkFBa0I7a0dBQWxCLGtCQUFrQjs7MkZBQWxCLGtCQUFrQjtrQkFIOUIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsYUFBYTtpQkFDeEI7K0VBRWlCLFNBQVM7c0JBQXhCLEtBQUs7Z0JBQ1UsYUFBYTtzQkFBNUIsS0FBSztnQkFDVyxhQUFhO3NCQUE3QixNQUFNO2dCQU1QLFFBQVE7c0JBRFAsWUFBWTt1QkFBQyxRQUFRLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tzY3JvbGxTcHldJyxcbn0pXG5leHBvcnQgY2xhc3MgU2Nyb2xsU3B5RGlyZWN0aXZlIHtcbiAgQElucHV0KCkgcHVibGljIHNwaWVkVGFnczogQXJyYXk8c3RyaW5nPiA9IFsnZGl2J107XG4gIEBJbnB1dCgpIHB1YmxpYyBxdWVyeVNlbGVjdG9yID0gJ1tpZF49XCJzZWN0aW9uXCJdJztcbiAgQE91dHB1dCgpIHB1YmxpYyBzZWN0aW9uQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG4gIHByaXZhdGUgY3VycmVudFNlY3Rpb246IHN0cmluZztcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9lbDogRWxlbWVudFJlZikge31cblxuICBASG9zdExpc3RlbmVyKCdzY3JvbGwnLCBbJyRldmVudCddKVxuICBvblNjcm9sbChldmVudDogYW55KSB7XG4gICAgbGV0IG5leHRTZWN0aW9uOiBzdHJpbmc7XG4gICAgY29uc3QgY2hpbGRyZW4gPSB0aGlzLl9lbC5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3JBbGwodGhpcy5xdWVyeVNlbGVjdG9yKTtcbiAgICBjb25zdCBzY3JvbGxUb3AgPSBldmVudC50YXJnZXQuc2Nyb2xsVG9wO1xuICAgIGNvbnN0IHBhcmVudE9mZnNldCA9IGV2ZW50LnRhcmdldC5vZmZzZXRUb3A7XG4gICAgZm9yIChsZXQgaSA9IDA7IGkgPCBjaGlsZHJlbi5sZW5ndGg7IGkrKykge1xuICAgICAgY29uc3QgZWxlbWVudCA9IGNoaWxkcmVuW2ldO1xuICAgICAgaWYgKHRoaXMuc3BpZWRUYWdzLnNvbWUoKHNwaWVkVGFnKSA9PiBzcGllZFRhZy50b0xvd2VyQ2FzZSgpID09PSBlbGVtZW50LnRhZ05hbWUudG9Mb3dlckNhc2UoKSkpIHtcbiAgICAgICAgaWYgKGVsZW1lbnQub2Zmc2V0VG9wIC0gcGFyZW50T2Zmc2V0IDw9IHNjcm9sbFRvcCkge1xuICAgICAgICAgIG5leHRTZWN0aW9uID0gZWxlbWVudC5pZDtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgICBpZiAobmV4dFNlY3Rpb24gJiYgbmV4dFNlY3Rpb24gIT09IHRoaXMuY3VycmVudFNlY3Rpb24pIHtcbiAgICAgIHRoaXMuY3VycmVudFNlY3Rpb24gPSBuZXh0U2VjdGlvbjtcbiAgICAgIHRoaXMuc2VjdGlvbkNoYW5nZS5lbWl0KHRoaXMuY3VycmVudFNlY3Rpb24pO1xuICAgIH1cbiAgfVxufVxuIl19