kantarciandClaude Opus 5.5
dd5bc16413
Same-page anchors kept the details menu open. scrolled.js closes it on any link click and loads only where a collapsible menu holds such links. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
60 lines
2.5 KiB
JavaScript
60 lines
2.5 KiB
JavaScript
/**
|
|
* Das kleine Skript des Kopfbereichs: markiert die gescrollte Seite und schließt das Menü nach
|
|
* einer Wahl (initMenus, unten).
|
|
*
|
|
* Marks the page as scrolled.
|
|
*
|
|
* A header can carry a second set of colours for the scrolled page - transparent over the hero,
|
|
* solid once the reader has moved on, the way the Flatsome transparent header works. The
|
|
* stylesheet holds both states; this only says which one applies. Without the script the header
|
|
* keeps its normal colours, which is a readable page, not a broken one.
|
|
*/
|
|
export function initScrolled(doc = document) {
|
|
const view = doc.defaultView;
|
|
const root = doc.documentElement;
|
|
// Der Nach-oben-Knopf blendete sich ueber eine Scroll-Animation ein. Browser, die
|
|
// `animation-timeline: scroll()` zwar kennen, aber nicht ausfuehren, liessen ihn im ersten
|
|
// Bild der Animation stehen - unsichtbar, dauerhaft. Deshalb entscheidet jetzt eine Klasse.
|
|
// Ohne dieses Skript bleibt der Knopf sichtbar: erreichbar ist besser als unsichtbar.
|
|
const after = parseInt(getComputedStyle(root).getPropertyValue('--kant-top-after'), 10);
|
|
const schwelle = Number.isFinite(after) && after > 0 ? after : 400;
|
|
let queued = false;
|
|
const sync = () => {
|
|
queued = false;
|
|
root.classList.toggle('is-scrolled', view.scrollY > 40);
|
|
root.classList.toggle('kant-top-shown', view.scrollY > schwelle);
|
|
};
|
|
const onScroll = () => { if (!queued) { queued = true; view.requestAnimationFrame(sync); } };
|
|
view.addEventListener('scroll', onScroll, { passive: true });
|
|
root.classList.add('kant-top-armed');
|
|
sync();
|
|
return () => {
|
|
view.removeEventListener('scroll', onScroll);
|
|
root.classList.remove('is-scrolled', 'kant-top-armed', 'kant-top-shown');
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Schließt das aufgeklappte Menü, sobald darin etwas gewählt wird (ADR 119).
|
|
*
|
|
* Ein Sprungziel wie #kontakt bleibt auf derselben Seite - das `details` blieb offen und lag über
|
|
* dem Ziel. Bei einem Link auf eine andere Seite stand es nach „Zurück“ (Seiten-Cache des
|
|
* Browsers) noch offen da. Ohne Skript bleibt es beim Klappen von Hand und beim Klick daneben.
|
|
*/
|
|
export function initMenus(doc = document) {
|
|
const onClick = (event) => {
|
|
const link = event.target.closest?.('.menu-burger-body a');
|
|
const menu = link?.closest('details.menu-burger');
|
|
if (menu) {
|
|
menu.open = false;
|
|
}
|
|
};
|
|
doc.addEventListener('click', onClick);
|
|
return () => doc.removeEventListener('click', onClick);
|
|
}
|
|
|
|
if (!document.querySelector('#editor')) {
|
|
initScrolled();
|
|
initMenus();
|
|
}
|