@koalarx/ui
Version:
Koala UI is a modern and accessible component library designed to speed up interface development in Angular projects. With simple integration and clear documentation, you can easily build robust and visually appealing applications.
80 lines (76 loc) • 4.64 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, input, signal, linkedSignal, ChangeDetectionStrategy, Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Router, NavigationEnd } from '@angular/router';
import { AppConfig } from '@koalarx/ui/core/config';
class OnThisPage {
router = inject(Router);
translations = inject(AppConfig).translation.onThisPage;
links = input.required(...(ngDevMode ? [{ debugName: "links" }] : []));
activeSection = signal(null, ...(ngDevMode ? [{ debugName: "activeSection" }] : []));
linkSections = linkedSignal(() => {
const links = this.links();
const currentSection = this.activeSection();
return links.map((link) => ({
label: link.label,
elementId: link.elementId,
isActive: link.elementId === currentSection,
}));
}, ...(ngDevMode ? [{ debugName: "linkSections" }] : []));
onScroll = () => {
const links = this.links();
let current = null;
for (const link of links) {
const el = document.getElementById(link.elementId);
if (el) {
const rect = el.getBoundingClientRect();
if (rect.top <= 250) {
current = link.elementId;
}
}
}
if (current) {
this.activeSection.set(current);
}
};
constructor() {
this.router.events.pipe(takeUntilDestroyed()).subscribe((event) => {
if (event instanceof NavigationEnd) {
window.scrollTo({ top: 0 });
}
});
}
ngOnDestroy() {
window.removeEventListener('scroll', this.onScroll);
}
ngOnInit() {
this.activeSection.set(location.hash.match(/#[a-zA-Z]+/)?.[0]?.replace(/#/g, '') || null);
window.addEventListener('scroll', this.onScroll, { passive: true });
}
scrollTo(elementId) {
const element = document.getElementById(elementId);
if (element) {
this.activeSection.set(elementId);
const link = location.hash.match(/#[a-zA-Z]+/)
? location.hash.replace(/#([^#]*)$/, `#${elementId}`)
: `${location.hash}#${elementId}`;
history.pushState({}, '', link);
const scrollPosition = element.getBoundingClientRect().top + window.scrollY - 100;
window.scrollTo({
top: scrollPosition,
behavior: 'smooth',
});
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OnThisPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: OnThisPage, isStandalone: true, selector: "kl-on-this-page", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"fixed\">\n <small class=\"opacity-70\">\n <ng-content select=\"[title]\">\n {{translations.title}}\n </ng-content>\n </small>\n\n <div class=\"flex flex-col gap-2 mt-2\">\n @for (item of linkSections(); track $index) {\n <a class=\"hover:cursor-pointer hover:opacity-90 transition duration-100 opacity-60\" [class]=\"{'opacity-100': item.isActive}\" (click)=\"scrollTo(item.elementId)\">\n {{ item.label }}\n </a>\n }\n </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OnThisPage, decorators: [{
type: Component,
args: [{ selector: 'kl-on-this-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fixed\">\n <small class=\"opacity-70\">\n <ng-content select=\"[title]\">\n {{translations.title}}\n </ng-content>\n </small>\n\n <div class=\"flex flex-col gap-2 mt-2\">\n @for (item of linkSections(); track $index) {\n <a class=\"hover:cursor-pointer hover:opacity-90 transition duration-100 opacity-60\" [class]=\"{'opacity-100': item.isActive}\" (click)=\"scrollTo(item.elementId)\">\n {{ item.label }}\n </a>\n }\n </div>\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: true }] }] } });
/**
* Generated bundle index. Do not edit.
*/
export { OnThisPage };
//# sourceMappingURL=koalarx-ui-shared-components-on-this-page.mjs.map