mirror of
https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git
synced 2025-10-29 09:05:30 +00:00
568 lines
18 KiB
Plaintext
568 lines
18 KiB
Plaintext
{{ $model := .model }}
|
|
|
|
<div class="w-full min-h-screen">
|
|
<!-- Navigation Bar -->
|
|
<div class="sticky top-0 z-40 bg-white border-b border-gray-200 shadow-sm mb-6">
|
|
<div class="max-w-7xl mx-auto px-4 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-4">
|
|
{{ template "_title_nav" . }}
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
<!-- Navigation buttons -->
|
|
<button onclick="scrollToPreviousPage()" class="flex items-center px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors">
|
|
<i class="ri-arrow-up-line mr-1"></i>
|
|
Vorherige Seite
|
|
</button>
|
|
<button onclick="scrollToNextPage()" class="flex items-center px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors">
|
|
<i class="ri-arrow-down-line mr-1"></i>
|
|
Nächste Seite
|
|
</button>
|
|
{{ if $model.Images.AdditionalPages }}
|
|
<button onclick="scrollToBeilage()" class="flex items-center px-3 py-2 bg-amber-600 hover:bg-amber-700 text-white rounded-md transition-colors">
|
|
<i class="ri-attachment-line mr-1"></i>
|
|
Zu Beilage
|
|
</button>
|
|
{{ end }}
|
|
<!-- Switch back to sidebar layout -->
|
|
<a href="?layout=sidebar" class="flex items-center px-3 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-md transition-colors">
|
|
<i class="ri-sidebar-unfold-line mr-1"></i>
|
|
Seitenleiste
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4">
|
|
<div class="flex flex-col lg:flex-row gap-6 w-full">
|
|
<!-- Left side: Collapsible Inhaltsverzeichnis -->
|
|
<div class="lg:w-1/4 xl:w-1/5 flex-shrink-0">
|
|
<div class="lg:sticky lg:top-24 lg:max-h-[calc(100vh-6rem)] lg:overflow-y-auto">
|
|
{{ template "_inhaltsverzeichnis" . }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side: Full-width Newspaper pages -->
|
|
<div class="lg:w-3/4 xl:w-4/5 flex-1">
|
|
{{ template "_newspaper_layout" . }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentPageContainers = [];
|
|
let currentActiveIndex = 0;
|
|
|
|
// Initialize page tracking for full-width layout
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Get all page containers
|
|
currentPageContainers = document.querySelectorAll('.newspaper-page-container');
|
|
|
|
// Set up intersection observer for active page tracking
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
// Check if this is a double-spread container
|
|
const doubleSpread = entry.target.querySelector('.double-spread');
|
|
if (doubleSpread) {
|
|
// Handle double-spread: highlight both pages
|
|
const pageImages = entry.target.querySelectorAll('img[data-page]');
|
|
const pageNumbers = Array.from(pageImages).map(img => img.getAttribute('data-page'));
|
|
markCurrentPagesInInhaltsverzeichnis(pageNumbers);
|
|
} else {
|
|
// Handle single page
|
|
const pageImg = entry.target.querySelector('img[data-page]');
|
|
if (pageImg) {
|
|
const pageNumber = pageImg.getAttribute('data-page');
|
|
markCurrentPageInInhaltsverzeichnis(pageNumber);
|
|
}
|
|
}
|
|
|
|
// Update current active index
|
|
const containerIndex = Array.from(currentPageContainers).indexOf(entry.target);
|
|
if (containerIndex !== -1) {
|
|
currentActiveIndex = containerIndex;
|
|
}
|
|
}
|
|
});
|
|
}, {
|
|
rootMargin: '-20% 0px -70% 0px' // Trigger when page is mostly in view
|
|
});
|
|
|
|
// Observe all page containers
|
|
currentPageContainers.forEach(container => {
|
|
observer.observe(container);
|
|
});
|
|
});
|
|
|
|
function scrollToPreviousPage() {
|
|
if (currentActiveIndex > 0) {
|
|
currentActiveIndex--;
|
|
currentPageContainers[currentActiveIndex].scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
}
|
|
|
|
function scrollToNextPage() {
|
|
if (currentActiveIndex < currentPageContainers.length - 1) {
|
|
currentActiveIndex++;
|
|
currentPageContainers[currentActiveIndex].scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
}
|
|
|
|
function scrollToBeilage() {
|
|
const beilageElement = document.querySelector('[id^="beilage-"]');
|
|
if (beilageElement) {
|
|
beilageElement.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
}
|
|
|
|
function markCurrentPageInInhaltsverzeichnis(pageNumber) {
|
|
markCurrentPagesInInhaltsverzeichnis([pageNumber]);
|
|
}
|
|
|
|
function markCurrentPagesInInhaltsverzeichnis(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('bg-red-500', 'text-white');
|
|
pageNum.classList.add('text-slate-700');
|
|
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');
|
|
}
|
|
// Restore original background colors
|
|
if (pageNum.classList.contains('bg-amber-50')) {
|
|
// Keep amber background for Beilage pages
|
|
} else {
|
|
pageNum.classList.remove('bg-amber-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 .author-link').forEach(link => {
|
|
link.style.textDecoration = '';
|
|
link.style.pointerEvents = '';
|
|
link.classList.remove('no-underline');
|
|
});
|
|
|
|
document.querySelectorAll('.inhalts-entry a[href*="/"]').forEach(link => {
|
|
link.style.textDecoration = '';
|
|
link.style.pointerEvents = '';
|
|
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 = [];
|
|
const highlightedRanges = new Set(); // Track which ranges we've already highlighted
|
|
|
|
pageNumbers.forEach(pageNumber => {
|
|
// Convert pageNumber to integer for comparison
|
|
const currentPageNum = parseInt(pageNumber);
|
|
// Look for all entries that should be highlighted for this page
|
|
const allPageNumbers = document.querySelectorAll('.page-number-inhalts');
|
|
|
|
for (const pageNumElement of allPageNumbers) {
|
|
const startPage = parseInt(pageNumElement.getAttribute('data-page-number'));
|
|
const endPage = parseInt(pageNumElement.getAttribute('data-end-page'));
|
|
const rangeKey = `${startPage}-${endPage}`;
|
|
|
|
// Check if this page falls within this range
|
|
if (currentPageNum >= startPage && currentPageNum <= endPage) {
|
|
// Only highlight this range once, even if multiple visible pages fall within it
|
|
if (!highlightedRanges.has(rangeKey)) {
|
|
pageNumElement.classList.remove('bg-blue-50', 'bg-amber-50', 'text-slate-700', 'hover:bg-blue-100', 'hover:bg-amber-100');
|
|
pageNumElement.classList.add('bg-red-500', 'text-white');
|
|
pageNumElement.style.textDecoration = 'none';
|
|
pageNumElement.style.pointerEvents = 'none';
|
|
highlightedElements.push(pageNumElement);
|
|
highlightedRanges.add(rangeKey);
|
|
|
|
// Highlight the page container's left border
|
|
const pageContainer = document.querySelector(`[data-page-container="${startPage}"]`);
|
|
if (pageContainer) {
|
|
pageContainer.classList.remove('border-slate-300', 'border-amber-400');
|
|
pageContainer.classList.add('border-red-500');
|
|
}
|
|
|
|
// Also make links in the current article non-clickable and remove hover effects
|
|
const parentEntry = pageNumElement.closest('.mb-4');
|
|
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';
|
|
});
|
|
|
|
// Make all links non-clickable and remove underlines
|
|
parentEntry.querySelectorAll('.author-link').forEach(link => {
|
|
link.style.textDecoration = 'none';
|
|
link.style.pointerEvents = 'none';
|
|
link.classList.add('no-underline');
|
|
});
|
|
|
|
// 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('bg-red-500', 'text-white');
|
|
indicator.classList.add('bg-blue-50', 'text-slate-600');
|
|
});
|
|
|
|
// Highlight page indicators for all current pages
|
|
pageNumbers.forEach(pageNumber => {
|
|
const pageIndicator = document.querySelector(`.page-indicator[data-page="${pageNumber}"]`);
|
|
if (pageIndicator) {
|
|
pageIndicator.classList.remove('bg-blue-50', 'bg-green-50', 'bg-amber-50', 'text-slate-600');
|
|
pageIndicator.classList.add('bg-red-500', 'text-white');
|
|
}
|
|
});
|
|
}
|
|
|
|
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'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
// Close modal if open
|
|
const modal = document.getElementById('pageModal');
|
|
if (modal && !modal.classList.contains('hidden')) {
|
|
modal.classList.add('hidden');
|
|
}
|
|
} else if (e.key === 'ArrowUp' || e.key === 'PageUp') {
|
|
e.preventDefault();
|
|
scrollToPreviousPage();
|
|
} else if (e.key === 'ArrowDown' || e.key === 'PageDown') {
|
|
e.preventDefault();
|
|
scrollToNextPage();
|
|
}
|
|
});
|
|
|
|
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 => {
|
|
console.log('Error sharing:', 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 scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
|
|
|
|
popup.style.left = (buttonRect.left + scrollLeft - 10) + 'px';
|
|
popup.style.top = (buttonRect.bottom + scrollTop + 8) + '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);
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
copyToClipboardWithMessage(currentUrl, button, 'Link kopiert!');
|
|
}
|
|
|
|
// Initialize hash handling
|
|
document.addEventListener('DOMContentLoaded', scrollToPageFromHash);
|
|
window.addEventListener('hashchange', scrollToPageFromHash);
|
|
</script> |