Better scrollspy persons

2025-10-29 17:15:31 +00:00 · 2025-09-21 13:58:56 +02:00
parent 3f2811acbc
commit 758ded07fa
8 changed files with 82 additions and 87 deletions
--- a/views/assets/scripts.js
+++ b/views/assets/scripts.js
@@ -63,8 +63,8 @@ function W() {
 function I() {
  const o = [];
  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";
-    g && d && p && !o.includes(p) && o.push(p);
+    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 && h && !o.includes(h) && o.push(h);
  }), Z(o), o.length > 0 && A(o);
 }
 function Z(o) {
@@ -154,7 +154,7 @@ function L() {
  document.getElementById("pageModal").classList.add("hidden");
 }
 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();
    window.pageObserver = new IntersectionObserver(
      (e) => {
@@ -163,7 +163,7 @@ function G() {
          i !== -1 && (n.isIntersecting ? t.add(i) : t.delete(i));
        }), t.size > 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",
      block: "start"
    }), setTimeout(() => {
-      h();
+      p();
    }, 100));
  }
 }
@@ -214,7 +214,7 @@ function J() {
      behavior: "smooth",
      block: "start"
    }), setTimeout(() => {
-      h();
+      p();
    }, 100));
  }
 }
@@ -246,7 +246,7 @@ function q() {
  }
  return !1;
 }
-function h() {
+function p() {
  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) {
    const n = q(), i = e.querySelector("i");
@@ -437,15 +437,15 @@ function f() {
      if (l) {
        const c = l.getBoundingClientRect();
        c.top + window.scrollY + c.height;
-        const d = c.top >= 0, p = c.bottom <= window.innerHeight;
-        d && p && i.push(s.getAttribute("id"));
+        const d = c.top >= 0, h = c.bottom <= window.innerHeight;
+        d && h && i.push(s.getAttribute("id"));
      }
    });
    const r = [];
    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");
-      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);
  }
  function n(i) {
@@ -491,7 +491,7 @@ function k() {
 function b() {
  W(), G(), window.addEventListener("scroll", function() {
    clearTimeout(window.scrollTimeout), window.scrollTimeout = setTimeout(() => {
-      I(), h();
+      I(), p();
    }, 50);
  }), ne(), document.addEventListener("keydown", function(o) {
    o.key === "Escape" && L();
@@ -656,8 +656,8 @@ class oe extends HTMLElement {
      l.style.position = "relative";
      const d = l.querySelector(".target-page-dot");
      d && d.remove();
-      const p = 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);
+      const h = document.createElement("span");
+      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)
      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+)/);
          if (d)
            return d[1];
-          const p = g.match(/(\d{4})\s+Nr\.\s+(\d+)/);
-          if (p)
-            return `${p[1]} Nr. ${p[2]}`;
+          const h = g.match(/(\d{4})\s+Nr\.\s+(\d+)/);
+          if (h)
+            return `${h[1]} Nr. ${h[2]}`;
        }
      }
      const l = document.title.match(/(\d{4}).*Nr\.\s*(\d+)/);
--- a/views/assets/style.css
+++ b/views/assets/style.css
--- a/views/routes/akteure/body.gohtml
+++ b/views/routes/akteure/body.gohtml
@@ -62,15 +62,14 @@
 		<!-- Two Column Layout: Scrollspy + Content -->
 		<div class="flex gap-8">
 			<!-- Scrollspy Navigation - Hidden on smaller screens, shown on 2xl+ -->
-			<div class="hidden 2xl:block w-80 flex-shrink-0">
-				<div class="sticky top-8 h-screen">
-					<div class="bg-white border border-gray-200 rounded-lg p-4 h-full flex flex-col">
-						<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">
+			<div class="hidden 2xl:block w-96 flex-shrink-0">
+					<div class="sticky top-0 max-h-screen bg-white rounded py-4 h-full flex flex-col border-x-6 border-white">
+						<nav class="flex-1 overflow-y-auto overscroll-contain" id="scrollspy-nav">
 							{{ range $_, $id := .model.Sorted }}
 								{{ $a := index $.model.Agents $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 }}">
 									{{ index $a.Names 0 }}
 								</a>
