A few little annoyances

This commit is contained in:
Simon Martens
2025-09-25 19:24:24 +02:00
parent f17cd7fddc
commit d48bba8e92
3 changed files with 10 additions and 16 deletions

View File

@@ -354,19 +354,19 @@ class O extends HTMLElement {
super(), this.scrollTimeout = null, this.clickHandlers = [], this.manualNavigation = !1, this.handleScroll = this.handleScroll.bind(this); super(), this.scrollTimeout = null, this.clickHandlers = [], this.manualNavigation = !1, this.handleScroll = this.handleScroll.bind(this);
} }
handleScroll() { handleScroll() {
console.log("Scroll event fired!"), clearTimeout(this.scrollTimeout), this.scrollTimeout = setTimeout(() => { clearTimeout(this.scrollTimeout), this.scrollTimeout = setTimeout(() => {
this.updateActiveLink(), this.updateSidebarScrollToTopButton(); this.updateActiveLink(), this.updateSidebarScrollToTopButton();
}, 50); }, 50);
} }
connectedCallback() { connectedCallback() {
console.log("AkteureScrollspy connected"), setTimeout(() => { setTimeout(() => {
this.initializeScrollspyAfterDelay(); this.initializeScrollspyAfterDelay();
}, 50), window.addEventListener("pageshow", (e) => { }, 50), window.addEventListener("pageshow", (e) => {
e.persisted && (this.cleanup(), this.initializeScrollspy()); e.persisted && (this.cleanup(), this.initializeScrollspy());
}); });
} }
initializeScrollspyAfterDelay() { initializeScrollspyAfterDelay() {
if (console.log("initializeScrollspyAfterDelay running"), this.sections = document.querySelectorAll(".author-section"), this.navLinks = document.querySelectorAll(".scrollspy-link"), this.sections.length === 0 || this.navLinks.length === 0) { if (this.sections = document.querySelectorAll(".author-section"), this.navLinks = document.querySelectorAll(".scrollspy-link"), this.sections.length === 0 || this.navLinks.length === 0) {
setTimeout(() => { setTimeout(() => {
this.sections = document.querySelectorAll(".author-section"), this.navLinks = document.querySelectorAll(".scrollspy-link"), this.sections.length > 0 && this.navLinks.length > 0 && this.initializeScrollspy(); this.sections = document.querySelectorAll(".author-section"), this.navLinks = document.querySelectorAll(".scrollspy-link"), this.sections.length > 0 && this.navLinks.length > 0 && this.initializeScrollspy();
}, 500); }, 500);
@@ -375,10 +375,10 @@ class O extends HTMLElement {
this.initializeScrollspy(); this.initializeScrollspy();
} }
disconnectedCallback() { disconnectedCallback() {
console.log("AkteureScrollspy disconnected"), this.cleanup(); this.cleanup();
} }
initializeScrollspy() { initializeScrollspy() {
console.log("initializeScrollspy running"), window.addEventListener("scroll", this.handleScroll), this.navLinks.forEach((e) => { window.addEventListener("scroll", this.handleScroll), this.navLinks.forEach((e) => {
const t = (i) => { const t = (i) => {
i.preventDefault(); i.preventDefault();
const n = e.getAttribute("data-target"), s = document.getElementById(n); const n = e.getAttribute("data-target"), s = document.getElementById(n);
@@ -490,9 +490,9 @@ class O extends HTMLElement {
document.documentElement.offsetHeight document.documentElement.offsetHeight
), s = window.innerHeight, o = n - s, r = o > 0 ? window.scrollY / o : 0, l = t.clientHeight, d = t.scrollHeight - l; ), s = window.innerHeight, o = n - s, r = o > 0 ? window.scrollY / o : 0, l = t.clientHeight, d = t.scrollHeight - l;
if (d > 0) { if (d > 0) {
const u = r * d, g = i.getBoundingClientRect(), p = t.getBoundingClientRect(), f = g.top - p.top + t.scrollTop, m = l / 2, q = f - m, y = 0.7, I = y * u + (1 - y) * q, v = Math.max(0, Math.min(d, I)), T = t.scrollTop; const u = r * d, g = i.getBoundingClientRect(), p = t.getBoundingClientRect(), f = g.top - p.top + t.scrollTop, m = l / 2, q = f - m, v = 0.7, I = v * u + (1 - v) * q, y = Math.max(0, Math.min(d, I)), T = t.scrollTop;
Math.abs(v - T) > 10 && t.scrollTo({ Math.abs(y - T) > 10 && t.scrollTo({
top: v, top: y,
behavior: "smooth" behavior: "smooth"
}); });
} }
@@ -504,7 +504,7 @@ class O extends HTMLElement {
t > i * 0.5 ? (e.classList.remove("opacity-0"), e.classList.add("opacity-100")) : (e.classList.remove("opacity-100"), e.classList.add("opacity-0")); t > i * 0.5 ? (e.classList.remove("opacity-0"), e.classList.add("opacity-100")) : (e.classList.remove("opacity-100"), e.classList.add("opacity-0"));
} }
cleanup() { cleanup() {
console.log("Scrollspy cleanup running"), window.removeEventListener("scroll", this.handleScroll), this.scrollTimeout && (clearTimeout(this.scrollTimeout), this.scrollTimeout = null), this.clickHandlers && this.clickHandlers.length > 0 && this.clickHandlers.forEach(({ link: t, handler: i }) => { window.removeEventListener("scroll", this.handleScroll), this.scrollTimeout && (clearTimeout(this.scrollTimeout), this.scrollTimeout = null), this.clickHandlers && this.clickHandlers.length > 0 && this.clickHandlers.forEach(({ link: t, handler: i }) => {
t && i && t.removeEventListener("click", i); t && i && t.removeEventListener("click", i);
}); });
const e = document.getElementById("scrollspy-slider"); const e = document.getElementById("scrollspy-slider");

View File

@@ -1,7 +1,7 @@
{{- /* Shared back navigation for individual person pages */ -}} {{- /* Shared back navigation for individual person pages */ -}}
<div class="mb-6"> <div class="mb-6">
{{ $letter := Upper (FirstLetter .ID) }} {{ $letter := Upper (FirstLetter .ID) }}
<a href="/akteure/{{ $letter }}" class="inline-flex items-center hover:text-black text-gray-600 transition-colors text-xl no-underline font-bold"> <a href="/akteure/{{ $letter }}#{{ .ID }}" class="inline-flex items-center hover:text-black text-gray-600 transition-colors text-xl no-underline font-bold">
<i class="ri-arrow-left-line mr-1 text-xl font-bold"></i> <i class="ri-arrow-left-line mr-1 text-xl font-bold"></i>
{{ $letter }} {{ $letter }}
</a> </a>

View File

@@ -13,7 +13,6 @@ export class AkteureScrollspy extends HTMLElement {
} }
handleScroll() { handleScroll() {
console.log("Scroll event fired!");
clearTimeout(this.scrollTimeout); clearTimeout(this.scrollTimeout);
this.scrollTimeout = setTimeout(() => { this.scrollTimeout = setTimeout(() => {
this.updateActiveLink(); this.updateActiveLink();
@@ -22,7 +21,6 @@ export class AkteureScrollspy extends HTMLElement {
} }
connectedCallback() { connectedCallback() {
console.log("AkteureScrollspy connected");
// Use a simple timeout to ensure DOM is settled after the component is connected. // Use a simple timeout to ensure DOM is settled after the component is connected.
// This is more reliable than the external settleQueue for popstate navigation. // This is more reliable than the external settleQueue for popstate navigation.
setTimeout(() => { setTimeout(() => {
@@ -40,7 +38,6 @@ export class AkteureScrollspy extends HTMLElement {
} }
initializeScrollspyAfterDelay() { initializeScrollspyAfterDelay() {
console.log("initializeScrollspyAfterDelay running");
// Find sections and nav links // Find sections and nav links
this.sections = document.querySelectorAll(".author-section"); this.sections = document.querySelectorAll(".author-section");
this.navLinks = document.querySelectorAll(".scrollspy-link"); this.navLinks = document.querySelectorAll(".scrollspy-link");
@@ -61,12 +58,10 @@ export class AkteureScrollspy extends HTMLElement {
} }
disconnectedCallback() { disconnectedCallback() {
console.log("AkteureScrollspy disconnected");
this.cleanup(); this.cleanup();
} }
initializeScrollspy() { initializeScrollspy() {
console.log("initializeScrollspy running");
window.addEventListener("scroll", this.handleScroll); window.addEventListener("scroll", this.handleScroll);
// Add smooth scroll on link click // Add smooth scroll on link click
@@ -381,7 +376,6 @@ export class AkteureScrollspy extends HTMLElement {
} }
cleanup() { cleanup() {
console.log("Scrollspy cleanup running");
// Remove scroll listener // Remove scroll listener
window.removeEventListener("scroll", this.handleScroll); window.removeEventListener("scroll", this.handleScroll);