mirror of
https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git
synced 2025-10-29 17:15:31 +00:00
THE GREAT JS CLEANUP
This commit is contained in:
Simon Martens
609
views/transform/single-page-viewer.js
Normal file
609
views/transform/single-page-viewer.js
Normal file
@@ -0,0 +1,609 @@
|
||||
// ===========================
|
||||
// SINGLE PAGE VIEWER COMPONENT
|
||||
// ===========================
|
||||
|
||||
// Single Page Viewer Web Component
|
||||
export class SinglePageViewer extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
// No shadow DOM - use regular DOM to allow Tailwind CSS
|
||||
this.resizeObserver = null;
|
||||
}
|
||||
|
||||
// Dynamically detect sidebar width in pixels
|
||||
detectSidebarWidth() {
|
||||
// Find the actual sidebar element in the current layout
|
||||
const sidebar = document.querySelector('.lg\\:w-1\\/4, .lg\\:w-1\\/3, [class*="lg:w-1/"]');
|
||||
|
||||
if (sidebar) {
|
||||
const sidebarRect = sidebar.getBoundingClientRect();
|
||||
const sidebarWidth = sidebarRect.width;
|
||||
console.log("Detected sidebar width:", sidebarWidth, "px");
|
||||
return `${sidebarWidth}px`;
|
||||
}
|
||||
|
||||
// Fallback: calculate based on viewport width and responsive breakpoints
|
||||
const viewportWidth = window.innerWidth;
|
||||
|
||||
if (viewportWidth < 1024) {
|
||||
// Below lg breakpoint - no sidebar space needed
|
||||
return "0px";
|
||||
} else if (viewportWidth < 1280) {
|
||||
// lg breakpoint: assume 1/4 of viewport (similar to both layouts)
|
||||
return `${Math.floor(viewportWidth * 0.25)}px`;
|
||||
} else {
|
||||
// xl breakpoint: assume 1/5 of viewport (narrower on larger screens)
|
||||
return `${Math.floor(viewportWidth * 0.2)}px`;
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
// Detect sidebar width dynamically
|
||||
const sidebarWidth = this.detectSidebarWidth();
|
||||
|
||||
this.innerHTML = `
|
||||
<div class="fixed inset-0 z-50 flex pointer-events-none">
|
||||
<!-- Keep Inhaltsverzeichnis area empty/transparent (collapsible) -->
|
||||
<div id="sidebar-spacer" style="width: ${sidebarWidth};" class="flex-shrink-0 transition-all duration-300"></div>
|
||||
|
||||
<!-- Cover the right columns with the zoomed view -->
|
||||
<div class="flex-1 bg-slate-50 overflow-auto pointer-events-auto">
|
||||
<div class="relative min-h-full flex flex-col">
|
||||
<!-- Header with page info and buttons -->
|
||||
<div class="flex items-center justify-between p-4">
|
||||
<!-- Left: Sidebar toggle and page indicator -->
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Sidebar toggle button -->
|
||||
<button
|
||||
id="sidebar-toggle-btn"
|
||||
onclick="this.closest('single-page-viewer').toggleSidebar()"
|
||||
class="w-10 h-10 bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer"
|
||||
title="Inhaltsverzeichnis ein-/ausblenden">
|
||||
<i class="ri-sidebar-fold-line text-lg font-bold"></i>
|
||||
</button>
|
||||
|
||||
<!-- Page indicator with icon -->
|
||||
<div id="page-indicator" class="text-slate-800 flex items-center gap-3">
|
||||
<span id="page-icon" class="text-lg"></span>
|
||||
<span id="page-number" class="text-lg font-bold bg-blue-50 px-2 py-1 rounded flex items-center gap-1"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Action buttons -->
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Previous page button -->
|
||||
<button
|
||||
id="prev-page-btn"
|
||||
onclick="this.closest('single-page-viewer').goToPreviousPage()"
|
||||
class="w-10 h-10 bg-gray-100 hover:bg-gray-200 text-gray-700 border border-gray-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer"
|
||||
title="Vorherige Seite">
|
||||
<i class="ri-arrow-left-line text-lg font-bold"></i>
|
||||
</button>
|
||||
|
||||
<!-- Next page button -->
|
||||
<button
|
||||
id="next-page-btn"
|
||||
onclick="this.closest('single-page-viewer').goToNextPage()"
|
||||
class="w-10 h-10 bg-gray-100 hover:bg-gray-200 text-gray-700 border border-gray-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer"
|
||||
title="Nächste Seite">
|
||||
<i class="ri-arrow-right-line text-lg font-bold"></i>
|
||||
</button>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="w-px h-6 bg-gray-300"></div>
|
||||
|
||||
<!-- Share button -->
|
||||
<button
|
||||
id="share-btn"
|
||||
onclick="this.closest('single-page-viewer').shareCurrentPage()"
|
||||
class="w-10 h-10 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 dieser Seite kopieren">
|
||||
<i class="ri-share-line text-lg font-bold"></i>
|
||||
</button>
|
||||
|
||||
<!-- Cite button -->
|
||||
<button
|
||||
id="cite-btn"
|
||||
onclick="this.closest('single-page-viewer').generatePageCitation()"
|
||||
class="w-10 h-10 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 diese Seite generieren">
|
||||
<i class="ri-file-text-line text-lg font-bold"></i>
|
||||
</button>
|
||||
|
||||
<!-- Close button -->
|
||||
<button
|
||||
onclick="this.closest('single-page-viewer').close()"
|
||||
class="w-10 h-10 bg-gray-100 hover:bg-gray-200 text-gray-700 border border-gray-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer"
|
||||
title="Schließen">
|
||||
<i class="ri-close-line text-lg font-bold"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image container that can scroll -->
|
||||
<div class="flex-1 flex items-center justify-center p-4 pb-8">
|
||||
<img
|
||||
id="single-page-image"
|
||||
src=""
|
||||
alt=""
|
||||
class="w-full h-auto rounded-lg shadow-2xl cursor-pointer"
|
||||
onclick="this.closest('single-page-viewer').close()"
|
||||
title="Klicken zum Schließen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Set up resize observer to handle window resizing
|
||||
this.setupResizeObserver();
|
||||
}
|
||||
|
||||
// Set up resize observer to dynamically update sidebar width
|
||||
setupResizeObserver() {
|
||||
// Clean up existing observer
|
||||
if (this.resizeObserver) {
|
||||
this.resizeObserver.disconnect();
|
||||
}
|
||||
|
||||
// Create new resize observer
|
||||
this.resizeObserver = new ResizeObserver(() => {
|
||||
this.updateSidebarWidth();
|
||||
});
|
||||
|
||||
// Observe window resizing by watching the document body
|
||||
this.resizeObserver.observe(document.body);
|
||||
}
|
||||
|
||||
// Update sidebar width when window is resized
|
||||
updateSidebarWidth() {
|
||||
const sidebarSpacer = this.querySelector("#sidebar-spacer");
|
||||
if (sidebarSpacer && !sidebarSpacer.style.width.includes("0px")) {
|
||||
// Only update if sidebar is not collapsed (not 0px width)
|
||||
const newWidth = this.detectSidebarWidth();
|
||||
sidebarSpacer.style.width = newWidth;
|
||||
console.log("Updated sidebar width to:", newWidth);
|
||||
}
|
||||
}
|
||||
|
||||
show(imgSrc, imgAlt, pageNumber, isBeilage = false, targetPage = 0, partNumber = null) {
|
||||
const img = this.querySelector("#single-page-image");
|
||||
const pageNumberSpan = this.querySelector("#page-number");
|
||||
const pageIconSpan = this.querySelector("#page-icon");
|
||||
const pageIndicator = this.querySelector("#page-indicator");
|
||||
|
||||
img.src = imgSrc;
|
||||
img.alt = imgAlt;
|
||||
|
||||
// Store current page info for button actions
|
||||
this.currentPageNumber = pageNumber;
|
||||
this.currentIsBeilage = isBeilage;
|
||||
this.currentPartNumber = partNumber;
|
||||
|
||||
// Get issue context from document title or URL
|
||||
const issueContext = this.getIssueContext(pageNumber);
|
||||
|
||||
// Set page number with issue context in the box
|
||||
pageNumberSpan.innerHTML = issueContext ? `${issueContext}, ${pageNumber}` : `${pageNumber}`;
|
||||
|
||||
// Add red dot if this is the target page
|
||||
if (targetPage && pageNumber === targetPage) {
|
||||
pageNumberSpan.style.position = "relative";
|
||||
// Remove any existing red dot
|
||||
const existingDot = pageNumberSpan.querySelector(".target-page-dot");
|
||||
if (existingDot) {
|
||||
existingDot.remove();
|
||||
}
|
||||
// Add new red dot
|
||||
const redDot = document.createElement("span");
|
||||
redDot.className =
|
||||
"target-page-dot absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full z-10";
|
||||
redDot.title = "verlinkte Seite";
|
||||
pageNumberSpan.appendChild(redDot);
|
||||
}
|
||||
|
||||
// Set page icon or part number based on view type
|
||||
if (partNumber !== null) {
|
||||
// Piece view: Show part number instead of icon
|
||||
pageIconSpan.innerHTML = `<span class="part-number bg-slate-100 text-slate-800 font-bold px-1.5 py-0.5 rounded border border-slate-400 flex items-center justify-center">${partNumber}. Teil</span>`;
|
||||
} else {
|
||||
// Issue view: Show icon based on position and type
|
||||
const iconType = this.determinePageIconType(pageNumber, isBeilage);
|
||||
pageIconSpan.innerHTML = this.getPageIconHTML(iconType);
|
||||
}
|
||||
|
||||
// Page indicator styling is now consistent (white background)
|
||||
|
||||
// Update navigation button visibility
|
||||
this.updateNavigationButtons();
|
||||
|
||||
this.style.display = "block";
|
||||
|
||||
// Prevent background scrolling but allow scrolling within the viewer
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
close() {
|
||||
this.style.display = "none";
|
||||
|
||||
// Restore background scrolling
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
// Clean up resize observer
|
||||
if (this.resizeObserver) {
|
||||
this.resizeObserver.disconnect();
|
||||
this.resizeObserver = null;
|
||||
}
|
||||
|
||||
// Restore background scrolling
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
|
||||
// Determine page icon type based on page position and whether it's beilage
|
||||
determinePageIconType(pageNumber, isBeilage) {
|
||||
// Get all page containers to determine position
|
||||
const containerSelector = isBeilage
|
||||
? '.newspaper-page-container[data-beilage="true"]'
|
||||
: ".newspaper-page-container:not([data-beilage])";
|
||||
const pageContainers = Array.from(document.querySelectorAll(containerSelector));
|
||||
|
||||
// Extract page numbers and sort them
|
||||
const allPages = pageContainers
|
||||
.map((container) => {
|
||||
const pageAttr = container.getAttribute("data-page-container");
|
||||
return pageAttr ? parseInt(pageAttr) : null;
|
||||
})
|
||||
.filter((p) => p !== null)
|
||||
.sort((a, b) => a - b);
|
||||
|
||||
if (allPages.length === 0) {
|
||||
return "first";
|
||||
}
|
||||
|
||||
const firstPage = allPages[0];
|
||||
const lastPage = allPages[allPages.length - 1];
|
||||
|
||||
// Same logic as Go determinePageIcon function
|
||||
if (pageNumber === firstPage) {
|
||||
return "first"; // Front page - normal icon
|
||||
} else if (pageNumber === lastPage) {
|
||||
return "last"; // Back page - mirrored icon
|
||||
} else {
|
||||
// For middle pages in newspaper layout
|
||||
if (pageNumber === firstPage + 1) {
|
||||
return "even"; // Page 2 - black + mirrored grey
|
||||
} else if (pageNumber === lastPage - 1) {
|
||||
return "odd"; // Page 3 - grey + black
|
||||
} else {
|
||||
// For newspapers with more than 4 pages, use alternating pattern
|
||||
if (pageNumber % 2 === 0) {
|
||||
return "even";
|
||||
} else {
|
||||
return "odd";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generate page icon HTML based on type (same as Go PageIcon function)
|
||||
getPageIconHTML(iconType) {
|
||||
const baseClass = "ri-file-text-line text-lg";
|
||||
|
||||
switch (iconType) {
|
||||
case "first":
|
||||
return `<i class="${baseClass} text-black"></i>`;
|
||||
case "last":
|
||||
return `<i class="${baseClass} text-black" style="transform: scaleX(-1); display: inline-block;"></i>`;
|
||||
case "even":
|
||||
return `<i class="${baseClass} text-black" style="margin-left: 2px; transform: scaleX(-1); display: inline-block;"></i><i class="${baseClass} text-slate-400"></i>`;
|
||||
case "odd":
|
||||
return `<i class="${baseClass} text-slate-400" style="margin-left: 2px; transform: scaleX(-1); display: inline-block;"></i><i class="${baseClass} text-black"></i>`;
|
||||
default:
|
||||
return `<i class="${baseClass} text-black"></i>`;
|
||||
}
|
||||
}
|
||||
|
||||
// Share current page
|
||||
shareCurrentPage() {
|
||||
if (typeof copyPagePermalink === "function") {
|
||||
// Use the actual button element
|
||||
const shareBtn = this.querySelector("#share-btn");
|
||||
copyPagePermalink(this.currentPageNumber, shareBtn, this.currentIsBeilage);
|
||||
}
|
||||
}
|
||||
|
||||
// Generate citation for current page
|
||||
generatePageCitation() {
|
||||
if (typeof generatePageCitation === "function") {
|
||||
// Use the actual button element
|
||||
const citeBtn = this.querySelector("#cite-btn");
|
||||
generatePageCitation(this.currentPageNumber, citeBtn);
|
||||
}
|
||||
}
|
||||
|
||||
// Update navigation button visibility based on available pages
|
||||
updateNavigationButtons() {
|
||||
const prevBtn = this.querySelector("#prev-page-btn");
|
||||
const nextBtn = this.querySelector("#next-page-btn");
|
||||
|
||||
const { prevPage, nextPage } = this.getAdjacentPages();
|
||||
|
||||
// Enable/disable previous page button
|
||||
if (prevPage !== null) {
|
||||
prevBtn.disabled = false;
|
||||
prevBtn.className = prevBtn.className.replace("opacity-50 cursor-not-allowed", "");
|
||||
prevBtn.className = prevBtn.className.replace(
|
||||
"bg-gray-50 text-gray-400",
|
||||
"bg-gray-100 text-gray-700",
|
||||
);
|
||||
} else {
|
||||
prevBtn.disabled = true;
|
||||
if (!prevBtn.className.includes("opacity-50")) {
|
||||
prevBtn.className += " opacity-50 cursor-not-allowed";
|
||||
}
|
||||
prevBtn.className = prevBtn.className.replace(
|
||||
"bg-gray-100 text-gray-700",
|
||||
"bg-gray-50 text-gray-400",
|
||||
);
|
||||
}
|
||||
|
||||
// Enable/disable next page button
|
||||
if (nextPage !== null) {
|
||||
nextBtn.disabled = false;
|
||||
nextBtn.className = nextBtn.className.replace("opacity-50 cursor-not-allowed", "");
|
||||
nextBtn.className = nextBtn.className.replace(
|
||||
"bg-gray-50 text-gray-400",
|
||||
"bg-gray-100 text-gray-700",
|
||||
);
|
||||
} else {
|
||||
nextBtn.disabled = true;
|
||||
if (!nextBtn.className.includes("opacity-50")) {
|
||||
nextBtn.className += " opacity-50 cursor-not-allowed";
|
||||
}
|
||||
nextBtn.className = nextBtn.className.replace(
|
||||
"bg-gray-100 text-gray-700",
|
||||
"bg-gray-50 text-gray-400",
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Get previous and next page numbers
|
||||
getAdjacentPages() {
|
||||
// Get all page containers of the same type (main or beilage)
|
||||
let containerSelector;
|
||||
if (this.currentIsBeilage) {
|
||||
containerSelector = '.newspaper-page-container[data-beilage="true"]';
|
||||
} else {
|
||||
containerSelector = ".newspaper-page-container:not([data-beilage])";
|
||||
}
|
||||
|
||||
const pageContainers = Array.from(document.querySelectorAll(containerSelector));
|
||||
console.log(
|
||||
"Found containers:",
|
||||
pageContainers.length,
|
||||
"for",
|
||||
this.currentIsBeilage ? "beilage" : "main",
|
||||
);
|
||||
|
||||
// Extract page numbers and sort them
|
||||
const allPages = pageContainers
|
||||
.map((container) => {
|
||||
const pageAttr = container.getAttribute("data-page-container");
|
||||
const pageNum = pageAttr ? parseInt(pageAttr) : null;
|
||||
console.log("Container page:", pageAttr, "parsed:", pageNum);
|
||||
return pageNum;
|
||||
})
|
||||
.filter((p) => p !== null)
|
||||
.sort((a, b) => a - b);
|
||||
|
||||
console.log("All pages found:", allPages);
|
||||
console.log("Current page:", this.currentPageNumber);
|
||||
|
||||
const currentIndex = allPages.indexOf(this.currentPageNumber);
|
||||
console.log("Current index:", currentIndex);
|
||||
|
||||
let prevPage = null;
|
||||
let nextPage = null;
|
||||
|
||||
if (currentIndex > 0) {
|
||||
prevPage = allPages[currentIndex - 1];
|
||||
}
|
||||
|
||||
if (currentIndex < allPages.length - 1) {
|
||||
nextPage = allPages[currentIndex + 1];
|
||||
}
|
||||
|
||||
console.log("Adjacent pages - prev:", prevPage, "next:", nextPage);
|
||||
return { prevPage, nextPage };
|
||||
}
|
||||
|
||||
// Navigate to previous page
|
||||
goToPreviousPage() {
|
||||
const { prevPage } = this.getAdjacentPages();
|
||||
if (prevPage !== null) {
|
||||
this.navigateToPage(prevPage);
|
||||
}
|
||||
}
|
||||
|
||||
// Navigate to next page
|
||||
goToNextPage() {
|
||||
const { nextPage } = this.getAdjacentPages();
|
||||
if (nextPage !== null) {
|
||||
this.navigateToPage(nextPage);
|
||||
}
|
||||
}
|
||||
|
||||
// Navigate to a specific page
|
||||
navigateToPage(pageNumber) {
|
||||
// Find the image element for the target page
|
||||
const containerSelector = this.currentIsBeilage
|
||||
? '.newspaper-page-container[data-beilage="true"]'
|
||||
: ".newspaper-page-container:not([data-beilage])";
|
||||
const targetContainer = document.querySelector(
|
||||
`${containerSelector}[data-page-container="${pageNumber}"]`,
|
||||
);
|
||||
|
||||
if (targetContainer) {
|
||||
const imgElement = targetContainer.querySelector(".newspaper-page-image");
|
||||
if (imgElement) {
|
||||
// Determine part number for piece view
|
||||
let newPartNumber = null;
|
||||
if (this.currentPartNumber !== null) {
|
||||
// We're in piece view, try to find the part number for the new page
|
||||
newPartNumber = this.getPartNumberForPage(pageNumber);
|
||||
}
|
||||
|
||||
// Update the current view with the new page
|
||||
this.show(
|
||||
imgElement.src,
|
||||
imgElement.alt,
|
||||
pageNumber,
|
||||
this.currentIsBeilage,
|
||||
0,
|
||||
newPartNumber,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Get part number for a specific page in piece view
|
||||
getPartNumberForPage(pageNumber) {
|
||||
// Try to find the part number from the page container in piece view
|
||||
const pageContainer = document.querySelector(`[data-page-container="${pageNumber}"]`);
|
||||
if (pageContainer) {
|
||||
const partNumberElement = pageContainer.querySelector(".part-number");
|
||||
if (partNumberElement) {
|
||||
// Extract just the number from "X. Teil" format
|
||||
const match = partNumberElement.textContent.match(/(\d+)\./);
|
||||
if (match) {
|
||||
return parseInt(match[1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback: if we can't find it, return null to show icon instead
|
||||
return null;
|
||||
}
|
||||
|
||||
// Toggle sidebar visibility
|
||||
toggleSidebar() {
|
||||
const sidebarSpacer = this.querySelector("#sidebar-spacer");
|
||||
const toggleBtn = this.querySelector("#sidebar-toggle-btn");
|
||||
const toggleIcon = toggleBtn.querySelector("i");
|
||||
|
||||
// Check if sidebar is currently collapsed by looking at width
|
||||
const currentWidth = sidebarSpacer.style.width;
|
||||
const isCollapsed = currentWidth === "0px" || currentWidth === "0";
|
||||
|
||||
console.log("Current state - isCollapsed:", isCollapsed);
|
||||
console.log("Current width:", currentWidth);
|
||||
|
||||
if (isCollapsed) {
|
||||
// Sidebar is collapsed, expand it
|
||||
const fullWidth = this.detectSidebarWidth();
|
||||
sidebarSpacer.style.width = fullWidth;
|
||||
|
||||
// Update button to normal state (sidebar visible)
|
||||
toggleBtn.className =
|
||||
"w-10 h-10 bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer";
|
||||
toggleIcon.className = "ri-sidebar-fold-line text-lg font-bold";
|
||||
toggleBtn.title = "Inhaltsverzeichnis ausblenden";
|
||||
console.log("Expanding sidebar to:", fullWidth);
|
||||
} else {
|
||||
// Sidebar is expanded, collapse it
|
||||
sidebarSpacer.style.width = "0px";
|
||||
|
||||
// Update button to active state (sidebar hidden - orange highlight)
|
||||
toggleBtn.className =
|
||||
"w-10 h-10 bg-orange-100 hover:bg-orange-200 text-orange-700 border border-orange-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer";
|
||||
toggleIcon.className = "ri-sidebar-unfold-line text-lg font-bold";
|
||||
toggleBtn.title = "Inhaltsverzeichnis einblenden";
|
||||
console.log("Collapsing sidebar");
|
||||
}
|
||||
|
||||
console.log("New width:", sidebarSpacer.style.width);
|
||||
}
|
||||
|
||||
// Extract issue context from document title, URL, or page container
|
||||
getIssueContext(pageNumber) {
|
||||
// Determine if we're in a piece view (beitrag) or issue view (ausgabe)
|
||||
const path = window.location.pathname;
|
||||
const isPieceView = path.includes("/beitrag/");
|
||||
|
||||
if (isPieceView) {
|
||||
// For piece view: Return full format "1765 Nr. 2"
|
||||
// Try to get context from page container first (for piece view)
|
||||
const pageContainer = document.querySelector(`[data-page-container="${pageNumber}"]`);
|
||||
if (pageContainer) {
|
||||
// Look for existing page indicator with context
|
||||
const pageIndicator = pageContainer.querySelector(".page-indicator");
|
||||
if (pageIndicator) {
|
||||
const text = pageIndicator.textContent.trim();
|
||||
// Extract full date and issue from text like "3.7.1767 Nr. 53, 213"
|
||||
const fullDateMatch = text.match(/(\d{1,2}\.\d{1,2}\.\d{4}\s+Nr\.\s+\d+)/);
|
||||
if (fullDateMatch) {
|
||||
return fullDateMatch[1];
|
||||
}
|
||||
// Fallback: Extract year and issue from text like "1768 Nr. 20, 79"
|
||||
const yearMatch = text.match(/(\d{4})\s+Nr\.\s+(\d+)/);
|
||||
if (yearMatch) {
|
||||
return `${yearMatch[1]} Nr. ${yearMatch[2]}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback: Try to extract from document title
|
||||
const title = document.title;
|
||||
const titleMatch = title.match(/(\d{4}).*Nr\.\s*(\d+)/);
|
||||
if (titleMatch) {
|
||||
return `${titleMatch[1]} Nr. ${titleMatch[2]}`;
|
||||
}
|
||||
} else {
|
||||
// For issue view: Return just empty string (page number only)
|
||||
return "";
|
||||
}
|
||||
|
||||
// Final fallback: Try to extract from URL path
|
||||
const urlMatch = path.match(/\/(\d{4})\/(\d+)/);
|
||||
if (urlMatch) {
|
||||
return isPieceView ? `${urlMatch[1]} Nr. ${urlMatch[2]}` : "";
|
||||
}
|
||||
|
||||
// Fallback - try to get from any visible page context
|
||||
const anyPageIndicator = document.querySelector(".page-indicator");
|
||||
if (anyPageIndicator) {
|
||||
const text = anyPageIndicator.textContent.trim();
|
||||
const match = text.match(/(\d{4})\s+Nr\.\s+(\d+)/);
|
||||
if (match) {
|
||||
return `${match[1]} Nr. ${match[2]}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Ultimate fallback
|
||||
return "KGPZ";
|
||||
}
|
||||
}
|
||||
|
||||
// Register the web component
|
||||
customElements.define("single-page-viewer", SinglePageViewer);
|
||||
|
||||
// Clean up single page viewer on HTMX navigation
|
||||
document.body.addEventListener("htmx:beforeRequest", function (event) {
|
||||
// Find any active single page viewer
|
||||
const viewer = document.querySelector("single-page-viewer");
|
||||
if (viewer && viewer.style.display !== "none") {
|
||||
console.log("Cleaning up single page viewer before HTMX navigation");
|
||||
viewer.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
// Also clean up on page unload as fallback
|
||||
window.addEventListener("beforeunload", function () {
|
||||
const viewer = document.querySelector("single-page-viewer");
|
||||
if (viewer) {
|
||||
viewer.destroy();
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user