@@ -78,13 +77,12 @@
 						</nav>
 					</div>
 			</div>
-			</div>

 			<!-- People List - Main Content -->
-			<div class="flex-1 space-y-6">
+			<div class="flex-1 space-y-6 bg-white">
 				{{ range $_, $id := .model.Sorted }}
 					{{ $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 }}
 					</div>
 				{{ end }}
--- a/views/routes/components/_akteur_beitraege.gohtml
+++ b/views/routes/components/_akteur_beitraege.gohtml
@@ -1,10 +1,10 @@
 {{ $a := . }}
 {{ $pieces := LookupPieces $a }}
 {{ if ne (len $pieces) 0 }}
-	<div class="mt-8">
-		<div class="px-4 py-3 rounded-lg mb-4">
-			<h2 class="text-lg font-bold text-gray-900">
-				<i class="ri-newspaper-line mr-2"></i>Beiträge
+	<div class="mt-4">
+		<div class="py-1 rounded-lg mb-1">
+			<h2 class="text-lg font-bold">
+				<i class="ri-newspaper-line mr-2"></i><u class="decoration underline-offset-3">Beiträge</u>
 			</h2>
 		</div>
 		<div class="space-y-2">
@@ -39,10 +39,12 @@
 		<div class="columns-2 gap-6">
 			{{- /* Display grouped pieces */ -}}
 			{{- range $groupKey, $groupedItems := $groupedPieces -}}
-				<div class="border-l-2 border-gray-200 pl-4 break-inside-avoid">
-					<div class="text-lg">
+				<div class="break-inside-avoid">
+					<div class="text-lg pb-1">
 						{{- /* Use first piece for display text */ -}}
+						<span class="inline-block indent-6">
 						{{ template "_piece_summary" (dict "Piece" (index $groupedItems 0).Item "CurrentActorID" $a.ID) }}
+						</span>

 						{{- /* Show all citations from all pieces in this group */ -}}
 						{{- range $_, $groupItem := $groupedItems -}}
@@ -56,7 +58,7 @@
 										{{- $url = printf "%s/%d" $url $issue.Von -}}
 									{{- 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 -}}
 										{{ $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 -}}
--- a/views/routes/components/_akteur_header.gohtml
+++ b/views/routes/components/_akteur_header.gohtml
@@ -6,16 +6,16 @@
 	<div class="flex items-start justify-between gap-4">
 		<div class="flex-1">
 			<!-- Large serif name - bold -->
-			<div class="text-2xl font-serif font-bold text-gray-900 leading-tight">
-				<a href="/akteure/{{ $a.ID }}" class="hover:text-blue-600 transition-colors">
+			<div class="text-xl font-serif font-bold mb-1">
+				<a href="/akteure/{{ $a.ID }}" class="hover:text-slate-900 transition-colors no-underline">
 					{{ index $a.Names 0 }}
 				</a>
 			</div>

-			<!-- Years only below name -->
+			<!-- Years ONLY below name -->
 			{{ if ne $gnd nil }}
 				{{- 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 -}}
 							{{ HRDateYear (index $gnd.DateOfBirth 0) }}
 						{{- end -}}
@@ -29,7 +29,7 @@
 			<!-- First three professions -->
 			{{ if ne $gnd nil }}
 				{{- 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 }}
 							{{ if lt $i 3 }}
 								{{ if gt $i 0 }} · {{ end }}{{ $prof.Label }}
--- a/views/routes/components/_akteur_werke.gohtml
+++ b/views/routes/components/_akteur_werke.gohtml
@@ -1,26 +1,20 @@
 {{ $a := . }}
 {{ $works := LookupWorks $a }}
 {{- if ne (len $works) 0 -}}
-	<div class="mt-8">
-		<div class="px-4 py-3 rounded-lg mb-4">
-			<h2 class="text-lg font-bold text-gray-900">
-				<i class="ri-book-line mr-2"></i>Werke
+	<div class="mt-4">
+		<div class="py-1 rounded-lg mb-1">
+			<h2 class="text-lg font-bold">
+				<i class="ri-book-line mr-2"></i><u class="decoration underline-offset-3">Werke</u>
 			</h2>
 		</div>
