THE GREAT JS CLEANUP

This commit is contained in:
Simon Martens
2025-09-22 17:30:21 +02:00
parent 0307bd9c9c
commit f8d7b92be0
18 changed files with 2351 additions and 2898 deletions

View File

@@ -6,7 +6,7 @@
<!-- Three-column layout -->
<div class="flex flex-col lg:flex-row gap-6 w-full min-h-screen">
<!-- Column 1: Sticky Inhaltsverzeichnis -->
<div class="lg:w-1/4 xl:w-1/4 flex-shrink-0 bg-slate-50 px-4 py-4">
<div class="lg:w-1/4 xl:w-1/4 2xl:w-1/4 3xl:w-1/5 flex-shrink-0 bg-slate-50 px-4 py-4">
<div class="sticky top-0 max-h-screen overflow-y-auto overscroll-contain bg-slate-50">
<div class="mb-4">
{{ template "_title_nav" . }}

View File

@@ -1,32 +1 @@
<title>KGPZ &ndash; Ausgabe {{ .model.Number.No }}&hairsp;/&hairsp;{{ .model.Year }}</title>
<script>
// Make template data available to JavaScript
window.templateData = {
targetPage: {{ if .targetPage }}{{ .targetPage }}{{ else }}0{{ end }}
};
</script>
{{ if .targetPage }}
<script>
// Auto-scroll to target page when page loads
document.addEventListener('DOMContentLoaded', function() {
// Wait for newspaper layout to be initialized
setTimeout(function() {
const targetPage = {{ .targetPage }};
const pageContainer = document.querySelector('[data-page-container="' + targetPage + '"]');
if (pageContainer) {
pageContainer.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
// Highlight the page in the Inhaltsverzeichnis
if (typeof markCurrentPageInInhaltsverzeichnis === 'function') {
markCurrentPageInInhaltsverzeichnis(targetPage);
}
}
}, 500); // Give time for layout initialization
});
</script>
{{ end }}

View File

@@ -48,8 +48,7 @@
{{ " " }}{{- range $groupIndex, $groupItem := $groupedItems -}}
{{- range $issueIndex, $issue := $groupItem.Item.IssueRefs -}}
{{- if or (gt $groupIndex 0) (gt $issueIndex 0) }}, {{ end -}}
<span class="text-blue-600 hover:text-blue-700 underline decoration-dotted hover:decoration-solid [&>a]:text-blue-600 [&>a:hover]:text-blue-700">{{ template "_citation" $issue }}</span>
{{- end -}}
<span class="text-blue-600 hover:text-blue-700 underline decoration-dotted hover:decoration-solid [&>a]:text-blue-600 [&>a:hover]:text-blue-700">{{- template "_citation" $issue -}}</span>{{- end -}}
{{- end -}}
{{- /* Add "Ganzer Beitrag" link if piece spans multiple issues */ -}}
{{- $firstGroupItem := index $groupedItems 0 -}}

View File

@@ -182,8 +182,7 @@
{{ " " }}{{- range $pieceIndex, $p := $categoryPieces -}}
{{- range $issueIndex, $issue := $p.Item.IssueRefs -}}
{{- if or (gt $pieceIndex 0) (gt $issueIndex 0) }}, {{ end -}}
<span class="text-blue-600 hover:text-blue-700 underline decoration-dotted hover:decoration-solid [&>a]:text-blue-600 [&>a:hover]:text-blue-700">{{ template "_citation" $issue }}</span>
{{- end -}}
<span class="text-blue-600 hover:text-blue-700 underline decoration-dotted hover:decoration-solid [&>a]:text-blue-600 [&>a:hover]:text-blue-700">{{- template "_citation" $issue -}}</span>{{- end -}}
{{- end -}}
{{- /* Add "Ganzer Beitrag" link if piece spans multiple issues */ -}}
{{- $firstPiece := index $categoryPieces 0 -}}
@@ -304,8 +303,7 @@
{{ " " }}{{- range $pieceIndex, $p := $categoryPieces -}}
{{- range $issueIndex, $issue := $p.Item.IssueRefs -}}
{{- if or (gt $pieceIndex 0) (gt $issueIndex 0) }}, {{ end -}}
<span class="text-blue-600 hover:text-blue-700 underline decoration-dotted hover:decoration-solid [&>a]:text-blue-600 [&>a:hover]:text-blue-700">{{ template "_citation" $issue }}</span>
{{- end -}}
<span class="text-blue-600 hover:text-blue-700 underline decoration-dotted hover:decoration-solid [&>a]:text-blue-600 [&>a:hover]:text-blue-700">{{- template "_citation" $issue -}}</span>{{- end -}}
{{- end -}}
{{- /* Add "Ganzer Beitrag" link if piece spans multiple issues */ -}}
{{- $firstPiece := index $categoryPieces 0 -}}

View File

