@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.
1 lines • 6.05 kB
Source Map (JSON)
{"version":3,"file":"koalarx-ui-shared-components-on-this-page.mjs","sources":["../../projects/koala-ui/shared/components/on-this-page/on-this-page.ts","../../projects/koala-ui/shared/components/on-this-page/on-this-page.html","../../projects/koala-ui/shared/components/on-this-page/koalarx-ui-shared-components-on-this-page.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n inject,\n input,\n linkedSignal,\n OnDestroy,\n OnInit,\n signal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { AppConfig } from '@koalarx/ui/core/config';\n\nexport interface OnThisPageLink {\n label: string;\n elementId: string;\n}\n\n@Component({\n selector: 'kl-on-this-page',\n templateUrl: './on-this-page.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class OnThisPage implements OnInit, OnDestroy {\n private readonly router = inject(Router);\n\n readonly translations = inject(AppConfig).translation.onThisPage;\n\n links = input.required<OnThisPageLink[]>();\n activeSection = signal<string | null>(null);\n\n linkSections = linkedSignal(() => {\n const links = this.links();\n const currentSection = this.activeSection();\n\n return links.map((link) => ({\n label: link.label,\n elementId: link.elementId,\n isActive: link.elementId === currentSection,\n }));\n });\n\n private onScroll = () => {\n const links = this.links();\n let current: string | null = null;\n for (const link of links) {\n const el = document.getElementById(link.elementId);\n if (el) {\n const rect = el.getBoundingClientRect();\n if (rect.top <= 250) {\n current = link.elementId;\n }\n }\n }\n if (current) {\n this.activeSection.set(current);\n }\n };\n\n constructor() {\n this.router.events.pipe(takeUntilDestroyed()).subscribe((event) => {\n if (event instanceof NavigationEnd) {\n window.scrollTo({ top: 0 });\n }\n });\n }\n\n ngOnDestroy(): void {\n window.removeEventListener('scroll', this.onScroll);\n }\n\n ngOnInit(): void {\n this.activeSection.set(\n location.hash.match(/#[a-zA-Z]+/)?.[0]?.replace(/#/g, '') || null\n );\n window.addEventListener('scroll', this.onScroll, { passive: true });\n }\n\n scrollTo(elementId: string) {\n const element = document.getElementById(elementId);\n if (element) {\n this.activeSection.set(elementId);\n const link = location.hash.match(/#[a-zA-Z]+/)\n ? location.hash.replace(/#([^#]*)$/, `#${elementId}`)\n : `${location.hash}#${elementId}`;\n\n history.pushState({}, '', link);\n\n const scrollPosition =\n element.getBoundingClientRect().top + window.scrollY - 100;\n\n window.scrollTo({\n top: scrollPosition,\n behavior: 'smooth',\n });\n }\n }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}