-		<div class="columns-2 gap-6">
+		<div class="">
 		{{ 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 -}}
-					<div class="text-lg">
-						<span class="italic">
-							<script type="application/xml" xslt-template="transform-citation" xslt-onload>
-								<xml>
-									{{- Safe $w.Item.Citation.InnerXML -}}
-								</xml>
-							</script>
-						</span>
+					<div class="text-lg indent-6">
+						{{- Safe $w.Item.Citation.HTML -}}
 						{{- 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">
 									{{ $url.Chardata }} <i class="ri-external-link-line text-xs"></i>
 								</a>
@@ -141,7 +135,8 @@

 						{{- /* Display each category group */ -}}
 						{{- 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 }}
 								{{- /* Check for additional authors (non-current actor) */ -}}
 								{{- $additionalAuthorIDs := slice -}}
@@ -154,7 +149,7 @@
 								{{- end -}}
 								{{- $uniqueAuthorIDs := unique $additionalAuthorIDs -}}
 								{{- 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 -}}{{ ":" }}
 							</span>
 							{{- /* Show all citations for this category */ -}}
@@ -169,7 +164,7 @@
 											{{- $url = printf "%s/%d" $url $issue.Von -}}
 										{{- 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 -}}
 											{{ $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 -}}
@@ -178,6 +173,7 @@
 									</a>
 								{{- end -}}
 							{{- end -}}
+							</div>
 						{{- end -}}
 					</div>
 				{{ end }}
--- a/views/routes/components/_piece_summary.gohtml
+++ b/views/routes/components/_piece_summary.gohtml
@@ -1,7 +1,6 @@
 {{- $piece := .Piece -}}
 {{- $currentActorID := .CurrentActorID -}}

-<div class="leading-snug">
 	{{- $categoryFlags := GetCategoryFlags $piece -}}

 	{{- $place := "" -}}
@@ -199,4 +198,3 @@
 		{{- end -}}
 	{{- end -}}

-</div>
--- a/views/transform/main.js
+++ b/views/transform/main.js
@@ -982,8 +982,8 @@ function initializeScrollspy() {
 	// Clean up any existing scrollspy
 	cleanupScrollspy();

-	const sections = document.querySelectorAll('.author-section');
-	const navLinks = document.querySelectorAll('.scrollspy-link');
+	const sections = document.querySelectorAll(".author-section");
+	const navLinks = document.querySelectorAll(".scrollspy-link");

 	if (sections.length === 0 || navLinks.length === 0) {
 		return;
@@ -995,12 +995,12 @@ function initializeScrollspy() {
 		const viewportBottom = viewportTop + window.innerHeight;

 		// Check which sections are fully visible (header must be completely visible)
-		sections.forEach(section => {
+		sections.forEach((section) => {
 			const sectionRect = section.getBoundingClientRect();
 			const sectionTop = sectionRect.top + window.scrollY;

 			// Find the header element (name, life data, professions)
-			const headerElement = section.querySelector('div:first-child');
+			const headerElement = section.querySelector("div:first-child");
 			if (headerElement) {
 				const headerRect = headerElement.getBoundingClientRect();
 				const headerTop = headerRect.top + window.scrollY;
@@ -1011,21 +1011,21 @@ function initializeScrollspy() {
 				const headerBottomVisible = headerRect.bottom <= window.innerHeight;

 				if (headerTopVisible && headerBottomVisible) {
-					visibleSections.push(section.getAttribute('id'));
+					visibleSections.push(section.getAttribute("id"));
 				}
 			}
 		});

 		// Update highlighting for all visible sections
 		const activeLinks = [];
-		navLinks.forEach(link => {
-			link.classList.remove('bg-blue-100', 'text-blue-700', 'font-medium', 'border-red-500');
-			link.classList.add('text-gray-600', 'border-transparent');
+		navLinks.forEach((link) => {
+			link.classList.remove("font-medium", "bg-red-100");
+			link.classList.add("text-gray-700", "bg-white");

-			const targetId = link.getAttribute('data-target');
+			const targetId = link.getAttribute("data-target");
 			if (visibleSections.includes(targetId)) {
-				link.classList.remove('text-gray-600', 'border-transparent');
-				link.classList.add('bg-blue-100', 'text-blue-700', 'font-medium', 'border-red-500');
+				link.classList.remove("text-gray-700", "bg-white");
+				link.classList.add("font-medium", "bg-red-100");
 				activeLinks.push(link);
 			}
 		});
@@ -1040,7 +1040,7 @@ function initializeScrollspy() {
 		// Skip automatic scrolling during manual navigation
 		if (window.scrollspyManualNavigation) return;

-		const sidebar = document.getElementById('scrollspy-nav');
+		const sidebar = document.getElementById("scrollspy-nav");
 		if (!sidebar) return;

 		// Get the first active link as reference
@@ -1052,7 +1052,7 @@ function initializeScrollspy() {
 			document.body.offsetHeight,
 			document.documentElement.clientHeight,
 			document.documentElement.scrollHeight,
-			document.documentElement.offsetHeight
+			document.documentElement.offsetHeight,
 		);
 		const viewportHeight = window.innerHeight;
 		const maxScroll = documentHeight - viewportHeight;
@@ -1078,7 +1078,8 @@ function initializeScrollspy() {

 			// Use a blend of proportional scrolling and centering for smooth behavior
 			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
 			const clampedPosition = Math.max(0, Math.min(maxSidebarScroll, finalScrollPosition));
@@ -1087,10 +1088,11 @@ function initializeScrollspy() {
 			const currentScrollTop = sidebar.scrollTop;
 			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({
 					top: clampedPosition,
-					behavior: 'smooth'
+					behavior: "smooth",
 				});
 			}
 		}
@@ -1103,23 +1105,23 @@ function initializeScrollspy() {
 	};

 	// Add scroll listener
-	window.addEventListener('scroll', window.scrollspyScrollHandler);
+	window.addEventListener("scroll", window.scrollspyScrollHandler);

 	// Store click handlers for cleanup
 	window.scrollspyClickHandlers = [];

 	// Add smooth scroll on link click
-	navLinks.forEach(link => {
+	navLinks.forEach((link) => {
 		const clickHandler = function (e) {
 			e.preventDefault();
-			const target = document.getElementById(this.getAttribute('data-target'));
+			const target = document.getElementById(this.getAttribute("data-target"));
 			if (target) {
 				// Temporarily disable automatic sidebar scrolling during manual navigation
 				window.scrollspyManualNavigation = true;

 				target.scrollIntoView({
-					behavior: 'smooth',
-					block: 'start'
+					behavior: "smooth",
+					block: "start",
 				});

 				// Re-enable automatic scrolling after navigation completes
@@ -1130,7 +1132,7 @@ function initializeScrollspy() {
 		};

 		window.scrollspyClickHandlers.push({ link, handler: clickHandler });
-		link.addEventListener('click', clickHandler);
+		link.addEventListener("click", clickHandler);
 	});

 	// Initial active link update
@@ -1141,7 +1143,7 @@ function initializeScrollspy() {
 function cleanupScrollspy() {
 	// Remove scroll listener
 	if (window.scrollspyScrollHandler) {
-		window.removeEventListener('scroll', window.scrollspyScrollHandler);
+		window.removeEventListener("scroll", window.scrollspyScrollHandler);
 		window.scrollspyScrollHandler = null;
 	}

@@ -1154,7 +1156,7 @@ function cleanupScrollspy() {
 	// Remove click handlers
 	if (window.scrollspyClickHandlers) {
 		window.scrollspyClickHandlers.forEach(({ link, handler }) => {
-			link.removeEventListener('click', handler);
+			link.removeEventListener("click", handler);
 		});
 		window.scrollspyClickHandlers = null;
 	}
@@ -1224,7 +1226,6 @@ function setup() {
 		setup_xslt();
 	});

-
 	// HTMX event handling for newspaper layout and scrollspy
 	document.body.addEventListener("htmx:afterSwap", function (event) {
 		setTimeout(() => {