mirror of
https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git
synced 2025-10-29 17:15:31 +00:00
count ontinuations
This commit is contained in:
Simon Martens
@@ -77,17 +77,958 @@ function setup_templates() {
|
||||
});
|
||||
}
|
||||
|
||||
// INFO: This is intended to be callled once on website load
|
||||
// ===========================
|
||||
// NEWSPAPER LAYOUT FUNCTIONS
|
||||
// ===========================
|
||||
|
||||
// Global variables for state management
|
||||
window.highlightObserver = window.highlightObserver || null;
|
||||
window.currentPageContainers = window.currentPageContainers || [];
|
||||
window.currentActiveIndex = window.currentActiveIndex || 0;
|
||||
window.pageObserver = window.pageObserver || null;
|
||||
window.scrollTimeout = window.scrollTimeout || null;
|
||||
|
||||
// Page highlighting functionality
|
||||
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";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modal functions
|
||||
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");
|
||||
}
|
||||
|
||||
// Page navigation functions
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Share and citation functions
|
||||
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);
|
||||
}
|
||||
|
||||
// Hash navigation functions
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
// Page-specific utilities
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize newspaper layout functionality
|
||||
function initializeNewspaperLayout() {
|
||||
// Initialize page highlighting
|
||||
initializePageHighlighting();
|
||||
|
||||
// Initialize page tracking
|
||||
initializePageTracking();
|
||||
|
||||
// Set up scroll handler
|
||||
window.addEventListener("scroll", function () {
|
||||
clearTimeout(window.scrollTimeout);
|
||||
window.scrollTimeout = setTimeout(() => {
|
||||
checkAndHighlightVisiblePages();
|
||||
updateButtonStates(); // Update button states including Beilage toggle
|
||||
}, 50);
|
||||
});
|
||||
|
||||
// Initialize hash handling
|
||||
scrollToPageFromHash();
|
||||
window.addEventListener("hashchange", scrollToPageFromHash);
|
||||
|
||||
// Set up keyboard shortcuts
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Escape") {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Export functions for global access
|
||||
window.enlargePage = enlargePage;
|
||||
window.closeModal = closeModal;
|
||||
window.scrollToPreviousPage = scrollToPreviousPage;
|
||||
window.scrollToNextPage = scrollToNextPage;
|
||||
window.scrollToBeilage = scrollToBeilage;
|
||||
window.shareCurrentPage = shareCurrentPage;
|
||||
window.generateCitation = generateCitation;
|
||||
window.copyPagePermalink = copyPagePermalink;
|
||||
window.generatePageCitation = generatePageCitation;
|
||||
|
||||
// INFO: This is intended to be called once on website load
|
||||
function setup() {
|
||||
setup_xslt();
|
||||
setup_templates();
|
||||
|
||||
// Initialize newspaper layout if present
|
||||
if (document.querySelector(".newspaper-page-container")) {
|
||||
initializeNewspaperLayout();
|
||||
}
|
||||
|
||||
// Set up HTMX event handlers
|
||||
htmx.on("htmx:load", function (_) {
|
||||
// INFO: We can instead use afterSettle; and also clear the map with
|
||||
// xslt_processors.clear();
|
||||
setup_xslt();
|
||||
});
|
||||
|
||||
setup_templates();
|
||||
// HTMX event handling for newspaper layout
|
||||
document.body.addEventListener("htmx:afterSwap", function (event) {
|
||||
setTimeout(() => {
|
||||
if (document.querySelector(".newspaper-page-container")) {
|
||||
initializeNewspaperLayout();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
document.body.addEventListener("htmx:afterSettle", function (event) {
|
||||
setTimeout(() => {
|
||||
if (document.querySelector(".newspaper-page-container")) {
|
||||
initializeNewspaperLayout();
|
||||
}
|
||||
}, 200);
|
||||
});
|
||||
|
||||
document.body.addEventListener("htmx:load", function (event) {
|
||||
setTimeout(() => {
|
||||
if (document.querySelector(".newspaper-page-container")) {
|
||||
initializeNewspaperLayout();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
export { setup };
|
||||
|
||||
@@ -92,4 +92,72 @@ body::before {
|
||||
main {
|
||||
@apply grow shrink-0;
|
||||
}
|
||||
|
||||
/* =============================
|
||||
NEWSPAPER LAYOUT STYLES
|
||||
============================= */
|
||||
|
||||
/* 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 */
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user