Theodor-Springmann-Stiftung/kgpz_web
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git synced 2025-10-29 17:15:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Better scrollspy persons

Browse Source
This commit is contained in:
Simon Martens
2025-09-21 13:58:56 +02:00
parent 3f2811acbc
commit 758ded07fa
8 changed files with 82 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
views/assets/scripts.js
View File

@@ -63,8 +63,8 @@ function W() {
function I() { function I() {
const o = []; const o = [];
document.querySelectorAll(".newspaper-page-container").forEach((e) => { document.querySelectorAll(".newspaper-page-container").forEach((e) => {
const n = e.getBoundingClientRect(), i = window.innerHeight, r = Math.max(n.top, 0), s = Math.min(n.bottom, i), a = Math.max(0, s - r), l = n.height, g = a / l >= 0.5, d = e.querySelector("img[data-page]"), p = d ? d.getAttribute("data-page") : "unknown"; const n = e.getBoundingClientRect(), i = window.innerHeight, r = Math.max(n.top, 0), s = Math.min(n.bottom, i), a = Math.max(0, s - r), l = n.height, g = a / l >= 0.5, d = e.querySelector("img[data-page]"), h = d ? d.getAttribute("data-page") : "unknown";
g && d && p && !o.includes(p) && o.push(p); g && d && h && !o.includes(h) && o.push(h);
}), Z(o), o.length > 0 && A(o); }), Z(o), o.length > 0 && A(o);
} }
function Z(o) { function Z(o) {
@@ -154,7 +154,7 @@ function L() {
document.getElementById("pageModal").classList.add("hidden"); document.getElementById("pageModal").classList.add("hidden");
} }
function G() { function G() {
if (window.pageObserver && (window.pageObserver.disconnect(), window.pageObserver = null), window.currentPageContainers = Array.from(document.querySelectorAll(".newspaper-page-container")), window.currentActiveIndex = 0, h(), document.querySelector(".newspaper-page-container")) { if (window.pageObserver && (window.pageObserver.disconnect(), window.pageObserver = null), window.currentPageContainers = Array.from(document.querySelectorAll(".newspaper-page-container")), window.currentActiveIndex = 0, p(), document.querySelector(".newspaper-page-container")) {
let t = /* @__PURE__ */ new Set(); let t = /* @__PURE__ */ new Set();
window.pageObserver = new IntersectionObserver( window.pageObserver = new IntersectionObserver(
(e) => { (e) => {
@@ -163,7 +163,7 @@ function G() {
i !== -1 && (n.isIntersecting ? t.add(i) : t.delete(i)); i !== -1 && (n.isIntersecting ? t.add(i) : t.delete(i));
}), t.size > 0) { }), t.size > 0) {
const i = Array.from(t).sort((r, s) => r - s)[0]; const i = Array.from(t).sort((r, s) => r - s)[0];
i !== window.currentActiveIndex && (window.currentActiveIndex = i, h()); i !== window.currentActiveIndex && (window.currentActiveIndex = i, p());
} }
}, },
{ {
@@ -192,7 +192,7 @@ function Y() {
behavior: "smooth", behavior: "smooth",
block: "start" block: "start"
}), setTimeout(() => { }), setTimeout(() => {
h(); p();
}, 100)); }, 100));
} }
} }
@@ -214,7 +214,7 @@ function J() {
behavior: "smooth", behavior: "smooth",
block: "start" block: "start"
}), setTimeout(() => { }), setTimeout(() => {
h(); p();
}, 100)); }, 100));
} }
} }
@@ -246,7 +246,7 @@ function q() {
} }
return !1; return !1;
} }
function h() { function p() {
const o = document.getElementById("prevPageBtn"), t = document.getElementById("nextPageBtn"), e = document.getElementById("beilageBtn"); const o = document.getElementById("prevPageBtn"), t = document.getElementById("nextPageBtn"), e = document.getElementById("beilageBtn");
if (o && (window.currentActiveIndex <= 0 ? o.style.display = "none" : o.style.display = "flex"), t && (window.currentActiveIndex >= window.currentPageContainers.length - 1 ? t.style.display = "none" : t.style.display = "flex"), e) { if (o && (window.currentActiveIndex <= 0 ? o.style.display = "none" : o.style.display = "flex"), t && (window.currentActiveIndex >= window.currentPageContainers.length - 1 ? t.style.display = "none" : t.style.display = "flex"), e) {
const n = q(), i = e.querySelector("i"); const n = q(), i = e.querySelector("i");
@@ -437,15 +437,15 @@ function f() {
if (l) { if (l) {
const c = l.getBoundingClientRect(); const c = l.getBoundingClientRect();
c.top + window.scrollY + c.height; c.top + window.scrollY + c.height;
const d = c.top >= 0, p = c.bottom <= window.innerHeight; const d = c.top >= 0, h = c.bottom <= window.innerHeight;
d && p && i.push(s.getAttribute("id")); d && h && i.push(s.getAttribute("id"));
} }
}); });
const r = []; const r = [];
t.forEach((s) => { t.forEach((s) => {
s.classList.remove("bg-blue-100", "text-blue-700", "font-medium", "border-red-500"), s.classList.add("text-gray-600", "border-transparent"); s.classList.remove("font-medium", "bg-red-100"), s.classList.add("text-gray-700", "bg-white");
const a = s.getAttribute("data-target"); const a = s.getAttribute("data-target");
i.includes(a) && (s.classList.remove("text-gray-600", "border-transparent"), s.classList.add("bg-blue-100", "text-blue-700", "font-medium", "border-red-500"), r.push(s)); i.includes(a) && (s.classList.remove("text-gray-700", "bg-white"), s.classList.add("font-medium", "bg-red-100"), r.push(s));
}), r.length > 0 && n(r); }), r.length > 0 && n(r);
} }
function n(i) { function n(i) {
@@ -491,7 +491,7 @@ function k() {
function b() { function b() {
W(), G(), window.addEventListener("scroll", function() { W(), G(), window.addEventListener("scroll", function() {
clearTimeout(window.scrollTimeout), window.scrollTimeout = setTimeout(() => { clearTimeout(window.scrollTimeout), window.scrollTimeout = setTimeout(() => {
I(), h(); I(), p();
}, 50); }, 50);
}), ne(), document.addEventListener("keydown", function(o) { }), ne(), document.addEventListener("keydown", function(o) {
o.key === "Escape" && L(); o.key === "Escape" && L();
@@ -656,8 +656,8 @@ class oe extends HTMLElement {
l.style.position = "relative"; l.style.position = "relative";
const d = l.querySelector(".target-page-dot"); const d = l.querySelector(".target-page-dot");
d && d.remove(); d && d.remove();
const p = document.createElement("span"); const h = document.createElement("span");
p.className = "target-page-dot absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full z-10", p.title = "verlinkte Seite", l.appendChild(p); h.className = "target-page-dot absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full z-10", h.title = "verlinkte Seite", l.appendChild(h);
} }
if (s !== null) if (s !== null)
c.innerHTML = `<span class="part-number bg-slate-100 text-slate-800 font-bold px-1.5 py-0.5 rounded border border-slate-400 flex items-center justify-center">${s}. Teil</span>`; c.innerHTML = `<span class="part-number bg-slate-100 text-slate-800 font-bold px-1.5 py-0.5 rounded border border-slate-400 flex items-center justify-center">${s}. Teil</span>`;
@@ -817,9 +817,9 @@ class oe extends HTMLElement {
const g = c.textContent.trim(), d = g.match(/(\d{1,2}\.\d{1,2}\.\d{4}\s+Nr\.\s+\d+)/); const g = c.textContent.trim(), d = g.match(/(\d{1,2}\.\d{1,2}\.\d{4}\s+Nr\.\s+\d+)/);
if (d) if (d)
return d[1]; return d[1];
const p = g.match(/(\d{4})\s+Nr\.\s+(\d+)/); const h = g.match(/(\d{4})\s+Nr\.\s+(\d+)/);
if (p) if (h)
return `${p[1]} Nr. ${p[2]}`; return `${h[1]} Nr. ${h[2]}`;
} }
} }
const l = document.title.match(/(\d{4}).*Nr\.\s*(\d+)/); const l = document.title.match(/(\d{4}).*Nr\.\s*(\d+)/);

2
views/assets/style.css
View File

File diff suppressed because one or more lines are too long

16
views/routes/akteure/body.gohtml
View File

@@ -62,29 +62,27 @@
<!-- Two Column Layout: Scrollspy + Content --> <!-- Two Column Layout: Scrollspy + Content -->
<div class="flex gap-8"> <div class="flex gap-8">
<!-- Scrollspy Navigation - Hidden on smaller screens, shown on 2xl+ --> <!-- Scrollspy Navigation - Hidden on smaller screens, shown on 2xl+ -->
<div class="hidden 2xl:block w-80 flex-shrink-0"> <div class="hidden 2xl:block w-96 flex-shrink-0">
<div class="sticky top-8 h-screen"> <div class="sticky top-0 max-h-screen bg-white rounded py-4 h-full flex flex-col border-x-6 border-white">
<div class="bg-white border border-gray-200 rounded-lg p-4 h-full flex flex-col"> <nav class="flex-1 overflow-y-auto overscroll-contain" id="scrollspy-nav">
<h3 class="text-lg font-bold text-gray-900 mb-4">Auf dieser Seite</h3>
<nav class="flex-1 overflow-y-auto" id="scrollspy-nav">
{{ range $_, $id := .model.Sorted }} {{ range $_, $id := .model.Sorted }}
{{ $a := index $.model.Agents $id }} {{ $a := index $.model.Agents $id }}
<a href="#author-{{ $id }}" <a href="#author-{{ $id }}"
class="block px-3 py-1 text-base text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded scrollspy-link transition-colors border-l-4 border-transparent" class="block px-2 py-0.5 text-lg text-gray-900 hover:bg-red-50 scrollspy-link
transition-colors no-underline box-content"
data-target="author-{{ $id }}"> data-target="author-{{ $id }}">
{{ index $a.Names 0 }} {{ index $a.Names 0 }}
</a> </a>
{{ end }} {{ end }}
</nav> </nav>
</div> </div>
</div>
</div> </div>
<!-- People List - Main Content --> <!-- People List - Main Content -->
<div class="flex-1 space-y-6"> <div class="flex-1 space-y-6 bg-white">
{{ range $_, $id := .model.Sorted }} {{ range $_, $id := .model.Sorted }}
{{ $a := index $.model.Agents $id }} {{ $a := index $.model.Agents $id }}
<div id="author-{{ $id }}" class="bg-stone-100 rounded-lg p-6 border border-stone-200 scroll-mt-8 author-section"> <div id="author-{{ $id }}" class="p-6 scroll-mt-8 author-section">
{{ template "_akteur" $a }} {{ template "_akteur" $a }}
</div> </div>
{{ end }} {{ end }}

16
views/routes/components/_akteur_beitraege.gohtml
View File

@@ -1,10 +1,10 @@
{{ $a := . }} {{ $a := . }}
{{ $pieces := LookupPieces $a }} {{ $pieces := LookupPieces $a }}
{{ if ne (len $pieces) 0 }} {{ if ne (len $pieces) 0 }}
<div class="mt-8"> <div class="mt-4">
<div class="px-4 py-3 rounded-lg mb-4"> <div class="py-1 rounded-lg mb-1">
<h2 class="text-lg font-bold text-gray-900"> <h2 class="text-lg font-bold">
<i class="ri-newspaper-line mr-2"></i>Beiträge <i class="ri-newspaper-line mr-2"></i><u class="decoration underline-offset-3">Beiträge</u>
</h2> </h2>
</div> </div>
<div class="space-y-2"> <div class="space-y-2">
@@ -39,10 +39,12 @@
<div class="columns-2 gap-6"> <div class="columns-2 gap-6">
{{- /* Display grouped pieces */ -}} {{- /* Display grouped pieces */ -}}
{{- range $groupKey, $groupedItems := $groupedPieces -}} {{- range $groupKey, $groupedItems := $groupedPieces -}}
<div class="border-l-2 border-gray-200 pl-4 break-inside-avoid"> <div class="break-inside-avoid">
<div class="text-lg"> <div class="text-lg pb-1">
{{- /* Use first piece for display text */ -}} {{- /* Use first piece for display text */ -}}
<span class="inline-block indent-6">
{{ template "_piece_summary" (dict "Piece" (index $groupedItems 0).Item "CurrentActorID" $a.ID) }} {{ template "_piece_summary" (dict "Piece" (index $groupedItems 0).Item "CurrentActorID" $a.ID) }}
</span>
{{- /* Show all citations from all pieces in this group */ -}} {{- /* Show all citations from all pieces in this group */ -}}
{{- range $_, $groupItem := $groupedItems -}} {{- range $_, $groupItem := $groupedItems -}}
@@ -56,7 +58,7 @@
{{- $url = printf "%s/%d" $url $issue.Von -}} {{- $url = printf "%s/%d" $url $issue.Von -}}
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
<a href="{{ $url }}" class="inline-block text-sm bg-green-50 text-green-700 hover:bg-green-100 hover:text-green-800 px-3 py-2 rounded ml-2 no-underline"> <a href="{{ $url }}" class="ml-1.5 inline-block text-blue-700 hover:text-blue-800">
{{- if $issueData -}} {{- if $issueData -}}
{{ $issueData.Datum.When.Day }}.{{ $issueData.Datum.When.Month }}.{{ $issueData.Datum.When.Year }}/{{ $issue.Nr }}, S. {{ $issue.Von }}{{- if and $issue.Bis (ne $issue.Von $issue.Bis) }}-{{ $issue.Bis }}{{ end }} {{ $issueData.Datum.When.Day }}.{{ $issueData.Datum.When.Month }}.{{ $issueData.Datum.When.Year }}/{{ $issue.Nr }}, S. {{ $issue.Von }}{{- if and $issue.Bis (ne $issue.Von $issue.Bis) }}-{{ $issue.Bis }}{{ end }}
{{- else -}} {{- else -}}

12
views/routes/components/_akteur_header.gohtml
View File

@@ -6,16 +6,16 @@
<div class="flex items-start justify-between gap-4"> <div class="flex items-start justify-between gap-4">
<div class="flex-1"> <div class="flex-1">
<!-- Large serif name - bold --> <!-- Large serif name - bold -->
<div class="text-2xl font-serif font-bold text-gray-900 leading-tight"> <div class="text-xl font-serif font-bold mb-1">
<a href="/akteure/{{ $a.ID }}" class="hover:text-blue-600 transition-colors"> <a href="/akteure/{{ $a.ID }}" class="hover:text-slate-900 transition-colors no-underline">
{{ index $a.Names 0 }} {{ index $a.Names 0 }}
</a> </a>
</div> </div>
<!-- Years only below name --> <!-- Years ONLY below name -->
{{ if ne $gnd nil }} {{ if ne $gnd nil }}
{{- if or (ne (len $gnd.DateOfBirth) 0) (ne (len $gnd.DateOfDeath) 0) -}} {{- if or (ne (len $gnd.DateOfBirth) 0) (ne (len $gnd.DateOfDeath) 0) -}}
<div class="text-gray-600 text-xl mt-2"> <div class="text-gray-800 text-lg">
{{- if ne (len $gnd.DateOfBirth) 0 -}} {{- if ne (len $gnd.DateOfBirth) 0 -}}
{{ HRDateYear (index $gnd.DateOfBirth 0) }} {{ HRDateYear (index $gnd.DateOfBirth 0) }}
{{- end -}} {{- end -}}
@@ -29,7 +29,7 @@
<!-- First three professions --> <!-- First three professions -->
{{ if ne $gnd nil }} {{ if ne $gnd nil }}
{{- if ne (len $gnd.ProfessionOrOccupation) 0 -}} {{- if ne (len $gnd.ProfessionOrOccupation) 0 -}}
<div class="text-gray-600 text-xl mt-2"> <div class="text-gray-800 text-lg">
{{ range $i, $prof := $gnd.ProfessionOrOccupation }} {{ range $i, $prof := $gnd.ProfessionOrOccupation }}
{{ if lt $i 3 }} {{ if lt $i 3 }}
{{ if gt $i 0 }} · {{ end }}{{ $prof.Label }} {{ if gt $i 0 }} · {{ end }}{{ $prof.Label }}
@@ -70,4 +70,4 @@
{{- end -}} {{- end -}}
</div> </div>
</div> </div>
{{ end }} {{ end }}

32
views/routes/components/_akteur_werke.gohtml
View File

@@ -1,26 +1,20 @@
{{ $a := . }} {{ $a := . }}
{{ $works := LookupWorks $a }} {{ $works := LookupWorks $a }}
{{- if ne (len $works) 0 -}} {{- if ne (len $works) 0 -}}
<div class="mt-8"> <div class="mt-4">
<div class="px-4 py-3 rounded-lg mb-4"> <div class="py-1 rounded-lg mb-1">
<h2 class="text-lg font-bold text-gray-900"> <h2 class="text-lg font-bold">
<i class="ri-book-line mr-2"></i>Werke <i class="ri-book-line mr-2"></i><u class="decoration underline-offset-3">Werke</u>
</h2> </h2>
</div> </div>
<div class="columns-2 gap-6"> <div class="">
{{ range $_, $w := $works }} {{ range $_, $w := $works }}
<div class="mb-2 break-inside-avoid pl-4"> <div class="mb-1.5 break-inside-avoid max-w-[95ch]">
{{- if ne (len $w.Item.Citation.InnerXML ) 0 -}} {{- if ne (len $w.Item.Citation.InnerXML ) 0 -}}
<div class="text-lg"> <div class="text-lg indent-6">
<span class="italic"> {{- Safe $w.Item.Citation.HTML -}}
<script type="application/xml" xslt-template="transform-citation" xslt-onload>
<xml>
{{- Safe $w.Item.Citation.InnerXML -}}
</xml>
</script>
</span>
{{- range $_, $url := $w.Item.URLs -}} {{- range $_, $url := $w.Item.URLs -}}
<span class="ml-1"> <span class="ml-1 whitespace-nowrap">
<a href="{{ $url.Address }}" target="_blank" class="text-blue-600 hover:text-blue-800 text-sm"> <a href="{{ $url.Address }}" target="_blank" class="text-blue-600 hover:text-blue-800 text-sm">
{{ $url.Chardata }} <i class="ri-external-link-line text-xs"></i> {{ $url.Chardata }} <i class="ri-external-link-line text-xs"></i>
</a> </a>
@@ -141,7 +135,8 @@
{{- /* Display each category group */ -}} {{- /* Display each category group */ -}}
{{- range $categoryName, $categoryPieces := $groupedByCategory -}} {{- range $categoryName, $categoryPieces := $groupedByCategory -}}
<span class="inline-block text-sm bg-green-50 text-green-700 px-3 py-2 rounded ml-2"> <div>
<span class="inline-block">
{{ $categoryName }} {{ $categoryName }}
{{- /* Check for additional authors (non-current actor) */ -}} {{- /* Check for additional authors (non-current actor) */ -}}
{{- $additionalAuthorIDs := slice -}} {{- $additionalAuthorIDs := slice -}}
@@ -154,7 +149,7 @@
{{- end -}} {{- end -}}
{{- $uniqueAuthorIDs := unique $additionalAuthorIDs -}} {{- $uniqueAuthorIDs := unique $additionalAuthorIDs -}}
{{- if $uniqueAuthorIDs -}} {{- if $uniqueAuthorIDs -}}
{{ " " }}von {{ range $i, $authorID := $uniqueAuthorIDs }}{{- if gt $i 0 }} und {{ end }}{{- $agent := GetAgent $authorID -}}{{- if and $agent (gt (len $agent.Names) 0) -}}<a href="/akteure/{{ $authorID }}" class="text-green-700 hover:text-green-900 underline text-sm font-bold">{{ index $agent.Names 0 }}</a>{{- end -}}{{ end }} {{ " " }}von {{ range $i, $authorID := $uniqueAuthorIDs }}{{- if gt $i 0 }} und {{ end }}{{- $agent := GetAgent $authorID -}}{{- if and $agent (gt (len $agent.Names) 0) -}}<a href="/akteure/{{ $authorID }}" class="">{{ index $agent.Names 0 }}</a>{{- end -}}{{ end }}
{{- end -}}{{ ":" }} {{- end -}}{{ ":" }}
</span> </span>
{{- /* Show all citations for this category */ -}} {{- /* Show all citations for this category */ -}}
@@ -169,7 +164,7 @@
{{- $url = printf "%s/%d" $url $issue.Von -}} {{- $url = printf "%s/%d" $url $issue.Von -}}
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
<a href="{{ $url }}" class="inline-block text-sm bg-blue-50 text-blue-700 hover:bg-blue-100 hover:text-blue-800 px-3 py-2 rounded ml-2 no-underline"> <a href="{{ $url }}" class="inline-block text-blue-700 hover:text-blue-800 rounded ml-2 ">
{{- if $issueData -}} {{- if $issueData -}}
{{ $issueData.Datum.When.Day }}.{{ $issueData.Datum.When.Month }}.{{ $issueData.Datum.When.Year }}/{{ $issue.Nr }}, S. {{ $issue.Von }}{{- if and $issue.Bis (ne $issue.Von $issue.Bis) }}-{{ $issue.Bis }}{{ end }} {{ $issueData.Datum.When.Day }}.{{ $issueData.Datum.When.Month }}.{{ $issueData.Datum.When.Year }}/{{ $issue.Nr }}, S. {{ $issue.Von }}{{- if and $issue.Bis (ne $issue.Von $issue.Bis) }}-{{ $issue.Bis }}{{ end }}
{{- else -}} {{- else -}}
@@ -178,6 +173,7 @@
</a> </a>
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
</div>
{{- end -}} {{- end -}}
</div> </div>
{{ end }} {{ end }}

2
views/routes/components/_piece_summary.gohtml
View File

@@ -1,7 +1,6 @@
{{- $piece := .Piece -}} {{- $piece := .Piece -}}
{{- $currentActorID := .CurrentActorID -}} {{- $currentActorID := .CurrentActorID -}}
<div class="leading-snug">
{{- $categoryFlags := GetCategoryFlags $piece -}} {{- $categoryFlags := GetCategoryFlags $piece -}}
{{- $place := "" -}} {{- $place := "" -}}
@@ -199,4 +198,3 @@
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
</div>

55
views/transform/main.js
View File

@@ -982,8 +982,8 @@ function initializeScrollspy() {
// Clean up any existing scrollspy // Clean up any existing scrollspy
cleanupScrollspy(); cleanupScrollspy();
const sections = document.querySelectorAll('.author-section'); const sections = document.querySelectorAll(".author-section");
const navLinks = document.querySelectorAll('.scrollspy-link'); const navLinks = document.querySelectorAll(".scrollspy-link");
if (sections.length === 0 || navLinks.length === 0) { if (sections.length === 0 || navLinks.length === 0) {
return; return;
@@ -995,12 +995,12 @@ function initializeScrollspy() {
const viewportBottom = viewportTop + window.innerHeight; const viewportBottom = viewportTop + window.innerHeight;
// Check which sections are fully visible (header must be completely visible) // Check which sections are fully visible (header must be completely visible)
sections.forEach(section => { sections.forEach((section) => {
const sectionRect = section.getBoundingClientRect(); const sectionRect = section.getBoundingClientRect();
const sectionTop = sectionRect.top + window.scrollY; const sectionTop = sectionRect.top + window.scrollY;
// Find the header element (name, life data, professions) // Find the header element (name, life data, professions)
const headerElement = section.querySelector('div:first-child'); const headerElement = section.querySelector("div:first-child");
if (headerElement) { if (headerElement) {
const headerRect = headerElement.getBoundingClientRect(); const headerRect = headerElement.getBoundingClientRect();
const headerTop = headerRect.top + window.scrollY; const headerTop = headerRect.top + window.scrollY;
@@ -1011,21 +1011,21 @@ function initializeScrollspy() {
const headerBottomVisible = headerRect.bottom <= window.innerHeight; const headerBottomVisible = headerRect.bottom <= window.innerHeight;
if (headerTopVisible && headerBottomVisible) { if (headerTopVisible && headerBottomVisible) {
visibleSections.push(section.getAttribute('id')); visibleSections.push(section.getAttribute("id"));
} }
} }
}); });
// Update highlighting for all visible sections // Update highlighting for all visible sections
const activeLinks = []; const activeLinks = [];
navLinks.forEach(link => { navLinks.forEach((link) => {
link.classList.remove('bg-blue-100', 'text-blue-700', 'font-medium', 'border-red-500'); link.classList.remove("font-medium", "bg-red-100");
link.classList.add('text-gray-600', 'border-transparent'); link.classList.add("text-gray-700", "bg-white");
const targetId = link.getAttribute('data-target'); const targetId = link.getAttribute("data-target");
if (visibleSections.includes(targetId)) { if (visibleSections.includes(targetId)) {
link.classList.remove('text-gray-600', 'border-transparent'); link.classList.remove("text-gray-700", "bg-white");
link.classList.add('bg-blue-100', 'text-blue-700', 'font-medium', 'border-red-500'); link.classList.add("font-medium", "bg-red-100");
activeLinks.push(link); activeLinks.push(link);
} }
}); });
@@ -1040,7 +1040,7 @@ function initializeScrollspy() {
// Skip automatic scrolling during manual navigation // Skip automatic scrolling during manual navigation
if (window.scrollspyManualNavigation) return; if (window.scrollspyManualNavigation) return;
const sidebar = document.getElementById('scrollspy-nav'); const sidebar = document.getElementById("scrollspy-nav");
if (!sidebar) return; if (!sidebar) return;
// Get the first active link as reference // Get the first active link as reference
@@ -1052,7 +1052,7 @@ function initializeScrollspy() {
document.body.offsetHeight, document.body.offsetHeight,
document.documentElement.clientHeight, document.documentElement.clientHeight,
document.documentElement.scrollHeight, document.documentElement.scrollHeight,
document.documentElement.offsetHeight document.documentElement.offsetHeight,
); );
const viewportHeight = window.innerHeight; const viewportHeight = window.innerHeight;
const maxScroll = documentHeight - viewportHeight; const maxScroll = documentHeight - viewportHeight;
@@ -1078,7 +1078,8 @@ function initializeScrollspy() {
// Use a blend of proportional scrolling and centering for smooth behavior // Use a blend of proportional scrolling and centering for smooth behavior
const blendFactor = 0.7; // 70% proportional, 30% centering const blendFactor = 0.7; // 70% proportional, 30% centering
const finalScrollPosition = (blendFactor * targetSidebarScroll) + ((1 - blendFactor) * centeredPosition); const finalScrollPosition =
blendFactor * targetSidebarScroll + (1 - blendFactor) * centeredPosition;
// Clamp to valid scroll range // Clamp to valid scroll range
const clampedPosition = Math.max(0, Math.min(maxSidebarScroll, finalScrollPosition)); const clampedPosition = Math.max(0, Math.min(maxSidebarScroll, finalScrollPosition));
@@ -1087,39 +1088,40 @@ function initializeScrollspy() {
const currentScrollTop = sidebar.scrollTop; const currentScrollTop = sidebar.scrollTop;
const scrollDifference = Math.abs(clampedPosition - currentScrollTop); const scrollDifference = Math.abs(clampedPosition - currentScrollTop);
if (scrollDifference > 10) { // Only scroll if more than 10px difference if (scrollDifference > 10) {
// Only scroll if more than 10px difference
sidebar.scrollTo({ sidebar.scrollTo({
top: clampedPosition, top: clampedPosition,
behavior: 'smooth' behavior: "smooth",
}); });
} }
} }
} }
// Store scroll handler reference for cleanup // Store scroll handler reference for cleanup
window.scrollspyScrollHandler = function() { window.scrollspyScrollHandler = function () {
clearTimeout(window.scrollspyTimeout); clearTimeout(window.scrollspyTimeout);
window.scrollspyTimeout = setTimeout(updateActiveLink, 50); window.scrollspyTimeout = setTimeout(updateActiveLink, 50);
}; };
// Add scroll listener // Add scroll listener
window.addEventListener('scroll', window.scrollspyScrollHandler); window.addEventListener("scroll", window.scrollspyScrollHandler);
// Store click handlers for cleanup // Store click handlers for cleanup
window.scrollspyClickHandlers = []; window.scrollspyClickHandlers = [];
// Add smooth scroll on link click // Add smooth scroll on link click
navLinks.forEach(link => { navLinks.forEach((link) => {
const clickHandler = function(e) { const clickHandler = function (e) {
e.preventDefault(); e.preventDefault();
const target = document.getElementById(this.getAttribute('data-target')); const target = document.getElementById(this.getAttribute("data-target"));
if (target) { if (target) {
// Temporarily disable automatic sidebar scrolling during manual navigation // Temporarily disable automatic sidebar scrolling during manual navigation
window.scrollspyManualNavigation = true; window.scrollspyManualNavigation = true;
target.scrollIntoView({ target.scrollIntoView({
behavior: 'smooth', behavior: "smooth",
block: 'start' block: "start",
}); });
// Re-enable automatic scrolling after navigation completes // Re-enable automatic scrolling after navigation completes
@@ -1130,7 +1132,7 @@ function initializeScrollspy() {
}; };
window.scrollspyClickHandlers.push({ link, handler: clickHandler }); window.scrollspyClickHandlers.push({ link, handler: clickHandler });
link.addEventListener('click', clickHandler); link.addEventListener("click", clickHandler);
}); });
// Initial active link update // Initial active link update
@@ -1141,7 +1143,7 @@ function initializeScrollspy() {
function cleanupScrollspy() { function cleanupScrollspy() {
// Remove scroll listener // Remove scroll listener
if (window.scrollspyScrollHandler) { if (window.scrollspyScrollHandler) {
window.removeEventListener('scroll', window.scrollspyScrollHandler); window.removeEventListener("scroll", window.scrollspyScrollHandler);
window.scrollspyScrollHandler = null; window.scrollspyScrollHandler = null;
} }
@@ -1154,7 +1156,7 @@ function cleanupScrollspy() {
// Remove click handlers // Remove click handlers
if (window.scrollspyClickHandlers) { if (window.scrollspyClickHandlers) {
window.scrollspyClickHandlers.forEach(({ link, handler }) => { window.scrollspyClickHandlers.forEach(({ link, handler }) => {
link.removeEventListener('click', handler); link.removeEventListener("click", handler);
}); });
window.scrollspyClickHandlers = null; window.scrollspyClickHandlers = null;
} }
@@ -1224,7 +1226,6 @@ function setup() {
setup_xslt(); setup_xslt();
}); });
// HTMX event handling for newspaper layout and scrollspy // HTMX event handling for newspaper layout and scrollspy
document.body.addEventListener("htmx:afterSwap", function (event) { document.body.addEventListener("htmx:afterSwap", function (event) {
setTimeout(() => { setTimeout(() => {