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() {
let i = htmx.findAll(A);
for (let t of i)
L(t);
}
function L(i) {
if (i.getAttribute(E) === "true" || !i.hasAttribute(m))
if (i.getAttribute(E) === "true" || !i.hasAttribute(w))
return;
let t = "#" + i.getAttribute(m), e = y.get(t);
let t = "#" + i.getAttribute(w), e = y.get(t);
if (!e) {
let a = htmx.find(t);
if (a) {
let s = a.innerHTML ? new DOMParser().parseFromString(a.innerHTML, "application/xml") : a.contentDocument;
e = new XSLTProcessor(), e.importStylesheet(s), y.set(t, e);
let s = htmx.find(t);
if (s) {
let a = s.innerHTML ? new DOMParser().parseFromString(s.innerHTML, "application/xml") : s.contentDocument;
e = new XSLTProcessor(), e.importStylesheet(a), y.set(t, e);
} else
throw new Error("Unknown XSLT template: " + t);
}
@@ -31,8 +31,8 @@ function q() {
connectedCallback() {
let o = [];
this.slots.forEach((r) => {
let a = r.getAttribute("name"), s = this.querySelector(`[slot="${a}"]`);
s && (r.replaceWith(s.cloneNode(!0)), o.push(s));
let s = r.getAttribute("name"), a = this.querySelector(`[slot="${s}"]`);
a && (r.replaceWith(a.cloneNode(!0)), o.push(a));
}), o.forEach((r) => {
r.remove();
});
@@ -46,12 +46,12 @@ window.currentPageContainers = window.currentPageContainers || [];
window.currentActiveIndex = window.currentActiveIndex || 0;
window.pageObserver = window.pageObserver || null;
window.scrollTimeout = window.scrollTimeout || null;
function k() {
function $() {
window.highlightObserver && (window.highlightObserver.disconnect(), window.highlightObserver = null);
const i = document.querySelectorAll(".newspaper-page-container");
window.highlightObserver = new IntersectionObserver(
(t) => {
S();
P();
},
{
rootMargin: "-20% 0px -70% 0px"
@@ -60,14 +60,14 @@ function k() {
window.highlightObserver.observe(t);
});
}
function S() {
function P() {
const i = [];
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";
u && g && p && !i.includes(p) && i.push(p);
}), $(i), i.length > 0 && C(i);
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";
g && u && p && !i.includes(p) && i.push(p);
}), k(i), i.length > 0 && C(i);
}
function $(i) {
function k(i) {
document.querySelectorAll(".continuation-entry").forEach((t) => {
t.style.display = "none";
}), i.forEach((t) => {
@@ -98,7 +98,7 @@ function M() {
}), e ? i.style.display = "" : i.style.display = "none";
});
}
function P(i) {
function S(i) {
C([i]);
}
function C(i) {
@@ -117,28 +117,24 @@ function C(i) {
`.page-number-inhalts[data-page-number="${e}"]`
);
if (n) {
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);
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);
const o = document.querySelector(`[data-page-container="${e}"]`);
o && (o.classList.remove("border-slate-300", "border-amber-400"), o.classList.add("border-red-500"));
const r = n.closest(".page-entry");
r && (r.querySelectorAll(".inhalts-entry").forEach((s) => {
s.classList.remove("hover:bg-slate-100"), s.style.cursor = "default";
}), r.querySelectorAll('a[href*="/"]').forEach((s) => {
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"));
r && (r.querySelectorAll(".inhalts-entry").forEach((a) => {
a.classList.remove("hover:bg-slate-100"), a.style.cursor = "default";
}), r.querySelectorAll('a[href*="/"]').forEach((a) => {
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");
}), i.forEach((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"));
});
}
function H(i) {
function N(i) {
const t = i.closest(".lg\\:overflow-y-auto");
if (t) {
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) {
let n = document.querySelector("single-page-viewer");
n || (n = document.createElement("single-page-viewer"), document.body.appendChild(n));
const o = i.closest('[data-beilage="true"]') !== null, r = window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0;
n.show(i.src, i.alt, t, o, r);
function H(i, t, e, n = null) {
let o = document.querySelector("single-page-viewer");
o || (o = document.createElement("single-page-viewer"), document.body.appendChild(o));
const r = i.closest('[data-beilage="true"]') !== null, s = window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0;
o.show(i.src, i.alt, t, r, s, n);
}
function I() {
document.getElementById("pageModal").classList.add("hidden");
}
function O() {
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")) {
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")) {
let t = /* @__PURE__ */ new Set();
window.pageObserver = new IntersectionObserver(
(e) => {
@@ -168,7 +162,7 @@ function O() {
const o = window.currentPageContainers.indexOf(n.target);
o !== -1 && (n.isIntersecting ? t.add(o) : t.delete(o));
}), 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());
}
},
@@ -185,8 +179,8 @@ function R() {
let i = -1;
const t = [];
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;
c / u >= 0.3 && t.push(o);
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 / g >= 0.3 && t.push(o);
});
const e = Math.min(...t);
for (let n = e - 1; n >= 0; n--)
@@ -207,8 +201,8 @@ function z() {
let i = -1;
const t = [];
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;
c / u >= 0.3 && t.push(o);
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 / g >= 0.3 && t.push(o);
});
const e = Math.max(...t);
for (let n = e + 1; n < window.currentPageContainers.length; n++)
@@ -242,8 +236,8 @@ function D() {
function T() {
const i = [];
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;
s / l >= 0.3 && i.push(e);
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;
a / l >= 0.3 && i.push(e);
});
for (const t of i) {
const e = window.currentPageContainers[t];
@@ -309,8 +303,8 @@ function V() {
const r = document.createElement("textarea");
r.value = o, document.body.appendChild(r), r.select();
try {
const a = document.execCommand("copy");
d(i, a ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
const s = document.execCommand("copy");
d(i, s ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
} catch {
d(i, "Kopieren fehlgeschlagen");
} finally {
@@ -336,10 +330,10 @@ function d(i, t) {
transition: opacity 0.2s ease;
white-space: nowrap;
`;
const o = i.getBoundingClientRect(), r = window.innerHeight, a = window.innerWidth;
let s = o.left - 10, l = o.bottom + 8;
const c = 120, u = 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(() => {
const o = i.getBoundingClientRect(), r = window.innerHeight, s = window.innerWidth;
let a = o.left - 10, l = o.bottom + 8;
const c = 120, g = 32;
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";
}, 10), setTimeout(() => {
n.style.opacity = "0", setTimeout(() => {
@@ -347,7 +341,7 @@ function d(i, t) {
}, 200);
}, 2e3);
}
function W() {
function j() {
let i = "", t = null;
const e = window.location.pathname.split("/");
if (e.length >= 4 && !isNaN(e[e.length - 1])) {
@@ -367,18 +361,18 @@ function W() {
t.scrollIntoView({
behavior: "smooth",
block: "start"
}), P(i);
}), S(i);
}, 300);
}
function f(i, t, e = !1) {
function b(i, t, e = !1) {
let n = "";
if (e)
n = window.location.origin + window.location.pathname + `#beilage-1-page-${i}`;
else {
const r = window.location.pathname.split("/");
if (r.length >= 3) {
const a = r[1], s = r[2];
n = `${window.location.origin}/${a}/${s}/${i}`;
const s = r[1], a = r[2];
n = `${window.location.origin}/${s}/${a}/${i}`;
} else
n = window.location.origin + window.location.pathname + `/${i}`;
}
@@ -393,8 +387,8 @@ function f(i, t, e = !1) {
const r = document.createElement("textarea");
r.value = o, document.body.appendChild(r), r.select();
try {
const a = document.execCommand("copy");
d(t, a ? "Link kopiert!" : "Kopieren fehlgeschlagen");
const s = document.execCommand("copy");
d(t, s ? "Link kopiert!" : "Kopieren fehlgeschlagen");
} catch {
d(t, "Kopieren fehlgeschlagen");
} 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("/");
let o;
if (n.length >= 3) {
@@ -410,16 +404,16 @@ function w(i, t) {
o = `${window.location.origin}/${l}/${c}/${i}`;
} else
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)
navigator.clipboard.writeText(s).then(() => {
navigator.clipboard.writeText(a).then(() => {
d(t, "Zitation kopiert!");
}).catch((l) => {
d(t, "Kopieren fehlgeschlagen");
});
else {
const l = document.createElement("textarea");
l.value = s, document.body.appendChild(l), l.select();
l.value = a, document.body.appendChild(l), l.select();
try {
const c = document.execCommand("copy");
d(t, c ? "Zitation kopiert!" : "Kopieren fehlgeschlagen");
@@ -430,42 +424,42 @@ function w(i, t) {
}
}
}
function b() {
k(), O(), window.addEventListener("scroll", function() {
function f() {
$(), O(), window.addEventListener("scroll", function() {
clearTimeout(window.scrollTimeout), window.scrollTimeout = setTimeout(() => {
S(), h();
P(), h();
}, 50);
}), W(), document.addEventListener("keydown", function(i) {
}), j(), document.addEventListener("keydown", function(i) {
i.key === "Escape" && I();
});
}
window.enlargePage = N;
window.enlargePage = H;
window.closeModal = I;
window.scrollToPreviousPage = R;
window.scrollToNextPage = z;
window.scrollToBeilage = D;
window.shareCurrentPage = K;
window.generateCitation = V;
window.copyPagePermalink = f;
window.generatePageCitation = w;
window.copyPagePermalink = b;
window.generatePageCitation = m;
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();
}), document.body.addEventListener("htmx:afterSwap", function(i) {
setTimeout(() => {
document.querySelector(".newspaper-page-container") && b();
document.querySelector(".newspaper-page-container") && f();
}, 100);
}), document.body.addEventListener("htmx:afterSettle", function(i) {
setTimeout(() => {
document.querySelector(".newspaper-page-container") && b();
document.querySelector(".newspaper-page-container") && f();
}, 200);
}), document.body.addEventListener("htmx:load", function(i) {
setTimeout(() => {
document.querySelector(".newspaper-page-container") && b();
document.querySelector(".newspaper-page-container") && f();
}, 100);
});
}
class j extends HTMLElement {
class W extends HTMLElement {
constructor() {
super(), this.resizeObserver = null;
}
@@ -499,7 +493,7 @@ class j extends HTMLElement {
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-unfold-line text-lg font-bold"></i>
<i class="ri-sidebar-fold-line text-lg font-bold"></i>
</button>
<!-- Page indicator with icon -->
@@ -590,19 +584,24 @@ class j extends HTMLElement {
t.style.width = e, console.log("Updated sidebar width to:", e);
}
}
show(t, e, n, o = !1, r = 0) {
const a = this.querySelector("#single-page-image"), s = this.querySelector("#page-number"), l = this.querySelector("#page-icon");
this.querySelector("#page-indicator"), a.src = t, a.alt = e, this.currentPageNumber = n, this.currentIsBeilage = o;
const c = this.getIssueContext(n);
if (s.innerHTML = c ? `${c}, ${n}` : `${n}`, r && n === r) {
s.style.position = "relative";
const g = s.querySelector(".target-page-dot");
g && g.remove();
show(t, e, n, o = !1, r = 0, s = null) {
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.currentPartNumber = s;
const g = this.getIssueContext(n);
if (l.innerHTML = g ? `${g}, ${n}` : `${n}`, r && n === r) {
l.style.position = "relative";
const u = l.querySelector(".target-page-dot");
u && u.remove();
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);
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() {
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);
if (r.length === 0)
return "first";
const a = r[0], s = r[r.length - 1];
return t === a ? "first" : t === s ? "last" : t === a + 1 ? "even" : t === s - 1 ? "odd" : t % 2 === 0 ? "even" : "odd";
const s = r[0], a = r[r.length - 1];
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)
getPageIconHTML(t) {
@@ -640,38 +639,55 @@ class j extends HTMLElement {
}
// Share current page
shareCurrentPage() {
if (typeof f == "function") {
if (typeof b == "function") {
const t = this.querySelector("#share-btn");
f(this.currentPageNumber, t, this.currentIsBeilage);
b(this.currentPageNumber, t, this.currentIsBeilage);
}
}
// Generate citation for current page
generatePageCitation() {
if (typeof w == "function") {
if (typeof m == "function") {
const t = this.querySelector("#cite-btn");
w(this.currentPageNumber, t);
m(this.currentPageNumber, t);
}
}
// Update navigation button visibility based on available pages
updateNavigationButtons() {
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
getAdjacentPages() {
let t;
this.currentIsBeilage ? t = '.newspaper-page-container[data-beilage="true"]' : t = ".newspaper-page-container:not([data-beilage])";
const e = Array.from(document.querySelectorAll(t));
console.log("Found containers:", e.length, "for", this.currentIsBeilage ? "beilage" : "main");
const n = e.map((s) => {
const l = s.getAttribute("data-page-container"), c = l ? parseInt(l) : null;
console.log(
"Found containers:",
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;
}).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);
const o = n.indexOf(this.currentPageNumber);
console.log("Current index:", o);
let r = null, a = 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 };
let r = null, s = null;
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
goToPreviousPage() {
@@ -685,33 +701,61 @@ class j extends HTMLElement {
}
// Navigate to a specific page
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) {
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
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";
if (console.log("Current state - isCollapsed:", r), console.log("Current width:", o), r) {
const a = 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);
const s = this.detectSidebarWidth();
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
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);
}
// Extract issue context from document title, URL, or page container
getIssueContext(t) {
const e = window.location.pathname, n = e.includes("/beitrag/");
if (n) {
const a = document.querySelector(`[data-page-container="${t}"]`);
if (a) {
const c = a.querySelector(".page-indicator");
const s = document.querySelector(`[data-page-container="${t}"]`);
if (s) {
const c = s.querySelector(".page-indicator");
if (c) {
const g = c.textContent.trim().match(/(\d{4})\s+Nr\.\s+(\d+)/);
if (g)
return `${g[1]} Nr. ${g[2]}`;
const g = c.textContent.trim(), u = g.match(/(\d{1,2}\.\d{1,2}\.\d{4}\s+Nr\.\s+\d+)/);
if (u)
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+)/);
@@ -724,14 +768,14 @@ class j extends HTMLElement {
return n ? `${o[1]} Nr. ${o[2]}` : "";
const r = document.querySelector(".page-indicator");
if (r) {
const s = r.textContent.trim().match(/(\d{4})\s+Nr\.\s+(\d+)/);
if (s)
return `${s[1]} Nr. ${s[2]}`;
const a = r.textContent.trim().match(/(\d{4})\s+Nr\.\s+(\d+)/);
if (a)
return `${a[1]} Nr. ${a[2]}`;
}
return "KGPZ";
}
}
customElements.define("single-page-viewer", j);
customElements.define("single-page-viewer", W);
document.body.addEventListener("htmx:beforeRequest", function(i) {
const t = document.querySelector("single-page-viewer");
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 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">
{{ $pageEntry.PartNumber }}
{{ $pageEntry.PartNumber }}. Teil
</span>
<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"

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

@@ -22,7 +22,7 @@
<!-- Page indicator row -->
<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">
{{ $pageEntry.PartNumber }}
{{ $pageEntry.PartNumber }}. Teil
</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 }}">
{{ $issueContext }}, {{ $page.PageNumber }}
@@ -42,7 +42,7 @@
<i class="ri-file-text-line text-xs"></i>
</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"
title="Seite {{ $page.PageNumber }} vergrößern">
<i class="ri-zoom-in-line text-xs"></i>
@@ -55,7 +55,7 @@
<img src="{{ $page.ImagePath }}"
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"
onclick="enlargePage(this, {{ $page.PageNumber }}, false)"
onclick="enlargePage(this, {{ $page.PageNumber }}, false, {{ $pageEntry.PartNumber }})"
data-page="{{ $page.PageNumber }}"
loading="lazy" />
{{ else }}

299
views/transform/main.js
View File

@@ -280,11 +280,7 @@ function markCurrentPagesInInhaltsverzeichnis(pageNumbers) {
if (pageNumElement) {
// Highlight the page number
pageNumElement.classList.remove(
"text-slate-700",
"hover:bg-blue-100",
"hover:bg-amber-100",
);
pageNumElement.classList.remove("text-slate-700", "hover:bg-blue-100", "hover:bg-amber-100");
pageNumElement.classList.add("text-red-600", "font-bold");
pageNumElement.style.textDecoration = "none";
pageNumElement.style.pointerEvents = "none";
@@ -368,11 +364,11 @@ function scrollToHighlightedPage(element) {
}
// Modal functions
function enlargePage(imgElement, pageNumber, isFromSpread) {
function enlargePage(imgElement, pageNumber, isFromSpread, partNumber = null) {
// Get or create the single page viewer component
let viewer = document.querySelector('single-page-viewer');
let viewer = document.querySelector("single-page-viewer");
if (!viewer) {
viewer = document.createElement('single-page-viewer');
viewer = document.createElement("single-page-viewer");
document.body.appendChild(viewer);
}
@@ -380,10 +376,11 @@ function enlargePage(imgElement, pageNumber, isFromSpread) {
const isBeilage = imgElement.closest('[data-beilage="true"]') !== null;
// 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
viewer.show(imgElement.src, imgElement.alt, pageNumber, isBeilage, targetPage);
viewer.show(imgElement.src, imgElement.alt, pageNumber, isBeilage, targetPage, partNumber);
}
function closeModal() {
@@ -400,9 +397,7 @@ function initializePageTracking() {
}
// Reset state
window.currentPageContainers = Array.from(
document.querySelectorAll(".newspaper-page-container"),
);
window.currentPageContainers = Array.from(document.querySelectorAll(".newspaper-page-container"));
window.currentActiveIndex = 0;
updateButtonStates();
@@ -462,7 +457,8 @@ function scrollToPreviousPage() {
const containerHeight = containerRect.height;
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);
}
});
@@ -513,7 +509,8 @@ function scrollToNextPage() {
const containerHeight = containerRect.height;
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);
}
});
@@ -553,7 +550,7 @@ function scrollToBeilage() {
if (isViewingBeilage) {
// 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) {
firstMainPage.scrollIntoView({
behavior: "smooth",
@@ -585,7 +582,8 @@ function isCurrentlyInBeilageSection() {
const containerHeight = containerRect.height;
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);
}
});
@@ -593,7 +591,7 @@ function isCurrentlyInBeilageSection() {
// Check if any visible page is a Beilage page
for (const index of visibleIndexes) {
const container = window.currentPageContainers[index];
if (container && container.id && container.id.includes('beilage-')) {
if (container && container.id && container.id.includes("beilage-")) {
return true;
}
}
@@ -625,19 +623,21 @@ function updateButtonStates() {
// Update Beilage button based on current location
if (beilageBtn) {
const isViewingBeilage = isCurrentlyInBeilageSection();
const icon = beilageBtn.querySelector('i');
const icon = beilageBtn.querySelector("i");
if (isViewingBeilage) {
// Show "Go to Main Issue" state - use gray styling
beilageBtn.title = "Zur Hauptausgabe";
beilageBtn.className = "w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 hover:text-gray-800 border border-gray-300 transition-colors duration-200 flex items-center justify-center cursor-pointer";
beilageBtn.className =
"w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 hover:text-gray-800 border border-gray-300 transition-colors duration-200 flex items-center justify-center cursor-pointer";
if (icon) {
icon.className = "ri-file-text-line text-lg lg:text-xl";
}
} else {
// Show "Go to Beilage" state - use amber styling
beilageBtn.title = "Zu Beilage";
beilageBtn.className = "w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-amber-100 hover:bg-amber-200 text-amber-700 hover:text-amber-800 border border-amber-300 transition-colors duration-200 flex items-center justify-center cursor-pointer";
beilageBtn.className =
"w-14 h-10 lg:w-16 lg:h-12 px-2 py-1 bg-amber-100 hover:bg-amber-200 text-amber-700 hover:text-amber-800 border border-amber-300 transition-colors duration-200 flex items-center justify-center cursor-pointer";
if (icon) {
icon.className = "ri-attachment-line text-lg lg:text-xl";
}
@@ -723,8 +723,8 @@ function generateCitation() {
let cleanUrl = window.location.origin + window.location.pathname;
// Remove any hash fragments that might still exist
if (cleanUrl.includes('#')) {
cleanUrl = cleanUrl.split('#')[0];
if (cleanUrl.includes("#")) {
cleanUrl = cleanUrl.split("#")[0];
}
// Basic citation format (can be expanded later)
@@ -837,7 +837,7 @@ function scrollToPageFromURL() {
let targetContainer = null;
// 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])) {
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}`;
} else {
// For regular pages, use the new URL format
const pathParts = window.location.pathname.split('/');
const pathParts = window.location.pathname.split("/");
if (pathParts.length >= 3) {
// Current URL format: /year/issue or /year/issue/page
// New format: /year/issue/page
@@ -934,7 +934,7 @@ function generatePageCitation(pageNumber, button) {
const issueInfo = document.title || "KGPZ";
// Generate page URL in new format
const pathParts = window.location.pathname.split('/');
const pathParts = window.location.pathname.split("/");
let pageUrl;
if (pathParts.length >= 3) {
const year = pathParts[1];
@@ -1075,7 +1075,7 @@ class SinglePageViewer extends HTMLElement {
if (sidebar) {
const sidebarRect = sidebar.getBoundingClientRect();
const sidebarWidth = sidebarRect.width;
console.log('Detected sidebar width:', sidebarWidth, 'px');
console.log("Detected sidebar width:", sidebarWidth, "px");
return `${sidebarWidth}px`;
}
@@ -1084,7 +1084,7 @@ class SinglePageViewer extends HTMLElement {
if (viewportWidth < 1024) {
// Below lg breakpoint - no sidebar space needed
return '0px';
return "0px";
} else if (viewportWidth < 1280) {
// lg breakpoint: assume 1/4 of viewport (similar to both layouts)
return `${Math.floor(viewportWidth * 0.25)}px`;
@@ -1116,7 +1116,7 @@ class SinglePageViewer extends HTMLElement {
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-unfold-line text-lg font-bold"></i>
<i class="ri-sidebar-fold-line text-lg font-bold"></i>
</button>
<!-- Page indicator with icon -->
@@ -1215,20 +1215,20 @@ class SinglePageViewer extends HTMLElement {
// Update sidebar width when window is resized
updateSidebarWidth() {
const sidebarSpacer = this.querySelector('#sidebar-spacer');
if (sidebarSpacer && !sidebarSpacer.style.width.includes('0px')) {
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);
console.log("Updated sidebar width to:", newWidth);
}
}
show(imgSrc, imgAlt, pageNumber, isBeilage = false, targetPage = 0) {
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');
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;
@@ -1236,6 +1236,7 @@ class SinglePageViewer extends HTMLElement {
// 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);
@@ -1245,42 +1246,49 @@ class SinglePageViewer extends HTMLElement {
// Add red dot if this is the target page
if (targetPage && pageNumber === targetPage) {
pageNumberSpan.style.position = 'relative';
pageNumberSpan.style.position = "relative";
// Remove any existing red dot
const existingDot = pageNumberSpan.querySelector('.target-page-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';
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 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);
pageIconSpan.innerHTML = this.getPageIconHTML(iconType);
}
// Page indicator styling is now consistent (white background)
// Update navigation button visibility
this.updateNavigationButtons();
this.style.display = 'block';
this.style.display = "block";
// Prevent background scrolling but allow scrolling within the viewer
document.body.style.overflow = 'hidden';
document.body.style.overflow = "hidden";
// Mark current page in Inhaltsverzeichnis
markCurrentPageInInhaltsverzeichnis(pageNumber);
}
close() {
this.style.display = 'none';
this.style.display = "none";
// Restore background scrolling
document.body.style.overflow = '';
document.body.style.overflow = "";
}
// Clean up component completely
@@ -1292,7 +1300,7 @@ class SinglePageViewer extends HTMLElement {
}
// Restore background scrolling
document.body.style.overflow = '';
document.body.style.overflow = "";
// Remove the component from DOM
if (this.parentNode) {
@@ -1303,16 +1311,18 @@ class SinglePageViewer extends HTMLElement {
// 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 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');
.map((container) => {
const pageAttr = container.getAttribute("data-page-container");
return pageAttr ? parseInt(pageAttr) : null;
})
.filter(p => p !== null)
.filter((p) => p !== null)
.sort((a, b) => a - b);
if (allPages.length === 0) {
@@ -1364,53 +1374,65 @@ class SinglePageViewer extends HTMLElement {
// Share current page
shareCurrentPage() {
if (typeof copyPagePermalink === 'function') {
if (typeof copyPagePermalink === "function") {
// Use the actual button element
const shareBtn = this.querySelector('#share-btn');
const shareBtn = this.querySelector("#share-btn");
copyPagePermalink(this.currentPageNumber, shareBtn, this.currentIsBeilage);
}
}
// Generate citation for current page
generatePageCitation() {
if (typeof generatePageCitation === 'function') {
if (typeof generatePageCitation === "function") {
// Use the actual button element
const citeBtn = this.querySelector('#cite-btn');
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 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');
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';
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');
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');
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';
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');
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) {
containerSelector = '.newspaper-page-container[data-beilage="true"]';
} else {
containerSelector = '.newspaper-page-container:not([data-beilage])';
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');
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');
.map((container) => {
const pageAttr = container.getAttribute("data-page-container");
const pageNum = pageAttr ? parseInt(pageAttr) : null;
console.log('Container page:', pageAttr, 'parsed:', pageNum);
console.log("Container page:", pageAttr, "parsed:", pageNum);
return pageNum;
})
.filter(p => p !== null)
.filter((p) => p !== null)
.sort((a, b) => a - b);
console.log('All pages found:', allPages);
console.log('Current page:', this.currentPageNumber);
console.log("All pages found:", allPages);
console.log("Current page:", this.currentPageNumber);
const currentIndex = allPages.indexOf(this.currentPageNumber);
console.log('Current index:', currentIndex);
console.log("Current index:", currentIndex);
let prevPage = null;
let nextPage = null;
@@ -1455,7 +1482,7 @@ class SinglePageViewer extends HTMLElement {
nextPage = allPages[currentIndex + 1];
}
console.log('Adjacent pages - prev:', prevPage, 'next:', nextPage);
console.log("Adjacent pages - prev:", prevPage, "next:", nextPage);
return { prevPage, nextPage };
}
@@ -1478,30 +1505,67 @@ class SinglePageViewer extends HTMLElement {
// 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}"]`);
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');
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);
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');
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';
const isCollapsed = currentWidth === "0px" || currentWidth === "0";
console.log('Current state - isCollapsed:', isCollapsed);
console.log('Current width:', currentWidth);
console.log("Current state - isCollapsed:", isCollapsed);
console.log("Current width:", currentWidth);
if (isCollapsed) {
// Sidebar is collapsed, expand it
@@ -1509,29 +1573,31 @@ class SinglePageViewer extends HTMLElement {
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-unfold-line text-lg font-bold';
toggleBtn.title = 'Inhaltsverzeichnis ausblenden';
console.log('Expanding sidebar to:', fullWidth);
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';
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-fold-line text-lg font-bold';
toggleBtn.title = 'Inhaltsverzeichnis einblenden';
console.log('Collapsing sidebar');
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);
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/');
const isPieceView = path.includes("/beitrag/");
if (isPieceView) {
// 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}"]`);
if (pageContainer) {
// Look for existing page indicator with context
const pageIndicator = pageContainer.querySelector('.page-indicator');
const pageIndicator = pageContainer.querySelector(".page-indicator");
if (pageIndicator) {
const text = pageIndicator.textContent.trim();
// Extract year and issue from text like "1768 Nr. 20, 79"
const match = text.match(/(\d{4})\s+Nr\.\s+(\d+)/);
if (match) {
return `${match[1]} Nr. ${match[2]}`;
// 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]}`;
}
}
}
@@ -1558,17 +1629,17 @@ class SinglePageViewer extends HTMLElement {
}
} else {
// For issue view: Return just empty string (page number only)
return '';
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]}` : '';
return isPieceView ? `${urlMatch[1]} Nr. ${urlMatch[2]}` : "";
}
// Fallback - try to get from any visible page context
const anyPageIndicator = document.querySelector('.page-indicator');
const anyPageIndicator = document.querySelector(".page-indicator");
if (anyPageIndicator) {
const text = anyPageIndicator.textContent.trim();
const match = text.match(/(\d{4})\s+Nr\.\s+(\d+)/);
@@ -1583,21 +1654,21 @@ class SinglePageViewer extends HTMLElement {
}
// Register the web component
customElements.define('single-page-viewer', SinglePageViewer);
customElements.define("single-page-viewer", SinglePageViewer);
// 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
const viewer = document.querySelector('single-page-viewer');
if (viewer && viewer.style.display !== 'none') {
console.log('Cleaning up single page viewer before HTMX navigation');
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');
window.addEventListener("beforeunload", function () {
const viewer = document.querySelector("single-page-viewer");
if (viewer) {
viewer.destroy();
}