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

Slight page refactoring, text pages, tooltips

Browse Source
This commit is contained in:
Simon Martens
2025-02-22 00:11:25 +01:00
parent 0d79239fd8
commit 29576ec7a0
47 changed files with 2079 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
views/assets/scripts.js
View File

@@ -1,48 +1,48 @@
var _ = (i) => {
throw TypeError(i);
var _ = (s) => {
throw TypeError(s);
};
var L = (i, r, t) => r.has(i) || _("Cannot " + t);
var d = (i, r, t) => (L(i, r, "read from private field"), t ? t.call(i) : r.get(i)), o = (i, r, t) => r.has(i) ? _("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, t), a = (i, r, t, e) => (L(i, r, "write to private field"), e ? e.call(i, t) : r.set(i, t), t), u = (i, r, t) => (L(i, r, "access private method"), t);
const v = "script[xslt-onload]", b = "xslt-template", w = "xslt-transformed", k = "filter-list", f = "filter-list-list", y = "filter-list-item", A = "filter-list-input", m = "filter-list-searchable", F = "scroll-button";
var l, p, E;
class H {
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 $ {
constructor() {
o(this, p);
o(this, l);
n(this, f);
n(this, l);
a(this, l, /* @__PURE__ */ new Map());
}
setup() {
let r = htmx.findAll(v);
for (let t of r)
u(this, p, E).call(this, t);
let i = htmx.findAll(S);
for (let t of i)
u(this, f, x).call(this, t);
}
hookupHTMX() {
htmx.on("htmx:load", (r) => {
htmx.on("htmx:load", (i) => {
this.setup();
});
}
}
l = new WeakMap(), p = new WeakSet(), E = function(r) {
if (r.getAttribute(w) === "true" || !r.hasAttribute(b))
l = new WeakMap(), f = new WeakSet(), x = function(i) {
if (i.getAttribute(w) === "true" || !i.hasAttribute(b))
return;
let t = "#" + r.getAttribute(b), e = d(this, l).get(t);
let t = "#" + i.getAttribute(b), e = d(this, l).get(t);
if (!e) {
let c = htmx.find(t);
if (c) {
let x = c.innerHTML ? new DOMParser().parseFromString(c.innerHTML, "application/xml") : c.contentDocument;
e = new XSLTProcessor(), e.importStylesheet(x), d(this, l).set(t, e);
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);
} else
throw new Error("Unknown XSLT template: " + t);
}
let s = new DOMParser().parseFromString(r.innerHTML, "application/xml"), T = e.transformToFragment(s, document), S = new XMLSerializer().serializeToString(T);
r.outerHTML = S;
let r = new DOMParser().parseFromString(i.innerHTML, "application/xml"), T = e.transformToFragment(r, document), E = new XMLSerializer().serializeToString(T);
i.outerHTML = E;
};
var n, h, g;
var o, h, m;
class I extends HTMLElement {
constructor() {
super();
o(this, h);
o(this, n, !1);
n(this, h);
n(this, o, !1);
this._items = [], this._url = "", this._filterstart = !1, this._placeholder = "Liste filtern...", this.render();
}
static get observedAttributes() {
@@ -55,23 +55,23 @@ 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, n, !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 && 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));
}
attributeChangedCallback(t, e, s) {
t === "data-url" && e !== s && (this._url = s, this.render()), t === "data-filterstart" && e !== s && (this._filterstart = s === "true", this.render()), t === "data-placeholder" && e !== s && (this._placeholder = s, this.render());
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());
}
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, n, !1), this.renderList());
t.target && t.target.tagName.toLowerCase() === "input" && (a(this, o, !1), this.renderList());
}
onLoseFocus(t) {
let e = this.querySelector("input");
if (t.target && t.target === e) {
if (relatedElement = t.relatedTarget, relatedElement && this.contains(relatedElement))
return;
e.value = "", this._filter = "", this._filterstart && a(this, n, !0), this.renderList();
e.value = "", this._filter = "", this._filterstart && a(this, o, !0), this.renderList();
}
}
onEnter(t) {
@@ -84,10 +84,10 @@ class I extends HTMLElement {
mark() {
if (typeof Mark != "function")
return;
let t = this.querySelector("#" + f);
let t = this.querySelector("#" + p);
if (!t)
return;
let e = new Mark(t.querySelectorAll("." + m));
let e = new Mark(t.querySelectorAll("." + g));
this._filter && e.mark(this._filter, {
separateWordSearch: !0
});
@@ -124,10 +124,10 @@ class I extends HTMLElement {
}
getLinkText(t) {
let e = this.getSearchText(t);
return e === "" ? "" : `<span class="${m}">${e}</span>`;
return e === "" ? "" : `<span class="${g}">${e}</span>`;
}
renderList() {
let t = this.querySelector("#" + f);
let t = this.querySelector("#" + p);
t && (t.outerHTML = this.List()), this.mark();
}
render() {
@@ -139,7 +139,7 @@ class I extends HTMLElement {
`;
}
ActiveDot(t) {
return u(this, h, g).call(this, t), "";
return u(this, h, m).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>' : "";
@@ -164,16 +164,16 @@ class I extends HTMLElement {
t = this._items.filter((e) => this.getSearchText(e).toLowerCase().startsWith(this._filter.toLowerCase()));
else {
let e = this._filter.split(" ");
t = this._items.filter((s) => e.every((T) => this.getSearchText(s).toLowerCase().includes(T.toLowerCase())));
t = this._items.filter((r) => e.every((T) => this.getSearchText(r).toLowerCase().includes(T.toLowerCase())));
}
return `
<div id="${f}" class="${f} pt-1 min-h-[19rem] max-h-60 overflow-auto border-b border-zinc-300 bg-stone-50 ${d(this, n) ? "hidden" : ""}">
<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" : ""}">
${t.map(
(e, s) => `
(e, r) => `
<a
href="${this._url}${this.getHREF(e)}"
class="${y} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${s % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
${u(this, h, g).call(this, e) ? 'aria-current="page"' : ""}>
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)}
</a>
@@ -184,13 +184,13 @@ class I extends HTMLElement {
`;
}
}
n = new WeakMap(), h = new WeakSet(), g = function(t) {
o = new WeakMap(), h = new WeakSet(), m = function(t) {
if (!t)
return !1;
let e = this.getHREF(t);
return !(e === "" || !window.location.href.endsWith(e));
};
class M extends HTMLElement {
class B extends HTMLElement {
constructor() {
super(), this.handleScroll = this.handleScroll.bind(this), this.scrollToTop = this.scrollToTop.bind(this);
}
@@ -226,10 +226,112 @@ class M extends HTMLElement {
window.scrollTo({ top: 0, behavior: "smooth" });
}
}
customElements.define(k, I);
customElements.define(F, M);
class C extends HTMLElement {
static get observedAttributes() {
return ["position"];
}
constructor() {
super(), this._tooltipBox = null;
}
connectedCallback() {
this.style.position = "relative";
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 = [
"opacity-0",
"hidden",
"absolute",
"px-2",
"py-1",
"text-sm",
"text-white",
"bg-gray-900",
"rounded",
"shadow",
"z-10",
"whitespace-nowrap",
"transition-all",
"duration-200",
"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();
}
_showTooltip() {
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._tooltipBox.classList.add("hidden");
}, 200);
}, 100);
}
_updatePosition() {
switch (this._tooltipBox.classList.remove(
"bottom-full",
"left-1/2",
"-translate-x-1/2",
"mb-2",
// top
"top-full",
"mt-2",
// bottom
"right-full",
"-translate-y-1/2",
"mr-2",
"top-1/2",
// left
"left-full",
"ml-2"
// right
), this.getAttribute("position") || "top") {
case "bottom":
this._tooltipBox.classList.add(
"top-full",
"left-1/2",
"transform",
"-translate-x-1/2",
"mt-0.5"
);
break;
case "left":
this._tooltipBox.classList.add(
"right-full",
"top-1/2",
"transform",
"-translate-y-1/2",
"mr-0.5"
);
break;
case "right":
this._tooltipBox.classList.add(
"left-full",
"top-1/2",
"transform",
"-translate-y-1/2",
"ml-0.5"
);
break;
case "top":
default:
this._tooltipBox.classList.add(
"bottom-full",
"left-1/2",
"transform",
"-translate-x-1/2",
"mb-0.5"
);
}
}
}
customElements.define(y, I);
customElements.define(M, B);
customElements.define(F, C);
export {
I as FilterList,
M as ScrollButton,
H as XSLTParseProcess
B as ScrollButton,
$ as XSLTParseProcess
};