mirror of
https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git
synced 2025-10-28 16:45:32 +00:00
1290 lines
52 KiB
Plaintext
1290 lines
52 KiB
Plaintext
{{ $model := .model }}
|
|
{{ $images := $model.Images }}
|
|
|
|
<div class="space-y-8 h-full relative" id="newspaper-content">
|
|
<!-- Main Issue Pages -->
|
|
{{ if $images.MainPages }}
|
|
{{ $pages := $images.MainPages }}
|
|
{{ $pageCount := len $pages }}
|
|
|
|
<!-- Dynamic 2-column grid for arbitrary page count -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
{{ range $index, $page := $pages }}
|
|
{{ if $page.Available }}
|
|
{{ $pageIndex := $index }}
|
|
{{ $isFirstPage := eq $pageIndex 0 }}
|
|
{{ $isLastPage := eq $pageIndex (sub $pageCount 1) }}
|
|
{{ $isOddPosition := eq (mod $pageIndex 2) 0 }}
|
|
{{ $isEvenPosition := eq (mod $pageIndex 2) 1 }}
|
|
|
|
{{ if $isFirstPage }}
|
|
<!-- Page 1: Always left column -->
|
|
<div class="newspaper-page-container" id="page-{{ $page.PageNumber }}">
|
|
<!-- Page indicator row - right aligned for first page -->
|
|
<div class="flex justify-end items-center gap-1 mb-2">
|
|
<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this)" class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Link zu Seite {{ $page.PageNumber }} kopieren">
|
|
<i class="ri-share-line text-xs"></i>
|
|
</button>
|
|
<button onclick="generatePageCitation('{{ $page.PageNumber }}', this)" class="w-6 h-6 bg-green-100 hover:bg-green-200 text-green-700 border border-green-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Zitation für Seite {{ $page.PageNumber }} generieren">
|
|
<i class="ri-file-text-line text-xs"></i>
|
|
</button>
|
|
<span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1" data-page="{{ $page.PageNumber }}">
|
|
{{ $page.PageNumber }}
|
|
<i class="ri-file-text-line text-black text-sm"></i>
|
|
</span>
|
|
</div>
|
|
<div class="single-page bg-white p-4 rounded border border-slate-200 hover:border-slate-300 transition-colors duration-200">
|
|
<img src="{{ $page.ImagePath }}" alt="Seite {{ $page.PageNumber }}" class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200" onclick="enlargePage(this, {{ $page.PageNumber }}, false)" data-page="{{ $page.PageNumber }}" loading="lazy" />
|
|
</div>
|
|
</div>
|
|
<!-- Empty space after first page -->
|
|
<div></div>
|
|
{{ else if $isLastPage }}
|
|
<!-- Last page: Always right column with empty space before -->
|
|
<div></div>
|
|
<div class="newspaper-page-container" id="page-{{ $page.PageNumber }}">
|
|
<!-- Page indicator row - left aligned for last page -->
|
|
<div class="flex justify-start items-center gap-1 mb-2">
|
|
<span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1" data-page="{{ $page.PageNumber }}">
|
|
<i class="ri-file-text-line text-black text-sm"></i>
|
|
{{ $page.PageNumber }}
|
|
</span>
|
|
<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this)" class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Link zu Seite {{ $page.PageNumber }} kopieren">
|
|
<i class="ri-share-line text-xs"></i>
|
|
</button>
|
|
<button onclick="generatePageCitation('{{ $page.PageNumber }}', this)" class="w-6 h-6 bg-green-100 hover:bg-green-200 text-green-700 border border-green-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Zitation für Seite {{ $page.PageNumber }} generieren">
|
|
<i class="ri-file-text-line text-xs"></i>
|
|
</button>
|
|
</div>
|
|
<div class="single-page bg-white p-4 rounded border border-slate-200 hover:border-slate-300 transition-colors duration-200">
|
|
<img src="{{ $page.ImagePath }}" alt="Seite {{ $page.PageNumber }}" class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200" onclick="enlargePage(this, {{ $page.PageNumber }}, false)" data-page="{{ $page.PageNumber }}" loading="lazy" />
|
|
</div>
|
|
</div>
|
|
{{ else }}
|
|
<!-- Middle pages: Even pages (index 1,3,5...) left column, Odd pages (index 2,4,6...) right column -->
|
|
{{ if $isEvenPosition }}
|
|
<!-- Even-indexed pages: Left column -->
|
|
<div class="newspaper-page-container" id="page-{{ $page.PageNumber }}">
|
|
<!-- Page indicator row - right aligned for even-indexed pages -->
|
|
<div class="flex justify-end items-center gap-1 mb-2">
|
|
<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this)" class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Link zu Seite {{ $page.PageNumber }} kopieren">
|
|
<i class="ri-share-line text-xs"></i>
|
|
</button>
|
|
<button onclick="generatePageCitation('{{ $page.PageNumber }}', this)" class="w-6 h-6 bg-green-100 hover:bg-green-200 text-green-700 border border-green-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Zitation für Seite {{ $page.PageNumber }} generieren">
|
|
<i class="ri-file-text-line text-xs"></i>
|
|
</button>
|
|
<span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1" data-page="{{ $page.PageNumber }}">
|
|
{{ $page.PageNumber }}
|
|
<i class="ri-file-text-line text-black text-sm scale-x-[-1]"></i>
|
|
</span>
|
|
</div>
|
|
<div class="single-page bg-white p-4 rounded border border-slate-200 hover:border-slate-300 transition-colors duration-200">
|
|
<img src="{{ $page.ImagePath }}" alt="Seite {{ $page.PageNumber }}" class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200" onclick="enlargePage(this, {{ $page.PageNumber }}, false)" data-page="{{ $page.PageNumber }}" loading="lazy" />
|
|
</div>
|
|
</div>
|
|
{{ else }}
|
|
<!-- Odd-indexed pages: Right column -->
|
|
<div class="newspaper-page-container" id="page-{{ $page.PageNumber }}">
|
|
<!-- Page indicator row - left aligned for odd-indexed pages -->
|
|
<div class="flex justify-start items-center gap-1 mb-2">
|
|
<span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1" data-page="{{ $page.PageNumber }}">
|
|
<i class="ri-file-text-line text-black text-sm"></i>
|
|
{{ $page.PageNumber }}
|
|
</span>
|
|
<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this)" class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Link zu Seite {{ $page.PageNumber }} kopieren">
|
|
<i class="ri-share-line text-xs"></i>
|
|
</button>
|
|
<button onclick="generatePageCitation('{{ $page.PageNumber }}', this)" class="w-6 h-6 bg-green-100 hover:bg-green-200 text-green-700 border border-green-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Zitation für Seite {{ $page.PageNumber }} generieren">
|
|
<i class="ri-file-text-line text-xs"></i>
|
|
</button>
|
|
</div>
|
|
<div class="single-page bg-white p-4 rounded border border-slate-200 hover:border-slate-300 transition-colors duration-200">
|
|
<img src="{{ $page.ImagePath }}" alt="Seite {{ $page.PageNumber }}" class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200" onclick="enlargePage(this, {{ $page.PageNumber }}, false)" data-page="{{ $page.PageNumber }}" loading="lazy" />
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
|
|
|
|
<!-- Beilage Pages -->
|
|
{{ range $beilageNum, $beilagePages := $images.AdditionalPages }}
|
|
{{ if $beilagePages }}
|
|
<div class="mt-12 pt-8 border-t-2 border-amber-200">
|
|
<!-- Header for beilage -->
|
|
<div class="flex items-center gap-3 mb-6 bg-amber-50 px-4 py-3 rounded border border-amber-200">
|
|
<i class="ri-attachment-line text-2xl text-amber-600"></i>
|
|
<h2 class="text-xl font-semibold text-slate-800">Beilage</h2>
|
|
</div>
|
|
{{ $pageCount := len $beilagePages }}
|
|
|
|
<!-- Dynamic layout for Beilage pages -->
|
|
{{ if eq $pageCount 2 }}
|
|
<!-- Special case: 2 pages side by side -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
{{ range $index, $page := $beilagePages }}
|
|
{{ if $page.Available }}
|
|
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page.PageNumber }}">
|
|
<!-- Page indicator row - left aligned for first page, right for second -->
|
|
<div class="flex {{ if eq $index 0 }}justify-start{{ else }}justify-end{{ end }} items-center gap-1 mb-2">
|
|
{{ if eq $index 0 }}
|
|
<!-- Left page: page indicator first, then buttons -->
|
|
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1" data-page="{{ $page.PageNumber }}">
|
|
<i class="ri-file-text-line text-amber-600 text-sm"></i>
|
|
{{ $page.PageNumber }}
|
|
</span>
|
|
<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this, true)" class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Link zu Seite {{ $page.PageNumber }} kopieren">
|
|
<i class="ri-share-line text-xs"></i>
|
|
</button>
|
|
<button onclick="generatePageCitation('{{ $page.PageNumber }}', this)" class="w-6 h-6 bg-green-100 hover:bg-green-200 text-green-700 border border-green-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Zitation für Seite {{ $page.PageNumber }} generieren">
|
|
<i class="ri-file-text-line text-xs"></i>
|
|
</button>
|
|
{{ else }}
|
|
<!-- Right page: buttons first, then page indicator -->
|
|
<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this, true)" class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Link zu Seite {{ $page.PageNumber }} kopieren">
|
|
<i class="ri-share-line text-xs"></i>
|
|
</button>
|
|
<button onclick="generatePageCitation('{{ $page.PageNumber }}', this)" class="w-6 h-6 bg-green-100 hover:bg-green-200 text-green-700 border border-green-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Zitation für Seite {{ $page.PageNumber }} generieren">
|
|
<i class="ri-file-text-line text-xs"></i>
|
|
</button>
|
|
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1" data-page="{{ $page.PageNumber }}">
|
|
{{ $page.PageNumber }}
|
|
<i class="ri-file-text-line text-amber-600 text-sm"></i>
|
|
</span>
|
|
{{ end }}
|
|
</div>
|
|
<div class="single-page bg-white p-4 rounded border border-amber-200 hover:border-amber-300 transition-colors duration-200">
|
|
<img src="{{ $page.ImagePath }}" alt="Beilage {{ $beilageNum }}, Seite {{ $page.PageNumber }}" class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200" onclick="enlargePage(this, {{ $page.PageNumber }}, false)" data-page="{{ $page.PageNumber }}" loading="lazy" />
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
{{ else }}
|
|
<!-- Standard newspaper layout for 4+ pages -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
{{ range $index, $page := $beilagePages }}
|
|
{{ if $page.Available }}
|
|
{{ $pageIndex := $index }}
|
|
{{ $isFirstPage := eq $pageIndex 0 }}
|
|
{{ $isLastPage := eq $pageIndex (sub $pageCount 1) }}
|
|
{{ $isOddPosition := eq (mod $pageIndex 2) 0 }}
|
|
{{ $isEvenPosition := eq (mod $pageIndex 2) 1 }}
|
|
|
|
{{ if $isFirstPage }}
|
|
<!-- Page 1: Always left column -->
|
|
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page.PageNumber }}">
|
|
<!-- Page indicator row - right aligned for Beilage first page -->
|
|
<div class="flex justify-end items-center gap-1 mb-2">
|
|
<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this, true)" class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Link zu Seite {{ $page.PageNumber }} kopieren">
|
|
<i class="ri-share-line text-xs"></i>
|
|
</button>
|
|
<button onclick="generatePageCitation('{{ $page.PageNumber }}', this)" class="w-6 h-6 bg-green-100 hover:bg-green-200 text-green-700 border border-green-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Zitation für Seite {{ $page.PageNumber }} generieren">
|
|
<i class="ri-file-text-line text-xs"></i>
|
|
</button>
|
|
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1" data-page="{{ $page.PageNumber }}">
|
|
{{ $page.PageNumber }}
|
|
<i class="ri-file-text-line text-amber-600 text-sm"></i>
|
|
</span>
|
|
</div>
|
|
<div class="single-page bg-white p-4 rounded border border-amber-200 hover:border-amber-300 transition-colors duration-200">
|
|
<img src="{{ $page.ImagePath }}" alt="Beilage {{ $beilageNum }}, Seite {{ $page.PageNumber }}" class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200" onclick="enlargePage(this, {{ $page.PageNumber }}, false)" data-page="{{ $page.PageNumber }}" loading="lazy" />
|
|
</div>
|
|
</div>
|
|
<!-- Empty space after first page -->
|
|
<div></div>
|
|
{{ else if $isLastPage }}
|
|
<!-- Last page: Always right column with empty space before -->
|
|
<div></div>
|
|
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page.PageNumber }}">
|
|
<!-- Page indicator row - left aligned for Beilage last page -->
|
|
<div class="flex justify-start items-center gap-1 mb-2">
|
|
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1" data-page="{{ $page.PageNumber }}">
|
|
<i class="ri-file-text-line text-amber-600 text-sm"></i>
|
|
{{ $page.PageNumber }}
|
|
</span>
|
|
<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this, true)" class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Link zu Seite {{ $page.PageNumber }} kopieren">
|
|
<i class="ri-share-line text-xs"></i>
|
|
</button>
|
|
<button onclick="generatePageCitation('{{ $page.PageNumber }}', this)" class="w-6 h-6 bg-green-100 hover:bg-green-200 text-green-700 border border-green-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Zitation für Seite {{ $page.PageNumber }} generieren">
|
|
<i class="ri-file-text-line text-xs"></i>
|
|
</button>
|
|
</div>
|
|
<div class="single-page bg-white p-4 rounded border border-amber-200 hover:border-amber-300 transition-colors duration-200">
|
|
<img src="{{ $page.ImagePath }}" alt="Beilage {{ $beilageNum }}, Seite {{ $page.PageNumber }}" class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200" onclick="enlargePage(this, {{ $page.PageNumber }}, false)" data-page="{{ $page.PageNumber }}" loading="lazy" />
|
|
</div>
|
|
</div>
|
|
{{ else }}
|
|
<!-- Middle pages: Even pages left column, Odd pages right column -->
|
|
{{ if $isEvenPosition }}
|
|
<!-- Even-indexed pages: Left column -->
|
|
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page.PageNumber }}">
|
|
<!-- Page indicator row - right aligned for Beilage even-indexed pages -->
|
|
<div class="flex justify-end items-center gap-1 mb-2">
|
|
<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this, true)" class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Link zu Seite {{ $page.PageNumber }} kopieren">
|
|
<i class="ri-share-line text-xs"></i>
|
|
</button>
|
|
<button onclick="generatePageCitation('{{ $page.PageNumber }}', this)" class="w-6 h-6 bg-green-100 hover:bg-green-200 text-green-700 border border-green-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Zitation für Seite {{ $page.PageNumber }} generieren">
|
|
<i class="ri-file-text-line text-xs"></i>
|
|
</button>
|
|
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1" data-page="{{ $page.PageNumber }}">
|
|
{{ $page.PageNumber }}
|
|
<i class="ri-file-text-line text-amber-600 text-sm scale-x-[-1]"></i>
|
|
</span>
|
|
</div>
|
|
<div class="single-page bg-white p-4 rounded border border-amber-200 hover:border-amber-300 transition-colors duration-200">
|
|
<img src="{{ $page.ImagePath }}" alt="Beilage {{ $beilageNum }}, Seite {{ $page.PageNumber }}" class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200" onclick="enlargePage(this, {{ $page.PageNumber }}, false)" data-page="{{ $page.PageNumber }}" loading="lazy" />
|
|
</div>
|
|
</div>
|
|
{{ else }}
|
|
<!-- Odd-indexed pages: Right column -->
|
|
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page.PageNumber }}">
|
|
<!-- Page indicator row - left aligned for Beilage odd-indexed pages -->
|
|
<div class="flex justify-start items-center gap-1 mb-2">
|
|
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1" data-page="{{ $page.PageNumber }}">
|
|
<i class="ri-file-text-line text-amber-600 text-sm"></i>
|
|
{{ $page.PageNumber }}
|
|
</span>
|
|
<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this, true)" class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Link zu Seite {{ $page.PageNumber }} kopieren">
|
|
<i class="ri-share-line text-xs"></i>
|
|
</button>
|
|
<button onclick="generatePageCitation('{{ $page.PageNumber }}', this)" class="w-6 h-6 bg-green-100 hover:bg-green-200 text-green-700 border border-green-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Zitation für Seite {{ $page.PageNumber }} generieren">
|
|
<i class="ri-file-text-line text-xs"></i>
|
|
</button>
|
|
</div>
|
|
<div class="single-page bg-white p-4 rounded border border-amber-200 hover:border-amber-300 transition-colors duration-200">
|
|
<img src="{{ $page.ImagePath }}" alt="Beilage {{ $beilageNum }}, Seite {{ $page.PageNumber }}" class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200" onclick="enlargePage(this, {{ $page.PageNumber }}, false)" data-page="{{ $page.PageNumber }}" loading="lazy" />
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
|
|
<!-- Modal for enlarged view - positioned within newspaper content -->
|
|
<div
|
|
id="pageModal"
|
|
class="absolute inset-0 bg-black bg-opacity-75 hidden z-50 flex items-center justify-center backdrop-blur-sm"
|
|
onclick="closeModal()">
|
|
<div class="relative max-w-full max-h-full p-4">
|
|
<img id="modalImage" src="" alt="" class="max-w-full max-h-full object-contain rounded-lg" />
|
|
<button
|
|
onclick="closeModal()"
|
|
class="absolute top-2 right-2 text-white bg-slate-800 bg-opacity-80 rounded-full w-10 h-10 flex items-center justify-center hover:bg-opacity-100 transition-all duration-200">
|
|
<i class="ri-close-line text-xl"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Essential styles that cannot be represented in Tailwind */
|
|
.newspaper-page-container {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* Page header backdrop blur */
|
|
.newspaper-page-container .absolute .page-indicator {
|
|
pointer-events: auto;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
/* Responsive header scaling */
|
|
@media (max-width: 768px) {
|
|
.newspaper-page-container .absolute {
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
/* Image size constraints with Tailwind utilities */
|
|
.single-page {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.single-page .newspaper-page-image {
|
|
max-width: min(400px, 100%);
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Larger screens */
|
|
@media (min-width: 1280px) {
|
|
.single-page .newspaper-page-image {
|
|
max-width: min(600px, 100%);
|
|
}
|
|
}
|
|
|
|
/* Very wide screens */
|
|
@media (min-width: 1536px) {
|
|
.single-page .newspaper-page-image {
|
|
max-width: min(700px, 100%);
|
|
}
|
|
}
|
|
|
|
/* Mobile constraints */
|
|
@media (max-width: 640px) {
|
|
.single-page .newspaper-page-image {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Navigation button hover styles */
|
|
button#prevPageBtn:hover:not([style*="display: none"]),
|
|
button#nextPageBtn:hover,
|
|
button#beilageBtn:hover {
|
|
background-color: rgb(209 213 219) !important; /* gray-300 */
|
|
color: rgb(55 65 81) !important; /* gray-700 */
|
|
}
|
|
|
|
button#beilageBtn:hover {
|
|
background-color: rgb(254 215 170) !important; /* amber-200 */
|
|
color: rgb(146 64 14) !important; /* amber-800 */
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Simple page highlighting - no grouping complexity
|
|
window.highlightObserver = window.highlightObserver || null;
|
|
|
|
function initializePageHighlighting() {
|
|
// Clean up existing observer
|
|
if (window.highlightObserver) {
|
|
window.highlightObserver.disconnect();
|
|
window.highlightObserver = null;
|
|
}
|
|
|
|
// Get all page containers
|
|
const pageContainers = document.querySelectorAll(".newspaper-page-container");
|
|
|
|
// Set up intersection observer for active page tracking
|
|
window.highlightObserver = new IntersectionObserver(
|
|
(entries) => {
|
|
checkAndHighlightVisiblePages();
|
|
},
|
|
{
|
|
rootMargin: "-20% 0px -70% 0px",
|
|
},
|
|
);
|
|
|
|
// Observe all page containers
|
|
pageContainers.forEach((container) => {
|
|
window.highlightObserver.observe(container);
|
|
});
|
|
}
|
|
|
|
function checkAndHighlightVisiblePages() {
|
|
const visiblePageNumbers = [];
|
|
const allPageContainers = document.querySelectorAll(".newspaper-page-container");
|
|
|
|
// Find visible page numbers
|
|
allPageContainers.forEach((container) => {
|
|
const containerRect = container.getBoundingClientRect();
|
|
const viewportHeight = window.innerHeight;
|
|
|
|
const visibleTop = Math.max(containerRect.top, 0);
|
|
const visibleBottom = Math.min(containerRect.bottom, viewportHeight);
|
|
const visibleHeight = Math.max(0, visibleBottom - visibleTop);
|
|
const containerHeight = containerRect.height;
|
|
|
|
const visibilityRatio = visibleHeight / containerHeight;
|
|
const isVisible = visibilityRatio >= 0.5;
|
|
|
|
const pageImg = container.querySelector("img[data-page]");
|
|
const pageNumber = pageImg ? pageImg.getAttribute("data-page") : "unknown";
|
|
|
|
if (isVisible && pageImg && pageNumber && !visiblePageNumbers.includes(pageNumber)) {
|
|
visiblePageNumbers.push(pageNumber);
|
|
}
|
|
});
|
|
|
|
// Show continuations only for visible pages
|
|
showContinuationsForVisiblePages(visiblePageNumbers);
|
|
|
|
// Highlight visible pages
|
|
if (visiblePageNumbers.length > 0) {
|
|
markCurrentPagesInInhaltsverzeichnis(visiblePageNumbers);
|
|
}
|
|
}
|
|
|
|
function showContinuationsForVisiblePages(visiblePageNumbers) {
|
|
// Hide all continuation entries by default
|
|
document.querySelectorAll(".continuation-entry").forEach((entry) => {
|
|
entry.style.display = "none";
|
|
});
|
|
|
|
// Show continuation entries only for visible pages
|
|
visiblePageNumbers.forEach((pageNumber) => {
|
|
const pageEntry = document.querySelector(`[data-page-container="${pageNumber}"]`);
|
|
if (pageEntry) {
|
|
const continuationEntries = pageEntry.querySelectorAll(".continuation-entry");
|
|
continuationEntries.forEach((entry) => {
|
|
entry.style.display = "";
|
|
});
|
|
}
|
|
});
|
|
|
|
// Update work titles based on highlighted state
|
|
updateWorkTitles(visiblePageNumbers);
|
|
|
|
// Update page entry visibility after showing/hiding continuations
|
|
updatePageEntryVisibility();
|
|
}
|
|
|
|
function updateWorkTitles(visiblePageNumbers) {
|
|
// Reset all work titles to short form
|
|
document.querySelectorAll(".work-title").forEach((titleElement) => {
|
|
const shortTitle = titleElement.getAttribute("data-short-title");
|
|
if (shortTitle) {
|
|
titleElement.textContent = shortTitle;
|
|
}
|
|
});
|
|
|
|
// Update work titles to full form for highlighted pages
|
|
visiblePageNumbers.forEach((pageNumber) => {
|
|
const pageEntry = document.querySelector(`[data-page-container="${pageNumber}"]`);
|
|
if (pageEntry) {
|
|
const workTitles = pageEntry.querySelectorAll(".work-title");
|
|
workTitles.forEach((titleElement) => {
|
|
const fullTitle = titleElement.getAttribute("data-full-title");
|
|
if (fullTitle && fullTitle !== titleElement.getAttribute("data-short-title")) {
|
|
titleElement.textContent = fullTitle;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function updatePageEntryVisibility() {
|
|
// Check each page entry to see if it has any visible content
|
|
document.querySelectorAll(".page-entry").forEach((pageEntry) => {
|
|
const allEntries = pageEntry.querySelectorAll(".inhalts-entry");
|
|
let hasVisibleContent = false;
|
|
|
|
// Check if any entry is visible
|
|
allEntries.forEach((entry) => {
|
|
const computedStyle = window.getComputedStyle(entry);
|
|
if (computedStyle.display !== "none") {
|
|
hasVisibleContent = true;
|
|
}
|
|
});
|
|
|
|
// Hide the entire page entry if it has no visible content
|
|
if (hasVisibleContent) {
|
|
pageEntry.style.display = "";
|
|
} else {
|
|
pageEntry.style.display = "none";
|
|
}
|
|
});
|
|
}
|
|
|
|
// Initialize highlighting on page load
|
|
document.addEventListener("DOMContentLoaded", initializePageHighlighting);
|
|
|
|
// Trigger highlighting on scroll
|
|
window.scrollTimeout = window.scrollTimeout || null;
|
|
window.addEventListener("scroll", function () {
|
|
clearTimeout(window.scrollTimeout);
|
|
window.scrollTimeout = setTimeout(() => {
|
|
checkAndHighlightVisiblePages();
|
|
updateButtonStates(); // Update button states including Beilage toggle
|
|
}, 50);
|
|
});
|
|
|
|
// HTMX event handling
|
|
document.body.addEventListener("htmx:afterSwap", function (event) {
|
|
setTimeout(() => {
|
|
initializePageHighlighting();
|
|
}, 100);
|
|
});
|
|
|
|
document.body.addEventListener("htmx:afterSettle", function (event) {
|
|
setTimeout(() => {
|
|
initializePageHighlighting();
|
|
}, 200);
|
|
});
|
|
|
|
document.body.addEventListener("htmx:load", function (event) {
|
|
setTimeout(() => {
|
|
initializePageHighlighting();
|
|
}, 100);
|
|
});
|
|
|
|
function markCurrentPageInInhaltsverzeichnis(pageNumber) {
|
|
markCurrentPagesInInhaltsverzeichnis([pageNumber]);
|
|
}
|
|
|
|
function markCurrentPagesInInhaltsverzeichnis(pageNumbers) {
|
|
console.log("markCurrentPagesInInhaltsverzeichnis called with:", pageNumbers);
|
|
|
|
// Reset all page container borders to default
|
|
document.querySelectorAll("[data-page-container]").forEach((container) => {
|
|
if (container.hasAttribute("data-beilage")) {
|
|
container.classList.remove("border-red-500");
|
|
container.classList.add("border-amber-400");
|
|
} else {
|
|
container.classList.remove("border-red-500");
|
|
container.classList.add("border-slate-300");
|
|
}
|
|
});
|
|
|
|
// Reset all page numbers in Inhaltsverzeichnis
|
|
document.querySelectorAll(".page-number-inhalts").forEach((pageNum) => {
|
|
pageNum.classList.remove("text-red-600", "font-bold");
|
|
pageNum.classList.add("text-slate-700", "font-semibold");
|
|
pageNum.style.textDecoration = "";
|
|
pageNum.style.pointerEvents = "";
|
|
// Restore hover effects
|
|
if (pageNum.classList.contains("bg-blue-50")) {
|
|
pageNum.classList.add("hover:bg-blue-100");
|
|
} else if (pageNum.classList.contains("bg-amber-50")) {
|
|
pageNum.classList.add("hover:bg-amber-100");
|
|
}
|
|
// Keep original background colors
|
|
if (!pageNum.classList.contains("bg-amber-50") && !pageNum.classList.contains("bg-blue-50")) {
|
|
pageNum.classList.add("bg-blue-50");
|
|
}
|
|
});
|
|
|
|
// Reset all containers and links in Inhaltsverzeichnis
|
|
document.querySelectorAll(".inhalts-entry").forEach((container) => {
|
|
container.classList.add("hover:bg-slate-100");
|
|
container.style.cursor = "";
|
|
});
|
|
|
|
document.querySelectorAll('.inhalts-entry a[href*="/"]').forEach((link) => {
|
|
link.classList.remove("no-underline");
|
|
if (link.classList.contains("bg-blue-50")) {
|
|
link.classList.add("hover:bg-blue-100");
|
|
}
|
|
});
|
|
|
|
// Find and highlight the current page numbers
|
|
const highlightedElements = [];
|
|
|
|
pageNumbers.forEach((pageNumber) => {
|
|
// Find the exact page entry for this page number
|
|
const pageNumElement = document.querySelector(
|
|
`.page-number-inhalts[data-page-number="${pageNumber}"]`,
|
|
);
|
|
|
|
if (pageNumElement) {
|
|
// Highlight the page number
|
|
pageNumElement.classList.remove(
|
|
"text-slate-700",
|
|
"hover:bg-blue-100",
|
|
"hover:bg-amber-100",
|
|
);
|
|
pageNumElement.classList.add("text-red-600", "font-bold");
|
|
pageNumElement.style.textDecoration = "none";
|
|
pageNumElement.style.pointerEvents = "none";
|
|
highlightedElements.push(pageNumElement);
|
|
|
|
// Highlight the page container's left border
|
|
const pageContainer = document.querySelector(`[data-page-container="${pageNumber}"]`);
|
|
if (pageContainer) {
|
|
pageContainer.classList.remove("border-slate-300", "border-amber-400");
|
|
pageContainer.classList.add("border-red-500");
|
|
}
|
|
|
|
// Make links in the current page non-clickable and remove hover effects
|
|
const parentEntry = pageNumElement.closest(".page-entry");
|
|
if (parentEntry) {
|
|
// Remove hover effects from the container
|
|
const entryContainers = parentEntry.querySelectorAll(".inhalts-entry");
|
|
entryContainers.forEach((container) => {
|
|
container.classList.remove("hover:bg-slate-100");
|
|
container.style.cursor = "default";
|
|
});
|
|
|
|
// Also handle issue reference links
|
|
parentEntry.querySelectorAll('a[href*="/"]').forEach((link) => {
|
|
if (link.getAttribute("aria-current") === "page") {
|
|
link.style.textDecoration = "none";
|
|
link.style.pointerEvents = "none";
|
|
link.classList.add("no-underline");
|
|
link.classList.remove("hover:bg-blue-100");
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// Auto-scroll to first highlighted element if it exists
|
|
if (highlightedElements.length > 0) {
|
|
scrollToHighlightedPage(highlightedElements[0]);
|
|
}
|
|
|
|
// Also highlight page indicators
|
|
document.querySelectorAll(".page-indicator").forEach((indicator) => {
|
|
indicator.classList.remove("text-red-600", "font-bold");
|
|
indicator.classList.add("text-slate-600", "font-semibold");
|
|
// Keep original backgrounds
|
|
if (!indicator.classList.contains("bg-amber-50")) {
|
|
indicator.classList.add("bg-blue-50");
|
|
}
|
|
});
|
|
|
|
// Highlight page indicators for all current pages
|
|
pageNumbers.forEach((pageNumber) => {
|
|
const pageIndicator = document.querySelector(`.page-indicator[data-page="${pageNumber}"]`);
|
|
if (pageIndicator) {
|
|
pageIndicator.classList.remove("text-slate-600");
|
|
pageIndicator.classList.add("text-red-600", "font-bold");
|
|
}
|
|
});
|
|
}
|
|
|
|
function scrollToHighlightedPage(element) {
|
|
// Check if the element is in a scrollable container
|
|
const inhaltsContainer = element.closest(".lg\\:overflow-y-auto");
|
|
if (inhaltsContainer) {
|
|
// Calculate position
|
|
const containerRect = inhaltsContainer.getBoundingClientRect();
|
|
const elementRect = element.getBoundingClientRect();
|
|
|
|
// Check if element is not fully visible
|
|
const isAboveContainer = elementRect.top < containerRect.top;
|
|
const isBelowContainer = elementRect.bottom > containerRect.bottom;
|
|
|
|
if (isAboveContainer || isBelowContainer) {
|
|
// Scroll to make element visible with some padding
|
|
element.scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "center",
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function enlargePage(imgElement, pageNumber, isFromSpread) {
|
|
const modal = document.getElementById("pageModal");
|
|
const modalImage = document.getElementById("modalImage");
|
|
|
|
modalImage.src = imgElement.src;
|
|
modalImage.alt = imgElement.alt;
|
|
|
|
modal.classList.remove("hidden");
|
|
|
|
// Mark current page when enlarged
|
|
markCurrentPageInInhaltsverzeichnis(pageNumber);
|
|
}
|
|
|
|
function closeModal() {
|
|
const modal = document.getElementById("pageModal");
|
|
modal.classList.add("hidden");
|
|
}
|
|
|
|
// Close modal on Escape key
|
|
document.addEventListener("keydown", function (e) {
|
|
if (e.key === "Escape") {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
// Navigation functions and state management - use window to avoid redeclaration
|
|
window.currentPageContainers = window.currentPageContainers || [];
|
|
window.currentActiveIndex = window.currentActiveIndex || 0;
|
|
window.pageObserver = window.pageObserver || null;
|
|
|
|
// Initialize or reinitialize page tracking - can be called multiple times
|
|
function initializePageTracking() {
|
|
// Clean up existing observer
|
|
if (window.pageObserver) {
|
|
window.pageObserver.disconnect();
|
|
window.pageObserver = null;
|
|
}
|
|
|
|
// Reset state
|
|
window.currentPageContainers = Array.from(
|
|
document.querySelectorAll(".newspaper-page-container"),
|
|
);
|
|
window.currentActiveIndex = 0;
|
|
updateButtonStates();
|
|
|
|
// Set up new observer
|
|
const existingObserver = document.querySelector(".newspaper-page-container");
|
|
if (existingObserver) {
|
|
let visibleContainers = new Set();
|
|
|
|
window.pageObserver = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
const containerIndex = window.currentPageContainers.indexOf(entry.target);
|
|
if (containerIndex !== -1) {
|
|
if (entry.isIntersecting) {
|
|
visibleContainers.add(containerIndex);
|
|
} else {
|
|
visibleContainers.delete(containerIndex);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Update currentActiveIndex to the first (topmost) visible container
|
|
if (visibleContainers.size > 0) {
|
|
const sortedVisible = Array.from(visibleContainers).sort((a, b) => a - b);
|
|
const newActiveIndex = sortedVisible[0];
|
|
if (newActiveIndex !== window.currentActiveIndex) {
|
|
window.currentActiveIndex = newActiveIndex;
|
|
updateButtonStates();
|
|
}
|
|
}
|
|
},
|
|
{
|
|
rootMargin: "-20% 0px -70% 0px",
|
|
},
|
|
);
|
|
|
|
window.currentPageContainers.forEach((container) => {
|
|
window.pageObserver.observe(container);
|
|
});
|
|
}
|
|
}
|
|
|
|
// Initialize on page load
|
|
document.addEventListener("DOMContentLoaded", initializePageTracking);
|
|
|
|
// More comprehensive HTMX event handling for navigation tracking
|
|
document.body.addEventListener("htmx:afterSwap", function (event) {
|
|
console.log("HTMX afterSwap for navigation tracking");
|
|
setTimeout(() => {
|
|
console.log("Reinitializing page tracking...");
|
|
initializePageTracking();
|
|
}, 100);
|
|
});
|
|
|
|
document.body.addEventListener("htmx:afterSettle", function (event) {
|
|
console.log("HTMX afterSettle for navigation tracking");
|
|
setTimeout(() => {
|
|
initializePageTracking();
|
|
}, 200);
|
|
});
|
|
|
|
document.body.addEventListener("htmx:load", function (event) {
|
|
console.log("HTMX load for navigation tracking");
|
|
setTimeout(() => {
|
|
initializePageTracking();
|
|
}, 100);
|
|
});
|
|
|
|
function scrollToPreviousPage() {
|
|
if (window.currentActiveIndex > 0) {
|
|
// Find the first page that's not currently visible
|
|
let targetIndex = -1;
|
|
|
|
// Check which pages are currently visible
|
|
const visibleIndexes = [];
|
|
window.currentPageContainers.forEach((container, index) => {
|
|
const containerRect = container.getBoundingClientRect();
|
|
const viewportHeight = window.innerHeight;
|
|
|
|
const visibleTop = Math.max(containerRect.top, 0);
|
|
const visibleBottom = Math.min(containerRect.bottom, viewportHeight);
|
|
const visibleHeight = Math.max(0, visibleBottom - visibleTop);
|
|
const containerHeight = containerRect.height;
|
|
|
|
const visibilityRatio = visibleHeight / containerHeight;
|
|
if (visibilityRatio >= 0.3) { // Consider visible if 30% or more is showing
|
|
visibleIndexes.push(index);
|
|
}
|
|
});
|
|
|
|
// Find the first non-visible page before the current visible range
|
|
const minVisibleIndex = Math.min(...visibleIndexes);
|
|
for (let i = minVisibleIndex - 1; i >= 0; i--) {
|
|
if (!visibleIndexes.includes(i)) {
|
|
targetIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// If no non-visible page found, go to the page just before the visible range
|
|
if (targetIndex === -1 && minVisibleIndex > 0) {
|
|
targetIndex = minVisibleIndex - 1;
|
|
}
|
|
|
|
if (targetIndex >= 0) {
|
|
window.currentActiveIndex = targetIndex;
|
|
window.currentPageContainers[window.currentActiveIndex].scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "start",
|
|
});
|
|
|
|
// Update button states after a brief delay to let intersection observer catch up
|
|
setTimeout(() => {
|
|
updateButtonStates();
|
|
}, 100);
|
|
}
|
|
}
|
|
}
|
|
|
|
function scrollToNextPage() {
|
|
if (window.currentActiveIndex < window.currentPageContainers.length - 1) {
|
|
// Find the first page that's not currently visible
|
|
let targetIndex = -1;
|
|
|
|
// Check which pages are currently visible
|
|
const visibleIndexes = [];
|
|
window.currentPageContainers.forEach((container, index) => {
|
|
const containerRect = container.getBoundingClientRect();
|
|
const viewportHeight = window.innerHeight;
|
|
|
|
const visibleTop = Math.max(containerRect.top, 0);
|
|
const visibleBottom = Math.min(containerRect.bottom, viewportHeight);
|
|
const visibleHeight = Math.max(0, visibleBottom - visibleTop);
|
|
const containerHeight = containerRect.height;
|
|
|
|
const visibilityRatio = visibleHeight / containerHeight;
|
|
if (visibilityRatio >= 0.3) { // Consider visible if 30% or more is showing
|
|
visibleIndexes.push(index);
|
|
}
|
|
});
|
|
|
|
// Find the first non-visible page after the current visible range
|
|
const maxVisibleIndex = Math.max(...visibleIndexes);
|
|
for (let i = maxVisibleIndex + 1; i < window.currentPageContainers.length; i++) {
|
|
if (!visibleIndexes.includes(i)) {
|
|
targetIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// If no non-visible page found, go to the page just after the visible range
|
|
if (targetIndex === -1 && maxVisibleIndex < window.currentPageContainers.length - 1) {
|
|
targetIndex = maxVisibleIndex + 1;
|
|
}
|
|
|
|
if (targetIndex >= 0 && targetIndex < window.currentPageContainers.length) {
|
|
window.currentActiveIndex = targetIndex;
|
|
window.currentPageContainers[window.currentActiveIndex].scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "start",
|
|
});
|
|
|
|
// Update button states after a brief delay to let intersection observer catch up
|
|
setTimeout(() => {
|
|
updateButtonStates();
|
|
}, 100);
|
|
}
|
|
}
|
|
}
|
|
|
|
function scrollToBeilage() {
|
|
// Check if we're currently viewing a Beilage section
|
|
const isViewingBeilage = isCurrentlyInBeilageSection();
|
|
|
|
if (isViewingBeilage) {
|
|
// Go back to main issue (first main page)
|
|
const firstMainPage = document.querySelector('#newspaper-content .newspaper-page-container');
|
|
if (firstMainPage) {
|
|
firstMainPage.scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "start",
|
|
});
|
|
}
|
|
} else {
|
|
// Go to first beilage container
|
|
const beilageContainer = document.querySelector('[class*="border-t-2 border-amber-200"]');
|
|
if (beilageContainer) {
|
|
beilageContainer.scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "start",
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function isCurrentlyInBeilageSection() {
|
|
// Check which pages are currently visible
|
|
const visibleIndexes = [];
|
|
window.currentPageContainers.forEach((container, index) => {
|
|
const containerRect = container.getBoundingClientRect();
|
|
const viewportHeight = window.innerHeight;
|
|
|
|
const visibleTop = Math.max(containerRect.top, 0);
|
|
const visibleBottom = Math.min(containerRect.bottom, viewportHeight);
|
|
const visibleHeight = Math.max(0, visibleBottom - visibleTop);
|
|
const containerHeight = containerRect.height;
|
|
|
|
const visibilityRatio = visibleHeight / containerHeight;
|
|
if (visibilityRatio >= 0.3) { // Consider visible if 30% or more is showing
|
|
visibleIndexes.push(index);
|
|
}
|
|
});
|
|
|
|
// Check if any visible page is a Beilage page
|
|
for (const index of visibleIndexes) {
|
|
const container = window.currentPageContainers[index];
|
|
if (container && container.id && container.id.includes('beilage-')) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
function updateButtonStates() {
|
|
const prevBtn = document.getElementById("prevPageBtn");
|
|
const nextBtn = document.getElementById("nextPageBtn");
|
|
const beilageBtn = document.getElementById("beilageBtn");
|
|
|
|
if (prevBtn) {
|
|
if (window.currentActiveIndex <= 0) {
|
|
prevBtn.style.display = "none";
|
|
} else {
|
|
prevBtn.style.display = "flex";
|
|
}
|
|
}
|
|
|
|
if (nextBtn) {
|
|
if (window.currentActiveIndex >= window.currentPageContainers.length - 1) {
|
|
nextBtn.style.display = "none";
|
|
} else {
|
|
nextBtn.style.display = "flex";
|
|
}
|
|
}
|
|
|
|
// Update Beilage button based on current location
|
|
if (beilageBtn) {
|
|
const isViewingBeilage = isCurrentlyInBeilageSection();
|
|
const icon = beilageBtn.querySelector('i');
|
|
|
|
if (isViewingBeilage) {
|
|
// Show "Go to Main Issue" state - use gray styling
|
|
beilageBtn.title = "Zur Hauptausgabe";
|
|
beilageBtn.className = "w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 hover:text-gray-800 border border-gray-300 transition-colors duration-200 flex items-center justify-center cursor-pointer";
|
|
if (icon) {
|
|
icon.className = "ri-file-text-line text-lg lg:text-xl";
|
|
}
|
|
} else {
|
|
// Show "Go to Beilage" state - use amber styling
|
|
beilageBtn.title = "Zu Beilage";
|
|
beilageBtn.className = "w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-amber-100 hover:bg-amber-200 text-amber-700 hover:text-amber-800 border border-amber-300 transition-colors duration-200 flex items-center justify-center cursor-pointer";
|
|
if (icon) {
|
|
icon.className = "ri-attachment-line text-lg lg:text-xl";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function shareCurrentPage() {
|
|
const button = document.getElementById("shareLinkBtn");
|
|
|
|
// Get current page information
|
|
let pageInfo = "";
|
|
|
|
// Try to get the currently visible page number from active containers
|
|
if (
|
|
window.currentActiveIndex !== undefined &&
|
|
window.currentPageContainers &&
|
|
window.currentPageContainers[window.currentActiveIndex]
|
|
) {
|
|
const activeContainer = window.currentPageContainers[window.currentActiveIndex];
|
|
const pageElement = activeContainer.querySelector("[data-page]");
|
|
if (pageElement) {
|
|
const pageNumber = pageElement.getAttribute("data-page");
|
|
pageInfo = `#page-${pageNumber}`;
|
|
}
|
|
}
|
|
|
|
// Construct the shareable URL
|
|
const currentUrl = window.location.origin + window.location.pathname + pageInfo;
|
|
|
|
// Try to use Web Share API if available (mobile browsers)
|
|
if (navigator.share) {
|
|
navigator
|
|
.share({
|
|
title: document.title,
|
|
url: currentUrl,
|
|
})
|
|
.catch((err) => {
|
|
// Fallback to clipboard
|
|
copyToClipboard(currentUrl, button);
|
|
});
|
|
} else {
|
|
// Fallback: copy to clipboard
|
|
copyToClipboard(currentUrl, button);
|
|
}
|
|
}
|
|
|
|
function copyToClipboard(text, button) {
|
|
if (navigator.clipboard) {
|
|
navigator.clipboard
|
|
.writeText(text)
|
|
.then(() => {
|
|
showSimplePopup(button, "Link kopiert!");
|
|
})
|
|
.catch((err) => {
|
|
showSimplePopup(button, "Kopieren fehlgeschlagen");
|
|
});
|
|
} else {
|
|
// Fallback for older browsers
|
|
const textarea = document.createElement("textarea");
|
|
textarea.value = text;
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
try {
|
|
const successful = document.execCommand("copy");
|
|
showSimplePopup(button, successful ? "Link kopiert!" : "Kopieren fehlgeschlagen");
|
|
} catch (err) {
|
|
showSimplePopup(button, "Kopieren fehlgeschlagen");
|
|
} finally {
|
|
document.body.removeChild(textarea);
|
|
}
|
|
}
|
|
}
|
|
|
|
function generateCitation() {
|
|
const button = document.getElementById("citationBtn");
|
|
|
|
// Get current page and issue information
|
|
const issueInfo = document.title || "KGPZ";
|
|
const currentUrl = window.location.href;
|
|
|
|
// Basic citation format (can be expanded later)
|
|
const currentDate = new Date().toLocaleDateString("de-DE");
|
|
const citation = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${issueInfo}. Digital verfügbar unter: ${currentUrl} (Zugriff: ${currentDate}).`;
|
|
|
|
// Copy to clipboard
|
|
if (navigator.clipboard) {
|
|
navigator.clipboard
|
|
.writeText(citation)
|
|
.then(() => {
|
|
showSimplePopup(button, "Zitation kopiert!");
|
|
})
|
|
.catch((err) => {
|
|
showSimplePopup(button, "Kopieren fehlgeschlagen");
|
|
});
|
|
} else {
|
|
// Fallback for older browsers
|
|
const textarea = document.createElement("textarea");
|
|
textarea.value = citation;
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
try {
|
|
const successful = document.execCommand("copy");
|
|
showSimplePopup(button, successful ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
|
|
} catch (err) {
|
|
showSimplePopup(button, "Kopieren fehlgeschlagen");
|
|
} finally {
|
|
document.body.removeChild(textarea);
|
|
}
|
|
}
|
|
}
|
|
|
|
function showSimplePopup(button, message) {
|
|
// Remove any existing popup
|
|
const existingPopup = document.querySelector(".simple-popup");
|
|
if (existingPopup) {
|
|
existingPopup.remove();
|
|
}
|
|
|
|
// Create popup element
|
|
const popup = document.createElement("div");
|
|
popup.className = "simple-popup";
|
|
popup.textContent = message;
|
|
|
|
// Style the popup
|
|
popup.style.cssText = `
|
|
position: fixed;
|
|
background: #374151;
|
|
color: white;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
white-space: nowrap;
|
|
`;
|
|
|
|
// Position popup next to button
|
|
const buttonRect = button.getBoundingClientRect();
|
|
const viewportHeight = window.innerHeight;
|
|
const viewportWidth = window.innerWidth;
|
|
|
|
// Calculate position relative to viewport (since we're using fixed positioning)
|
|
let left = buttonRect.left - 10;
|
|
let top = buttonRect.bottom + 8;
|
|
|
|
// Ensure popup doesn't go off-screen
|
|
const popupWidth = 120; // Estimated popup width
|
|
const popupHeight = 32; // Estimated popup height
|
|
|
|
// Adjust horizontal position if too far right
|
|
if (left + popupWidth > viewportWidth) {
|
|
left = buttonRect.right - popupWidth + 10;
|
|
}
|
|
|
|
// Adjust vertical position if too far down (show above button instead)
|
|
if (top + popupHeight > viewportHeight) {
|
|
top = buttonRect.top - popupHeight - 8;
|
|
}
|
|
|
|
popup.style.left = Math.max(5, left) + "px";
|
|
popup.style.top = Math.max(5, top) + "px";
|
|
|
|
// Add to page
|
|
document.body.appendChild(popup);
|
|
|
|
// Fade in
|
|
setTimeout(() => {
|
|
popup.style.opacity = "1";
|
|
}, 10);
|
|
|
|
// Auto-remove after 2 seconds
|
|
setTimeout(() => {
|
|
popup.style.opacity = "0";
|
|
setTimeout(() => {
|
|
if (popup.parentNode) {
|
|
popup.remove();
|
|
}
|
|
}, 200);
|
|
}, 2000);
|
|
}
|
|
|
|
// Handle hash navigation to scroll to specific pages
|
|
function scrollToPageFromHash() {
|
|
const hash = window.location.hash;
|
|
let pageNumber = "";
|
|
let targetContainer = null;
|
|
|
|
if (hash.startsWith("#page-")) {
|
|
pageNumber = hash.replace("#page-", "");
|
|
|
|
// Try to find exact page container first
|
|
targetContainer = document.getElementById(`page-${pageNumber}`);
|
|
|
|
// If not found, try to find container that contains this page
|
|
if (!targetContainer) {
|
|
// Look for double-spread containers that contain this page
|
|
const containers = document.querySelectorAll(".newspaper-page-container[data-pages]");
|
|
for (const container of containers) {
|
|
const pages = container.getAttribute("data-pages");
|
|
if (pages && pages.split(",").includes(pageNumber)) {
|
|
targetContainer = container;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
// If still not found, try beilage containers
|
|
if (!targetContainer) {
|
|
targetContainer =
|
|
document.getElementById(`beilage-1-page-${pageNumber}`) ||
|
|
document.getElementById(`beilage-2-page-${pageNumber}`) ||
|
|
document.querySelector(`[id*="beilage"][id*="page-${pageNumber}"]`);
|
|
}
|
|
} else if (hash.startsWith("#beilage-")) {
|
|
// Handle beilage-specific hashes like #beilage-1-page-101
|
|
const match = hash.match(/#beilage-(\d+)-page-(\d+)/);
|
|
if (match) {
|
|
const beilageNum = match[1];
|
|
pageNumber = match[2];
|
|
targetContainer = document.getElementById(`beilage-${beilageNum}-page-${pageNumber}`);
|
|
}
|
|
}
|
|
|
|
if (targetContainer && pageNumber) {
|
|
setTimeout(() => {
|
|
targetContainer.scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "start",
|
|
});
|
|
|
|
// Highlight the specific page in the table of contents
|
|
markCurrentPageInInhaltsverzeichnis(pageNumber);
|
|
}, 300);
|
|
}
|
|
}
|
|
|
|
// Function to copy page permalink
|
|
function copyPagePermalink(pageNumber, button, isBeilage = false) {
|
|
let pageFragment = "";
|
|
if (isBeilage) {
|
|
pageFragment = `#beilage-1-page-${pageNumber}`;
|
|
} else {
|
|
pageFragment = `#page-${pageNumber}`;
|
|
}
|
|
|
|
const currentUrl = window.location.origin + window.location.pathname + pageFragment;
|
|
|
|
// Copy to clipboard
|
|
if (navigator.clipboard) {
|
|
navigator.clipboard
|
|
.writeText(currentUrl)
|
|
.then(() => {
|
|
showSimplePopup(button, "Link kopiert!");
|
|
})
|
|
.catch((err) => {
|
|
showSimplePopup(button, "Kopieren fehlgeschlagen");
|
|
});
|
|
} else {
|
|
// Fallback for older browsers
|
|
const textarea = document.createElement("textarea");
|
|
textarea.value = currentUrl;
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
try {
|
|
const successful = document.execCommand("copy");
|
|
showSimplePopup(button, successful ? "Link kopiert!" : "Kopieren fehlgeschlagen");
|
|
} catch (err) {
|
|
showSimplePopup(button, "Kopieren fehlgeschlagen");
|
|
} finally {
|
|
document.body.removeChild(textarea);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize hash handling
|
|
document.addEventListener("DOMContentLoaded", scrollToPageFromHash);
|
|
window.addEventListener("hashchange", scrollToPageFromHash);
|
|
|
|
// Page-specific share and citation functions
|
|
function generatePageCitation(pageNumber, button) {
|
|
// Get current issue information
|
|
const issueInfo = document.title || "KGPZ";
|
|
const currentUrl = `${window.location.origin}${window.location.pathname}#page-${pageNumber}`;
|
|
|
|
// Basic citation format for specific page
|
|
const currentDate = new Date().toLocaleDateString("de-DE");
|
|
const citation = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${issueInfo}, Seite ${pageNumber}. Digital verfügbar unter: ${currentUrl} (Zugriff: ${currentDate}).`;
|
|
|
|
// Copy to clipboard
|
|
if (navigator.clipboard) {
|
|
navigator.clipboard
|
|
.writeText(citation)
|
|
.then(() => {
|
|
showSimplePopup(button, "Zitation kopiert!");
|
|
})
|
|
.catch((err) => {
|
|
showSimplePopup(button, "Kopieren fehlgeschlagen");
|
|
});
|
|
} else {
|
|
// Fallback for older browsers
|
|
const textarea = document.createElement("textarea");
|
|
textarea.value = citation;
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
try {
|
|
const successful = document.execCommand("copy");
|
|
showSimplePopup(button, successful ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
|
|
} catch (err) {
|
|
showSimplePopup(button, "Kopieren fehlgeschlagen");
|
|
} finally {
|
|
document.body.removeChild(textarea);
|
|
}
|
|
}
|
|
}
|
|
</script>
|