mirror of
https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git
synced 2025-10-29 09:05:30 +00:00
A few little annoyances
This commit is contained in:
@@ -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");
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user