Theodor-Springmann-Stiftung/kgpz_web
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git synced 2025-10-29 09:05:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

view enhancement

Browse Source
This commit is contained in:
Simon Martens
2025-09-20 02:20:58 +02:00
parent 8f4ad4bfca
commit edc86df0b5
4 changed files with 351 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
views/assets/scripts.js
View File

@@ -1,18 +1,18 @@
const A = "script[xslt-onload]", m = "xslt-template", E = "xslt-transformed", y = /* @__PURE__ */ new Map(); const A = "script[xslt-onload]", w = "xslt-template", E = "xslt-transformed", y = /* @__PURE__ */ new Map();
function v() { function v() {
let i = htmx.findAll(A); let i = htmx.findAll(A);
for (let t of i) for (let t of i)
L(t); L(t);
} }
function L(i) { function L(i) {
if (i.getAttribute(E) === "true" || !i.hasAttribute(m)) if (i.getAttribute(E) === "true" || !i.hasAttribute(w))
return; return;
let t = "#" + i.getAttribute(m), e = y.get(t); let t = "#" + i.getAttribute(w), e = y.get(t);
if (!e) { if (!e) {
let a = htmx.find(t); let s = htmx.find(t);
if (a) { if (s) {
let s = a.innerHTML ? new DOMParser().parseFromString(a.innerHTML, "application/xml") : a.contentDocument; let a = s.innerHTML ? new DOMParser().parseFromString(s.innerHTML, "application/xml") : s.contentDocument;
e = new XSLTProcessor(), e.importStylesheet(s), y.set(t, e); e = new XSLTProcessor(), e.importStylesheet(a), y.set(t, e);
} else } else
throw new Error("Unknown XSLT template: " + t); throw new Error("Unknown XSLT template: " + t);
} }
@@ -31,8 +31,8 @@ function q() {
connectedCallback() { connectedCallback() {
let o = []; let o = [];
this.slots.forEach((r) => { this.slots.forEach((r) => {
let a = r.getAttribute("name"), s = this.querySelector(`[slot="${a}"]`); let s = r.getAttribute("name"), a = this.querySelector(`[slot="${s}"]`);
s && (r.replaceWith(s.cloneNode(!0)), o.push(s)); a && (r.replaceWith(a.cloneNode(!0)), o.push(a));
}), o.forEach((r) => { }), o.forEach((r) => {
r.remove(); r.remove();
}); });
@@ -46,12 +46,12 @@ window.currentPageContainers = window.currentPageContainers || [];
window.currentActiveIndex = window.currentActiveIndex || 0; window.currentActiveIndex = window.currentActiveIndex || 0;
window.pageObserver = window.pageObserver || null; window.pageObserver = window.pageObserver || null;
window.scrollTimeout = window.scrollTimeout || null; window.scrollTimeout = window.scrollTimeout || null;
function k() { function $() {
window.highlightObserver && (window.highlightObserver.disconnect(), window.highlightObserver = null); window.highlightObserver && (window.highlightObserver.disconnect(), window.highlightObserver = null);
const i = document.querySelectorAll(".newspaper-page-container"); const i = document.querySelectorAll(".newspaper-page-container");
window.highlightObserver = new IntersectionObserver( window.highlightObserver = new IntersectionObserver(
(t) => { (t) => {
S(); P();
}, },
{ {
rootMargin: "-20% 0px -70% 0px" rootMargin: "-20% 0px -70% 0px"
@@ -60,14 +60,14 @@ function k() {
window.highlightObserver.observe(t); window.highlightObserver.observe(t);
}); });
} }
function S() { function P() {
const i = []; const i = [];
document.querySelectorAll(".newspaper-page-container").forEach((e) => { document.querySelectorAll(".newspaper-page-container").forEach((e) => {
const n = e.getBoundingClientRect(), o = window.innerHeight, r = Math.max(n.top, 0), a = Math.min(n.bottom, o), s = Math.max(0, a - r), l = n.height, u = s / l >= 0.5, g = e.querySelector("img[data-page]"), p = g ? g.getAttribute("data-page") : "unknown"; const n = e.getBoundingClientRect(), o = window.innerHeight, r = Math.max(n.top, 0), s = Math.min(n.bottom, o), a = Math.max(0, s - r), l = n.height, g = a / l >= 0.5, u = e.querySelector("img[data-page]"), p = u ? u.getAttribute("data-page") : "unknown";
u && g && p && !i.includes(p) && i.push(p); g && u && p && !i.includes(p) && i.push(p);
}), $(i), i.length > 0 && C(i); }), k(i), i.length > 0 && C(i);
} }
function $(i) { function k(i) {
document.querySelectorAll(".continuation-entry").forEach((t) => { document.querySelectorAll(".continuation-entry").forEach((t) => {
t.style.display = "none"; t.style.display = "none";
}), i.forEach((t) => { }), i.forEach((t) => {
@@ -98,7 +98,7 @@ function M() {
}), e ? i.style.display = "" : i.style.display = "none"; }), e ? i.style.display = "" : i.style.display = "none";
}); });
} }
function P(i) { function S(i) {
C([i]); C([i]);
} }
function C(i) { function C(i) {
@@ -117,28 +117,24 @@ function C(i) {
`.page-number-inhalts[data-page-number="${e}"]` `.page-number-inhalts[data-page-number="${e}"]`
); );
if (n) { if (n) {
n.classList.remove( n.classList.remove("text-slate-700", "hover:bg-blue-100", "hover:bg-amber-100"), n.classList.add("text-red-600", "font-bold"), n.style.textDecoration = "none", n.style.pointerEvents = "none", t.push(n);
"text-slate-700",
"hover:bg-blue-100",
"hover:bg-amber-100"
), n.classList.add("text-red-600", "font-bold"), n.style.textDecoration = "none", n.style.pointerEvents = "none", t.push(n);
const o = document.querySelector(`[data-page-container="${e}"]`); const o = document.querySelector(`[data-page-container="${e}"]`);
o && (o.classList.remove("border-slate-300", "border-amber-400"), o.classList.add("border-red-500")); o && (o.classList.remove("border-slate-300", "border-amber-400"), o.classList.add("border-red-500"));
const r = n.closest(".page-entry"); const r = n.closest(".page-entry");
r && (r.querySelectorAll(".inhalts-entry").forEach((s) => { r && (r.querySelectorAll(".inhalts-entry").forEach((a) => {
s.classList.remove("hover:bg-slate-100"), s.style.cursor = "default"; a.classList.remove("hover:bg-slate-100"), a.style.cursor = "default";
}), r.querySelectorAll('a[href*="/"]').forEach((s) => { }), r.querySelectorAll('a[href*="/"]').forEach((a) => {
s.getAttribute("aria-current") === "page" && (s.style.textDecoration = "none", s.style.pointerEvents = "none", s.classList.add("no-underline"), s.classList.remove("hover:bg-blue-100")); a.getAttribute("aria-current") === "page" && (a.style.textDecoration = "none", a.style.pointerEvents = "none", a.classList.add("no-underline"), a.classList.remove("hover:bg-blue-100"));
})); }));
} }
}), t.length > 0 && H(t[0]), document.querySelectorAll(".page-indicator").forEach((e) => { }), t.length > 0 && N(t[0]), document.querySelectorAll(".page-indicator").forEach((e) => {
e.classList.remove("text-red-600", "font-bold"), e.classList.add("text-slate-600", "font-semibold"), e.classList.contains("bg-amber-50") || e.classList.add("bg-blue-50"); e.classList.remove("text-red-600", "font-bold"), e.classList.add("text-slate-600", "font-semibold"), e.classList.contains("bg-amber-50") || e.classList.add("bg-blue-50");
}), i.forEach((e) => { }), i.forEach((e) => {
const n = document.querySelector(`.page-indicator[data-page="${e}"]`); const n = document.querySelector(`.page-indicator[data-page="${e}"]`);
n && (n.classList.remove("text-slate-600"), n.classList.add("text-red-600", "font-bold")); n && (n.classList.remove("text-slate-600"), n.classList.add("text-red-600", "font-bold"));
}); });
} }
function H(i) { function N(i) {
const t = i.closest(".lg\\:overflow-y-auto"); const t = i.closest(".lg\\:overflow-y-auto");
if (t) { if (t) {
const e = t.getBoundingClientRect(), n = i.getBoundingClientRect(), o = n.top < e.top, r = n.bottom > e.bottom; const e = t.getBoundingClientRect(), n = i.getBoundingClientRect(), o = n.top < e.top, r = n.bottom > e.bottom;
@@ -148,19 +144,17 @@ function H(i) {
}); });
} }
} }
function N(i, t, e) { function H(i, t, e, n = null) {
let n = document.querySelector("single-page-viewer"); let o = document.querySelector("single-page-viewer");
n || (n = document.createElement("single-page-viewer"), document.body.appendChild(n)); o || (o = document.createElement("single-page-viewer"), document.body.appendChild(o));
const o = i.closest('[data-beilage="true"]') !== null, r = window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0; const r = i.closest('[data-beilage="true"]') !== null, s = window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0;
n.show(i.src, i.alt, t, o, r); o.show(i.src, i.alt, t, r, s, n);
} }
function I() { function I() {
document.getElementById("pageModal").classList.add("hidden"); document.getElementById("pageModal").classList.add("hidden");
} }
function O() { function O() {
if (window.pageObserver && (window.pageObserver.disconnect(), window.pageObserver = null), window.currentPageContainers = Array.from( if (window.pageObserver && (window.pageObserver.disconnect(), window.pageObserver = null), window.currentPageContainers = Array.from(document.querySelectorAll(".newspaper-page-container")), window.currentActiveIndex = 0, h(), document.querySelector(".newspaper-page-container")) {
document.querySelectorAll(".newspaper-page-container")
), window.currentActiveIndex = 0, h(), document.querySelector(".newspaper-page-container")) {
let t = /* @__PURE__ */ new Set(); let t = /* @__PURE__ */ new Set();
window.pageObserver = new IntersectionObserver( window.pageObserver = new IntersectionObserver(
(e) => { (e) => {
@@ -168,7 +162,7 @@ function O() {
const o = window.currentPageContainers.indexOf(n.target); const o = window.currentPageContainers.indexOf(n.target);
o !== -1 && (n.isIntersecting ? t.add(o) : t.delete(o)); o !== -1 && (n.isIntersecting ? t.add(o) : t.delete(o));
}), t.size > 0) { }), t.size > 0) {
const o = Array.from(t).sort((r, a) => r - a)[0]; const o = Array.from(t).sort((r, s) => r - s)[0];
o !== window.currentActiveIndex && (window.currentActiveIndex = o, h()); o !== window.currentActiveIndex && (window.currentActiveIndex = o, h());
} }
}, },
@@ -185,8 +179,8 @@ function R() {
let i = -1; let i = -1;
const t = []; const t = [];
window.currentPageContainers.forEach((n, o) => { window.currentPageContainers.forEach((n, o) => {
const r = n.getBoundingClientRect(), a = window.innerHeight, s = Math.max(r.top, 0), l = Math.min(r.bottom, a), c = Math.max(0, l - s), u = r.height; const r = n.getBoundingClientRect(), s = window.innerHeight, a = Math.max(r.top, 0), l = Math.min(r.bottom, s), c = Math.max(0, l - a), g = r.height;
c / u >= 0.3 && t.push(o); c / g >= 0.3 && t.push(o);
}); });
const e = Math.min(...t); const e = Math.min(...t);
for (let n = e - 1; n >= 0; n--) for (let n = e - 1; n >= 0; n--)
@@ -207,8 +201,8 @@ function z() {
let i = -1; let i = -1;
const t = []; const t = [];
window.currentPageContainers.forEach((n, o) => { window.currentPageContainers.forEach((n, o) => {
const r = n.getBoundingClientRect(), a = window.innerHeight, s = Math.max(r.top, 0), l = Math.min(r.bottom, a), c = Math.max(0, l - s), u = r.height; const r = n.getBoundingClientRect(), s = window.innerHeight, a = Math.max(r.top, 0), l = Math.min(r.bottom, s), c = Math.max(0, l - a), g = r.height;
c / u >= 0.3 && t.push(o); c / g >= 0.3 && t.push(o);
}); });
const e = Math.max(...t); const e = Math.max(...t);
for (let n = e + 1; n < window.currentPageContainers.length; n++) for (let n = e + 1; n < window.currentPageContainers.length; n++)
@@ -242,8 +236,8 @@ function D() {
function T() { function T() {
const i = []; const i = [];
window.currentPageContainers.forEach((t, e) => { window.currentPageContainers.forEach((t, e) => {
const n = t.getBoundingClientRect(), o = window.innerHeight, r = Math.max(n.top, 0), a = Math.min(n.bottom, o), s = Math.max(0, a - r), l = n.height; const n = t.getBoundingClientRect(), o = window.innerHeight, r = Math.max(n.top, 0), s = Math.min(n.bottom, o), a = Math.max(0, s - r), l = n.height;
s / l >= 0.3 && i.push(e); a / l >= 0.3 && i.push(e);
}); });
for (const t of i) { for (const t of i) {
const e = window.currentPageContainers[t]; const e = window.currentPageContainers[t];
@@ -309,8 +303,8 @@ function V() {
const r = document.createElement("textarea"); const r = document.createElement("textarea");
r.value = o, document.body.appendChild(r), r.select(); r.value = o, document.body.appendChild(r), r.select();
try { try {
const a = document.execCommand("copy"); const s = document.execCommand("copy");
d(i, a ? "Zitation kopiert!" : "Kopieren fehlgeschlagen"); d(i, s ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
} catch { } catch {
d(i, "Kopieren fehlgeschlagen"); d(i, "Kopieren fehlgeschlagen");
} finally { } finally {
@@ -336,10 +330,10 @@ function d(i, t) {
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
white-space: nowrap; white-space: nowrap;
`; `;
const o = i.getBoundingClientRect(), r = window.innerHeight, a = window.innerWidth; const o = i.getBoundingClientRect(), r = window.innerHeight, s = window.innerWidth;
let s = o.left - 10, l = o.bottom + 8; let a = o.left - 10, l = o.bottom + 8;
const c = 120, u = 32; const c = 120, g = 32;
s + c > a && (s = o.right - c + 10), l + u > r && (l = o.top - u - 8), n.style.left = Math.max(5, s) + "px", n.style.top = Math.max(5, l) + "px", document.body.appendChild(n), setTimeout(() => { a + c > s && (a = o.right - c + 10), l + g > r && (l = o.top - g - 8), n.style.left = Math.max(5, a) + "px", n.style.top = Math.max(5, l) + "px", document.body.appendChild(n), setTimeout(() => {
n.style.opacity = "1"; n.style.opacity = "1";
}, 10), setTimeout(() => { }, 10), setTimeout(() => {
n.style.opacity = "0", setTimeout(() => { n.style.opacity = "0", setTimeout(() => {
@@ -347,7 +341,7 @@ function d(i, t) {
}, 200); }, 200);
}, 2e3); }, 2e3);
} }
function W() { function j() {
let i = "", t = null; let i = "", t = null;
const e = window.location.pathname.split("/"); const e = window.location.pathname.split("/");
if (e.length >= 4 && !isNaN(e[e.length - 1])) { if (e.length >= 4 && !isNaN(e[e.length - 1])) {
@@ -367,18 +361,18 @@ function W() {
t.scrollIntoView({ t.scrollIntoView({
behavior: "smooth", behavior: "smooth",
block: "start" block: "start"
}), P(i); }), S(i);
}, 300); }, 300);
} }
function f(i, t, e = !1) { function b(i, t, e = !1) {
let n = ""; let n = "";
if (e) if (e)
n = window.location.origin + window.location.pathname + `#beilage-1-page-${i}`; n = window.location.origin + window.location.pathname + `#beilage-1-page-${i}`;
else { else {
const r = window.location.pathname.split("/"); const r = window.location.pathname.split("/");
if (r.length >= 3) { if (r.length >= 3) {
const a = r[1], s = r[2]; const s = r[1], a = r[2];
n = `${window.location.origin}/${a}/${s}/${i}`; n = `${window.location.origin}/${s}/${a}/${i}`;
} else } else
n = window.location.origin + window.location.pathname + `/${i}`; n = window.location.origin + window.location.pathname + `/${i}`;
} }
@@ -393,8 +387,8 @@ function f(i, t, e = !1) {
const r = document.createElement("textarea"); const r = document.createElement("textarea");
r.value = o, document.body.appendChild(r), r.select(); r.value = o, document.body.appendChild(r), r.select();
try { try {
const a = document.execCommand("copy"); const s = document.execCommand("copy");
d(t, a ? "Link kopiert!" : "Kopieren fehlgeschlagen"); d(t, s ? "Link kopiert!" : "Kopieren fehlgeschlagen");
} catch { } catch {
d(t, "Kopieren fehlgeschlagen"); d(t, "Kopieren fehlgeschlagen");
} finally { } finally {
@@ -402,7 +396,7 @@ function f(i, t, e = !1) {
} }
} }
} }
function w(i, t) { function m(i, t) {
const e = document.title || "KGPZ", n = window.location.pathname.split("/"); const e = document.title || "KGPZ", n = window.location.pathname.split("/");
let o; let o;
if (n.length >= 3) { if (n.length >= 3) {
@@ -410,16 +404,16 @@ function w(i, t) {
o = `${window.location.origin}/${l}/${c}/${i}`; o = `${window.location.origin}/${l}/${c}/${i}`;
} else } else
o = `${window.location.origin}${window.location.pathname}/${i}`; o = `${window.location.origin}${window.location.pathname}/${i}`;
const r = o, a = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE"), s = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${e}, Seite ${i}. Digital verfügbar unter: ${r} (Zugriff: ${a}).`; const r = o, s = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE"), a = `Königsberger Gelehrte und Politische Zeitung (KGPZ). ${e}, Seite ${i}. Digital verfügbar unter: ${r} (Zugriff: ${s}).`;
if (navigator.clipboard) if (navigator.clipboard)
navigator.clipboard.writeText(s).then(() => { navigator.clipboard.writeText(a).then(() => {
d(t, "Zitation kopiert!"); d(t, "Zitation kopiert!");
}).catch((l) => { }).catch((l) => {
d(t, "Kopieren fehlgeschlagen"); d(t, "Kopieren fehlgeschlagen");
}); });
else { else {
const l = document.createElement("textarea"); const l = document.createElement("textarea");
l.value = s, document.body.appendChild(l), l.select(); l.value = a, document.body.appendChild(l), l.select();
try { try {
const c = document.execCommand("copy"); const c = document.execCommand("copy");
d(t, c ? "Zitation kopiert!" : "Kopieren fehlgeschlagen"); d(t, c ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
@@ -430,42 +424,42 @@ function w(i, t) {
} }
} }
} }
function b() { function f() {
k(), O(), window.addEventListener("scroll", function() { $(), O(), window.addEventListener("scroll", function() {
clearTimeout(window.scrollTimeout), window.scrollTimeout = setTimeout(() => { clearTimeout(window.scrollTimeout), window.scrollTimeout = setTimeout(() => {
S(), h(); P(), h();
}, 50); }, 50);
}), W(), document.addEventListener("keydown", function(i) { }), j(), document.addEventListener("keydown", function(i) {
i.key === "Escape" && I(); i.key === "Escape" && I();
}); });
} }
window.enlargePage = N; window.enlargePage = H;
window.closeModal = I; window.closeModal = I;
window.scrollToPreviousPage = R; window.scrollToPreviousPage = R;
window.scrollToNextPage = z; window.scrollToNextPage = z;
window.scrollToBeilage = D; window.scrollToBeilage = D;
window.shareCurrentPage = K; window.shareCurrentPage = K;
window.generateCitation = V; window.generateCitation = V;
window.copyPagePermalink = f; window.copyPagePermalink = b;
window.generatePageCitation = w; window.generatePageCitation = m;
function Z() { function Z() {
v(), q(), document.querySelector(".newspaper-page-container") && b(), htmx.on("htmx:load", function(i) { v(), q(), document.querySelector(".newspaper-page-container") && f(), htmx.on("htmx:load", function(i) {
v(); v();
}), document.body.addEventListener("htmx:afterSwap", function(i) { }), document.body.addEventListener("htmx:afterSwap", function(i) {
setTimeout(() => { setTimeout(() => {
document.querySelector(".newspaper-page-container") && b(); document.querySelector(".newspaper-page-container") && f();
}, 100); }, 100);
}), document.body.addEventListener("htmx:afterSettle", function(i) { }), document.body.addEventListener("htmx:afterSettle", function(i) {
setTimeout(() => { setTimeout(() => {
document.querySelector(".newspaper-page-container") && b(); document.querySelector(".newspaper-page-container") && f();
}, 200); }, 200);
}), document.body.addEventListener("htmx:load", function(i) { }), document.body.addEventListener("htmx:load", function(i) {
setTimeout(() => { setTimeout(() => {
document.querySelector(".newspaper-page-container") && b(); document.querySelector(".newspaper-page-container") && f();
}, 100); }, 100);
}); });
} }
class j extends HTMLElement { class W extends HTMLElement {
constructor() { constructor() {
super(), this.resizeObserver = null; super(), this.resizeObserver = null;
} }
@@ -499,7 +493,7 @@ class j extends HTMLElement {
onclick="this.closest('single-page-viewer').toggleSidebar()" 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" 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"> title="Inhaltsverzeichnis ein-/ausblenden">
<i class="ri-sidebar-unfold-line text-lg font-bold"></i> <i class="ri-sidebar-fold-line text-lg font-bold"></i>
</button> </button>
<!-- Page indicator with icon --> <!-- Page indicator with icon -->
@@ -590,19 +584,24 @@ class j extends HTMLElement {
t.style.width = e, console.log("Updated sidebar width to:", e); t.style.width = e, console.log("Updated sidebar width to:", e);
} }
} }
show(t, e, n, o = !1, r = 0) { show(t, e, n, o = !1, r = 0, s = null) {
const a = this.querySelector("#single-page-image"), s = this.querySelector("#page-number"), l = this.querySelector("#page-icon"); const a = this.querySelector("#single-page-image"), l = this.querySelector("#page-number"), c = this.querySelector("#page-icon");
this.querySelector("#page-indicator"), a.src = t, a.alt = e, this.currentPageNumber = n, this.currentIsBeilage = o; this.querySelector("#page-indicator"), a.src = t, a.alt = e, this.currentPageNumber = n, this.currentIsBeilage = o, this.currentPartNumber = s;
const c = this.getIssueContext(n); const g = this.getIssueContext(n);
if (s.innerHTML = c ? `${c}, ${n}` : `${n}`, r && n === r) { if (l.innerHTML = g ? `${g}, ${n}` : `${n}`, r && n === r) {
s.style.position = "relative"; l.style.position = "relative";
const g = s.querySelector(".target-page-dot"); const u = l.querySelector(".target-page-dot");
g && g.remove(); u && u.remove();
const p = document.createElement("span"); const p = document.createElement("span");
p.className = "target-page-dot absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full z-10", p.title = "verlinkte Seite", s.appendChild(p); p.className = "target-page-dot absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full z-10", p.title = "verlinkte Seite", l.appendChild(p);
} }
if (s !== null)
c.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">${s}. Teil</span>`;
else {
const u = this.determinePageIconType(n, o); const u = this.determinePageIconType(n, o);
l.innerHTML = this.getPageIconHTML(u), this.updateNavigationButtons(), this.style.display = "block", document.body.style.overflow = "hidden", P(n); c.innerHTML = this.getPageIconHTML(u);
}
this.updateNavigationButtons(), this.style.display = "block", document.body.style.overflow = "hidden", S(n);
} }
close() { close() {
this.style.display = "none", document.body.style.overflow = ""; this.style.display = "none", document.body.style.overflow = "";
@@ -619,8 +618,8 @@ class j extends HTMLElement {
}).filter((l) => l !== null).sort((l, c) => l - c); }).filter((l) => l !== null).sort((l, c) => l - c);
if (r.length === 0) if (r.length === 0)
return "first"; return "first";
const a = r[0], s = r[r.length - 1]; const s = r[0], a = r[r.length - 1];
return t === a ? "first" : t === s ? "last" : t === a + 1 ? "even" : t === s - 1 ? "odd" : t % 2 === 0 ? "even" : "odd"; return t === s ? "first" : t === a ? "last" : t === s + 1 ? "even" : t === a - 1 ? "odd" : t % 2 === 0 ? "even" : "odd";
} }
// Generate page icon HTML based on type (same as Go PageIcon function) // Generate page icon HTML based on type (same as Go PageIcon function)
getPageIconHTML(t) { getPageIconHTML(t) {
@@ -640,38 +639,55 @@ class j extends HTMLElement {
} }
// Share current page // Share current page
shareCurrentPage() { shareCurrentPage() {
if (typeof f == "function") { if (typeof b == "function") {
const t = this.querySelector("#share-btn"); const t = this.querySelector("#share-btn");
f(this.currentPageNumber, t, this.currentIsBeilage); b(this.currentPageNumber, t, this.currentIsBeilage);
} }
} }
// Generate citation for current page // Generate citation for current page
generatePageCitation() { generatePageCitation() {
if (typeof w == "function") { if (typeof m == "function") {
const t = this.querySelector("#cite-btn"); const t = this.querySelector("#cite-btn");
w(this.currentPageNumber, t); m(this.currentPageNumber, t);
} }
} }
// Update navigation button visibility based on available pages // Update navigation button visibility based on available pages
updateNavigationButtons() { updateNavigationButtons() {
const t = this.querySelector("#prev-page-btn"), e = this.querySelector("#next-page-btn"), { prevPage: n, nextPage: o } = this.getAdjacentPages(); const t = this.querySelector("#prev-page-btn"), e = this.querySelector("#next-page-btn"), { prevPage: n, nextPage: o } = this.getAdjacentPages();
n !== null ? (t.disabled = !1, t.className = t.className.replace("opacity-50 cursor-not-allowed", ""), t.className = t.className.replace("bg-gray-50 text-gray-400", "bg-gray-100 text-gray-700")) : (t.disabled = !0, t.className.includes("opacity-50") || (t.className += " opacity-50 cursor-not-allowed"), t.className = t.className.replace("bg-gray-100 text-gray-700", "bg-gray-50 text-gray-400")), o !== null ? (e.disabled = !1, e.className = e.className.replace("opacity-50 cursor-not-allowed", ""), e.className = e.className.replace("bg-gray-50 text-gray-400", "bg-gray-100 text-gray-700")) : (e.disabled = !0, e.className.includes("opacity-50") || (e.className += " opacity-50 cursor-not-allowed"), e.className = e.className.replace("bg-gray-100 text-gray-700", "bg-gray-50 text-gray-400")); n !== null ? (t.disabled = !1, t.className = t.className.replace("opacity-50 cursor-not-allowed", ""), t.className = t.className.replace(
"bg-gray-50 text-gray-400",
"bg-gray-100 text-gray-700"
)) : (t.disabled = !0, t.className.includes("opacity-50") || (t.className += " opacity-50 cursor-not-allowed"), t.className = t.className.replace(
"bg-gray-100 text-gray-700",
"bg-gray-50 text-gray-400"
)), o !== null ? (e.disabled = !1, e.className = e.className.replace("opacity-50 cursor-not-allowed", ""), e.className = e.className.replace(
"bg-gray-50 text-gray-400",
"bg-gray-100 text-gray-700"
)) : (e.disabled = !0, e.className.includes("opacity-50") || (e.className += " opacity-50 cursor-not-allowed"), e.className = e.className.replace(
"bg-gray-100 text-gray-700",
"bg-gray-50 text-gray-400"
));
} }
// Get previous and next page numbers // Get previous and next page numbers
getAdjacentPages() { getAdjacentPages() {
let t; let t;
this.currentIsBeilage ? t = '.newspaper-page-container[data-beilage="true"]' : t = ".newspaper-page-container:not([data-beilage])"; this.currentIsBeilage ? t = '.newspaper-page-container[data-beilage="true"]' : t = ".newspaper-page-container:not([data-beilage])";
const e = Array.from(document.querySelectorAll(t)); const e = Array.from(document.querySelectorAll(t));
console.log("Found containers:", e.length, "for", this.currentIsBeilage ? "beilage" : "main"); console.log(
const n = e.map((s) => { "Found containers:",
const l = s.getAttribute("data-page-container"), c = l ? parseInt(l) : null; e.length,
"for",
this.currentIsBeilage ? "beilage" : "main"
);
const n = e.map((a) => {
const l = a.getAttribute("data-page-container"), c = l ? parseInt(l) : null;
return console.log("Container page:", l, "parsed:", c), c; return console.log("Container page:", l, "parsed:", c), c;
}).filter((s) => s !== null).sort((s, l) => s - l); }).filter((a) => a !== null).sort((a, l) => a - l);
console.log("All pages found:", n), console.log("Current page:", this.currentPageNumber); console.log("All pages found:", n), console.log("Current page:", this.currentPageNumber);
const o = n.indexOf(this.currentPageNumber); const o = n.indexOf(this.currentPageNumber);
console.log("Current index:", o); console.log("Current index:", o);
let r = null, a = null; let r = null, s = null;
return o > 0 && (r = n[o - 1]), o < n.length - 1 && (a = n[o + 1]), console.log("Adjacent pages - prev:", r, "next:", a), { prevPage: r, nextPage: a }; return o > 0 && (r = n[o - 1]), o < n.length - 1 && (s = n[o + 1]), console.log("Adjacent pages - prev:", r, "next:", s), { prevPage: r, nextPage: s };
} }
// Navigate to previous page // Navigate to previous page
goToPreviousPage() { goToPreviousPage() {
@@ -685,33 +701,61 @@ class j extends HTMLElement {
} }
// Navigate to a specific page // Navigate to a specific page
navigateToPage(t) { navigateToPage(t) {
const e = this.currentIsBeilage ? '.newspaper-page-container[data-beilage="true"]' : ".newspaper-page-container:not([data-beilage])", n = document.querySelector(`${e}[data-page-container="${t}"]`); const e = this.currentIsBeilage ? '.newspaper-page-container[data-beilage="true"]' : ".newspaper-page-container:not([data-beilage])", n = document.querySelector(
`${e}[data-page-container="${t}"]`
);
if (n) { if (n) {
const o = n.querySelector(".newspaper-page-image"); const o = n.querySelector(".newspaper-page-image");
o && this.show(o.src, o.alt, t, this.currentIsBeilage); if (o) {
let r = null;
this.currentPartNumber !== null && (r = this.getPartNumberForPage(t)), this.show(
o.src,
o.alt,
t,
this.currentIsBeilage,
0,
r
);
} }
} }
}
// Get part number for a specific page in piece view
getPartNumberForPage(t) {
const e = document.querySelector(`[data-page-container="${t}"]`);
if (e) {
const n = e.querySelector(".part-number");
if (n) {
const o = n.textContent.match(/(\d+)\./);
if (o)
return parseInt(o[1]);
}
}
return null;
}
// Toggle sidebar visibility // Toggle sidebar visibility
toggleSidebar() { toggleSidebar() {
const t = this.querySelector("#sidebar-spacer"), e = this.querySelector("#sidebar-toggle-btn"), n = e.querySelector("i"), o = t.style.width, r = o === "0px" || o === "0"; const t = this.querySelector("#sidebar-spacer"), e = this.querySelector("#sidebar-toggle-btn"), n = e.querySelector("i"), o = t.style.width, r = o === "0px" || o === "0";
if (console.log("Current state - isCollapsed:", r), console.log("Current width:", o), r) { if (console.log("Current state - isCollapsed:", r), console.log("Current width:", o), r) {
const a = this.detectSidebarWidth(); const s = this.detectSidebarWidth();
t.style.width = a, e.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", n.className = "ri-sidebar-unfold-line text-lg font-bold", e.title = "Inhaltsverzeichnis ausblenden", console.log("Expanding sidebar to:", a); t.style.width = s, e.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", n.className = "ri-sidebar-fold-line text-lg font-bold", e.title = "Inhaltsverzeichnis ausblenden", console.log("Expanding sidebar to:", s);
} else } else
t.style.width = "0px", e.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", n.className = "ri-sidebar-fold-line text-lg font-bold", e.title = "Inhaltsverzeichnis einblenden", console.log("Collapsing sidebar"); t.style.width = "0px", e.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", n.className = "ri-sidebar-unfold-line text-lg font-bold", e.title = "Inhaltsverzeichnis einblenden", console.log("Collapsing sidebar");
console.log("New width:", t.style.width); console.log("New width:", t.style.width);
} }
// Extract issue context from document title, URL, or page container // Extract issue context from document title, URL, or page container
getIssueContext(t) { getIssueContext(t) {
const e = window.location.pathname, n = e.includes("/beitrag/"); const e = window.location.pathname, n = e.includes("/beitrag/");
if (n) { if (n) {
const a = document.querySelector(`[data-page-container="${t}"]`); const s = document.querySelector(`[data-page-container="${t}"]`);
if (a) { if (s) {
const c = a.querySelector(".page-indicator"); const c = s.querySelector(".page-indicator");
if (c) { if (c) {
const g = c.textContent.trim().match(/(\d{4})\s+Nr\.\s+(\d+)/); const g = c.textContent.trim(), u = g.match(/(\d{1,2}\.\d{1,2}\.\d{4}\s+Nr\.\s+\d+)/);
if (g) if (u)
return `${g[1]} Nr. ${g[2]}`; return u[1];
const p = g.match(/(\d{4})\s+Nr\.\s+(\d+)/);
if (p)
return `${p[1]} Nr. ${p[2]}`;
} }
} }
const l = document.title.match(/(\d{4}).*Nr\.\s*(\d+)/); const l = document.title.match(/(\d{4}).*Nr\.\s*(\d+)/);
@@ -724,14 +768,14 @@ class j extends HTMLElement {
return n ? `${o[1]} Nr. ${o[2]}` : ""; return n ? `${o[1]} Nr. ${o[2]}` : "";
const r = document.querySelector(".page-indicator"); const r = document.querySelector(".page-indicator");
if (r) { if (r) {
const s = r.textContent.trim().match(/(\d{4})\s+Nr\.\s+(\d+)/); const a = r.textContent.trim().match(/(\d{4})\s+Nr\.\s+(\d+)/);
if (s) if (a)
return `${s[1]} Nr. ${s[2]}`; return `${a[1]} Nr. ${a[2]}`;
} }
return "KGPZ"; return "KGPZ";
} }
} }
customElements.define("single-page-viewer", j); customElements.define("single-page-viewer", W);
document.body.addEventListener("htmx:beforeRequest", function(i) { document.body.addEventListener("htmx:beforeRequest", function(i) {
const t = document.querySelector("single-page-viewer"); const t = document.querySelector("single-page-viewer");
t && t.style.display !== "none" && (console.log("Cleaning up single page viewer before HTMX navigation"), t.destroy()); t && t.style.display !== "none" && (console.log("Cleaning up single page viewer before HTMX navigation"), t.destroy());

2
views/routes/piece/components/_piece_inhaltsverzeichnis.gohtml
View File

@@ -49,7 +49,7 @@
<div class="flex items-center justify-between gap-2 {{ if $pageEntry.OtherPieces }}mb-2{{ end }}"> <div class="flex items-center justify-between gap-2 {{ if $pageEntry.OtherPieces }}mb-2{{ end }}">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="part-number bg-transparent text-slate-800 text-sm font-bold px-1.5 py-0.5 rounded border border-slate-400 flex items-center justify-center"> <span class="part-number bg-transparent text-slate-800 text-sm font-bold px-1.5 py-0.5 rounded border border-slate-400 flex items-center justify-center">
{{ $pageEntry.PartNumber }} {{ $pageEntry.PartNumber }}. Teil
</span> </span>
<button onclick="document.getElementById('piece-page-{{ $pageEntry.PageNumber }}').scrollIntoView({ behavior: 'smooth', block: 'start' })" <button onclick="document.getElementById('piece-page-{{ $pageEntry.PageNumber }}').scrollIntoView({ behavior: 'smooth', block: 'start' })"
class="page-number-inhalts font-bold text-slate-700 bg-slate-100 px-2 py-1 rounded text-sm transition-colors duration-200 hover:bg-slate-200 cursor-pointer relative" class="page-number-inhalts font-bold text-slate-700 bg-slate-100 px-2 py-1 rounded text-sm transition-colors duration-200 hover:bg-slate-200 cursor-pointer relative"

6
views/routes/piece/components/_piece_sequential_layout.gohtml
View File

@@ -22,7 +22,7 @@
<!-- Page indicator row --> <!-- Page indicator row -->
<div class="flex justify-start items-center gap-2 mb-3"> <div class="flex justify-start items-center gap-2 mb-3">
<span class="part-number bg-slate-100 text-slate-800 text-sm font-bold px-1.5 py-0.5 rounded border border-slate-400 flex items-center justify-center"> <span class="part-number bg-slate-100 text-slate-800 text-sm font-bold px-1.5 py-0.5 rounded border border-slate-400 flex items-center justify-center">
{{ $pageEntry.PartNumber }} {{ $pageEntry.PartNumber }}. Teil
</span> </span>
<span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300 flex items-center gap-1 relative" data-page="{{ $page.PageNumber }}"> <span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300 flex items-center gap-1 relative" data-page="{{ $page.PageNumber }}">
{{ $issueContext }}, {{ $page.PageNumber }} {{ $issueContext }}, {{ $page.PageNumber }}
@@ -42,7 +42,7 @@
<i class="ri-file-text-line text-xs"></i> <i class="ri-file-text-line text-xs"></i>
</button> </button>
<button onclick="enlargePage(document.querySelector('#piece-page-{{ $page.PageNumber }} .piece-page-image'), {{ $page.PageNumber }}, false)" <button onclick="enlargePage(document.querySelector('#piece-page-{{ $page.PageNumber }} .piece-page-image'), {{ $page.PageNumber }}, false, {{ $pageEntry.PartNumber }})"
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" 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"> title="Seite {{ $page.PageNumber }} vergrößern">
<i class="ri-zoom-in-line text-xs"></i> <i class="ri-zoom-in-line text-xs"></i>
@@ -55,7 +55,7 @@
<img src="{{ $page.ImagePath }}" <img src="{{ $page.ImagePath }}"
alt="Seite {{ $page.PageNumber }} ({{ $issueContext }})" alt="Seite {{ $page.PageNumber }} ({{ $issueContext }})"
class="piece-page-image newspaper-page-image cursor-zoom-in rounded-sm hover:scale-[1.02] transition-transform duration-200 w-full" class="piece-page-image newspaper-page-image cursor-zoom-in rounded-sm hover:scale-[1.02] transition-transform duration-200 w-full"
onclick="enlargePage(this, {{ $page.PageNumber }}, false)" onclick="enlargePage(this, {{ $page.PageNumber }}, false, {{ $pageEntry.PartNumber }})"
data-page="{{ $page.PageNumber }}" data-page="{{ $page.PageNumber }}"
loading="lazy" /> loading="lazy" />
{{ else }} {{ else }}

299
views/transform/main.js
View File

@@ -280,11 +280,7 @@ function markCurrentPagesInInhaltsverzeichnis(pageNumbers) {
if (pageNumElement) { if (pageNumElement) {
// Highlight the page number // Highlight the page number
pageNumElement.classList.remove( pageNumElement.classList.remove("text-slate-700", "hover:bg-blue-100", "hover:bg-amber-100");
"text-slate-700",
"hover:bg-blue-100",
"hover:bg-amber-100",
);
pageNumElement.classList.add("text-red-600", "font-bold"); pageNumElement.classList.add("text-red-600", "font-bold");
pageNumElement.style.textDecoration = "none"; pageNumElement.style.textDecoration = "none";
pageNumElement.style.pointerEvents = "none"; pageNumElement.style.pointerEvents = "none";
@@ -368,11 +364,11 @@ function scrollToHighlightedPage(element) {
} }
// Modal functions // Modal functions
function enlargePage(imgElement, pageNumber, isFromSpread) { function enlargePage(imgElement, pageNumber, isFromSpread, partNumber = null) {
// Get or create the single page viewer component // Get or create the single page viewer component
let viewer = document.querySelector('single-page-viewer'); let viewer = document.querySelector("single-page-viewer");
if (!viewer) { if (!viewer) {
viewer = document.createElement('single-page-viewer'); viewer = document.createElement("single-page-viewer");
document.body.appendChild(viewer); document.body.appendChild(viewer);
} }
@@ -380,10 +376,11 @@ function enlargePage(imgElement, pageNumber, isFromSpread) {
const isBeilage = imgElement.closest('[data-beilage="true"]') !== null; const isBeilage = imgElement.closest('[data-beilage="true"]') !== null;
// Get target page from template data if available // Get target page from template data if available
const targetPage = window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0; const targetPage =
window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0;
// Show the page in the viewer // Show the page in the viewer
viewer.show(imgElement.src, imgElement.alt, pageNumber, isBeilage, targetPage); viewer.show(imgElement.src, imgElement.alt, pageNumber, isBeilage, targetPage, partNumber);
} }
function closeModal() { function closeModal() {
@@ -400,9 +397,7 @@ function initializePageTracking() {
} }
// Reset state // Reset state
window.currentPageContainers = Array.from( window.currentPageContainers = Array.from(document.querySelectorAll(".newspaper-page-container"));
document.querySelectorAll(".newspaper-page-container"),
);
window.currentActiveIndex = 0; window.currentActiveIndex = 0;
updateButtonStates(); updateButtonStates();
@@ -462,7 +457,8 @@ function scrollToPreviousPage() {
const containerHeight = containerRect.height; const containerHeight = containerRect.height;
const visibilityRatio = visibleHeight / containerHeight; const visibilityRatio = visibleHeight / containerHeight;
if (visibilityRatio >= 0.3) { // Consider visible if 30% or more is showing if (visibilityRatio >= 0.3) {
// Consider visible if 30% or more is showing
visibleIndexes.push(index); visibleIndexes.push(index);
} }
}); });
@@ -513,7 +509,8 @@ function scrollToNextPage() {
const containerHeight = containerRect.height; const containerHeight = containerRect.height;
const visibilityRatio = visibleHeight / containerHeight; const visibilityRatio = visibleHeight / containerHeight;
if (visibilityRatio >= 0.3) { // Consider visible if 30% or more is showing if (visibilityRatio >= 0.3) {
// Consider visible if 30% or more is showing
visibleIndexes.push(index); visibleIndexes.push(index);
} }
}); });
@@ -553,7 +550,7 @@ function scrollToBeilage() {
if (isViewingBeilage) { if (isViewingBeilage) {
// Go back to main issue (first main page) // Go back to main issue (first main page)
const firstMainPage = document.querySelector('#newspaper-content .newspaper-page-container'); const firstMainPage = document.querySelector("#newspaper-content .newspaper-page-container");
if (firstMainPage) { if (firstMainPage) {
firstMainPage.scrollIntoView({ firstMainPage.scrollIntoView({
behavior: "smooth", behavior: "smooth",
@@ -585,7 +582,8 @@ function isCurrentlyInBeilageSection() {
const containerHeight = containerRect.height; const containerHeight = containerRect.height;
const visibilityRatio = visibleHeight / containerHeight; const visibilityRatio = visibleHeight / containerHeight;
if (visibilityRatio >= 0.3) { // Consider visible if 30% or more is showing if (visibilityRatio >= 0.3) {
// Consider visible if 30% or more is showing
visibleIndexes.push(index); visibleIndexes.push(index);
} }
}); });
@@ -593,7 +591,7 @@ function isCurrentlyInBeilageSection() {
// Check if any visible page is a Beilage page // Check if any visible page is a Beilage page
for (const index of visibleIndexes) { for (const index of visibleIndexes) {
const container = window.currentPageContainers[index]; const container = window.currentPageContainers[index];
if (container && container.id && container.id.includes('beilage-')) { if (container && container.id && container.id.includes("beilage-")) {
return true; return true;
} }
} }
@@ -625,19 +623,21 @@ function updateButtonStates() {
// Update Beilage button based on current location // Update Beilage button based on current location
if (beilageBtn) { if (beilageBtn) {
const isViewingBeilage = isCurrentlyInBeilageSection(); const isViewingBeilage = isCurrentlyInBeilageSection();
const icon = beilageBtn.querySelector('i'); const icon = beilageBtn.querySelector("i");
if (isViewingBeilage) { if (isViewingBeilage) {
// Show "Go to Main Issue" state - use gray styling // Show "Go to Main Issue" state - use gray styling
beilageBtn.title = "Zur Hauptausgabe"; 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"; 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) { if (icon) {
icon.className = "ri-file-text-line text-lg lg:text-xl"; icon.className = "ri-file-text-line text-lg lg:text-xl";
} }
} else { } else {
// Show "Go to Beilage" state - use amber styling // Show "Go to Beilage" state - use amber styling
beilageBtn.title = "Zu Beilage"; 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"; 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) { if (icon) {
icon.className = "ri-attachment-line text-lg lg:text-xl"; icon.className = "ri-attachment-line text-lg lg:text-xl";
} }
@@ -723,8 +723,8 @@ function generateCitation() {
let cleanUrl = window.location.origin + window.location.pathname; let cleanUrl = window.location.origin + window.location.pathname;
// Remove any hash fragments that might still exist // Remove any hash fragments that might still exist
if (cleanUrl.includes('#')) { if (cleanUrl.includes("#")) {
cleanUrl = cleanUrl.split('#')[0]; cleanUrl = cleanUrl.split("#")[0];
} }
// Basic citation format (can be expanded later) // Basic citation format (can be expanded later)
@@ -837,7 +837,7 @@ function scrollToPageFromURL() {
let targetContainer = null; let targetContainer = null;
// Check if URL ends with a page number (e.g., /1768/42/166) // Check if URL ends with a page number (e.g., /1768/42/166)
const pathParts = window.location.pathname.split('/'); const pathParts = window.location.pathname.split("/");
if (pathParts.length >= 4 && !isNaN(pathParts[pathParts.length - 1])) { if (pathParts.length >= 4 && !isNaN(pathParts[pathParts.length - 1])) {
pageNumber = pathParts[pathParts.length - 1]; pageNumber = pathParts[pathParts.length - 1];
@@ -887,7 +887,7 @@ function copyPagePermalink(pageNumber, button, isBeilage = false) {
pageUrl = window.location.origin + window.location.pathname + `#beilage-1-page-${pageNumber}`; pageUrl = window.location.origin + window.location.pathname + `#beilage-1-page-${pageNumber}`;
} else { } else {
// For regular pages, use the new URL format // For regular pages, use the new URL format
const pathParts = window.location.pathname.split('/'); const pathParts = window.location.pathname.split("/");
if (pathParts.length >= 3) { if (pathParts.length >= 3) {
// Current URL format: /year/issue or /year/issue/page // Current URL format: /year/issue or /year/issue/page
// New format: /year/issue/page // New format: /year/issue/page
@@ -934,7 +934,7 @@ function generatePageCitation(pageNumber, button) {
const issueInfo = document.title || "KGPZ"; const issueInfo = document.title || "KGPZ";
// Generate page URL in new format // Generate page URL in new format
const pathParts = window.location.pathname.split('/'); const pathParts = window.location.pathname.split("/");
let pageUrl; let pageUrl;
if (pathParts.length >= 3) { if (pathParts.length >= 3) {
const year = pathParts[1]; const year = pathParts[1];
@@ -1075,7 +1075,7 @@ class SinglePageViewer extends HTMLElement {
if (sidebar) { if (sidebar) {
const sidebarRect = sidebar.getBoundingClientRect(); const sidebarRect = sidebar.getBoundingClientRect();
const sidebarWidth = sidebarRect.width; const sidebarWidth = sidebarRect.width;
console.log('Detected sidebar width:', sidebarWidth, 'px'); console.log("Detected sidebar width:", sidebarWidth, "px");
return `${sidebarWidth}px`; return `${sidebarWidth}px`;
} }
@@ -1084,7 +1084,7 @@ class SinglePageViewer extends HTMLElement {
if (viewportWidth < 1024) { if (viewportWidth < 1024) {
// Below lg breakpoint - no sidebar space needed // Below lg breakpoint - no sidebar space needed
return '0px'; return "0px";
} else if (viewportWidth < 1280) { } else if (viewportWidth < 1280) {
// lg breakpoint: assume 1/4 of viewport (similar to both layouts) // lg breakpoint: assume 1/4 of viewport (similar to both layouts)
return `${Math.floor(viewportWidth * 0.25)}px`; return `${Math.floor(viewportWidth * 0.25)}px`;
@@ -1116,7 +1116,7 @@ class SinglePageViewer extends HTMLElement {
onclick="this.closest('single-page-viewer').toggleSidebar()" 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" 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"> title="Inhaltsverzeichnis ein-/ausblenden">
<i class="ri-sidebar-unfold-line text-lg font-bold"></i> <i class="ri-sidebar-fold-line text-lg font-bold"></i>
</button> </button>
<!-- Page indicator with icon --> <!-- Page indicator with icon -->
@@ -1215,20 +1215,20 @@ class SinglePageViewer extends HTMLElement {
// Update sidebar width when window is resized // Update sidebar width when window is resized
updateSidebarWidth() { updateSidebarWidth() {
const sidebarSpacer = this.querySelector('#sidebar-spacer'); const sidebarSpacer = this.querySelector("#sidebar-spacer");
if (sidebarSpacer && !sidebarSpacer.style.width.includes('0px')) { if (sidebarSpacer && !sidebarSpacer.style.width.includes("0px")) {
// Only update if sidebar is not collapsed (not 0px width) // Only update if sidebar is not collapsed (not 0px width)
const newWidth = this.detectSidebarWidth(); const newWidth = this.detectSidebarWidth();
sidebarSpacer.style.width = newWidth; sidebarSpacer.style.width = newWidth;
console.log('Updated sidebar width to:', newWidth); console.log("Updated sidebar width to:", newWidth);
} }
} }
show(imgSrc, imgAlt, pageNumber, isBeilage = false, targetPage = 0) { show(imgSrc, imgAlt, pageNumber, isBeilage = false, targetPage = 0, partNumber = null) {
const img = this.querySelector('#single-page-image'); const img = this.querySelector("#single-page-image");
const pageNumberSpan = this.querySelector('#page-number'); const pageNumberSpan = this.querySelector("#page-number");
const pageIconSpan = this.querySelector('#page-icon'); const pageIconSpan = this.querySelector("#page-icon");
const pageIndicator = this.querySelector('#page-indicator'); const pageIndicator = this.querySelector("#page-indicator");
img.src = imgSrc; img.src = imgSrc;
img.alt = imgAlt; img.alt = imgAlt;
@@ -1236,6 +1236,7 @@ class SinglePageViewer extends HTMLElement {
// Store current page info for button actions // Store current page info for button actions
this.currentPageNumber = pageNumber; this.currentPageNumber = pageNumber;
this.currentIsBeilage = isBeilage; this.currentIsBeilage = isBeilage;
this.currentPartNumber = partNumber;
// Get issue context from document title or URL // Get issue context from document title or URL
const issueContext = this.getIssueContext(pageNumber); const issueContext = this.getIssueContext(pageNumber);
@@ -1245,42 +1246,49 @@ class SinglePageViewer extends HTMLElement {
// Add red dot if this is the target page // Add red dot if this is the target page
if (targetPage && pageNumber === targetPage) { if (targetPage && pageNumber === targetPage) {
pageNumberSpan.style.position = 'relative'; pageNumberSpan.style.position = "relative";
// Remove any existing red dot // Remove any existing red dot
const existingDot = pageNumberSpan.querySelector('.target-page-dot'); const existingDot = pageNumberSpan.querySelector(".target-page-dot");
if (existingDot) { if (existingDot) {
existingDot.remove(); existingDot.remove();
} }
// Add new red dot // Add new red dot
const redDot = document.createElement('span'); 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.className =
redDot.title = 'verlinkte Seite'; "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); pageNumberSpan.appendChild(redDot);
} }
// Set page icon based on position and type // 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); const iconType = this.determinePageIconType(pageNumber, isBeilage);
pageIconSpan.innerHTML = this.getPageIconHTML(iconType); pageIconSpan.innerHTML = this.getPageIconHTML(iconType);
}
// Page indicator styling is now consistent (white background) // Page indicator styling is now consistent (white background)
// Update navigation button visibility // Update navigation button visibility
this.updateNavigationButtons(); this.updateNavigationButtons();
this.style.display = 'block'; this.style.display = "block";
// Prevent background scrolling but allow scrolling within the viewer // Prevent background scrolling but allow scrolling within the viewer
document.body.style.overflow = 'hidden'; document.body.style.overflow = "hidden";
// Mark current page in Inhaltsverzeichnis // Mark current page in Inhaltsverzeichnis
markCurrentPageInInhaltsverzeichnis(pageNumber); markCurrentPageInInhaltsverzeichnis(pageNumber);
} }
close() { close() {
this.style.display = 'none'; this.style.display = "none";
// Restore background scrolling // Restore background scrolling
document.body.style.overflow = ''; document.body.style.overflow = "";
} }
// Clean up component completely // Clean up component completely
@@ -1292,7 +1300,7 @@ class SinglePageViewer extends HTMLElement {
} }
// Restore background scrolling // Restore background scrolling
document.body.style.overflow = ''; document.body.style.overflow = "";
// Remove the component from DOM // Remove the component from DOM
if (this.parentNode) { if (this.parentNode) {
@@ -1303,16 +1311,18 @@ class SinglePageViewer extends HTMLElement {
// Determine page icon type based on page position and whether it's beilage // Determine page icon type based on page position and whether it's beilage
determinePageIconType(pageNumber, isBeilage) { determinePageIconType(pageNumber, isBeilage) {
// Get all page containers to determine position // Get all page containers to determine position
const containerSelector = isBeilage ? '.newspaper-page-container[data-beilage="true"]' : '.newspaper-page-container:not([data-beilage])'; const containerSelector = isBeilage
? '.newspaper-page-container[data-beilage="true"]'
: ".newspaper-page-container:not([data-beilage])";
const pageContainers = Array.from(document.querySelectorAll(containerSelector)); const pageContainers = Array.from(document.querySelectorAll(containerSelector));
// Extract page numbers and sort them // Extract page numbers and sort them
const allPages = pageContainers const allPages = pageContainers
.map(container => { .map((container) => {
const pageAttr = container.getAttribute('data-page-container'); const pageAttr = container.getAttribute("data-page-container");
return pageAttr ? parseInt(pageAttr) : null; return pageAttr ? parseInt(pageAttr) : null;
}) })
.filter(p => p !== null) .filter((p) => p !== null)
.sort((a, b) => a - b); .sort((a, b) => a - b);
if (allPages.length === 0) { if (allPages.length === 0) {
@@ -1364,53 +1374,65 @@ class SinglePageViewer extends HTMLElement {
// Share current page // Share current page
shareCurrentPage() { shareCurrentPage() {
if (typeof copyPagePermalink === 'function') { if (typeof copyPagePermalink === "function") {
// Use the actual button element // Use the actual button element
const shareBtn = this.querySelector('#share-btn'); const shareBtn = this.querySelector("#share-btn");
copyPagePermalink(this.currentPageNumber, shareBtn, this.currentIsBeilage); copyPagePermalink(this.currentPageNumber, shareBtn, this.currentIsBeilage);
} }
} }
// Generate citation for current page // Generate citation for current page
generatePageCitation() { generatePageCitation() {
if (typeof generatePageCitation === 'function') { if (typeof generatePageCitation === "function") {
// Use the actual button element // Use the actual button element
const citeBtn = this.querySelector('#cite-btn'); const citeBtn = this.querySelector("#cite-btn");
generatePageCitation(this.currentPageNumber, citeBtn); generatePageCitation(this.currentPageNumber, citeBtn);
} }
} }
// Update navigation button visibility based on available pages // Update navigation button visibility based on available pages
updateNavigationButtons() { updateNavigationButtons() {
const prevBtn = this.querySelector('#prev-page-btn'); const prevBtn = this.querySelector("#prev-page-btn");
const nextBtn = this.querySelector('#next-page-btn'); const nextBtn = this.querySelector("#next-page-btn");
const { prevPage, nextPage } = this.getAdjacentPages(); const { prevPage, nextPage } = this.getAdjacentPages();
// Enable/disable previous page button // Enable/disable previous page button
if (prevPage !== null) { if (prevPage !== null) {
prevBtn.disabled = false; prevBtn.disabled = false;
prevBtn.className = prevBtn.className.replace('opacity-50 cursor-not-allowed', ''); 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'); prevBtn.className = prevBtn.className.replace(
"bg-gray-50 text-gray-400",
"bg-gray-100 text-gray-700",
);
} else { } else {
prevBtn.disabled = true; prevBtn.disabled = true;
if (!prevBtn.className.includes('opacity-50')) { if (!prevBtn.className.includes("opacity-50")) {
prevBtn.className += ' opacity-50 cursor-not-allowed'; prevBtn.className += " opacity-50 cursor-not-allowed";
} }
prevBtn.className = prevBtn.className.replace('bg-gray-100 text-gray-700', 'bg-gray-50 text-gray-400'); prevBtn.className = prevBtn.className.replace(
"bg-gray-100 text-gray-700",
"bg-gray-50 text-gray-400",
);
} }
// Enable/disable next page button // Enable/disable next page button
if (nextPage !== null) { if (nextPage !== null) {
nextBtn.disabled = false; nextBtn.disabled = false;
nextBtn.className = nextBtn.className.replace('opacity-50 cursor-not-allowed', ''); 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'); nextBtn.className = nextBtn.className.replace(
"bg-gray-50 text-gray-400",
"bg-gray-100 text-gray-700",
);
} else { } else {
nextBtn.disabled = true; nextBtn.disabled = true;
if (!nextBtn.className.includes('opacity-50')) { if (!nextBtn.className.includes("opacity-50")) {
nextBtn.className += ' opacity-50 cursor-not-allowed'; nextBtn.className += " opacity-50 cursor-not-allowed";
} }
nextBtn.className = nextBtn.className.replace('bg-gray-100 text-gray-700', 'bg-gray-50 text-gray-400'); nextBtn.className = nextBtn.className.replace(
"bg-gray-100 text-gray-700",
"bg-gray-50 text-gray-400",
);
} }
} }
@@ -1421,28 +1443,33 @@ class SinglePageViewer extends HTMLElement {
if (this.currentIsBeilage) { if (this.currentIsBeilage) {
containerSelector = '.newspaper-page-container[data-beilage="true"]'; containerSelector = '.newspaper-page-container[data-beilage="true"]';
} else { } else {
containerSelector = '.newspaper-page-container:not([data-beilage])'; containerSelector = ".newspaper-page-container:not([data-beilage])";
} }
const pageContainers = Array.from(document.querySelectorAll(containerSelector)); const pageContainers = Array.from(document.querySelectorAll(containerSelector));
console.log('Found containers:', pageContainers.length, 'for', this.currentIsBeilage ? 'beilage' : 'main'); console.log(
"Found containers:",
pageContainers.length,
"for",
this.currentIsBeilage ? "beilage" : "main",
);
// Extract page numbers and sort them // Extract page numbers and sort them
const allPages = pageContainers const allPages = pageContainers
.map(container => { .map((container) => {
const pageAttr = container.getAttribute('data-page-container'); const pageAttr = container.getAttribute("data-page-container");
const pageNum = pageAttr ? parseInt(pageAttr) : null; const pageNum = pageAttr ? parseInt(pageAttr) : null;
console.log('Container page:', pageAttr, 'parsed:', pageNum); console.log("Container page:", pageAttr, "parsed:", pageNum);
return pageNum; return pageNum;
}) })
.filter(p => p !== null) .filter((p) => p !== null)
.sort((a, b) => a - b); .sort((a, b) => a - b);
console.log('All pages found:', allPages); console.log("All pages found:", allPages);
console.log('Current page:', this.currentPageNumber); console.log("Current page:", this.currentPageNumber);
const currentIndex = allPages.indexOf(this.currentPageNumber); const currentIndex = allPages.indexOf(this.currentPageNumber);
console.log('Current index:', currentIndex); console.log("Current index:", currentIndex);
let prevPage = null; let prevPage = null;
let nextPage = null; let nextPage = null;
@@ -1455,7 +1482,7 @@ class SinglePageViewer extends HTMLElement {
nextPage = allPages[currentIndex + 1]; nextPage = allPages[currentIndex + 1];
} }
console.log('Adjacent pages - prev:', prevPage, 'next:', nextPage); console.log("Adjacent pages - prev:", prevPage, "next:", nextPage);
return { prevPage, nextPage }; return { prevPage, nextPage };
} }
@@ -1478,30 +1505,67 @@ class SinglePageViewer extends HTMLElement {
// Navigate to a specific page // Navigate to a specific page
navigateToPage(pageNumber) { navigateToPage(pageNumber) {
// Find the image element for the target page // 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 containerSelector = this.currentIsBeilage
const targetContainer = document.querySelector(`${containerSelector}[data-page-container="${pageNumber}"]`); ? '.newspaper-page-container[data-beilage="true"]'
: ".newspaper-page-container:not([data-beilage])";
const targetContainer = document.querySelector(
`${containerSelector}[data-page-container="${pageNumber}"]`,
);
if (targetContainer) { if (targetContainer) {
const imgElement = targetContainer.querySelector('.newspaper-page-image'); const imgElement = targetContainer.querySelector(".newspaper-page-image");
if (imgElement) { 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 // Update the current view with the new page
this.show(imgElement.src, imgElement.alt, pageNumber, this.currentIsBeilage); 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 // Toggle sidebar visibility
toggleSidebar() { toggleSidebar() {
const sidebarSpacer = this.querySelector('#sidebar-spacer'); const sidebarSpacer = this.querySelector("#sidebar-spacer");
const toggleBtn = this.querySelector('#sidebar-toggle-btn'); const toggleBtn = this.querySelector("#sidebar-toggle-btn");
const toggleIcon = toggleBtn.querySelector('i'); const toggleIcon = toggleBtn.querySelector("i");
// Check if sidebar is currently collapsed by looking at width // Check if sidebar is currently collapsed by looking at width
const currentWidth = sidebarSpacer.style.width; const currentWidth = sidebarSpacer.style.width;
const isCollapsed = currentWidth === '0px' || currentWidth === '0'; const isCollapsed = currentWidth === "0px" || currentWidth === "0";
console.log('Current state - isCollapsed:', isCollapsed); console.log("Current state - isCollapsed:", isCollapsed);
console.log('Current width:', currentWidth); console.log("Current width:", currentWidth);
if (isCollapsed) { if (isCollapsed) {
// Sidebar is collapsed, expand it // Sidebar is collapsed, expand it
@@ -1509,29 +1573,31 @@ class SinglePageViewer extends HTMLElement {
sidebarSpacer.style.width = fullWidth; sidebarSpacer.style.width = fullWidth;
// Update button to normal state (sidebar visible) // 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'; toggleBtn.className =
toggleIcon.className = 'ri-sidebar-unfold-line text-lg font-bold'; "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";
toggleBtn.title = 'Inhaltsverzeichnis ausblenden'; toggleIcon.className = "ri-sidebar-fold-line text-lg font-bold";
console.log('Expanding sidebar to:', fullWidth); toggleBtn.title = "Inhaltsverzeichnis ausblenden";
console.log("Expanding sidebar to:", fullWidth);
} else { } else {
// Sidebar is expanded, collapse it // Sidebar is expanded, collapse it
sidebarSpacer.style.width = '0px'; sidebarSpacer.style.width = "0px";
// Update button to active state (sidebar hidden - orange highlight) // 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'; toggleBtn.className =
toggleIcon.className = 'ri-sidebar-fold-line text-lg font-bold'; "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";
toggleBtn.title = 'Inhaltsverzeichnis einblenden'; toggleIcon.className = "ri-sidebar-unfold-line text-lg font-bold";
console.log('Collapsing sidebar'); toggleBtn.title = "Inhaltsverzeichnis einblenden";
console.log("Collapsing sidebar");
} }
console.log('New width:', sidebarSpacer.style.width); console.log("New width:", sidebarSpacer.style.width);
} }
// Extract issue context from document title, URL, or page container // Extract issue context from document title, URL, or page container
getIssueContext(pageNumber) { getIssueContext(pageNumber) {
// Determine if we're in a piece view (beitrag) or issue view (ausgabe) // Determine if we're in a piece view (beitrag) or issue view (ausgabe)
const path = window.location.pathname; const path = window.location.pathname;
const isPieceView = path.includes('/beitrag/'); const isPieceView = path.includes("/beitrag/");
if (isPieceView) { if (isPieceView) {
// For piece view: Return full format "1765 Nr. 2" // For piece view: Return full format "1765 Nr. 2"
@@ -1539,13 +1605,18 @@ class SinglePageViewer extends HTMLElement {
const pageContainer = document.querySelector(`[data-page-container="${pageNumber}"]`); const pageContainer = document.querySelector(`[data-page-container="${pageNumber}"]`);
if (pageContainer) { if (pageContainer) {
// Look for existing page indicator with context // Look for existing page indicator with context
const pageIndicator = pageContainer.querySelector('.page-indicator'); const pageIndicator = pageContainer.querySelector(".page-indicator");
if (pageIndicator) { if (pageIndicator) {
const text = pageIndicator.textContent.trim(); const text = pageIndicator.textContent.trim();
// Extract year and issue from text like "1768 Nr. 20, 79" // Extract full date and issue from text like "3.7.1767 Nr. 53, 213"
const match = text.match(/(\d{4})\s+Nr\.\s+(\d+)/); const fullDateMatch = text.match(/(\d{1,2}\.\d{1,2}\.\d{4}\s+Nr\.\s+\d+)/);
if (match) { if (fullDateMatch) {
return `${match[1]} Nr. ${match[2]}`; 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]}`;
} }
} }
} }
@@ -1558,17 +1629,17 @@ class SinglePageViewer extends HTMLElement {
} }
} else { } else {
// For issue view: Return just empty string (page number only) // For issue view: Return just empty string (page number only)
return ''; return "";
} }
// Final fallback: Try to extract from URL path // Final fallback: Try to extract from URL path
const urlMatch = path.match(/\/(\d{4})\/(\d+)/); const urlMatch = path.match(/\/(\d{4})\/(\d+)/);
if (urlMatch) { if (urlMatch) {
return isPieceView ? `${urlMatch[1]} Nr. ${urlMatch[2]}` : ''; return isPieceView ? `${urlMatch[1]} Nr. ${urlMatch[2]}` : "";
} }
// Fallback - try to get from any visible page context // Fallback - try to get from any visible page context
const anyPageIndicator = document.querySelector('.page-indicator'); const anyPageIndicator = document.querySelector(".page-indicator");
if (anyPageIndicator) { if (anyPageIndicator) {
const text = anyPageIndicator.textContent.trim(); const text = anyPageIndicator.textContent.trim();
const match = text.match(/(\d{4})\s+Nr\.\s+(\d+)/); const match = text.match(/(\d{4})\s+Nr\.\s+(\d+)/);
@@ -1583,21 +1654,21 @@ class SinglePageViewer extends HTMLElement {
} }
// Register the web component // Register the web component
customElements.define('single-page-viewer', SinglePageViewer); customElements.define("single-page-viewer", SinglePageViewer);
// Clean up single page viewer on HTMX navigation // Clean up single page viewer on HTMX navigation
document.body.addEventListener('htmx:beforeRequest', function(event) { document.body.addEventListener("htmx:beforeRequest", function (event) {
// Find any active single page viewer // Find any active single page viewer
const viewer = document.querySelector('single-page-viewer'); const viewer = document.querySelector("single-page-viewer");
if (viewer && viewer.style.display !== 'none') { if (viewer && viewer.style.display !== "none") {
console.log('Cleaning up single page viewer before HTMX navigation'); console.log("Cleaning up single page viewer before HTMX navigation");
viewer.destroy(); viewer.destroy();
} }
}); });
// Also clean up on page unload as fallback // Also clean up on page unload as fallback
window.addEventListener('beforeunload', function() { window.addEventListener("beforeunload", function () {
const viewer = document.querySelector('single-page-viewer'); const viewer = document.querySelector("single-page-viewer");
if (viewer) { if (viewer) {
viewer.destroy(); viewer.destroy();
} }