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

Titel

Browse Source
This commit is contained in:
Simon Martens
2025-06-04 13:31:30 +02:00
parent 4cf1c2ffd3
commit dccc3ed8ca
5 changed files with 421 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

435
views/assets/scripts.js
View File

@@ -1,11 +1,11 @@
var et = Object.defineProperty; var ut = Object.defineProperty;
var w = (l) => { var O = (l) => {
throw TypeError(l); throw TypeError(l);
}; };
var it = (l, i, t) => i in l ? et(l, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[i] = t; var mt = (l, i, t) => i in l ? ut(l, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[i] = t;
var u = (l, i, t) => it(l, typeof i != "symbol" ? i + "" : i, t), S = (l, i, t) => i.has(l) || w("Cannot " + t); var u = (l, i, t) => mt(l, typeof i != "symbol" ? i + "" : i, t), v = (l, i, t) => i.has(l) || O("Cannot " + t);
var v = (l, i, t) => (S(l, i, "read from private field"), t ? t.call(l) : i.get(l)), _ = (l, i, t) => i.has(l) ? w("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(l) : i.set(l, t), f = (l, i, t, e) => (S(l, i, "write to private field"), e ? e.call(l, t) : i.set(l, t), t), L = (l, i, t) => (S(l, i, "access private method"), t); var L = (l, i, t) => (v(l, i, "read from private field"), t ? t.call(l) : i.get(l)), f = (l, i, t) => i.has(l) ? O("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(l) : i.set(l, t), g = (l, i, t, e) => (v(l, i, "write to private field"), e ? e.call(l, t) : i.set(l, t), t), I = (l, i, t) => (v(l, i, "access private method"), t);
class st extends HTMLElement { class pt extends HTMLElement {
constructor() { constructor() {
super(), this._value = "", this.render(); super(), this._value = "", this.render();
} }
@@ -74,13 +74,13 @@ class st extends HTMLElement {
`; `;
} }
} }
const g = "filter-list-list", nt = "filter-list-item", lt = "filter-list-input", x = "filter-list-searchable"; const E = "filter-list-list", _t = "filter-list-item", ft = "filter-list-input", B = "filter-list-searchable";
var h, m, y; var d, _, k;
class at extends HTMLElement { class gt extends HTMLElement {
constructor() { constructor() {
super(); super();
_(this, m); f(this, _);
_(this, h, !1); f(this, d, !1);
this._items = [], this._url = "", this._filterstart = !1, this._placeholder = "Liste filtern...", this._queryparam = "", this._startparams = null, this.render(); this._items = [], this._url = "", this._filterstart = !1, this._placeholder = "Liste filtern...", this._queryparam = "", this._startparams = null, this.render();
} }
static get observedAttributes() { static get observedAttributes() {
@@ -93,7 +93,7 @@ class at extends HTMLElement {
return this._items; return this._items;
} }
connectedCallback() { connectedCallback() {
this._url = this.getAttribute("data-url") || "./", this._filterstart = this.getAttribute("data-filterstart") === "true", this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...", this._queryparam = this.getAttribute("data-queryparam") || "", this._queryparam, this._filterstart && f(this, h, !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._queryparam = this.getAttribute("data-queryparam") || "", this._queryparam, this._filterstart && g(this, d, !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) { 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()), t === "data-queryparam" && e !== s && (this._queryparam = s, this.render()); 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()), t === "data-queryparam" && e !== s && (this._queryparam = s, this.render());
@@ -102,14 +102,14 @@ class at extends HTMLElement {
t.target && t.target.tagName.toLowerCase() === "input" && (this._filter = t.target.value, this.renderList()); t.target && t.target.tagName.toLowerCase() === "input" && (this._filter = t.target.value, this.renderList());
} }
onGainFocus(t) { onGainFocus(t) {
t.target && t.target.tagName.toLowerCase() === "input" && (f(this, h, !1), this.renderList()); t.target && t.target.tagName.toLowerCase() === "input" && (g(this, d, !1), this.renderList());
} }
onLoseFocus(t) { onLoseFocus(t) {
let e = this.querySelector("input"); let e = this.querySelector("input");
if (t.target && t.target === e) { if (t.target && t.target === e) {
if (relatedElement = t.relatedTarget, relatedElement && this.contains(relatedElement)) if (relatedElement = t.relatedTarget, relatedElement && this.contains(relatedElement))
return; return;
e.value = "", this._filter = "", this._filterstart && f(this, h, !0), this.renderList(); e.value = "", this._filter = "", this._filterstart && g(this, d, !0), this.renderList();
} }
} }
onEnter(t) { onEnter(t) {
@@ -122,10 +122,10 @@ class at extends HTMLElement {
mark() { mark() {
if (typeof Mark != "function") if (typeof Mark != "function")
return; return;
let t = this.querySelector("#" + g); let t = this.querySelector("#" + E);
if (!t) if (!t)
return; return;
let e = new Mark(t.querySelectorAll("." + x)); let e = new Mark(t.querySelectorAll("." + B));
this._filter && e.mark(this._filter, { this._filter && e.mark(this._filter, {
separateWordSearch: !0 separateWordSearch: !0
}); });
@@ -165,7 +165,7 @@ class at extends HTMLElement {
} }
getLinkText(t) { getLinkText(t) {
let e = this.getSearchText(t); let e = this.getSearchText(t);
return e === "" ? "" : `<span class="${x}">${e}</span>`; return e === "" ? "" : `<span class="${B}">${e}</span>`;
} }
getURL(t) { getURL(t) {
if (this._queryparam) { if (this._queryparam) {
@@ -175,7 +175,7 @@ class at extends HTMLElement {
return this._url + this.getHREFEncoded(t); return this._url + this.getHREFEncoded(t);
} }
renderList() { renderList() {
let t = this.querySelector("#" + g); let t = this.querySelector("#" + E);
t && (t.outerHTML = this.List()), this.mark(); t && (t.outerHTML = this.List()), this.mark();
} }
render() { render() {
@@ -187,7 +187,7 @@ class at extends HTMLElement {
`, htmx && htmx.process(this); `, htmx && htmx.process(this);
} }
ActiveDot(t) { ActiveDot(t) {
return L(this, m, y).call(this, t), ""; return I(this, _, k).call(this, t), "";
} }
NoItems(t) { NoItems(t) {
return t.length === 0 ? '<div class="px-2 py-0.5 italic text-gray-500">Keine Einträge gefunden</div>' : ""; return t.length === 0 ? '<div class="px-2 py-0.5 italic text-gray-500">Keine Einträge gefunden</div>' : "";
@@ -200,7 +200,7 @@ class at extends HTMLElement {
<input <input
type="text" type="text"
placeholder="${this._placeholder}" placeholder="${this._placeholder}"
class="${lt} w-full placeholder:italic px-2 py-0.5" /> class="${ft} w-full placeholder:italic px-2 py-0.5" />
</div> </div>
</div> </div>
`; `;
@@ -215,7 +215,7 @@ class at extends HTMLElement {
t = this._items.filter((s) => e.every((n) => this.getSearchText(s).toLowerCase().includes(n.toLowerCase()))); t = this._items.filter((s) => e.every((n) => this.getSearchText(s).toLowerCase().includes(n.toLowerCase())));
} }
return ` return `
<div id="${g}" class="${g} pt-1 max-h-60 overflow-auto bg-stone-50 ${v(this, h) ? "hidden" : ""}"> <div id="${E}" class="${E} pt-1 max-h-60 overflow-auto bg-stone-50 ${L(this, d) ? "hidden" : ""}">
${t.map( ${t.map(
(e, s) => ` (e, s) => `
<a <a
@@ -224,8 +224,8 @@ class at extends HTMLElement {
hx-swap="outerHTML show:none" hx-swap="outerHTML show:none"
hx-select="main" hx-select="main"
hx-target="main" hx-target="main"
class="${nt} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${s % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}" class="${_t} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${s % 2 === 0 ? "bg-stone-100" : "bg-stone-50"}"
${L(this, m, y).call(this, e) ? 'aria-current="page"' : ""}> ${I(this, _, k).call(this, e) ? 'aria-current="page"' : ""}>
${this.ActiveDot(e)} ${this.ActiveDot(e)}
${this.getLinkText(e)} ${this.getLinkText(e)}
</a> </a>
@@ -236,13 +236,13 @@ class at extends HTMLElement {
`; `;
} }
} }
h = new WeakMap(), m = new WeakSet(), y = function(t) { d = new WeakMap(), _ = new WeakSet(), k = function(t) {
if (!t) if (!t)
return !1; return !1;
let e = this.getHREF(t); let e = this.getHREF(t);
return e === "" ? !1 : this._queryparam && (new URLSearchParams(window.location.search).get(this._queryparam) || "") === e ? !0 : !!window.location.href.endsWith(e); return e === "" ? !1 : this._queryparam && (new URLSearchParams(window.location.search).get(this._queryparam) || "") === e ? !0 : !!window.location.href.endsWith(e);
}; };
class rt extends HTMLElement { class Et extends HTMLElement {
constructor() { constructor() {
super(), this.handleScroll = this.handleScroll.bind(this), this.scrollToTop = this.scrollToTop.bind(this); super(), this.handleScroll = this.handleScroll.bind(this), this.scrollToTop = this.scrollToTop.bind(this);
} }
@@ -278,7 +278,7 @@ class rt extends HTMLElement {
window.scrollTo({ top: 0, behavior: "smooth" }); window.scrollTo({ top: 0, behavior: "smooth" });
} }
} }
class ot extends HTMLElement { class bt extends HTMLElement {
static get observedAttributes() { static get observedAttributes() {
return ["position", "timeout"]; return ["position", "timeout"];
} }
@@ -379,7 +379,7 @@ class ot extends HTMLElement {
} }
} }
} }
class ht extends HTMLElement { class St extends HTMLElement {
constructor() { constructor() {
super(), this.overlay = null, this._others = null, this._thisindex = -1, this._preview = null, this._description = null, this._imageURL = "", this._hideDLButton = !1; super(), this.overlay = null, this._others = null, this._thisindex = -1, this._preview = null, this._description = null, this._imageURL = "", this._hideDLButton = !1;
} }
@@ -487,7 +487,7 @@ class ht extends HTMLElement {
this.overlay.parentNode.removeChild(this.overlay), this.overlay = null; this.overlay.parentNode.removeChild(this.overlay), this.overlay = null;
} }
} }
class dt extends HTMLElement { class vt extends HTMLElement {
static get observedAttributes() { static get observedAttributes() {
} }
constructor() { constructor() {
@@ -704,7 +704,7 @@ class p extends HTMLElement {
return /\s|[.,;:!?]/.test(i); return /\s|[.,;:!?]/.test(i);
} }
} }
class ct extends HTMLElement { class Lt extends HTMLElement {
constructor() { constructor() {
super(); super();
} }
@@ -722,11 +722,11 @@ class ct extends HTMLElement {
} }
} }
} }
var E; var S;
class ut extends HTMLElement { class It extends HTMLElement {
constructor() { constructor() {
super(); super();
_(this, E, 176); f(this, S, 176);
this._images = []; this._images = [];
} }
connectedCallback() { connectedCallback() {
@@ -742,14 +742,14 @@ class ut extends HTMLElement {
calculateShownImages() { calculateShownImages() {
const t = this.getBoundingClientRect(); const t = this.getBoundingClientRect();
console.log(t); console.log(t);
const e = Math.floor(t.width / (v(this, E) + 10)); const e = Math.floor(t.width / (L(this, S) + 10));
for (let s = 0; s < this._images.length; s++) for (let s = 0; s < this._images.length; s++)
s < e - 1 ? this._images[s].classList.remove("hidden") : this._images[s].classList.add("hidden"); s < e - 1 ? this._images[s].classList.remove("hidden") : this._images[s].classList.add("hidden");
} }
} }
E = new WeakMap(); S = new WeakMap();
const pt = "msr-component-wrapper", O = "msr-selected-items-container", k = "msr-placeholder-no-selection-text", mt = "msr-selected-item-pill", _t = "msr-selected-item-text", ft = "msr-item-name", gt = "msr-item-additional-data", bt = "msr-selected-item-role", M = "msr-selected-item-delete-btn", Et = "msr-controls-area", R = "msr-pre-add-button", B = "msr-input-area-wrapper", b = "msr-input-area-default-border", I = "msr-input-area-staged", $ = "msr-staging-area-container", St = "msr-staged-item-pill", vt = "msr-staged-item-text", A = "msr-staged-role-select", P = "msr-staged-cancel-btn", N = "msr-text-input", D = "msr-add-button", H = "msr-options-list", q = "msr-option-item", Lt = "msr-option-item-name", It = "msr-option-item-detail", U = "msr-option-item-highlighted", C = "msr-hidden-select", At = "msr-state-no-selection", Ct = "msr-state-has-selection", Tt = "msr-state-list-open", yt = "msr-state-item-staged"; const At = "msr-component-wrapper", R = "msr-selected-items-container", $ = "msr-placeholder-no-selection-text", Tt = "msr-selected-item-pill", Ct = "msr-selected-item-text", yt = "msr-item-name", wt = "msr-item-additional-data", xt = "msr-selected-item-role", P = "msr-selected-item-delete-btn", Mt = "msr-controls-area", N = "msr-pre-add-button", D = "msr-input-area-wrapper", b = "msr-input-area-default-border", A = "msr-input-area-staged", H = "msr-staging-area-container", kt = "msr-staged-item-pill", Ot = "msr-staged-item-text", T = "msr-staged-role-select", q = "msr-staged-cancel-btn", U = "msr-text-input", F = "msr-add-button", V = "msr-options-list", W = "msr-option-item", Bt = "msr-option-item-name", Rt = "msr-option-item-detail", G = "msr-option-item-highlighted", C = "msr-hidden-select", $t = "msr-state-no-selection", Pt = "msr-state-has-selection", Nt = "msr-state-list-open", Dt = "msr-state-item-staged";
class X extends HTMLElement { class ot extends HTMLElement {
constructor() { constructor() {
super(); super();
u(this, "_blurTimeout", null); u(this, "_blurTimeout", null);
@@ -828,23 +828,23 @@ class X extends HTMLElement {
} }
_setupTemplates() { _setupTemplates() {
this.optionTemplate = document.createElement("template"), this.optionTemplate.innerHTML = ` this.optionTemplate = document.createElement("template"), this.optionTemplate.innerHTML = `
<li role="option" class="${q} group"> <li role="option" class="${W} group">
<span data-ref="nameEl" class="${Lt}"></span> <span data-ref="nameEl" class="${Bt}"></span>
<span data-ref="detailEl" class="${It}"></span> <span data-ref="detailEl" class="${Rt}"></span>
</li> </li>
`, this.selectedItemTemplate = document.createElement("template"), this.selectedItemTemplate.innerHTML = ` `, this.selectedItemTemplate = document.createElement("template"), this.selectedItemTemplate.innerHTML = `
<span class="${mt} group"> <span class="${Tt} group">
<span data-ref="textEl" class="${_t}"></span> <span data-ref="textEl" class="${Ct}"></span>
<button type="button" data-ref="deleteBtn" class="${M} ml-2">&times;</button> <button type="button" data-ref="deleteBtn" class="${P} ml-2">&times;</button>
</span> </span>
`, this.stagedPlacePillTemplate = document.createElement("template"), this.stagedPlacePillTemplate.innerHTML = ` `, this.stagedPlacePillTemplate = document.createElement("template"), this.stagedPlacePillTemplate.innerHTML = `
<span class="${St} flex items-center"> <span class="${kt} flex items-center">
<span data-ref="nameEl" class="${vt}"></span> <span data-ref="nameEl" class="${Ot}"></span>
</span> </span>
`, this.stagedCancelBtnTemplate = document.createElement("template"), this.stagedCancelBtnTemplate.innerHTML = ` `, this.stagedCancelBtnTemplate = document.createElement("template"), this.stagedCancelBtnTemplate.innerHTML = `
<button type="button" class="${P} flex items-center justify-center">&times;</button> <button type="button" class="${q} flex items-center justify-center">&times;</button>
`, this.stagedRoleSelectTemplate = document.createElement("template"), this.stagedRoleSelectTemplate.innerHTML = ` `, this.stagedRoleSelectTemplate = document.createElement("template"), this.stagedRoleSelectTemplate.innerHTML = `
<select class="${A}"> <select class="${T}">
</select> </select>
`; `;
} }
@@ -883,9 +883,9 @@ class X extends HTMLElement {
if (typeof a == "string") { if (typeof a == "string") {
const r = a.split(","); const r = a.split(",");
if (r.length === 2) { if (r.length === 2) {
const o = r[0].trim(), d = r[1].trim(); const o = r[0].trim(), h = r[1].trim();
if (this._getItemById(o) && this._roles.includes(d)) if (this._getItemById(o) && this._roles.includes(h))
return { itemId: o, role: d, instanceId: crypto.randomUUID() }; return { itemId: o, role: h, instanceId: crypto.randomUUID() };
} }
} }
return null; return null;
@@ -906,7 +906,7 @@ class X extends HTMLElement {
this.setAttribute("name", t), this.hiddenSelect && (this.hiddenSelect.name = t); this.setAttribute("name", t), this.hiddenSelect && (this.hiddenSelect.name = t);
} }
connectedCallback() { connectedCallback() {
if (this.placeholderNoSelection = this.getAttribute("placeholder-no-selection") || this._placeholderNoSelection, this.placeholderSearch = this.getAttribute("placeholder-search") || this._placeholderSearch, this.placeholderRoleSelect = this.getAttribute("placeholder-role-select") || this._placeholderRoleSelect, this._render(), this.inputAreaWrapper = this.querySelector(`.${B}`), this.inputElement = this.querySelector(`.${N}`), this.stagedItemPillContainer = this.querySelector(`.${$}`), this.optionsListElement = this.querySelector(`.${H}`), this.selectedItemsContainer = this.querySelector(`.${O}`), this.addButtonElement = this.querySelector(`.${D}`), this.preAddButtonElement = this.querySelector(`.${R}`), this.hiddenSelect = this.querySelector(`.${C}`), this.name && this.hiddenSelect && (this.hiddenSelect.name = this.name), this.hasAttribute("show-add-button") ? this.showAddButton = this.getAttribute("show-add-button") : this.setAttribute("show-add-button", String(this._showAddButton)), this.inputElement && (this.inputElement.placeholder = this.placeholderSearch), this.inputElement.addEventListener("input", this._handleInput), this.inputElement.addEventListener("keydown", this._handleInputKeyDown), this.inputElement.addEventListener("focus", this._handleFocus), this.inputElement.addEventListener("blur", this._handleBlur), this.optionsListElement.addEventListener("mousedown", this._handleOptionMouseDown), this.optionsListElement.addEventListener("click", this._handleOptionClick), this.addButtonElement.addEventListener("click", this._handleAddButtonClick), this.addEventListener("keydown", this._handleKeyDown), this._renderStagedPillOrInput(), this._updateAddButtonState(), this._updatePreAddButtonVisibility(), this._updateRootElementStateClasses(), this.hasAttribute("value")) { if (this.placeholderNoSelection = this.getAttribute("placeholder-no-selection") || this._placeholderNoSelection, this.placeholderSearch = this.getAttribute("placeholder-search") || this._placeholderSearch, this.placeholderRoleSelect = this.getAttribute("placeholder-role-select") || this._placeholderRoleSelect, this._render(), this.inputAreaWrapper = this.querySelector(`.${D}`), this.inputElement = this.querySelector(`.${U}`), this.stagedItemPillContainer = this.querySelector(`.${H}`), this.optionsListElement = this.querySelector(`.${V}`), this.selectedItemsContainer = this.querySelector(`.${R}`), this.addButtonElement = this.querySelector(`.${F}`), this.preAddButtonElement = this.querySelector(`.${N}`), this.hiddenSelect = this.querySelector(`.${C}`), this.name && this.hiddenSelect && (this.hiddenSelect.name = this.name), this.hasAttribute("show-add-button") ? this.showAddButton = this.getAttribute("show-add-button") : this.setAttribute("show-add-button", String(this._showAddButton)), this.inputElement && (this.inputElement.placeholder = this.placeholderSearch), this.inputElement.addEventListener("input", this._handleInput), this.inputElement.addEventListener("keydown", this._handleInputKeyDown), this.inputElement.addEventListener("focus", this._handleFocus), this.inputElement.addEventListener("blur", this._handleBlur), this.optionsListElement.addEventListener("mousedown", this._handleOptionMouseDown), this.optionsListElement.addEventListener("click", this._handleOptionClick), this.addButtonElement.addEventListener("click", this._handleAddButtonClick), this.addEventListener("keydown", this._handleKeyDown), this._renderStagedPillOrInput(), this._updateAddButtonState(), this._updatePreAddButtonVisibility(), this._updateRootElementStateClasses(), this.hasAttribute("value")) {
const t = this.getAttribute("value"); const t = this.getAttribute("value");
try { try {
const e = JSON.parse(t); const e = JSON.parse(t);
@@ -934,10 +934,10 @@ class X extends HTMLElement {
this.disabledCallback(t); this.disabledCallback(t);
} }
disabledCallback(t) { disabledCallback(t) {
this.inputElement && (this.inputElement.disabled = t), this.classList.toggle("pointer-events-none", t), this.querySelectorAll(`.${M}`).forEach( this.inputElement && (this.inputElement.disabled = t), this.classList.toggle("pointer-events-none", t), this.querySelectorAll(`.${P}`).forEach(
(s) => s.disabled = t (s) => s.disabled = t
); );
const e = this.querySelector(`.${A}`); const e = this.querySelector(`.${T}`);
e && (e.disabled = t), this.hiddenSelect && (this.hiddenSelect.disabled = t), this._updateAddButtonState(), this._updatePreAddButtonVisibility(); e && (e.disabled = t), this.hiddenSelect && (this.hiddenSelect.disabled = t), this._updateAddButtonState(), this._updatePreAddButtonVisibility();
} }
formResetCallback() { formResetCallback() {
@@ -957,7 +957,7 @@ class X extends HTMLElement {
this.internals_.setFormValue(null), this._synchronizeHiddenSelect(); this.internals_.setFormValue(null), this._synchronizeHiddenSelect();
} }
_updateRootElementStateClasses() { _updateRootElementStateClasses() {
this.classList.toggle(At, this._value.length === 0), this.classList.toggle(Ct, this._value.length > 0), this.classList.toggle(Tt, this._isOptionsListVisible), this.classList.toggle(yt, !!this._stagedItem); this.classList.toggle($t, this._value.length === 0), this.classList.toggle(Pt, this._value.length > 0), this.classList.toggle(Nt, this._isOptionsListVisible), this.classList.toggle(Dt, !!this._stagedItem);
} }
_render() { _render() {
const t = this.id || `msr-${crypto.randomUUID().slice(0, 8)}`; const t = this.id || `msr-${crypto.randomUUID().slice(0, 8)}`;
@@ -968,27 +968,27 @@ class X extends HTMLElement {
width: 0 !important; height: 0 !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; opacity: 0 !important; pointer-events: none !important;
} }
</style> </style>
<div class="${pt} relative"> <div class="${At} relative">
<div class="${O} flex flex-wrap gap-1 mb-2 min-h-[2.625rem] rounded-md" aria-live="polite"> <div class="${R} flex flex-wrap gap-1 mb-2 min-h-[2.625rem] rounded-md" aria-live="polite">
${this._value.length === 0 ? `<span class="${k}">${this.placeholderNoSelection}</span>` : ""} ${this._value.length === 0 ? `<span class="${$}">${this.placeholderNoSelection}</span>` : ""}
</div> </div>
<div class="${Et} flex items-center"> <div class="${Mt} flex items-center">
<div class="${B} ${b} flex-grow min-h-[42px] flex items-center flex-wrap gap-1" tabindex="-1"> <div class="${D} ${b} flex-grow min-h-[42px] flex items-center flex-wrap gap-1" tabindex="-1">
<span class="${$} flex items-center gap-2"></span> <span class="${H} flex items-center gap-2"></span>
<input type="text" <input type="text"
class="${N} flex-1 min-w-[100px] outline-none" class="${U} flex-1 min-w-[100px] outline-none"
placeholder="${this.placeholderSearch}" placeholder="${this.placeholderSearch}"
aria-haspopup="listbox" aria-haspopup="listbox"
aria-expanded="false"> aria-expanded="false">
</div> </div>
<button type="button" <button type="button"
class="${R} hidden flex items-center justify-center ml-2" class="${N} hidden flex items-center justify-center ml-2"
aria-label="Element schnell hinzufügen"> aria-label="Element schnell hinzufügen">
+ +
</button> </button>
<button type="button" class="${D} hidden ml-2">Hinzufügen</button> <button type="button" class="${F} hidden ml-2">Hinzufügen</button>
</div> </div>
<ul role="listbox" id="${t}-options-list" class="${H} absolute z-20 w-full max-h-60 overflow-y-auto mt-1 hidden"></ul> <ul role="listbox" id="${t}-options-list" class="${V} absolute z-20 w-full max-h-60 overflow-y-auto mt-1 hidden"></ul>
<select multiple name="${this.getAttribute("name") || "items_with_roles_default"}" id="hidden-select-${t}" class="${C}" aria-hidden="true"></select> <select multiple name="${this.getAttribute("name") || "items_with_roles_default"}" id="hidden-select-${t}" class="${C}" aria-hidden="true"></select>
</div> </div>
`; `;
@@ -1011,7 +1011,7 @@ class X extends HTMLElement {
_renderStagedPillOrInput() { _renderStagedPillOrInput() {
if (!(!this.stagedItemPillContainer || !this.inputElement || !this.inputAreaWrapper)) { if (!(!this.stagedItemPillContainer || !this.inputElement || !this.inputAreaWrapper)) {
if (this.stagedItemPillContainer.innerHTML = "", this._stagedItem && this._stagedItem.item) { if (this.stagedItemPillContainer.innerHTML = "", this._stagedItem && this._stagedItem.item) {
this.inputAreaWrapper.classList.remove(b), this.inputAreaWrapper.classList.add(I); this.inputAreaWrapper.classList.remove(b), this.inputAreaWrapper.classList.add(A);
const t = this._createStagedItemPillElement(this._stagedItem.item); const t = this._createStagedItemPillElement(this._stagedItem.item);
this.stagedItemPillContainer.appendChild(t); this.stagedItemPillContainer.appendChild(t);
const e = this._getAvailableRolesForItem(this._stagedItem.item.id), s = this._createStagedRoleSelectElement( const e = this._getAvailableRolesForItem(this._stagedItem.item.id), s = this._createStagedRoleSelectElement(
@@ -1022,7 +1022,7 @@ class X extends HTMLElement {
const n = this._createStagedCancelButtonElement(this._stagedItem.item.name); const n = this._createStagedCancelButtonElement(this._stagedItem.item.name);
this.stagedItemPillContainer.appendChild(n), this.inputElement.classList.add("hidden"), this.inputElement.value = "", this.inputElement.removeAttribute("aria-activedescendant"), this.inputElement.setAttribute("aria-expanded", "false"); this.stagedItemPillContainer.appendChild(n), this.inputElement.classList.add("hidden"), this.inputElement.value = "", this.inputElement.removeAttribute("aria-activedescendant"), this.inputElement.setAttribute("aria-expanded", "false");
} else } else
this.inputAreaWrapper.classList.add(b), this.inputAreaWrapper.classList.remove(I), this.inputElement.classList.remove("hidden"); this.inputAreaWrapper.classList.add(b), this.inputAreaWrapper.classList.remove(A), this.inputElement.classList.remove("hidden");
this._updateAddButtonState(), this._updatePreAddButtonVisibility(), this._updateRootElementStateClasses(); this._updateAddButtonState(), this._updatePreAddButtonVisibility(), this._updateRootElementStateClasses();
} }
} }
@@ -1041,15 +1041,15 @@ class X extends HTMLElement {
const e = this._getItemById(t.itemId); const e = this._getItemById(t.itemId);
if (!e) return null; if (!e) return null;
const n = this.selectedItemTemplate.content.cloneNode(!0).firstElementChild, a = n.querySelector('[data-ref="textEl"]'); const n = this.selectedItemTemplate.content.cloneNode(!0).firstElementChild, a = n.querySelector('[data-ref="textEl"]');
let r = `<span class="${ft}">${e.name}</span>`, o = e.additional_data ? ` <span class="${gt}">(${e.additional_data})</span>` : "", d = ` <span class="${bt}">${t.role}</span>`; let r = `<span class="${yt}">${e.name}</span>`, o = e.additional_data ? ` <span class="${wt}">(${e.additional_data})</span>` : "", h = ` <span class="${xt}">${t.role}</span>`;
a.innerHTML = `${r}${o}${d}`; a.innerHTML = `${r}${o}${h}`;
const c = n.querySelector('[data-ref="deleteBtn"]'); const c = n.querySelector('[data-ref="deleteBtn"]');
return c.setAttribute("aria-label", `Entferne ${e.name} als ${t.role}`), c.dataset.instanceId = t.instanceId, c.disabled = this.hasAttribute("disabled"), c.addEventListener("click", (tt) => { return c.setAttribute("aria-label", `Entferne ${e.name} als ${t.role}`), c.dataset.instanceId = t.instanceId, c.disabled = this.hasAttribute("disabled"), c.addEventListener("click", (ct) => {
tt.stopPropagation(), this._handleDeleteSelectedItem(t.instanceId); ct.stopPropagation(), this._handleDeleteSelectedItem(t.instanceId);
}), n; }), n;
} }
_renderSelectedItems() { _renderSelectedItems() {
this.selectedItemsContainer && (this.selectedItemsContainer.innerHTML = "", this._value.length === 0 ? this.selectedItemsContainer.innerHTML = `<span class="${k}">${this.placeholderNoSelection}</span>` : this._value.forEach((t) => { this.selectedItemsContainer && (this.selectedItemsContainer.innerHTML = "", this._value.length === 0 ? this.selectedItemsContainer.innerHTML = `<span class="${$}">${this.placeholderNoSelection}</span>` : this._value.forEach((t) => {
const e = this._createSelectedItemElement(t); const e = this._createSelectedItemElement(t);
e && this.selectedItemsContainer.appendChild(e); e && this.selectedItemsContainer.appendChild(e);
}), this._updateRootElementStateClasses()); }), this._updateRootElementStateClasses());
@@ -1062,7 +1062,7 @@ class X extends HTMLElement {
} }
_createOptionElement(t, e) { _createOptionElement(t, e) {
const n = this.optionTemplate.content.cloneNode(!0).firstElementChild; const n = this.optionTemplate.content.cloneNode(!0).firstElementChild;
return n.querySelector('[data-ref="nameEl"]').textContent = t.name, n.querySelector('[data-ref="detailEl"]').textContent = t.additional_data ? `(${t.additional_data})` : "", n.dataset.id = t.id, n.setAttribute("aria-selected", String(e === this._highlightedIndex)), n.id = `${this.id || "msr"}-option-${t.id}`, e === this._highlightedIndex && n.classList.add(U), n; return n.querySelector('[data-ref="nameEl"]').textContent = t.name, n.querySelector('[data-ref="detailEl"]').textContent = t.additional_data ? `(${t.additional_data})` : "", n.dataset.id = t.id, n.setAttribute("aria-selected", String(e === this._highlightedIndex)), n.id = `${this.id || "msr"}-option-${t.id}`, e === this._highlightedIndex && n.classList.add(G), n;
} }
_renderOptionsList() { _renderOptionsList() {
if (!(!this.optionsListElement || !this.inputElement)) { if (!(!this.optionsListElement || !this.inputElement)) {
@@ -1074,7 +1074,7 @@ class X extends HTMLElement {
this.optionsListElement.appendChild(n); this.optionsListElement.appendChild(n);
}); });
const t = this.optionsListElement.querySelector( const t = this.optionsListElement.querySelector(
`.${U}` `.${G}`
); );
t ? (t.scrollIntoView({ block: "nearest" }), this.inputElement.setAttribute("aria-activedescendant", t.id)) : this.inputElement.removeAttribute("aria-activedescendant"); t ? (t.scrollIntoView({ block: "nearest" }), this.inputElement.setAttribute("aria-activedescendant", t.id)) : this.inputElement.removeAttribute("aria-activedescendant");
} }
@@ -1086,7 +1086,7 @@ class X extends HTMLElement {
return; return;
this._stagedItem = { item: t, currentRole: "" }, this.inputElement && (this.inputElement.value = "", this.inputElement.setAttribute("aria-expanded", "false"), this.inputElement.removeAttribute("aria-activedescendant")), this._renderStagedPillOrInput(), this._hideOptionsList(); this._stagedItem = { item: t, currentRole: "" }, this.inputElement && (this.inputElement.value = "", this.inputElement.setAttribute("aria-expanded", "false"), this.inputElement.removeAttribute("aria-activedescendant")), this._renderStagedPillOrInput(), this._hideOptionsList();
const s = this.stagedItemPillContainer.querySelector( const s = this.stagedItemPillContainer.querySelector(
`.${A}` `.${T}`
); );
s && !s.disabled ? s.focus() : this.addButtonElement && !this.addButtonElement.disabled && this.addButtonElement.focus(); s && !s.disabled ? s.focus() : this.addButtonElement && !this.addButtonElement.disabled && this.addButtonElement.focus();
} }
@@ -1123,7 +1123,7 @@ class X extends HTMLElement {
if (!this.hasAttribute("disabled")) { if (!this.hasAttribute("disabled")) {
if (t.key === "Enter" && this._stagedItem && this._stagedItem.item) { if (t.key === "Enter" && this._stagedItem && this._stagedItem.item) {
const s = document.activeElement, n = (e = this.stagedItemPillContainer) == null ? void 0 : e.querySelector( const s = document.activeElement, n = (e = this.stagedItemPillContainer) == null ? void 0 : e.querySelector(
`.${P}` `.${q}`
); );
if (s === n) { if (s === n) {
t.preventDefault(), this._handleCancelStagedItem(t); t.preventDefault(), this._handleCancelStagedItem(t);
@@ -1161,7 +1161,7 @@ class X extends HTMLElement {
} }
_handleFocus() { _handleFocus() {
if (!(this.hasAttribute("disabled") || this.inputElement && this.inputElement.disabled || this._stagedItem)) { if (!(this.hasAttribute("disabled") || this.inputElement && this.inputElement.disabled || this._stagedItem)) {
if (!this._stagedItem && this.inputAreaWrapper && (this.inputAreaWrapper.classList.add(b), this.inputAreaWrapper.classList.remove(I)), this.inputElement && this.inputElement.value.length > 0) { if (!this._stagedItem && this.inputAreaWrapper && (this.inputAreaWrapper.classList.add(b), this.inputAreaWrapper.classList.remove(A)), this.inputElement && this.inputElement.value.length > 0) {
const t = this.inputElement.value.toLowerCase(); const t = this.inputElement.value.toLowerCase();
this._filteredOptions = this._options.filter((e) => this._getAvailableRolesForItem(e.id).length === 0 ? !1 : e.name.toLowerCase().includes(t) || e.additional_data && e.additional_data.toLowerCase().includes(t)), this._filteredOptions.length > 0 ? (this._isOptionsListVisible = !0, this._highlightedIndex = 0, this._renderOptionsList()) : this._hideOptionsList(); this._filteredOptions = this._options.filter((e) => this._getAvailableRolesForItem(e.id).length === 0 ? !1 : e.name.toLowerCase().includes(t) || e.additional_data && e.additional_data.toLowerCase().includes(t)), this._filteredOptions.length > 0 ? (this._isOptionsListVisible = !0, this._highlightedIndex = 0, this._renderOptionsList()) : this._hideOptionsList();
} else } else
@@ -1180,7 +1180,7 @@ class X extends HTMLElement {
} }
_handleOptionClick(t) { _handleOptionClick(t) {
if (this.hasAttribute("disabled")) return; if (this.hasAttribute("disabled")) return;
const e = t.target.closest(`li[data-id].${q}`); const e = t.target.closest(`li[data-id].${W}`);
if (e) { if (e) {
const s = e.dataset.id, n = this._filteredOptions.find((a) => a.id === s); const s = e.dataset.id, n = this._filteredOptions.find((a) => a.id === s);
n && this._stageItem(n); n && this._stageItem(n);
@@ -1190,9 +1190,9 @@ class X extends HTMLElement {
this.hasAttribute("disabled") || (this._value = this._value.filter((e) => e.instanceId !== t), this._updateFormValue(), this._renderSelectedItems(), this._stagedItem && this._stagedItem.item && this._renderStagedPillOrInput(), this.inputElement && this.inputElement.focus(), this._updatePreAddButtonVisibility()); this.hasAttribute("disabled") || (this._value = this._value.filter((e) => e.instanceId !== t), this._updateFormValue(), this._renderSelectedItems(), this._stagedItem && this._stagedItem.item && this._renderStagedPillOrInput(), this.inputElement && this.inputElement.focus(), this._updatePreAddButtonVisibility());
} }
} }
u(X, "formAssociated", !0); u(ot, "formAssociated", !0);
const wt = "mss-component-wrapper", F = "mss-selected-items-container", xt = "mss-selected-item-pill", Ot = "mss-selected-item-text", kt = "mss-selected-item-pill-detail", V = "mss-selected-item-delete-btn", W = "mss-input-controls-container", G = "mss-input-wrapper", z = "mss-input-wrapper-focused", K = "mss-text-input", j = "mss-create-new-button", Q = "mss-options-list", Mt = "mss-option-item", Rt = "mss-option-item-name", Bt = "mss-option-item-detail", J = "mss-option-item-highlighted", T = "mss-hidden-select", $t = "mss-no-items-text", Pt = "mss-state-no-selection", Nt = "mss-state-has-selection", Dt = "mss-state-list-open"; const Ht = "mss-component-wrapper", z = "mss-selected-items-container", qt = "mss-selected-item-pill", Ut = "mss-selected-item-text", Ft = "mss-selected-item-pill-detail", K = "mss-selected-item-delete-btn", j = "mss-input-controls-container", Q = "mss-input-wrapper", J = "mss-input-wrapper-focused", X = "mss-text-input", Y = "mss-create-new-button", Z = "mss-options-list", Vt = "mss-option-item", Wt = "mss-option-item-name", Gt = "mss-option-item-detail", tt = "mss-option-item-highlighted", y = "mss-hidden-select", zt = "mss-no-items-text", Kt = "mss-state-no-selection", jt = "mss-state-has-selection", Qt = "mss-state-list-open";
class Y extends HTMLElement { class ht extends HTMLElement {
constructor() { constructor() {
super(); super();
u(this, "_blurTimeout", null); u(this, "_blurTimeout", null);
@@ -1219,15 +1219,15 @@ class Y extends HTMLElement {
} }
_setupTemplates() { _setupTemplates() {
this.optionTemplate = document.createElement("template"), this.optionTemplate.innerHTML = ` this.optionTemplate = document.createElement("template"), this.optionTemplate.innerHTML = `
<li role="option" class="${Mt}"> <li role="option" class="${Vt}">
<span data-ref="nameEl" class="${Rt}"></span> <span data-ref="nameEl" class="${Wt}"></span>
<span data-ref="detailEl" class="${Bt}"></span> <span data-ref="detailEl" class="${Gt}"></span>
</li> </li>
`, this.selectedItemTemplate = document.createElement("template"), this.selectedItemTemplate.innerHTML = ` `, this.selectedItemTemplate = document.createElement("template"), this.selectedItemTemplate.innerHTML = `
<span class="${xt} flex items-center"> <span class="${qt} flex items-center">
<span data-ref="textEl" class="${Ot}"></span> <span data-ref="textEl" class="${Ut}"></span>
<span data-ref="detailEl" class="${kt} hidden"></span> <span data-ref="detailEl" class="${Ft} hidden"></span>
<button type="button" data-ref="deleteBtn" class="${V}">&times;</button> <button type="button" data-ref="deleteBtn" class="${K}">&times;</button>
</span> </span>
`; `;
} }
@@ -1280,7 +1280,7 @@ class Y extends HTMLElement {
this.setAttribute("name", t), this.hiddenSelect && (this.hiddenSelect.name = t); this.setAttribute("name", t), this.hiddenSelect && (this.hiddenSelect.name = t);
} }
connectedCallback() { connectedCallback() {
if (this._render(), this.inputControlsContainer = this.querySelector(`.${W}`), this.inputWrapper = this.querySelector(`.${G}`), this.inputElement = this.querySelector(`.${K}`), this.createNewButton = this.querySelector(`.${j}`), this.optionsListElement = this.querySelector(`.${Q}`), this.selectedItemsContainer = this.querySelector(`.${F}`), this.hiddenSelect = this.querySelector(`.${T}`), this.placeholder = this.getAttribute("placeholder") || "Search items...", this.showCreateButton = this.getAttribute("show-create-button") !== "false", this.name && this.hiddenSelect && (this.hiddenSelect.name = this.name), this.inputElement.addEventListener("input", this._handleInput), this.inputElement.addEventListener("keydown", this._handleKeyDown), this.inputElement.addEventListener("focus", this._handleFocus), this.inputElement.addEventListener("blur", this._handleBlur), this.optionsListElement.addEventListener("mousedown", this._handleOptionMouseDown), this.optionsListElement.addEventListener("click", this._handleOptionClick), this.createNewButton.addEventListener("click", this._handleCreateNewButtonClick), this.selectedItemsContainer.addEventListener("click", this._handleSelectedItemsContainerClick), this._updateRootElementStateClasses(), this.hasAttribute("value")) { if (this._render(), this.inputControlsContainer = this.querySelector(`.${j}`), this.inputWrapper = this.querySelector(`.${Q}`), this.inputElement = this.querySelector(`.${X}`), this.createNewButton = this.querySelector(`.${Y}`), this.optionsListElement = this.querySelector(`.${Z}`), this.selectedItemsContainer = this.querySelector(`.${z}`), this.hiddenSelect = this.querySelector(`.${y}`), this.placeholder = this.getAttribute("placeholder") || "Search items...", this.showCreateButton = this.getAttribute("show-create-button") !== "false", this.name && this.hiddenSelect && (this.hiddenSelect.name = this.name), this.inputElement.addEventListener("input", this._handleInput), this.inputElement.addEventListener("keydown", this._handleKeyDown), this.inputElement.addEventListener("focus", this._handleFocus), this.inputElement.addEventListener("blur", this._handleBlur), this.optionsListElement.addEventListener("mousedown", this._handleOptionMouseDown), this.optionsListElement.addEventListener("click", this._handleOptionClick), this.createNewButton.addEventListener("click", this._handleCreateNewButtonClick), this.selectedItemsContainer.addEventListener("click", this._handleSelectedItemsContainerClick), this._updateRootElementStateClasses(), this.hasAttribute("value")) {
const t = this.getAttribute("value"); const t = this.getAttribute("value");
try { try {
this.value = JSON.parse(t); this.value = JSON.parse(t);
@@ -1335,35 +1335,35 @@ class Y extends HTMLElement {
this.internals_.setFormValue(null), this._synchronizeHiddenSelect(); this.internals_.setFormValue(null), this._synchronizeHiddenSelect();
} }
disabledCallback(t) { disabledCallback(t) {
this.inputElement && (this.inputElement.disabled = t), this.createNewButton && (this.createNewButton.disabled = t), this.toggleAttribute("disabled", t), this.querySelectorAll(`.${V}`).forEach( this.inputElement && (this.inputElement.disabled = t), this.createNewButton && (this.createNewButton.disabled = t), this.toggleAttribute("disabled", t), this.querySelectorAll(`.${K}`).forEach(
(e) => e.disabled = t (e) => e.disabled = t
), this.hiddenSelect && (this.hiddenSelect.disabled = t), t && this._hideOptionsList(); ), this.hiddenSelect && (this.hiddenSelect.disabled = t), t && this._hideOptionsList();
} }
_updateRootElementStateClasses() { _updateRootElementStateClasses() {
this.classList.toggle(Pt, this._value.length === 0), this.classList.toggle(Nt, this._value.length > 0), this.classList.toggle(Dt, this._isOptionsListVisible); this.classList.toggle(Kt, this._value.length === 0), this.classList.toggle(jt, this._value.length > 0), this.classList.toggle(Qt, this._isOptionsListVisible);
} }
_render() { _render() {
const t = this.id || `mss-${crypto.randomUUID().slice(0, 8)}`; const t = this.id || `mss-${crypto.randomUUID().slice(0, 8)}`;
this.id || this.setAttribute("id", t), this.innerHTML = ` this.id || this.setAttribute("id", t), this.innerHTML = `
<style> <style>
.${T} { display: block !important; visibility: hidden !important; position: absolute !important; width: 0px !important; height: 0px !important; opacity: 0 !important; pointer-events: none !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; } .${y} { display: block !important; visibility: hidden !important; position: absolute !important; width: 0px !important; height: 0px !important; opacity: 0 !important; pointer-events: none !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }
</style> </style>
<div class="${wt} relative"> <div class="${Ht} relative">
<div class="${F} flex flex-wrap gap-1 mb-1 min-h-[38px]" aria-live="polite" tabindex="-1"></div> <div class="${z} flex flex-wrap gap-1 mb-1 min-h-[38px]" aria-live="polite" tabindex="-1"></div>
<div class="${W} flex items-center space-x-2"> <div class="${j} flex items-center space-x-2">
<div class="${G} relative rounded-md flex items-center flex-grow"> <div class="${Q} relative rounded-md flex items-center flex-grow">
<input type="text" <input type="text"
class="${K} w-full outline-none bg-transparent text-sm" class="${X} w-full outline-none bg-transparent text-sm"
placeholder="${this.placeholder}" placeholder="${this.placeholder}"
aria-autocomplete="list" aria-autocomplete="list"
aria-expanded="${this._isOptionsListVisible}" aria-expanded="${this._isOptionsListVisible}"
aria-controls="options-list-${t}" aria-controls="options-list-${t}"
autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="combobox" /> autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="combobox" />
</div> </div>
<button type="button" class="${j} ${this.showCreateButton ? "" : "hidden"}" title="Create new item from input">+</button> <button type="button" class="${Y} ${this.showCreateButton ? "" : "hidden"}" title="Create new item from input">+</button>
</div> </div>
<ul id="options-list-${t}" role="listbox" class="${Q} absolute z-20 w-full max-h-60 overflow-y-auto mt-1 hidden"></ul> <ul id="options-list-${t}" role="listbox" class="${Z} absolute z-20 w-full max-h-60 overflow-y-auto mt-1 hidden"></ul>
<select multiple name="${this.getAttribute("name") || "mss_default_name"}" id="hidden-select-${t}" class="${T}" aria-hidden="true"></select> <select multiple name="${this.getAttribute("name") || "mss_default_name"}" id="hidden-select-${t}" class="${y}" aria-hidden="true"></select>
</div> </div>
`; `;
} }
@@ -1371,12 +1371,12 @@ class Y extends HTMLElement {
const e = this._getItemById(t); const e = this._getItemById(t);
if (!e) return null; if (!e) return null;
const n = this.selectedItemTemplate.content.cloneNode(!0).firstElementChild, a = n.querySelector('[data-ref="textEl"]'), r = n.querySelector('[data-ref="detailEl"]'), o = n.querySelector('[data-ref="deleteBtn"]'); const n = this.selectedItemTemplate.content.cloneNode(!0).firstElementChild, a = n.querySelector('[data-ref="textEl"]'), r = n.querySelector('[data-ref="detailEl"]'), o = n.querySelector('[data-ref="deleteBtn"]');
return a.textContent = e.name, e.additional_data ? (r.textContent = `(${e.additional_data})`, r.classList.remove("hidden")) : r.classList.add("hidden"), o.setAttribute("aria-label", `Remove ${e.name}`), o.dataset.id = t, o.disabled = this.hasAttribute("disabled"), o.addEventListener("click", (d) => { return a.textContent = e.name, e.additional_data ? (r.textContent = `(${e.additional_data})`, r.classList.remove("hidden")) : r.classList.add("hidden"), o.setAttribute("aria-label", `Remove ${e.name}`), o.dataset.id = t, o.disabled = this.hasAttribute("disabled"), o.addEventListener("click", (h) => {
d.stopPropagation(), this._handleDeleteSelectedItem(t); h.stopPropagation(), this._handleDeleteSelectedItem(t);
}), n; }), n;
} }
_renderSelectedItems() { _renderSelectedItems() {
this.selectedItemsContainer && (this.selectedItemsContainer.innerHTML = "", this._value.length === 0 ? this.selectedItemsContainer.innerHTML = `<span class="${$t}">No items selected</span>` : this._value.forEach((t) => { this.selectedItemsContainer && (this.selectedItemsContainer.innerHTML = "", this._value.length === 0 ? this.selectedItemsContainer.innerHTML = `<span class="${zt}">No items selected</span>` : this._value.forEach((t) => {
const e = this._createSelectedItemElement(t); const e = this._createSelectedItemElement(t);
e && this.selectedItemsContainer.appendChild(e); e && this.selectedItemsContainer.appendChild(e);
}), this._updateRootElementStateClasses()); }), this._updateRootElementStateClasses());
@@ -1385,7 +1385,7 @@ class Y extends HTMLElement {
const n = this.optionTemplate.content.cloneNode(!0).firstElementChild, a = n.querySelector('[data-ref="nameEl"]'), r = n.querySelector('[data-ref="detailEl"]'); const n = this.optionTemplate.content.cloneNode(!0).firstElementChild, a = n.querySelector('[data-ref="nameEl"]'), r = n.querySelector('[data-ref="detailEl"]');
a.textContent = t.name, r.textContent = t.additional_data ? `(${t.additional_data})` : "", n.dataset.id = t.id, n.setAttribute("aria-selected", String(e === this._highlightedIndex)); a.textContent = t.name, r.textContent = t.additional_data ? `(${t.additional_data})` : "", n.dataset.id = t.id, n.setAttribute("aria-selected", String(e === this._highlightedIndex));
const o = `option-${this.id || "mss"}-${t.id}`; const o = `option-${this.id || "mss"}-${t.id}`;
return n.id = o, e === this._highlightedIndex && (n.classList.add(J), this.inputElement && this.inputElement.setAttribute("aria-activedescendant", o)), n; return n.id = o, e === this._highlightedIndex && (n.classList.add(tt), this.inputElement && this.inputElement.setAttribute("aria-activedescendant", o)), n;
} }
_renderOptionsList() { _renderOptionsList() {
if (!(!this.optionsListElement || !this.inputElement)) { if (!(!this.optionsListElement || !this.inputElement)) {
@@ -1397,7 +1397,7 @@ class Y extends HTMLElement {
this.optionsListElement.appendChild(n); this.optionsListElement.appendChild(n);
}); });
const t = this.optionsListElement.querySelector( const t = this.optionsListElement.querySelector(
`.${J}` `.${tt}`
); );
t && (t.scrollIntoView({ block: "nearest" }), this.inputElement.setAttribute("aria-activedescendant", t.id)); t && (t.scrollIntoView({ block: "nearest" }), this.inputElement.setAttribute("aria-activedescendant", t.id));
} }
@@ -1461,10 +1461,10 @@ class Y extends HTMLElement {
this._isOptionsListVisible = !1, this._highlightedIndex = -1, this.optionsListElement && this._renderOptionsList(); this._isOptionsListVisible = !1, this._highlightedIndex = -1, this.optionsListElement && this._renderOptionsList();
} }
_handleFocus() { _handleFocus() {
this.inputElement.disabled || (this.inputWrapper && this.inputWrapper.classList.add(z), this.inputElement.value.length > 0 && this._handleInput({ target: this.inputElement }), this._updateRootElementStateClasses()); this.inputElement.disabled || (this.inputWrapper && this.inputWrapper.classList.add(J), this.inputElement.value.length > 0 && this._handleInput({ target: this.inputElement }), this._updateRootElementStateClasses());
} }
_handleBlur() { _handleBlur() {
this.inputWrapper && this.inputWrapper.classList.remove(z), this._blurTimeout = setTimeout(() => { this.inputWrapper && this.inputWrapper.classList.remove(J), this._blurTimeout = setTimeout(() => {
this.contains(document.activeElement) || this._hideOptionsList(); this.contains(document.activeElement) || this._hideOptionsList();
}, 150); }, 150);
} }
@@ -1482,9 +1482,9 @@ class Y extends HTMLElement {
this.value = this._value.filter((e) => e !== t), this.inputElement && this.inputElement.value && this._handleInput({ target: this.inputElement }), this.inputElement && !this.hasAttribute("disabled") && this.inputElement.focus(); this.value = this._value.filter((e) => e !== t), this.inputElement && this.inputElement.value && this._handleInput({ target: this.inputElement }), this.inputElement && !this.hasAttribute("disabled") && this.inputElement.focus();
} }
} }
u(Y, "formAssociated", !0); u(ht, "formAssociated", !0);
const Ht = "rbi-button", qt = "rbi-icon"; const Jt = "rbi-button", Xt = "rbi-icon";
class Ut extends HTMLElement { class Yt extends HTMLElement {
constructor() { constructor() {
super(), this.initialStates = /* @__PURE__ */ new Map(), this._controlledElements = [], this.button = null, this.lastOverallModifiedState = null, this.handleInputChange = this.handleInputChange.bind(this), this.handleReset = this.handleReset.bind(this); super(), this.initialStates = /* @__PURE__ */ new Map(), this._controlledElements = [], this.button = null, this.lastOverallModifiedState = null, this.handleInputChange = this.handleInputChange.bind(this), this.handleReset = this.handleReset.bind(this);
} }
@@ -1493,10 +1493,10 @@ class Ut extends HTMLElement {
} }
connectedCallback() { connectedCallback() {
const i = ` const i = `
<button type="button" class="${Ht} cursor-pointer disabled:cursor-default" aria-label="Reset field"> <button type="button" class="${Jt} cursor-pointer disabled:cursor-default" aria-label="Reset field">
<tool-tip position="right"> <tool-tip position="right">
<div class="data-tip">Feld zurücksetzen</div> <div class="data-tip">Feld zurücksetzen</div>
<span class="${qt} ri-arrow-go-back-fill"></span> <span class="${Xt} ri-arrow-go-back-fill"></span>
</tool-tip> </tool-tip>
</button> </button>
`; `;
@@ -1638,24 +1638,167 @@ class Ut extends HTMLElement {
this.button.setAttribute("aria-label", i); this.button.setAttribute("aria-label", i);
} }
} }
const Ft = "filter-list", Vt = "scroll-button", Wt = "tool-tip", Gt = "abbrev-tooltips", zt = "int-link", Kt = "popup-image", jt = "tab-list", Qt = "filter-pill", Jt = "image-reel", Xt = "multi-select-places", Yt = "multi-select-simple", Z = "reset-button"; const w = "div-menu-button", et = "ts-menu-popup", it = "ts-menu-list", Zt = "menu-label", st = "ts-menu-placeholder-message", te = "ts-menu-list-item", x = "ts-menu-item-action", nt = "ts-item-is-selected", m = "hidden", M = "ts-menu-button--disabled", lt = "ts-menu-label--in-menu", at = "ts-menu-label--displayed", rt = "ts-target-placeholder";
customElements.define(zt, ct); class ee extends HTMLElement {
customElements.define(Gt, p); constructor() {
customElements.define(Ft, at); super(), this._menuItemsMap = /* @__PURE__ */ new Map(), this._targetElement = null, this._originalChildDivs = [], this._observer = null, this._menuPlaceholderMessageElement = null, this._menuButton = null, this._toggleMenu = this._toggleMenu.bind(this), this._handleMenuItemClick = this._handleMenuItemClick.bind(this), this._handleClickOutside = this._handleClickOutside.bind(this), this._handleContentClose = this._handleContentClose.bind(this), this._handleMutations = this._handleMutations.bind(this), this._checkMenuPlaceholderAndButton = this._checkMenuPlaceholderAndButton.bind(this), this._clearFormElements = this._clearFormElements.bind(this), this._refreshTargetOrder = this._refreshTargetOrder.bind(this);
customElements.define(Vt, rt); }
customElements.define(Wt, ot); connectedCallback() {
customElements.define(Kt, ht); this._menuButton = this.querySelector(`.${w}`), this._menuButton || console.error(`TabSelectorMenu: User-provided menu button with class '${w}' not found.`), this._originalChildDivs = Array.from(this.children).filter((e) => e.nodeType === Node.ELEMENT_NODE && e.tagName === "DIV" && !e.classList.contains(w)), this._originalChildDivs.forEach((e) => e.remove());
customElements.define(jt, dt); const i = `
customElements.define(Qt, st); <div class="${et}">
customElements.define(Jt, ut); <ul class="${it}">
customElements.define(Xt, X); <li class="${st}">All items are currently shown.</li>
customElements.define(Yt, Y); </ul>
customElements.define(Z, Ut); </div>
function Zt() { `;
if (this.insertAdjacentHTML("beforeend", i), this._menuPopupElement = this.querySelector(`.${et}`), this._menuListElement = this.querySelector(`.${it}`), this._menuPlaceholderMessageElement = this.querySelector(`.${st}`), !this._menuPopupElement || !this._menuListElement || !this._menuPlaceholderMessageElement) {
console.error("CRITICAL: Popup structure parts missing.");
return;
}
const t = this.getAttribute("target-id");
t ? (this._targetElement = document.getElementById(t), this._targetElement || console.warn(`TabSelectorMenu: Target ID '${t}' not found.`)) : console.warn("TabSelectorMenu: 'target-id' attribute missing."), this._observer = new MutationObserver(this._handleMutations), this._originalChildDivs.forEach((e) => {
const s = e.querySelector("label." + Zt), n = e.dataset.value;
if (!s || !n) {
console.warn('TabSelectorMenu: Source div missing <label class="menu-label"> or data-value:', e);
return;
}
const a = !e.classList.contains(m);
this.appendChild(e);
const r = s.textContent.trim(), o = `
<li class="${te}">
<button type="button" class="${x}" data-value="${n}">
${r}
</button>
</li>`;
this._menuPlaceholderMessageElement.insertAdjacentHTML("beforebegin", o);
const h = this._menuListElement.querySelector(`.${x}[data-value="${n}"]`);
this._menuItemsMap.set(n, {
sourceDiv: e,
menuItemButton: h,
menuListItem: h.parentElement,
menuLabelElement: s,
selected: a
}), this._observer.observe(e, { attributes: !0, attributeFilter: ["class"] });
}), this._menuItemsMap.forEach((e) => {
this._updateItemState(e, !1, !0);
}), this._checkMenuPlaceholderAndButton(), this._menuButton && this._menuButton.addEventListener("click", this._toggleMenu), this._menuListElement.addEventListener("click", this._handleMenuItemClick), document.addEventListener("click", this._handleClickOutside);
}
disconnectedCallback() {
document.removeEventListener("click", this._handleClickOutside), this._observer && this._observer.disconnect(), this._menuButton && this._menuButton.removeEventListener("click", this._toggleMenu);
}
_clearFormElements(i) {
if (!i) return;
i.querySelectorAll("input, textarea, select").forEach((e) => {
switch (e.type) {
case "button":
case "submit":
case "reset":
case "image":
break;
case "checkbox":
case "radio":
e.checked = !1;
break;
case "file":
e.value = null;
break;
default:
e.value = "";
}
e.tagName === "SELECT" && (e.selectedIndex = 0);
});
}
_refreshTargetOrder() {
if (!this._targetElement) return;
const i = [];
this._menuItemsMap.forEach((s) => {
s.sourceDiv.parentElement === this._targetElement && i.push(s.sourceDiv);
}), i.forEach((s) => this._targetElement.removeChild(s));
const t = this._targetElement.querySelector(`.${rt}`);
t && this._targetElement.removeChild(t);
let e = !1;
if (this._menuItemsMap.forEach((s) => {
s.selected && (s.sourceDiv.classList.remove(m), this._targetElement.appendChild(s.sourceDiv), e = !0);
}), !e) {
const s = document.createElement("p");
s.className = rt, this._targetElement.appendChild(s);
}
}
_checkMenuPlaceholderAndButton() {
if (!this._menuPlaceholderMessageElement || !this._menuButton) return;
let i = 0;
this._menuItemsMap.forEach((e) => {
e.menuListItem.style.display !== "none" && i++;
});
const t = i === 0;
this._menuPlaceholderMessageElement.style.display = t ? "block" : "none", t ? this._menuButton.classList.add(M) : this._menuButton.classList.remove(M);
}
_handleMutations(i) {
for (const t of i)
if (t.type === "attributes" && t.attributeName === "class") {
const e = t.target, s = e.dataset.value, n = this._menuItemsMap.get(s);
if (n) {
const a = e.classList.contains(m);
a && n.selected ? (n.selected = !1, this._updateItemState(n, !1, !0)) : !a && !n.selected && (n.selected = !0, this._updateItemState(n, !1, !0));
}
}
}
_handleContentClose(i) {
const t = i.currentTarget.dataset.value, e = this._menuItemsMap.get(t);
e && e.selected && (e.selected = !1, this._updateItemState(e, !1, !0));
}
_toggleMenu(i) {
if (i.preventDefault(), i.stopPropagation(), this._menuButton && this._menuButton.classList.contains(M))
return;
const t = this._menuPopupElement.style.display === "none" || this._menuPopupElement.style.display === "";
t && this._checkMenuPlaceholderAndButton(), this._menuPopupElement.style.display = t ? "block" : "none";
}
_closeMenu() {
this._menuPopupElement.style.display = "none";
}
_handleClickOutside(i) {
if (!this.contains(i.target) && this._menuPopupElement.style.display !== "none") {
if (this._menuButton && this._menuButton.contains(i.target))
return;
this._closeMenu();
}
}
_handleMenuItemClick(i) {
const t = i.target.closest(`.${x}`);
if (t && t.dataset.value) {
const e = t.dataset.value, s = this._menuItemsMap.get(e);
s && (s.selected || (s.selected = !0, this._updateItemState(s, !0, !0)));
}
}
_updateItemState(i, t, e) {
if (!i || !i.sourceDiv || !i.menuItemButton || !i.menuListItem || !i.menuLabelElement) {
console.warn("TabSelectorMenu: Incomplete itemData for update:", i);
return;
}
const s = i.menuLabelElement;
i.selected ? (e && i.sourceDiv.classList.remove(m), i.menuItemButton.classList.add(nt), i.menuListItem.style.display = "none", s.classList.add(at), s.classList.remove(lt)) : (e && i.sourceDiv.classList.add(m), this._clearFormElements(i.sourceDiv), i.menuItemButton.classList.remove(nt), i.menuListItem.style.display = "", s.classList.add(lt), s.classList.remove(at), i.sourceDiv.parentElement !== this && i.sourceDiv.parentElement !== this._targetElement ? this.appendChild(i.sourceDiv) : (i.sourceDiv.parentElement, this._targetElement)), this._refreshTargetOrder(), this._checkMenuPlaceholderAndButton(), t && this._closeMenu();
}
}
const ie = "filter-list", se = "scroll-button", ne = "tool-tip", le = "abbrev-tooltips", ae = "int-link", re = "popup-image", oe = "tab-list", he = "filter-pill", de = "image-reel", ce = "multi-select-places", ue = "multi-select-simple", dt = "reset-button", me = "div-menu";
customElements.define(ae, Lt);
customElements.define(le, p);
customElements.define(ie, gt);
customElements.define(se, Et);
customElements.define(ne, bt);
customElements.define(re, St);
customElements.define(oe, vt);
customElements.define(he, pt);
customElements.define(de, It);
customElements.define(ce, ot);
customElements.define(ue, ht);
customElements.define(dt, Yt);
customElements.define(me, ee);
function pe() {
const l = window.location.pathname, i = window.location.search, t = l + i; const l = window.location.pathname, i = window.location.search, t = l + i;
return encodeURIComponent(t); return encodeURIComponent(t);
} }
function te(l = 5e3, i = 100) { function _e(l = 5e3, i = 100) {
return new Promise((t, e) => { return new Promise((t, e) => {
let s = 0; let s = 0;
const n = setInterval(() => { const n = setInterval(() => {
@@ -1663,8 +1806,8 @@ function te(l = 5e3, i = 100) {
}, i); }, i);
}); });
} }
async function ee(l) { async function fe(l) {
const i = await te(), t = document.getElementById("qr"); const i = await _e(), t = document.getElementById("qr");
t && (t.innerHTML = "", t.classList.add("hidden"), new i(t, { t && (t.innerHTML = "", t.classList.add("hidden"), new i(t, {
text: l, text: l,
width: 1280, width: 1280,
@@ -1676,7 +1819,7 @@ async function ee(l) {
t.classList.remove("hidden"); t.classList.remove("hidden");
}, 20)); }, 20));
} }
function ie(l) { function ge(l) {
l && (l.addEventListener("focus", (i) => { l && (l.addEventListener("focus", (i) => {
i.preventDefault(), l.select(); i.preventDefault(), l.select();
}), l.addEventListener("mousedown", (i) => { }), l.addEventListener("mousedown", (i) => {
@@ -1689,7 +1832,7 @@ function ie(l) {
l.select(); l.select();
})); }));
} }
function se() { function Ee() {
document.body.addEventListener("htmx:responseError", function(l) { document.body.addEventListener("htmx:responseError", function(l) {
const i = l.detail.requestConfig; const i = l.detail.requestConfig;
if (i.boosted) { if (i.boosted) {
@@ -1699,7 +1842,7 @@ function se() {
} }
}); });
} }
function ne(l, i) { function be(l, i) {
if (!(l instanceof HTMLElement)) { if (!(l instanceof HTMLElement)) {
console.warn("Target must be an HTMLElement."); console.warn("Target must be an HTMLElement.");
return; return;
@@ -1708,7 +1851,7 @@ function ne(l, i) {
console.warn("Action must be a function."); console.warn("Action must be a function.");
return; return;
} }
const t = l.querySelectorAll(Z); const t = l.querySelectorAll(dt);
l.addEventListener("rbichange", (e) => { l.addEventListener("rbichange", (e) => {
for (const s of t) for (const s of t)
if (s.isCurrentlyModified()) { if (s.isCurrentlyModified()) {
@@ -1718,21 +1861,21 @@ function ne(l, i) {
i(e.details, !1); i(e.details, !1);
}); });
} }
window.ShowBoostedErrors = se; window.ShowBoostedErrors = Ee;
window.GenQRCode = ee; window.GenQRCode = fe;
window.SelectableInput = ie; window.SelectableInput = ge;
window.PathPlusQuery = Zt; window.PathPlusQuery = pe;
window.HookupRBChange = ne; window.HookupRBChange = be;
export { export {
p as AbbreviationTooltips, p as AbbreviationTooltips,
at as FilterList, gt as FilterList,
st as FilterPill, pt as FilterPill,
ut as ImageReel, It as ImageReel,
ct as IntLink, Lt as IntLink,
X as MultiSelectRole, ot as MultiSelectRole,
Y as MultiSelectSimple, ht as MultiSelectSimple,
ht as PopupImage, St as PopupImage,
rt as ScrollButton, Et as ScrollButton,
dt as TabList, vt as TabList,
ot as ToolTip bt as ToolTip
}; };

2
views/assets/style.css
View File

File diff suppressed because one or more lines are too long

102
views/routes/almanach/edit/body.gohtml
View File

@@ -99,10 +99,110 @@ type AlmanachResult struct {
</div> </div>
</div> </div>
<script type="module">
const noenters = document.querySelectorAll(".no-enter");
noenters.forEach((el) => {
el.addEventListener("keydown", (ev) => {
if (ev.key === "Enter") {
ev.preventDefault();
}
});
});
</script>
<div class="container-normal mx-auto px-8 mt-4"> <div class="container-normal mx-auto px-8 mt-4">
{{ template "_usermessage" $model }} {{ template "_usermessage" $model }}
<form class="w-full grid grid-cols-12 gap-4" id="changealmanachform" x-target="changealmanachform user-message almanach-header-data" hx-boost="false" method="POST"> <form class="w-full grid grid-cols-12 gap-4 dbform" id="changealmanachform" x-target="changealmanachform user-message almanach-header-data" hx-boost="false" method="POST">
<input type="hidden" name="csrf_token" value="{{ $model.csrf_token }}" /> <input type="hidden" name="csrf_token" value="{{ $model.csrf_token }}" />
<input type="hidden" name="last_edited" value="{{ $model.result.Entry.Updated }}" /> <input type="hidden" name="last_edited" value="{{ $model.result.Entry.Updated }}" />
<div class="inputwrapper col-span-8">
<div class="flex flex-row justify-between">
<label for="preferred_title" class="inputlabel">Kurztitel<i class="ri-text"></i></label>
<reset-button class="text-sm" controls="preferred_title" wrapper-class="inputwrapper" modified-class-suffix="modified"></reset-button>
</div>
<textarea name="preferred_title" id="preferred_title" class="inputinput no-enter" placeholder="" required autocomplete="off">{{ $model.result.Entry.PreferredTitle }}</textarea>
</div>
<div class="col-span-4"></div>
<div class="col-span-8" id="titles"></div>
<div class="col-span-4"></div>
<div-menu target-id="titles" class="col-span-2 col-start-7">
<button class="div-menu-button text-xs text-right w-full cursor-pointer"><i class="ri-add-line"></i> Titel hinzufügen</button>
<div class="inputwrapper {{ if eq $model.result.Entry.TitleStmt "" }}hidden{{ end }}" data-value="titel">
<div class="flex flex-row justify-between">
<label for="title" class="inputlabel menu-label">Titel <i class="ri-text"></i></label>
<div class="text-xs">
<reset-button controls="title" wrapper-class="inputwrapper" modified-class-suffix="modified" class="text-sm"></reset-button>
<button
@click="(ev) => {
ev.preventDefault();
$el.parentNode.parentNode.parentNode.classList.add('hidden');
}"
class="text-sm cursor-pointer">
<i class="ri-close-line"></i>
</button>
</div>
</div>
<textarea name="title" id="title" class="inputinput" placeholder="" autocomplete="off" rows="2">{{ $model.result.Entry.TitleStmt }}</textarea>
</div>
<div class="mt-3 inputwrapper {{ if eq $model.result.Entry.SubtitleStmt "" }}hidden{{ end }}" data-value="subtitle">
<div class="flex flex-row justify-between">
<label for="subtitle" class="inputlabel menu-label">Untertitel <i class="ri-text"></i></label>
<div>
<reset-button controls="subtitle" wrapper-class="inputwrapper" modified-class-suffix="modified" class="text-sm"></reset-button>
<button
@click="(ev) => {
ev.preventDefault();
$el.parentNode.parentNode.parentNode.classList.add('hidden');
}"
class="text-sm cursor-pointer">
<i class="ri-close-line"></i>
</button>
</div>
</div>
<textarea name="subtitle" id="subtitle" class="inputinput" placeholder="" autocomplete="off" rows="2">{{ $model.result.Entry.SubtitleStmt }}</textarea>
</div>
<div class="mt-3 inputwrapper {{ if eq $model.result.Entry.VariantTitle "" }}hidden{{ end }}" data-value="varianttitle">
<div class="flex flex-row justify-between">
<label for="varianttitle" class="inputlabel menu-label">Titelvariante(n) <i class="ri-text"></i></label>
<div>
<reset-button controls="varianttitle" wrapper-class="inputwrapper" modified-class-suffix="modified" class="text-sm"></reset-button>
<button
@click="(ev) => {
ev.preventDefault();
$el.parentNode.parentNode.parentNode.classList.add('hidden');
}"
class="text-sm cursor-pointer">
<i class="ri-close-line"></i>
</button>
</div>
</div>
<textarea name="varianttitle" id="varianttitle" class="inputinput" placeholder="" autocomplete="off" rows="2">{{ $model.result.Entry.VariantTitle }}</textarea>
</div>
<div class="mt-3 inputwrapper {{ if eq $model.result.Entry.ParallelTitle "" }}hidden{{ end }}" data-value="paralleltitle">
<div class="flex flex-row justify-between">
<label for="paralleltitle" class="inputlabel menu-label">Titel (übersetzt) <i class="ri-text"></i></label>
<div>
<reset-button controls="paralleltitle" wrapper-class="inputwrapper" modified-class-suffix="modified" class="text-sm"></reset-button>
<button
@click="(ev) => {
ev.preventDefault();
$el.parentNode.parentNode.parentNode.classList.add('hidden');
}"
class="text-sm cursor-pointer">
<i class="ri-close-line"></i>
</button>
</div>
</div>
<textarea name="paralleltitle" id="paralleltitle" class="inputinput" placeholder="" autocomplete="off" rows="2">{{ $model.result.Entry.ParallelTitle }}</textarea>
</div>
</div-menu>
</form> </form>
</div> </div>

25
views/transform/div-menu.js
View File

@@ -1,6 +1,9 @@
// Define CSS class names as constants, above the component class
const USER_PROVIDED_MENU_BUTTON_CLASS = "div-menu-button"; const USER_PROVIDED_MENU_BUTTON_CLASS = "div-menu-button";
const TS_MENU_COMPONENT = "ts-menu";
const TS_POPUP = "ts-menu-popup"; const TS_POPUP = "ts-menu-popup";
const TS_LIST = "ts-menu-list"; const TS_LIST = "ts-menu-list";
const TS_MENU_LABEL = "menu-label";
const TS_PLACEHOLDER_MESSAGE = "ts-menu-placeholder-message"; const TS_PLACEHOLDER_MESSAGE = "ts-menu-placeholder-message";
const TS_LIST_ITEM = "ts-menu-list-item"; const TS_LIST_ITEM = "ts-menu-list-item";
const TS_ITEM_ACTION = "ts-menu-item-action"; const TS_ITEM_ACTION = "ts-menu-item-action";
@@ -8,9 +11,9 @@ const TS_ITEM_IS_SELECTED = "ts-item-is-selected";
const TS_CONTENT_CLOSE_BUTTON = "ts-content-close-button"; const TS_CONTENT_CLOSE_BUTTON = "ts-content-close-button";
const TAILWIND_HIDDEN_CLASS = "hidden"; const TAILWIND_HIDDEN_CLASS = "hidden";
const TS_MENU_BUTTON_STATE_DISABLED = "ts-menu-button--disabled"; const TS_MENU_BUTTON_STATE_DISABLED = "ts-menu-button--disabled";
// New constants for menu label states
const TS_MENU_LABEL_IN_MENU_STATE = "ts-menu-label--in-menu"; const TS_MENU_LABEL_IN_MENU_STATE = "ts-menu-label--in-menu";
const TS_MENU_LABEL_DISPLAYED_STATE = "ts-menu-label--displayed"; const TS_MENU_LABEL_DISPLAYED_STATE = "ts-menu-label--displayed";
const TS_TARGET_PLACEHOLDER_CLASS = "ts-target-placeholder"; // For the target area placeholder
// //
// Prereq: child divs must have prop data-value, and a label element // Prereq: child divs must have prop data-value, and a label element
// the label element must have class "menu-label" // the label element must have class "menu-label"
@@ -76,7 +79,7 @@ export class DivMenu extends HTMLElement {
this._observer = new MutationObserver(this._handleMutations); this._observer = new MutationObserver(this._handleMutations);
this._originalChildDivs.forEach((sourceDiv) => { this._originalChildDivs.forEach((sourceDiv) => {
const menuLabelElement = sourceDiv.querySelector("label.menu-label"); const menuLabelElement = sourceDiv.querySelector("label." + TS_MENU_LABEL);
const itemValue = sourceDiv.dataset.value; const itemValue = sourceDiv.dataset.value;
if (!menuLabelElement || !itemValue) { if (!menuLabelElement || !itemValue) {
@@ -84,14 +87,6 @@ export class DivMenu extends HTMLElement {
return; return;
} }
const closeButton = document.createElement("button");
closeButton.type = "button";
closeButton.className = TS_CONTENT_CLOSE_BUTTON;
closeButton.innerHTML = "&times;";
closeButton.dataset.value = itemValue;
closeButton.addEventListener("click", this._handleContentClose);
sourceDiv.prepend(closeButton);
const isInitiallySelected = !sourceDiv.classList.contains(TAILWIND_HIDDEN_CLASS); const isInitiallySelected = !sourceDiv.classList.contains(TAILWIND_HIDDEN_CLASS);
this.appendChild(sourceDiv); this.appendChild(sourceDiv);
@@ -135,12 +130,6 @@ export class DivMenu extends HTMLElement {
if (this._observer) { if (this._observer) {
this._observer.disconnect(); this._observer.disconnect();
} }
this._menuItemsMap.forEach((itemData) => {
const closeButton = itemData.sourceDiv.querySelector(`.${TS_CONTENT_CLOSE_BUTTON}`);
if (closeButton) {
closeButton.removeEventListener("click", this._handleContentClose);
}
});
if (this._menuButton) { if (this._menuButton) {
this._menuButton.removeEventListener("click", this._toggleMenu); this._menuButton.removeEventListener("click", this._toggleMenu);
} }
@@ -202,7 +191,6 @@ export class DivMenu extends HTMLElement {
if (!hasSelectedItems) { if (!hasSelectedItems) {
const placeholder = document.createElement("p"); const placeholder = document.createElement("p");
placeholder.className = TS_TARGET_PLACEHOLDER_CLASS; placeholder.className = TS_TARGET_PLACEHOLDER_CLASS;
placeholder.innerHTML = "<em>Selected content will appear here.</em>";
this._targetElement.appendChild(placeholder); this._targetElement.appendChild(placeholder);
} }
} }
@@ -255,10 +243,11 @@ export class DivMenu extends HTMLElement {
} }
_toggleMenu(event) { _toggleMenu(event) {
event.preventDefault();
event.stopPropagation();
if (this._menuButton && this._menuButton.classList.contains(TS_MENU_BUTTON_STATE_DISABLED)) { if (this._menuButton && this._menuButton.classList.contains(TS_MENU_BUTTON_STATE_DISABLED)) {
return; return;
} }
event.stopPropagation();
const isHidden = this._menuPopupElement.style.display === "none" || this._menuPopupElement.style.display === ""; const isHidden = this._menuPopupElement.style.display === "none" || this._menuPopupElement.style.display === "";
if (isHidden) { if (isHidden) {
this._checkMenuPlaceholderAndButton(); this._checkMenuPlaceholderAndButton();

114
views/transform/form.css
View File

@@ -1,8 +1,8 @@
@layer components { @layer components {
.dbform .inputwrapper { .dbform .inputwrapper {
@apply rounded-xs border-2 border-transparent px-3 @apply rounded-xs border-2 border-transparent pl-3 pr-1.5
py-1 pb-1.5 border-l-2 focus-within:border-l-slate-600 py-1 pb-1.5 border-l-2 focus-within:border-l-slate-600
bg-slate-200 focus-within:bg-slate-100 transition-all duration-100; bg-stone-100 focus-within:bg-slate-100 transition-all duration-100;
} }
.dbform .inputwrapper .inputlabel { .dbform .inputwrapper .inputlabel {
@@ -22,6 +22,10 @@
@apply mt-1 block w-full focus:border-none focus:outline-none; @apply mt-1 block w-full focus:border-none focus:outline-none;
} }
.dbform .inputwrapper .inputtextarea {
@apply mt-1 block w-full focus:border-none focus:outline-none min-h-[20rem] resize-y;
}
.dbform .submitbutton { .dbform .submitbutton {
@apply w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-700 hover:bg-slate-800 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 active:bg-slate-900 transition-all duration-75; @apply w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-700 hover:bg-slate-800 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 active:bg-slate-900 transition-all duration-75;
} }
@@ -30,6 +34,10 @@
@apply w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md text-sm font-medium text-gray-800 bg-stone-200 hover:bg-stone-300 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 no-underline; @apply w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md text-sm font-medium text-gray-800 bg-stone-200 hover:bg-stone-300 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 no-underline;
} }
.dbform div-menu {
@apply relative inline-block;
}
/* Multi-Select-Role example styles */ /* Multi-Select-Role example styles */
.msr-selected-items-container { .msr-selected-items-container {
@apply rounded-md; @apply rounded-md;
@@ -270,104 +278,28 @@
@apply disabled:hidden; @apply disabled:hidden;
} }
.ts-menu {
position: relative;
display: inline-block;
}
.ts-menu-popup { .ts-menu-popup {
display: none; @apply hidden absolute top-full left-0 bg-white border border-gray-300 rounded-xs shadow z-50 min-w-[200px] mt-1;
position: absolute;
top: 100%;
left: 0;
background-color: white;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
min-width: 220px; /* Slightly wider for longer labels */
margin-top: 4px;
}
.ts-menu-toggle-button {
padding: 10px 15px;
font-size: 1rem;
color: #ffffff;
background-color: #3498db;
border: none;
border-radius: 6px;
cursor: pointer;
transition:
background-color 0.2s ease,
opacity 0.2s ease;
}
.ts-menu-toggle-button:hover {
background-color: #2980b9;
}
.ts-menu-toggle-button:focus {
outline: 2px solid #2980b9;
outline-offset: 2px;
}
.ts-menu-toggle-button:disabled {
background-color: #bdc3c7;
cursor: not-allowed;
opacity: 0.7;
} }
.ts-menu-list { .ts-menu-list {
list-style: none; list-style: none;
padding: 8px 0; padding: 0px 0;
margin: 0; margin: 0;
} }
.ts-menu-list-item {
.ts-menu-list li {
@apply cursor-pointer ml-0 list-none px-2.5 py-1 hover:bg-gray-100 border-b;
} }
.ts-menu-placeholder-message {
padding: 10px 15px; .ts-menu-list li:last-child {
font-style: italic; @apply border-b-0;
color: #7f8c8d;
text-align: center;
display: none;
} }
.ts-menu-item-action {
display: block; .ts-menu-list li button {
width: 100%; @apply w-full cursor-pointer text-left text-gray-700;
text-align: left;
padding: 10px 15px;
background: none;
border: none;
cursor: pointer;
font-size: 0.95rem;
color: #333;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.ts-menu-item-action:hover {
background-color: #ecf0f1;
}
.ts-item-is-selected {
font-weight: bold;
color: #2980b9;
background-color: #e8f4f8;
}
.ts-content-close-button {
position: absolute;
top: 8px; /* Adjusted for better alignment with padding */
right: 8px; /* Adjusted */
background-color: #e74c3c;
color: white;
border: none;
border-radius: 50%;
width: 22px; /* Slightly larger */
height: 22px; /* Slightly larger */
font-size: 13px;
line-height: 20px;
text-align: center;
cursor: pointer;
font-weight: bold;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: background-color 0.2s ease;
}
.ts-content-close-button:hover {
background-color: #c0392b;
} }
.form-submit-button { .form-submit-button {
margin-top: 20px; margin-top: 20px;
padding: 12px 20px; padding: 12px 20px;