@@ -32,56 +32,9 @@
{{ $issue.When.Year }}/{{ $issue.Nr }}
{{- end -}}
{{- if $issue.Von }}, {{ if $issue.Beilage }}Beil. {{ else }}S. {{ end }}{{ $issue.Von }}{{- if and $issue.Bis (ne $issue.Von $issue.Bis) -}}
-{{ $issue.Bis }}
-{{- $issue.Bis -}}
{{- end -}}
{{- end -}}
</a>
<script>
// Check if citation links point to current page (without hash)
function updateCitationLinks() {
const currentPath = window.location.pathname;
const citationLinks = document.querySelectorAll('.citation-link[data-citation-url]');
citationLinks.forEach(link => {
const citationUrl = link.getAttribute('data-citation-url');
let isCurrentPage = false;
// Check for exact match
if (citationUrl === currentPath) {
isCurrentPage = true;
} else {
// Check if current path is an issue with page number that matches this citation
const currentPathMatch = currentPath.match(/^\/(\d{4})\/(\d+)(?:\/(\d+))?$/);
const citationUrlMatch = citationUrl.match(/^\/(\d{4})\/(\d+)$/);
if (currentPathMatch && citationUrlMatch) {
const [, currentYear, currentIssue, currentPage] = currentPathMatch;
const [, citationYear, citationIssue] = citationUrlMatch;
// If year and issue match, this citation refers to the current issue
if (currentYear === citationYear && currentIssue === citationIssue) {
isCurrentPage = true;
}
}
}
if (isCurrentPage) {
// Style as current page: red text, no underline, not clickable
link.classList.add('text-red-700', 'pointer-events-none');
link.setAttribute('aria-current', 'page');
} else {
// Reset to default styling for non-current pages
link.classList.remove('text-red-700', 'pointer-events-none');
link.removeAttribute('aria-current');
}
});
}
// Run on initial load
document.addEventListener('DOMContentLoaded', updateCitationLinks);
// Run on HTMX page swaps
document.addEventListener('htmx:afterSwap', updateCitationLinks);
document.addEventListener('htmx:afterSettle', updateCitationLinks);
</script>
{{- /* This is a dummy element to remove all whitespace at the end of the file, as some editiors
will insert a newline at the end of the file, UGH. */ -}}

View File

@@ -63,3 +63,6 @@
</div>
</div>
<!-- Akteure Scrollspy Web Component -->
<akteure-scrollspy></akteure-scrollspy>

View File

@@ -6,14 +6,14 @@
<!-- Two-column layout for piece view -->
<div class="flex flex-col lg:flex-row gap-6 w-full min-h-screen">
<!-- Column 1: Table of Contents ONLY -->
<div class="lg:w-1/4 xl:w-1/4 flex-shrink-0 bg-slate-50 px-4 py-4">
<div class="lg:w-1/4 xl:w-1/4 2xl:w-1/4 3xl:w-1/5 flex-shrink-0 bg-slate-50 px-4 py-4">
<div class="sticky top-0 max-h-screen overflow-y-auto overscroll-contain bg-slate-50">
{{ template "_piece_inhaltsverzeichnis" . }}
</div>
</div>
<!-- Column 2: Sequential Page Layout -->
<div class="lg:w-3/4 xl:w-3/4 flex-1 py-4">
<div class="lg:w-3/4 xl:w-3/4 2xl:w-3/4 3xl:w-4/5 flex-1 py-4">
{{ template "_piece_sequential_layout" . }}
</div>
</div>

View File

@@ -1,32 +1 @@
<title>KGPZ &ndash; {{ if .model.Title }}{{ .model.Title }}{{ else }}Beitrag{{ end }} ({{ len .model.IssueContexts }} Teil{{ if gt (len .model.IssueContexts) 1 }}e{{ end }})</title>
<script>
// Make template data available to JavaScript
window.templateData = {
targetPage: {{ if .targetPage }}{{ .targetPage }}{{ else }}0{{ end }}
};
</script>
{{ if .targetPage }}
<script>
// Auto-scroll to target page when page loads
document.addEventListener('DOMContentLoaded', function() {
// Wait for newspaper layout to be initialized
setTimeout(function() {
const targetPage = {{ .targetPage }};
const pageContainer = document.querySelector('[data-page-container="' + targetPage + '"]');
if (pageContainer) {
pageContainer.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
// Highlight the page in the Inhaltsverzeichnis if function exists
if (typeof markCurrentPageInInhaltsverzeichnis === 'function') {
markCurrentPageInInhaltsverzeichnis(targetPage);
}
}
}, 500); // Give time for layout initialization
});
</script>
{{ end }}
<title>KGPZ &ndash; {{ if .model.Title }}{{ .model.Title }}{{ else }}Beitrag{{ end }} ({{ len .model.IssueContexts }} Teil{{ if gt (len .model.IssueContexts) 1 }}e{{ end }})</title>