mirror of
https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git
synced 2025-10-29 09:05:30 +00:00
179 lines
11 KiB
Plaintext
179 lines
11 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 }}
|
|
|
|
<!-- Historical printing layout grid -->
|
|
<div class="grid grid-cols-2 gap-x-2">
|
|
{{ template "_historical_layout" (dict "pages" $pages "pageCount" $pageCount "isBeilage" false "targetPage" $.targetPage) }}
|
|
</div>
|
|
{{ end }}
|
|
|
|
|
|
<!-- Beilage Pages -->
|
|
{{ range $beilageNum, $beilagePages := $images.AdditionalPages }}
|
|
{{ if $beilagePages }}
|
|
<div class="mt-12 pt-8">
|
|
<!-- Header for beilage -->
|
|
<div id="beilage" 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 }}
|
|
|
|
<!-- Historical printing layout grid for Beilage -->
|
|
<div class="grid grid-cols-2 gap-x-2">
|
|
{{ template "_historical_layout" (dict "pages" $beilagePages "pageCount" $pageCount "isBeilage" true "targetPage" $.targetPage) }}
|
|
</div>
|
|
</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>
|
|
|
|
|
|
|
|
<!-- Historical printing layout template -->
|
|
{{ define "_historical_layout" }}
|
|
{{ $pages := .pages }}
|
|
{{ $pageCount := .pageCount }}
|
|
{{ $isBeilage := .isBeilage }}
|
|
{{ $targetPage := .targetPage }}
|
|
|
|
{{ if eq $pageCount 2 }}
|
|
<!-- 2 pages: [1] [2] -->
|
|
{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_page" (dict "page" (index $pages 1) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ else if eq $pageCount 4 }}
|
|
<!-- 4 pages: [1] [_] \n [2] [3] \n [_] [4] -->
|
|
{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_empty" "" }}
|
|
{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_empty" "" }}
|
|
{{ template "_render_page" (dict "page" (index $pages 3) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ else if eq $pageCount 6 }}
|
|
<!-- 6 pages: [1] [_] \n [2] [3] \n [_] [4] \n [5] [6] -->
|
|
{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_empty" "" }}
|
|
{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_empty" "" }}
|
|
{{ template "_render_page" (dict "page" (index $pages 3) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_page" (dict "page" (index $pages 4) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_page" (dict "page" (index $pages 5) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ else if eq $pageCount 8 }}
|
|
<!-- 8 pages: [1] [_] \n [2] [3] \n [4] [5] \n [6] [_] \n [_] [7] \n [8] [_] -->
|
|
{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_empty" "" }}
|
|
{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_page" (dict "page" (index $pages 3) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_page" (dict "page" (index $pages 4) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_page" (dict "page" (index $pages 5) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_empty" "" }}
|
|
{{ template "_render_empty" "" }}
|
|
{{ template "_render_page" (dict "page" (index $pages 6) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_page" (dict "page" (index $pages 7) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ template "_render_empty" "" }}
|
|
{{ else }}
|
|
<!-- Fallback: side by side layout for other page counts -->
|
|
{{ range $index, $page := $pages }}
|
|
{{ if eq (mod $index 2) 0 }}
|
|
{{ template "_render_page" (dict "page" $page "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ else }}
|
|
{{ template "_render_page" (dict "page" $page "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
<!-- Page rendering template -->
|
|
{{ define "_render_page" }}
|
|
{{ $page := .page }}
|
|
{{ $position := .position }}
|
|
{{ $isBeilage := .isBeilage }}
|
|
{{ $targetPage := .targetPage }}
|
|
{{ $isLeft := eq $position "left" }}
|
|
{{ $borderColor := "border-slate-200" }}
|
|
{{ $hoverColor := "hover:border-slate-300" }}
|
|
{{ $bgColor := "bg-blue-50" }}
|
|
{{ $idPrefix := "page" }}
|
|
{{ if $isBeilage }}
|
|
{{ $idPrefix = "beilage" }}
|
|
{{ end }}
|
|
|
|
{{ if $isBeilage }}
|
|
{{ $borderColor = "border-amber-200" }}
|
|
{{ $hoverColor = "hover:border-amber-300" }}
|
|
{{ $bgColor = "bg-amber-50" }}
|
|
{{ $idPrefix = "beilage-1-page" }}
|
|
{{ end }}
|
|
|
|
<div class="newspaper-page-container pt-4" id="{{ $idPrefix }}-{{ $page.PageNumber }}" data-page-container="{{ $page.PageNumber }}" data-page-icon-type="{{ $page.PageIcon }}"{{ if $isBeilage }} data-beilage="true"{{ end }}>
|
|
<!-- Anchor for navigation -->
|
|
<!-- Page indicator row -->
|
|
<div class="flex {{ if $isLeft }}justify-end{{ else }}justify-start{{ end }} items-center gap-1 mb-2">
|
|
{{ if $isLeft }}
|
|
<!-- Left page: buttons then page number -->
|
|
<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this{{ if $isBeilage }}, true{{ end }})" 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>
|
|
<button onclick="enlargePage(document.querySelector('#{{ $idPrefix }}-{{ $page.PageNumber }} .newspaper-page-image'), {{ $page.PageNumber }}, false)" class="w-6 h-6 bg-purple-100 hover:bg-purple-200 text-purple-700 border border-purple-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Seite {{ $page.PageNumber }} vergrößern">
|
|
<i class="ri-zoom-in-line text-xs"></i>
|
|
</button>
|
|
<span class="page-indicator text-sm font-bold text-slate-600 {{ $bgColor }} px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1 relative" data-page="{{ $page.PageNumber }}">
|
|
{{ $page.PageNumber }}
|
|
{{ if $isBeilage }}<span class="text-amber-600">{{ PageIcon $page.PageIcon }}</span>{{ else }}{{ PageIcon $page.PageIcon }}{{ end }}
|
|
{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $targetPage "isBeilage" $isBeilage "isTargetBeilage" $.isBeilage) }}
|
|
</span>
|
|
{{ else }}
|
|
<!-- Right page: page number then buttons -->
|
|
<span class="page-indicator text-sm font-bold text-slate-600 {{ $bgColor }} px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1 relative" data-page="{{ $page.PageNumber }}">
|
|
{{ if $isBeilage }}<span class="text-amber-600">{{ PageIcon $page.PageIcon }}</span>{{ else }}{{ PageIcon $page.PageIcon }}{{ end }}
|
|
{{ $page.PageNumber }}
|
|
{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $targetPage "isBeilage" $isBeilage "isTargetBeilage" $.isBeilage) }}
|
|
</span>
|
|
<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this{{ if $isBeilage }}, true{{ end }})" 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>
|
|
<button onclick="enlargePage(document.querySelector('#{{ $idPrefix }}-{{ $page.PageNumber }} .newspaper-page-image'), {{ $page.PageNumber }}, false)" class="w-6 h-6 bg-purple-100 hover:bg-purple-200 text-purple-700 border border-purple-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer" title="Seite {{ $page.PageNumber }} vergrößern">
|
|
<i class="ri-zoom-in-line text-xs"></i>
|
|
</button>
|
|
{{ end }}
|
|
</div>
|
|
<div class="single-page bg-white p-4 rounded border {{ $borderColor }} {{ $hoverColor }} transition-colors duration-200">
|
|
<img src="{{ $page.ImagePath }}" alt="{{ if $isBeilage }}Beilage 1, {{ end }}Seite {{ $page.PageNumber }}" class="newspaper-page-image cursor-zoom-in rounded-sm hover:scale-[1.02] transition-transform duration-200" onclick="enlargePage(this, {{ $page.PageNumber }}, false)" data-page="{{ $page.PageNumber }}" loading="lazy" />
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
<!-- Empty space template -->
|
|
{{ define "_render_empty" }}
|
|
<div class="newspaper-empty-space"></div>
|
|
{{ end }}
|