mirror of
https://github.com/Theodor-Springmann-Stiftung/musenalm.git
synced 2025-10-29 01:05:32 +00:00
Single person page + reihen list
This commit is contained in:
Simon Martens
@@ -1,48 +1,48 @@
|
||||
var _ = (s) => {
|
||||
var L = (s) => {
|
||||
throw TypeError(s);
|
||||
};
|
||||
var L = (s, i, t) => i.has(s) || _("Cannot " + t);
|
||||
var d = (s, i, t) => (L(s, i, "read from private field"), t ? t.call(s) : i.get(s)), n = (s, i, t) => i.has(s) ? _("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, t), a = (s, i, t, e) => (L(s, i, "write to private field"), e ? e.call(s, t) : i.set(s, t), t), u = (s, i, t) => (L(s, i, "access private method"), t);
|
||||
const S = "script[xslt-onload]", b = "xslt-template", w = "xslt-transformed", y = "filter-list", p = "filter-list-list", k = "filter-list-item", A = "filter-list-input", g = "filter-list-searchable", M = "scroll-button", F = "tool-tip";
|
||||
var l, f, x;
|
||||
class $ {
|
||||
var T = (s, e, t) => e.has(s) || L("Cannot " + t);
|
||||
var g = (s, e, t) => (T(s, e, "read from private field"), t ? t.call(s) : e.get(s)), c = (s, e, t) => e.has(s) ? L("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(s) : e.set(s, t), u = (s, e, t, i) => (T(s, e, "write to private field"), i ? i.call(s, t) : e.set(s, t), t), f = (s, e, t) => (T(s, e, "access private method"), t);
|
||||
const w = "script[xslt-onload]", v = "xslt-template", A = "xslt-transformed", k = "filter-list", m = "filter-list-list", M = "filter-list-item", y = "filter-list-input", x = "filter-list-searchable", B = "scroll-button", P = "tool-tip", I = "abbrev-tooltips";
|
||||
var h, b, E;
|
||||
class R {
|
||||
constructor() {
|
||||
n(this, f);
|
||||
n(this, l);
|
||||
a(this, l, /* @__PURE__ */ new Map());
|
||||
c(this, b);
|
||||
c(this, h);
|
||||
u(this, h, /* @__PURE__ */ new Map());
|
||||
}
|
||||
setup() {
|
||||
let i = htmx.findAll(S);
|
||||
for (let t of i)
|
||||
u(this, f, x).call(this, t);
|
||||
let e = htmx.findAll(w);
|
||||
for (let t of e)
|
||||
f(this, b, E).call(this, t);
|
||||
}
|
||||
hookupHTMX() {
|
||||
htmx.on("htmx:load", (i) => {
|
||||
htmx.on("htmx:load", (e) => {
|
||||
this.setup();
|
||||
});
|
||||
}
|
||||
}
|
||||
l = new WeakMap(), f = new WeakSet(), x = function(i) {
|
||||
if (i.getAttribute(w) === "true" || !i.hasAttribute(b))
|
||||
h = new WeakMap(), b = new WeakSet(), E = function(e) {
|
||||
if (e.getAttribute(A) === "true" || !e.hasAttribute(v))
|
||||
return;
|
||||
let t = "#" + i.getAttribute(b), e = d(this, l).get(t);
|
||||
if (!e) {
|
||||
let c = htmx.find(t);
|
||||
if (c) {
|
||||
let v = c.innerHTML ? new DOMParser().parseFromString(c.innerHTML, "application/xml") : c.contentDocument;
|
||||
e = new XSLTProcessor(), e.importStylesheet(v), d(this, l).set(t, e);
|
||||
let t = "#" + e.getAttribute(v), i = g(this, h).get(t);
|
||||
if (!i) {
|
||||
let l = htmx.find(t);
|
||||
if (l) {
|
||||
let S = l.innerHTML ? new DOMParser().parseFromString(l.innerHTML, "application/xml") : l.contentDocument;
|
||||
i = new XSLTProcessor(), i.importStylesheet(S), g(this, h).set(t, i);
|
||||
} else
|
||||
throw new Error("Unknown XSLT template: " + t);
|
||||
}
|
||||
let r = new DOMParser().parseFromString(i.innerHTML, "application/xml"), T = e.transformToFragment(r, document), E = new XMLSerializer().serializeToString(T);
|
||||
i.outerHTML = E;
|
||||
let r = new DOMParser().parseFromString(e.innerHTML, "application/xml"), n = i.transformToFragment(r, document), a = new XMLSerializer().serializeToString(n);
|
||||
e.outerHTML = a;
|
||||
};
|
||||
var o, h, m;
|
||||
class I extends HTMLElement {
|
||||
var o, p, _;
|
||||
class H extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
n(this, h);
|
||||
n(this, o, !1);
|
||||
c(this, p);
|
||||
c(this, o, !1);
|
||||
this._items = [], this._url = "", this._filterstart = !1, this._placeholder = "Liste filtern...", this.render();
|
||||
}
|
||||
static get observedAttributes() {
|
||||
@@ -55,40 +55,40 @@ class I extends HTMLElement {
|
||||
return this._items;
|
||||
}
|
||||
connectedCallback() {
|
||||
this._url = this.getAttribute("data-url") || "./", this._filterstart = this.getAttribute("data-filterstart") === "true", this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...", this._filterstart && a(this, o, !0), this.addEventListener("input", this.onInput.bind(this)), this.addEventListener("keydown", this.onEnter.bind(this)), this.addEventListener("focusin", this.onGainFocus.bind(this)), this.addEventListener("focusout", this.onLoseFocus.bind(this));
|
||||
this._url = this.getAttribute("data-url") || "./", this._filterstart = this.getAttribute("data-filterstart") === "true", this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...", this._filterstart && u(this, o, !0), this.addEventListener("input", this.onInput.bind(this)), this.addEventListener("keydown", this.onEnter.bind(this)), this.addEventListener("focusin", this.onGainFocus.bind(this)), this.addEventListener("focusout", this.onLoseFocus.bind(this));
|
||||
}
|
||||
attributeChangedCallback(t, e, r) {
|
||||
t === "data-url" && e !== r && (this._url = r, this.render()), t === "data-filterstart" && e !== r && (this._filterstart = r === "true", this.render()), t === "data-placeholder" && e !== r && (this._placeholder = r, this.render());
|
||||
attributeChangedCallback(t, i, r) {
|
||||
t === "data-url" && i !== r && (this._url = r, this.render()), t === "data-filterstart" && i !== r && (this._filterstart = r === "true", this.render()), t === "data-placeholder" && i !== r && (this._placeholder = r, this.render());
|
||||
}
|
||||
onInput(t) {
|
||||
t.target && t.target.tagName.toLowerCase() === "input" && (this._filter = t.target.value, this.renderList());
|
||||
}
|
||||
onGainFocus(t) {
|
||||
t.target && t.target.tagName.toLowerCase() === "input" && (a(this, o, !1), this.renderList());
|
||||
t.target && t.target.tagName.toLowerCase() === "input" && (u(this, o, !1), this.renderList());
|
||||
}
|
||||
onLoseFocus(t) {
|
||||
let e = this.querySelector("input");
|
||||
if (t.target && t.target === e) {
|
||||
let i = this.querySelector("input");
|
||||
if (t.target && t.target === i) {
|
||||
if (relatedElement = t.relatedTarget, relatedElement && this.contains(relatedElement))
|
||||
return;
|
||||
e.value = "", this._filter = "", this._filterstart && a(this, o, !0), this.renderList();
|
||||
i.value = "", this._filter = "", this._filterstart && u(this, o, !0), this.renderList();
|
||||
}
|
||||
}
|
||||
onEnter(t) {
|
||||
if (t.target && t.target.tagName.toLowerCase() === "input" && t.key === "Enter") {
|
||||
t.preventDefault();
|
||||
const e = this.querySelector("a");
|
||||
e && e.click();
|
||||
const i = this.querySelector("a");
|
||||
i && i.click();
|
||||
}
|
||||
}
|
||||
mark() {
|
||||
if (typeof Mark != "function")
|
||||
return;
|
||||
let t = this.querySelector("#" + p);
|
||||
let t = this.querySelector("#" + m);
|
||||
if (!t)
|
||||
return;
|
||||
let e = new Mark(t.querySelectorAll("." + g));
|
||||
this._filter && e.mark(this._filter, {
|
||||
let i = new Mark(t.querySelectorAll("." + x));
|
||||
this._filter && i.mark(this._filter, {
|
||||
separateWordSearch: !0
|
||||
});
|
||||
}
|
||||
@@ -123,11 +123,11 @@ class I extends HTMLElement {
|
||||
return t.name;
|
||||
}
|
||||
getLinkText(t) {
|
||||
let e = this.getSearchText(t);
|
||||
return e === "" ? "" : `<span class="${g}">${e}</span>`;
|
||||
let i = this.getSearchText(t);
|
||||
return i === "" ? "" : `<span class="${x}">${i}</span>`;
|
||||
}
|
||||
renderList() {
|
||||
let t = this.querySelector("#" + p);
|
||||
let t = this.querySelector("#" + m);
|
||||
t && (t.outerHTML = this.List()), this.mark();
|
||||
}
|
||||
render() {
|
||||
@@ -139,7 +139,7 @@ class I extends HTMLElement {
|
||||
`;
|
||||
}
|
||||
ActiveDot(t) {
|
||||
return u(this, h, m).call(this, t), "";
|
||||
return f(this, p, _).call(this, t), "";
|
||||
}
|
||||
NoItems(t) {
|
||||
return t.length === 0 ? '<div class="px-2 py-0.5 italic text-gray-500">Keine Einträge gefunden</div>' : "";
|
||||
@@ -152,7 +152,7 @@ class I extends HTMLElement {
|
||||
<input
|
||||
type="text"
|
||||
placeholder="${this._placeholder}"
|
||||
class="${A} w-full placeholder:italic px-2 py-0.5" />
|
||||
class="${y} w-full placeholder:italic px-2 py-0.5" />
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -161,21 +161,21 @@ class I extends HTMLElement {
|
||||
let t = this._items;
|
||||
if (this._filter)
|
||||
if (this._filterstart)
|
||||
t = this._items.filter((e) => this.getSearchText(e).toLowerCase().startsWith(this._filter.toLowerCase()));
|
||||
t = this._items.filter((i) => this.getSearchText(i).toLowerCase().startsWith(this._filter.toLowerCase()));
|
||||
else {
|
||||
let e = this._filter.split(" ");
|
||||
t = this._items.filter((r) => e.every((T) => this.getSearchText(r).toLowerCase().includes(T.toLowerCase())));
|
||||
let i = this._filter.split(" ");
|
||||
t = this._items.filter((r) => i.every((n) => this.getSearchText(r).toLowerCase().includes(n.toLowerCase())));
|
||||
}
|
||||
return `
|
||||
<div id="${p}" class="${p} pt-1 min-h-[19rem] max-h-60 overflow-auto border-b border-zinc-300 bg-stone-50 ${d(this, o) ? "hidden" : ""}">
|
||||
<div id="${m}" class="${m} pt-1 min-h-[19rem] max-h-60 overflow-auto border-b border-zinc-300 bg-stone-50 ${g(this, o) ? "hidden" : ""}">
|
||||
${t.map(
|
||||
(e, r) => `
|
||||
(i, r) => `
|
||||
<a
|
||||
href="${this._url}${this.getHREF(e)}"
|
||||
class="${k} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${r % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
|
||||
${u(this, h, m).call(this, e) ? 'aria-current="page"' : ""}>
|
||||
${this.ActiveDot(e)}
|
||||
${this.getLinkText(e)}
|
||||
href="${this._url}${this.getHREF(i)}"
|
||||
class="${M} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${r % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
|
||||
${f(this, p, _).call(this, i) ? 'aria-current="page"' : ""}>
|
||||
${this.ActiveDot(i)}
|
||||
${this.getLinkText(i)}
|
||||
</a>
|
||||
`
|
||||
).join("")}
|
||||
@@ -184,13 +184,13 @@ class I extends HTMLElement {
|
||||
`;
|
||||
}
|
||||
}
|
||||
o = new WeakMap(), h = new WeakSet(), m = function(t) {
|
||||
o = new WeakMap(), p = new WeakSet(), _ = function(t) {
|
||||
if (!t)
|
||||
return !1;
|
||||
let e = this.getHREF(t);
|
||||
return !(e === "" || !window.location.href.endsWith(e));
|
||||
let i = this.getHREF(t);
|
||||
return !(i === "" || !window.location.href.endsWith(i));
|
||||
};
|
||||
class B extends HTMLElement {
|
||||
class C extends HTMLElement {
|
||||
constructor() {
|
||||
super(), this.handleScroll = this.handleScroll.bind(this), this.scrollToTop = this.scrollToTop.bind(this);
|
||||
}
|
||||
@@ -226,12 +226,12 @@ class B extends HTMLElement {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
}
|
||||
class C extends HTMLElement {
|
||||
class F extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ["position"];
|
||||
return ["position", "timeout"];
|
||||
}
|
||||
constructor() {
|
||||
super(), this._tooltipBox = null;
|
||||
super(), this._tooltipBox = null, this._timeout = 200, this._hideTimeout = null, this._hiddenTimeout = null;
|
||||
}
|
||||
connectedCallback() {
|
||||
this.classList.add(
|
||||
@@ -242,8 +242,8 @@ class C extends HTMLElement {
|
||||
"leading-none",
|
||||
"[&>*]:leading-normal"
|
||||
);
|
||||
const i = this.querySelector(".data-tip"), t = i ? i.innerHTML : "Tooltip";
|
||||
i && i.remove(), this._tooltipBox = document.createElement("div"), this._tooltipBox.innerHTML = t, this._tooltipBox.className = [
|
||||
const e = this.querySelector(".data-tip"), t = e ? e.innerHTML : "Tooltip";
|
||||
e && e.remove(), this._tooltipBox = document.createElement("div"), this._tooltipBox.innerHTML = t, this._tooltipBox.className = [
|
||||
"opacity-0",
|
||||
"hidden",
|
||||
"absolute",
|
||||
@@ -261,20 +261,20 @@ class C extends HTMLElement {
|
||||
"font-sans"
|
||||
].join(" "), this.appendChild(this._tooltipBox), this._updatePosition(), this.addEventListener("mouseenter", () => this._showTooltip()), this.addEventListener("mouseleave", () => this._hideTooltip());
|
||||
}
|
||||
attributeChangedCallback(i, t, e) {
|
||||
i === "position" && this._tooltipBox && this._updatePosition();
|
||||
attributeChangedCallback(e, t, i) {
|
||||
e === "position" && this._tooltipBox && this._updatePosition(), e === "timeout" && i && (this._timeout = parseInt(i) || 200);
|
||||
}
|
||||
_showTooltip() {
|
||||
this._tooltipBox.classList.remove("hidden"), setTimeout(() => {
|
||||
clearTimeout(this._hideTimeout), clearTimeout(this._hiddenTimeout), this._tooltipBox.classList.remove("hidden"), setTimeout(() => {
|
||||
this._tooltipBox.classList.remove("opacity-0"), this._tooltipBox.classList.add("opacity-100");
|
||||
}, 16);
|
||||
}
|
||||
_hideTooltip() {
|
||||
setTimeout(() => {
|
||||
this._tooltipBox.classList.remove("opacity-100"), this._tooltipBox.classList.add("opacity-0"), setTimeout(() => {
|
||||
this._hideTimeout = setTimeout(() => {
|
||||
this._tooltipBox.classList.remove("opacity-100"), this._tooltipBox.classList.add("opacity-0"), this._hiddenTimeout = setTimeout(() => {
|
||||
this._tooltipBox.classList.add("hidden");
|
||||
}, 200);
|
||||
}, 100);
|
||||
}, this._timeout + 100);
|
||||
}, this._timeout);
|
||||
}
|
||||
_updatePosition() {
|
||||
switch (this._tooltipBox.classList.remove(
|
||||
@@ -334,11 +334,142 @@ class C extends HTMLElement {
|
||||
}
|
||||
}
|
||||
}
|
||||
customElements.define(y, I);
|
||||
customElements.define(M, B);
|
||||
customElements.define(F, C);
|
||||
class d extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ["data-text", "data-abbrevmap"];
|
||||
}
|
||||
static get defaultAbbrevMap() {
|
||||
return {
|
||||
"#": "Hinweis auf weitere Informationen in der Anmerkung.",
|
||||
$: "vermutlich",
|
||||
"+++": "Inhalte aus mehreren Almanachen interpoliert",
|
||||
B: "Blatt",
|
||||
BB: "Blätter",
|
||||
C: "Corrigenda",
|
||||
Diagr: "Diagramm",
|
||||
G: "Graphik",
|
||||
"G-Verz": "Verzeichnis der Kupfer u. ä.",
|
||||
GG: "Graphiken",
|
||||
Hrsg: "Herausgeber",
|
||||
"I-Verz": "Inhaltsverzeichnis",
|
||||
Kal: "Kalendarium",
|
||||
Kr: "Karte",
|
||||
MusB: "Musikbeigabe",
|
||||
MusBB: "Musikbeigaben",
|
||||
S: "Seite",
|
||||
SS: "Seiten",
|
||||
Sp: "Spiegel",
|
||||
T: "Titel",
|
||||
TG: "Titelgraphik, Titelportrait etc",
|
||||
"TG r": "Titelgraphik, Titelportrait etc recto",
|
||||
"TG v": "Titelgraphik, Titelportrait etc verso",
|
||||
Tab: "Tabelle",
|
||||
UG: "Umschlaggraphik",
|
||||
"UG r": "Umschlaggraphik recto",
|
||||
"UG v": "Umschlaggraphik verso",
|
||||
VB: "Vorsatzblatt",
|
||||
Vf: "Verfasser",
|
||||
VrlgM: "Verlagsmitteilung",
|
||||
Vrwrt: "Vorwort",
|
||||
ar: "arabische Paginierung",
|
||||
ar1: "erste arabische Paginierung",
|
||||
ar2: "zweite arabische Paginierung",
|
||||
ar3: "dritte arabische Paginierung",
|
||||
ar4: "vierte arabische Paginierung",
|
||||
ar5: "fünfte arabische Paginierung",
|
||||
ar6: "sechste arabische Paginierung",
|
||||
ar7: "siebte arabische Paginierung",
|
||||
gA: "graphische Anleitung",
|
||||
gT: "graphischer Titel",
|
||||
gTzA: "graphische Tanzanleitung",
|
||||
nT: "Nachtitel",
|
||||
röm: "römische Paginierung",
|
||||
röm1: "erste römische Paginierung",
|
||||
röm2: "zweite römische Paginierung",
|
||||
röm3: "dritte römische Paginierung",
|
||||
röm4: "vierte römische Paginierung",
|
||||
röm5: "fünfte römische Paginierung",
|
||||
röm6: "sechste römische Paginierung",
|
||||
röm7: "siebte römische Paginierung",
|
||||
vT: "Vortitel",
|
||||
zT: "Zwischentitel",
|
||||
"§§": "Hinweis auf Mängel im Almanach (Beschädigungen, fehlende Graphiken, unvollständige Sammlungen etc) in der Anmerkung"
|
||||
};
|
||||
}
|
||||
constructor() {
|
||||
super(), this._abbrevMap = d.defaultAbbrevMap;
|
||||
}
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
}
|
||||
attributeChangedCallback(e, t, i) {
|
||||
t !== i && (e === "data-abbrevmap" && this._parseAndSetAbbrevMap(i), this.render());
|
||||
}
|
||||
_parseAndSetAbbrevMap(e) {
|
||||
if (!e) {
|
||||
this._abbrevMap = d.defaultAbbrevMap;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
this._abbrevMap = JSON.parse(e);
|
||||
} catch {
|
||||
this._abbrevMap = d.defaultAbbrevMap;
|
||||
}
|
||||
}
|
||||
setAbbrevMap(e) {
|
||||
typeof e == "object" && e !== null && (this._abbrevMap = e, this.render());
|
||||
}
|
||||
get text() {
|
||||
return this.getAttribute("data-text") || "";
|
||||
}
|
||||
set text(e) {
|
||||
this.setAttribute("data-text", e);
|
||||
}
|
||||
render() {
|
||||
this.innerHTML = this.transformText(this.text, this._abbrevMap);
|
||||
}
|
||||
transformText(e, t) {
|
||||
let i = "", r = 0;
|
||||
for (; r < e.length; ) {
|
||||
if (r > 0 && !this.isSpaceOrPunct(e[r - 1])) {
|
||||
i += e[r], r++;
|
||||
continue;
|
||||
}
|
||||
const n = this.findLongestAbbrevAt(e, r, t);
|
||||
if (n) {
|
||||
const { match: a, meaning: l } = n;
|
||||
i += `
|
||||
<tool-tip position="top" class="!inline" timeout="300">
|
||||
<div class="data-tip p-2 text-sm text-white bg-gray-700 rounded shadow">
|
||||
${l}
|
||||
</div>
|
||||
<span class="cursor-help text-blue-900 hover:text-slate-800">
|
||||
${a}
|
||||
</span>
|
||||
</tool-tip>
|
||||
`, r += a.length;
|
||||
} else
|
||||
i += e[r], r++;
|
||||
}
|
||||
return i;
|
||||
}
|
||||
findLongestAbbrevAt(e, t, i) {
|
||||
let r = null, n = 0;
|
||||
for (const a of Object.keys(i))
|
||||
e.startsWith(a, t) && a.length > n && (r = a, n = a.length);
|
||||
return r ? { match: r, meaning: i[r] } : null;
|
||||
}
|
||||
isSpaceOrPunct(e) {
|
||||
return /\s|[.,;:!?]/.test(e);
|
||||
}
|
||||
}
|
||||
customElements.define(I, d);
|
||||
customElements.define(k, H);
|
||||
customElements.define(B, C);
|
||||
customElements.define(P, F);
|
||||
export {
|
||||
I as FilterList,
|
||||
B as ScrollButton,
|
||||
$ as XSLTParseProcess
|
||||
d as AbbreviationTooltips,
|
||||
H as FilterList,
|
||||
C as ScrollButton,
|
||||
R as XSLTParseProcess
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user