Theodor-Springmann-Stiftung/musenalm
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/musenalm.git synced 2026-02-04 10:35:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

+Reihen relations, small UX stuff

Browse Source
This commit is contained in:
Simon Martens
2026-01-08 14:36:18 +01:00
parent 53eab6a779
commit 1656f60ac4
12 changed files with 1732 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
views/transform/almanach-edit.js Normal file
View File

@@ -0,0 +1,50 @@
export class AlmanachEditPage extends HTMLElement {
constructor() {
super();
this._pendingAgent = null;
}
connectedCallback() {
this._initForm();
this._initPlaces();
}
_initForm() {
const form = this.querySelector("#changealmanachform");
if (form && typeof window.FormLoad === "function") {
window.FormLoad(form);
}
}
_parseJSONAttr(element, name) {
if (!element) {
return null;
}
const raw = element.getAttribute(name);
if (!raw) {
return null;
}
try {
return JSON.parse(raw);
} catch {
return null;
}
}
_initPlaces() {
const placesSelect = this.querySelector("#places");
if (!placesSelect) {
return;
}
const initialPlaces = this._parseJSONAttr(placesSelect, "data-initial-options") || [];
const initialPlaceIds = this._parseJSONAttr(placesSelect, "data-initial-values") || [];
if (initialPlaces.length > 0 && typeof placesSelect.setOptions === "function") {
placesSelect.setOptions(initialPlaces);
}
if (initialPlaceIds.length > 0) {
placesSelect.value = initialPlaceIds;
}
}
}

31
views/transform/form.css
View File

@@ -41,6 +41,23 @@
@apply relative inline-block;
}
.relation-strike,
.entries-agent-strike {
position: relative;
}
.relation-strike.is-removed::after,
.entries-agent-strike.is-removed::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
border-top: 2px solid #dc2626;
pointer-events: none;
}
/* Multi-Select-Role example styles */
.msr-selected-items-container {
@apply rounded-md;
@@ -180,16 +197,16 @@
}
.mss-selected-items-container {
@apply py-2 rounded;
@apply py-1 rounded;
/* Tailwind classes from component: flex flex-wrap gap-1 mb-1 min-h-[38px] */
}
.mss-no-items-text {
@apply italic text-xs text-gray-500 w-full; /* Adjusted font size slightly to match 'xs' */
@apply italic text-sm text-gray-500 w-full;
}
.mss-selected-item-pill {
@apply bg-gray-200 text-gray-800 py-0.5 px-2 rounded leading-5 shadow-xs hover:shadow select-none; /* Adjusted font size and padding */
@apply bg-stone-50 text-stone-900 py-0.5 px-2 border rounded leading-5 shadow-xs hover:shadow select-none; /* Adjusted font size and padding */
/* Tailwind classes from component: flex items-center */
}
@@ -212,7 +229,7 @@
}
.mss-input-wrapper {
@apply border border-gray-300 rounded;
@apply border border-gray-300 rounded bg-stone-50;
/* Tailwind classes from component: relative flex items-center flex-grow */
}
.mss-input-wrapper-focused {
@@ -220,7 +237,7 @@
}
.mss-text-input {
@apply py-1.5 px-2;
@apply py-1 px-1.5;
/* Tailwind classes from component: w-full outline-none bg-transparent */
}
.mss-text-input::placeholder {
@@ -234,6 +251,10 @@
@apply !hidden; /* Ensure it hides */
}
.mss-toggle-button {
@apply text-gray-700 hover:text-gray-900 font-semibold text-lg px-2 py-0.5 rounded-xs border border-transparent bg-transparent whitespace-nowrap leading-none;
}
.mss-options-list {
@apply bg-white border border-gray-300 rounded shadow-md list-none m-0; /* Using shadow-md as a softer default */
/* Tailwind classes from component: absolute z-20 w-full max-h-60 overflow-y-auto mt-1 hidden */

114
views/transform/items-editor.js
View File

@@ -9,6 +9,7 @@ const CLOSE_BUTTON_CLASS = "items-close-button";
const SUMMARY_CLASS = "items-summary";
const EDIT_PANEL_CLASS = "items-edit-panel";
const REMOVED_INPUT_NAME = "items_removed[]";
const REMOVED_ROW_STATE = "data-items-removed";
export class ItemsEditor extends HTMLElement {
constructor() {
@@ -76,15 +77,8 @@ export class ItemsEditor extends HTMLElement {
if (!row) {
return;
}
const idInput = row.querySelector('input[name="items_id[]"]');
const itemId = idInput ? idInput.value.trim() : "";
if (itemId) {
this._ensureRemovalInput(itemId);
}
row.remove();
this._refreshRowIds();
const isRemoved = row.getAttribute(REMOVED_ROW_STATE) === "true";
this._setRowRemoved(row, !isRemoved);
}
_wireRemoveButtons(root = this) {
@@ -97,6 +91,47 @@ export class ItemsEditor extends HTMLElement {
event.preventDefault();
this.removeItem(btn);
});
btn.addEventListener("mouseenter", () => {
const row = btn.closest(`.${ROW_CLASS}`);
if (!row || row.getAttribute(REMOVED_ROW_STATE) !== "true") {
return;
}
const label = btn.querySelector("[data-delete-label]");
if (label) {
label.textContent = label.getAttribute("data-delete-hover") || "Rückgängig";
label.classList.add("text-orange-700");
}
const icon = btn.querySelector("i");
if (icon) {
icon.classList.remove("hidden");
icon.classList.add("ri-arrow-go-back-line");
icon.classList.remove("ri-delete-bin-line");
}
});
btn.addEventListener("mouseleave", () => {
const row = btn.closest(`.${ROW_CLASS}`);
const label = btn.querySelector("[data-delete-label]");
if (!label) {
return;
}
label.classList.remove("text-orange-700");
if (row && row.getAttribute(REMOVED_ROW_STATE) === "true") {
label.textContent = label.getAttribute("data-delete-active") || "Wird entfernt";
} else {
label.textContent = label.getAttribute("data-delete-default") || "Entfernen";
}
const icon = btn.querySelector("i");
if (icon) {
if (row && row.getAttribute(REMOVED_ROW_STATE) === "true") {
icon.classList.add("hidden");
icon.classList.remove("ri-delete-bin-line", "ri-arrow-go-back-line");
} else {
icon.classList.remove("hidden");
icon.classList.add("ri-delete-bin-line");
icon.classList.remove("ri-arrow-go-back-line");
}
}
});
});
}
@@ -159,6 +194,48 @@ export class ItemsEditor extends HTMLElement {
this._setRowMode(row, "summary");
}
_setRowRemoved(row, removed) {
row.setAttribute(REMOVED_ROW_STATE, removed ? "true" : "false");
row.classList.toggle("bg-red-50", removed);
row.querySelectorAll("[data-items-strike]").forEach((el) => {
el.classList.toggle("line-through", removed);
el.classList.toggle("decoration-2", removed);
el.classList.toggle("decoration-red-600", removed);
el.classList.toggle("text-gray-500", removed);
});
row.querySelectorAll("[data-delete-label]").forEach((label) => {
const nextLabel = removed
? label.getAttribute("data-delete-active") || "Wird entfernt"
: label.getAttribute("data-delete-default") || "Entfernen";
label.textContent = nextLabel;
});
row.querySelectorAll(`.${REMOVE_BUTTON_CLASS} i`).forEach((icon) => {
if (removed) {
icon.classList.add("hidden");
icon.classList.remove("ri-delete-bin-line", "ri-arrow-go-back-line");
} else {
icon.classList.remove("hidden");
icon.classList.add("ri-delete-bin-line");
icon.classList.remove("ri-arrow-go-back-line");
}
});
const idInput = row.querySelector('input[name="items_id[]"]');
const itemId = idInput ? idInput.value.trim() : "";
if (itemId) {
if (removed) {
this._ensureRemovalInput(itemId);
} else {
this._removeRemovalInput(itemId);
}
}
row.querySelectorAll("[data-field]").forEach((field) => {
field.disabled = removed;
});
}
_setRowMode(row, mode) {
const summary = row.querySelector(`.${SUMMARY_CLASS}`);
const editor = row.querySelector(`.${EDIT_PANEL_CLASS}`);
@@ -238,6 +315,7 @@ export class ItemsEditor extends HTMLElement {
this.querySelectorAll(`.${ROW_CLASS}`).forEach((row) => {
this._wireSummarySync(row);
this._syncSummary(row);
this._syncNewBadge(row);
});
}
@@ -285,6 +363,15 @@ export class ItemsEditor extends HTMLElement {
}
}
});
this._syncNewBadge(row);
}
_syncNewBadge(row) {
const idInput = row.querySelector('input[name="items_id[]"]');
const itemId = idInput ? idInput.value.trim() : "";
row.querySelectorAll("[data-new-badge]").forEach((badge) => {
badge.classList.toggle("hidden", itemId !== "");
});
}
_setSummaryContent(summaryField, value) {
@@ -336,4 +423,13 @@ export class ItemsEditor extends HTMLElement {
hidden.value = itemId;
this.appendChild(hidden);
}
_removeRemovalInput(itemId) {
const inputs = Array.from(this.querySelectorAll(`input[name="${REMOVED_INPUT_NAME}"]`));
for (const input of inputs) {
if (input.value === itemId) {
input.remove();
}
}
}
}

8
views/transform/main.js
View File

@@ -16,6 +16,8 @@ import { ResetButton } from "./reset-button.js";
import { DivManager } from "./div-menu.js";
import { ItemsEditor } from "./items-editor.js";
import { SingleSelectRemote } from "./single-select-remote.js";
import { AlmanachEditPage } from "./almanach-edit.js";
import { RelationsEditor } from "./relations-editor.js";
const FILTER_LIST_ELEMENT = "filter-list";
const SCROLL_BUTTON_ELEMENT = "scroll-button";
@@ -32,6 +34,8 @@ const SINGLE_SELECT_REMOTE_ELEMENT = "single-select-remote";
const RESET_BUTTON_ELEMENT = "reset-button";
const DIV_MANAGER_ELEMENT = "div-manager";
const ITEMS_EDITOR_ELEMENT = "items-editor";
const ALMANACH_EDIT_PAGE_ELEMENT = "almanach-edit-page";
const RELATIONS_EDITOR_ELEMENT = "relations-editor";
customElements.define(INT_LINK_ELEMENT, IntLink);
customElements.define(ABBREV_TOOLTIPS_ELEMENT, AbbreviationTooltips);
@@ -48,6 +52,8 @@ customElements.define(SINGLE_SELECT_REMOTE_ELEMENT, SingleSelectRemote);
customElements.define(RESET_BUTTON_ELEMENT, ResetButton);
customElements.define(DIV_MANAGER_ELEMENT, DivManager);
customElements.define(ITEMS_EDITOR_ELEMENT, ItemsEditor);
customElements.define(ALMANACH_EDIT_PAGE_ELEMENT, AlmanachEditPage);
customElements.define(RELATIONS_EDITOR_ELEMENT, RelationsEditor);
function PathPlusQuery() {
const path = window.location.pathname;
@@ -283,4 +289,4 @@ window.PathPlusQuery = PathPlusQuery;
window.HookupRBChange = HookupRBChange;
window.FormLoad = FormLoad;
export { FilterList, ScrollButton, AbbreviationTooltips, MultiSelectSimple, MultiSelectRole, ToolTip, PopupImage, TabList, FilterPill, ImageReel, IntLink, ItemsEditor, SingleSelectRemote };
export { FilterList, ScrollButton, AbbreviationTooltips, MultiSelectSimple, MultiSelectRole, ToolTip, PopupImage, TabList, FilterPill, ImageReel, IntLink, ItemsEditor, SingleSelectRemote, AlmanachEditPage, RelationsEditor };

183
views/transform/multi-select-simple.js
View File

@@ -10,6 +10,8 @@ const MSS_INPUT_WRAPPER_CLASS = "mss-input-wrapper";
const MSS_INPUT_WRAPPER_FOCUSED_CLASS = "mss-input-wrapper-focused";
const MSS_TEXT_INPUT_CLASS = "mss-text-input";
const MSS_CREATE_NEW_BUTTON_CLASS = "mss-create-new-button";
const MSS_TOGGLE_BUTTON_CLASS = "mss-toggle-button";
const MSS_INLINE_ROW_CLASS = "mss-inline-row";
const MSS_OPTIONS_LIST_CLASS = "mss-options-list";
const MSS_OPTION_ITEM_CLASS = "mss-option-item";
const MSS_OPTION_ITEM_NAME_CLASS = "mss-option-item-name";
@@ -36,6 +38,11 @@ export class MultiSelectSimple extends HTMLElement {
super();
this.internals_ = this.attachInternals();
this._value = [];
this._initialValue = [];
this._initialOrder = [];
this._removedIds = new Set();
this._initialCaptured = false;
this._allowInitialCapture = true;
this._options = [
{ id: "abk", name: "Abchasisch" },
{ id: "aar", name: "Afar" },
@@ -234,6 +241,9 @@ export class MultiSelectSimple extends HTMLElement {
this._placeholder = this.getAttribute("placeholder") || "Search items...";
this._showCreateButton = this.getAttribute("show-create-button") !== "false";
this._toggleLabel = this.getAttribute("data-toggle-label") || "";
this._toggleInput = this._toggleLabel !== "";
this._inputCollapsed = this._toggleInput;
this._setupTemplates();
this._bindEventHandlers();
@@ -268,6 +278,7 @@ export class MultiSelectSimple extends HTMLElement {
this._handleOptionClick = this._handleOptionClick.bind(this);
this._handleCreateNewButtonClick = this._handleCreateNewButtonClick.bind(this);
this._handleSelectedItemsContainerClick = this._handleSelectedItemsContainerClick.bind(this);
this._handleToggleClick = this._handleToggleClick.bind(this);
}
_getItemById(id) {
@@ -325,6 +336,16 @@ export class MultiSelectSimple extends HTMLElement {
else if (!this._getItemById(singleId)) this._value = this._value.filter((id) => id !== singleId);
} else this._value = [];
const newValString = JSON.stringify(this._value.sort());
if (!this._initialCaptured && this._allowInitialCapture && this._value.length > 0) {
this._initialValue = [...this._value];
this._initialOrder = [...this._value];
this._initialCaptured = true;
}
this._value.forEach((id) => {
if (this._removedIds.has(id)) {
this._removedIds.delete(id);
}
});
if (oldValString !== newValString) {
this._updateFormValue();
if (this.selectedItemsContainer) this._renderSelectedItems();
@@ -347,12 +368,16 @@ export class MultiSelectSimple extends HTMLElement {
this.inputWrapper = this.querySelector(`.${MSS_INPUT_WRAPPER_CLASS}`);
this.inputElement = this.querySelector(`.${MSS_TEXT_INPUT_CLASS}`);
this.createNewButton = this.querySelector(`.${MSS_CREATE_NEW_BUTTON_CLASS}`);
this.toggleButton = this.querySelector(`.${MSS_TOGGLE_BUTTON_CLASS}`);
this.optionsListElement = this.querySelector(`.${MSS_OPTIONS_LIST_CLASS}`);
this.selectedItemsContainer = this.querySelector(`.${MSS_SELECTED_ITEMS_CONTAINER_CLASS}`);
this.hiddenSelect = this.querySelector(`.${MSS_HIDDEN_SELECT_CLASS}`);
this.placeholder = this.getAttribute("placeholder") || "Search items...";
this.showCreateButton = this.getAttribute("show-create-button") !== "false";
this._toggleLabel = this.getAttribute("data-toggle-label") || "";
this._toggleInput = this._toggleLabel !== "";
this._inputCollapsed = this._toggleInput;
this._remoteEndpoint = this.getAttribute("data-endpoint") || null;
this._remoteResultKey = this.getAttribute("data-result-key") || "items";
this._remoteMinChars = this._parsePositiveInt(this.getAttribute("data-minchars"), MSS_REMOTE_DEFAULT_MIN_CHARS);
@@ -368,6 +393,9 @@ export class MultiSelectSimple extends HTMLElement {
this.optionsListElement.addEventListener("click", this._handleOptionClick);
this.createNewButton.addEventListener("click", this._handleCreateNewButtonClick);
this.selectedItemsContainer.addEventListener("click", this._handleSelectedItemsContainerClick);
if (this.toggleButton) {
this.toggleButton.addEventListener("click", this._handleToggleClick);
}
this._updateRootElementStateClasses();
if (this.hasAttribute("value")) {
@@ -385,6 +413,15 @@ export class MultiSelectSimple extends HTMLElement {
this._synchronizeHiddenSelect();
}
if (this.hasAttribute("disabled")) this.disabledCallback(true);
if (this._toggleInput) {
this._hideInputControls();
}
this._allowInitialCapture = false;
if (!this._initialCaptured) {
this._initialValue = [...this._value];
this._initialOrder = [...this._value];
this._initialCaptured = true;
}
}
disconnectedCallback() {
@@ -400,6 +437,7 @@ export class MultiSelectSimple extends HTMLElement {
}
if (this.createNewButton) this.createNewButton.removeEventListener("click", this._handleCreateNewButtonClick);
if (this.selectedItemsContainer) this.selectedItemsContainer.removeEventListener("click", this._handleSelectedItemsContainerClick);
if (this.toggleButton) this.toggleButton.removeEventListener("click", this._handleToggleClick);
clearTimeout(this._blurTimeout);
if (this._remoteFetchTimeout) {
clearTimeout(this._remoteFetchTimeout);
@@ -409,7 +447,18 @@ export class MultiSelectSimple extends HTMLElement {
}
static get observedAttributes() {
return ["disabled", "name", "value", "placeholder", "show-create-button", "data-endpoint", "data-result-key", "data-minchars", "data-limit"];
return [
"disabled",
"name",
"value",
"placeholder",
"show-create-button",
"data-endpoint",
"data-result-key",
"data-minchars",
"data-limit",
"data-toggle-label",
];
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return;
@@ -430,6 +479,10 @@ export class MultiSelectSimple extends HTMLElement {
else if (name === "data-result-key") this._remoteResultKey = newValue || "items";
else if (name === "data-minchars") this._remoteMinChars = this._parsePositiveInt(newValue, MSS_REMOTE_DEFAULT_MIN_CHARS);
else if (name === "data-limit") this._remoteLimit = this._parsePositiveInt(newValue, MSS_REMOTE_DEFAULT_LIMIT);
else if (name === "data-toggle-label") {
this._toggleLabel = newValue || "";
this._toggleInput = this._toggleLabel !== "";
}
}
formAssociatedCallback(form) {}
@@ -444,6 +497,9 @@ export class MultiSelectSimple extends HTMLElement {
this.showCreateButton = this.getAttribute("show-create-button") !== "false";
this._updateRootElementStateClasses();
this._renderSelectedItems();
if (this._toggleInput) {
this._hideInputControls();
}
}
formStateRestoreCallback(state, mode) {
this.value = Array.isArray(state) ? state : [];
@@ -482,23 +538,29 @@ export class MultiSelectSimple extends HTMLElement {
_render() {
const componentId = this.id || `mss-${crypto.randomUUID().slice(0, 8)}`;
if (!this.id) this.setAttribute("id", componentId);
const toggleLabel = this.getAttribute("data-toggle-label") || "";
const toggleInput = toggleLabel !== "";
const inputHiddenClass = toggleInput ? "hidden" : "";
this.innerHTML = `
<style>
.${MSS_HIDDEN_SELECT_CLASS} { 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>
<div class="${MSS_COMPONENT_WRAPPER_CLASS} relative">
<div class="${MSS_SELECTED_ITEMS_CONTAINER_CLASS} flex flex-wrap gap-1 mb-1 min-h-[38px]" aria-live="polite" tabindex="-1"></div>
<div class="${MSS_INPUT_CONTROLS_CONTAINER_CLASS} flex items-center space-x-4">
<div class="${MSS_INPUT_WRAPPER_CLASS} relative rounded-md flex items-center flex-grow">
<input type="text"
class="${MSS_TEXT_INPUT_CLASS} w-full outline-none bg-transparent"
placeholder="${this.placeholder}"
aria-autocomplete="list"
aria-expanded="${this._isOptionsListVisible}"
aria-controls="options-list-${componentId}"
autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="combobox" />
<div class="${MSS_INLINE_ROW_CLASS} flex flex-wrap items-center gap-2">
<div class="${MSS_SELECTED_ITEMS_CONTAINER_CLASS} flex flex-wrap items-center gap-1 min-h-[30px]" aria-live="polite" tabindex="-1"></div>
${toggleInput ? `<button type="button" class="${MSS_TOGGLE_BUTTON_CLASS}">${toggleLabel}</button>` : ""}
<div class="${MSS_INPUT_CONTROLS_CONTAINER_CLASS} flex items-center gap-2 ${inputHiddenClass}">
<div class="${MSS_INPUT_WRAPPER_CLASS} relative rounded-md flex items-center flex-grow">
<input type="text"
class="${MSS_TEXT_INPUT_CLASS} w-full outline-none bg-transparent"
placeholder="${this.placeholder}"
aria-autocomplete="list"
aria-expanded="${this._isOptionsListVisible}"
aria-controls="options-list-${componentId}"
autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="combobox" />
</div>
<button type="button" class="${MSS_CREATE_NEW_BUTTON_CLASS} ${!this.showCreateButton ? "hidden" : ""}" title="Create new item from input">+</button>
</div>
<button type="button" class="${MSS_CREATE_NEW_BUTTON_CLASS} ${!this.showCreateButton ? "hidden" : ""}" title="Create new item from input">+</button>
</div>
<ul id="options-list-${componentId}" role="listbox" class="${MSS_OPTIONS_LIST_CLASS} 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-${componentId}" class="${MSS_HIDDEN_SELECT_CLASS}" aria-hidden="true"></select>
@@ -522,9 +584,22 @@ export class MultiSelectSimple extends HTMLElement {
detailEl.textContent = "";
detailEl.classList.add("hidden"); // Toggle visibility via JS
}
deleteBtn.setAttribute("aria-label", `Remove ${itemData.name}`);
const isRemoved = this._removedIds.has(itemId);
const isNew = !this._initialValue.includes(itemId);
if (isNew) {
const newBadge = document.createElement("span");
newBadge.className = "ml-1 text-xs text-gray-600";
newBadge.textContent = "(Neu)";
textEl.appendChild(newBadge);
}
if (isRemoved) {
textEl.classList.add("line-through", "decoration-2", "decoration-red-600", "text-gray-500");
detailEl.classList.add("line-through", "decoration-2", "decoration-red-600", "text-gray-500");
}
deleteBtn.setAttribute("aria-label", isRemoved ? `Undo remove ${itemData.name}` : `Remove ${itemData.name}`);
deleteBtn.dataset.id = itemId;
deleteBtn.disabled = this.hasAttribute("disabled");
deleteBtn.innerHTML = isRemoved ? '<span class="text-xs inline-flex items-center"><i class="ri-arrow-go-back-line"></i></span>' : "&times;";
deleteBtn.addEventListener("click", (e) => {
e.stopPropagation();
this._handleDeleteSelectedItem(itemId);
@@ -534,10 +609,13 @@ export class MultiSelectSimple extends HTMLElement {
_renderSelectedItems() {
if (!this.selectedItemsContainer) return;
this.selectedItemsContainer.innerHTML = "";
if (this._value.length === 0) {
this.selectedItemsContainer.innerHTML = `<span class="${MSS_NO_ITEMS_TEXT_CLASS}">Keine Sprachen ausgewählt...</span>`;
const removedInOrder = this._initialOrder.filter((id) => this._removedIds.has(id) && !this._value.includes(id));
const displayIds = [...this._value, ...removedInOrder];
if (displayIds.length === 0) {
const emptyText = this.getAttribute("data-empty-text") || "Keine Auswahl...";
this.selectedItemsContainer.innerHTML = `<span class="${MSS_NO_ITEMS_TEXT_CLASS}">${emptyText}</span>`;
} else {
this._value.forEach((id) => {
displayIds.forEach((id) => {
const pillEl = this._createSelectedItemElement(id);
if (pillEl) this.selectedItemsContainer.appendChild(pillEl);
});
@@ -664,6 +742,9 @@ export class MultiSelectSimple extends HTMLElement {
case "Escape":
event.preventDefault();
this._hideOptionsList();
if (this._toggleInput) {
this._hideInputControls();
}
break;
case "Tab":
this._hideOptionsList();
@@ -685,7 +766,12 @@ export class MultiSelectSimple extends HTMLElement {
_handleBlur() {
if (this.inputWrapper) this.inputWrapper.classList.remove(MSS_INPUT_WRAPPER_FOCUSED_CLASS);
this._blurTimeout = setTimeout(() => {
if (!this.contains(document.activeElement)) this._hideOptionsList();
if (!this.contains(document.activeElement)) {
this._hideOptionsList();
if (this._toggleInput && (!this.inputElement || this.inputElement.value.trim() === "")) {
this._hideInputControls();
}
}
}, 150);
}
_handleOptionMouseDown(event) {
@@ -700,14 +786,75 @@ export class MultiSelectSimple extends HTMLElement {
if (this.inputElement) this.inputElement.value = "";
this._filteredOptions = [];
this._hideOptionsList();
if (this.inputElement && !this.hasAttribute("disabled")) this.inputElement.focus();
if (this._toggleInput) {
this._hideInputControls();
} else if (this.inputElement && !this.hasAttribute("disabled")) {
this.inputElement.focus();
}
}
_handleDeleteSelectedItem(itemId) {
if (this._removedIds.has(itemId)) {
this._removedIds.delete(itemId);
if (!this._value.includes(itemId)) {
this.value = [...this._value, itemId];
} else {
this._renderSelectedItems();
}
return;
}
if (this._initialValue.includes(itemId)) {
this._removedIds.add(itemId);
this.value = this._value.filter((id) => id !== itemId);
return;
}
this.value = this._value.filter((id) => id !== itemId);
if (this.inputElement && this.inputElement.value) this._handleInput({ target: this.inputElement });
if (this.inputElement && !this.hasAttribute("disabled")) this.inputElement.focus();
}
_handleToggleClick(event) {
event.preventDefault();
this._showInputControls();
}
_showInputControls() {
if (!this.inputControlsContainer) {
return;
}
this.inputControlsContainer.classList.remove("hidden");
if (this.toggleButton) {
this.toggleButton.classList.add("hidden");
}
if (this._value.length === 0 && this.selectedItemsContainer) {
const emptyText = this.selectedItemsContainer.querySelector(`.${MSS_NO_ITEMS_TEXT_CLASS}`);
if (emptyText) {
emptyText.classList.add("hidden");
}
}
if (this.inputElement && !this.hasAttribute("disabled")) {
this.inputElement.focus();
}
this._inputCollapsed = false;
}
_hideInputControls() {
if (!this.inputControlsContainer) {
return;
}
this.inputControlsContainer.classList.add("hidden");
if (this.toggleButton) {
this.toggleButton.classList.remove("hidden");
}
if (this._value.length === 0 && this.selectedItemsContainer) {
const emptyText = this.selectedItemsContainer.querySelector(`.${MSS_NO_ITEMS_TEXT_CLASS}`);
if (emptyText) {
emptyText.classList.remove("hidden");
}
}
this._hideOptionsList();
this._inputCollapsed = true;
}
_parsePositiveInt(value, fallback) {
if (!value) return fallback;
const parsed = parseInt(value, 10);

289
views/transform/relations-editor.js Normal file
View File

@@ -0,0 +1,289 @@
const ROLE_ADD_TOGGLE = "[data-role='relation-add-toggle']";
const ROLE_ADD_PANEL = "[data-role='relation-add-panel']";
const ROLE_ADD_CLOSE = "[data-role='relation-add-close']";
const ROLE_ADD_APPLY = "[data-role='relation-add-apply']";
const ROLE_ADD_ERROR = "[data-role='relation-add-error']";
const ROLE_ADD_ROW = "[data-role='relation-add-row']";
const ROLE_ADD_SELECT = "[data-role='relation-add-select']";
const ROLE_TYPE_SELECT = "[data-role='relation-type-select']";
const ROLE_UNCERTAIN = "[data-role='relation-uncertain']";
const ROLE_NEW_TEMPLATE = "template[data-role='relation-new-template']";
const ROLE_NEW_DELETE = "[data-role='relation-new-delete']";
const ROLE_REL_ROW = "[data-rel-row]";
const ROLE_REL_STRIKE = "[data-rel-strike]";
export class RelationsEditor extends HTMLElement {
constructor() {
super();
this._pendingItem = null;
this._pendingApply = false;
}
connectedCallback() {
this._prefix = this.getAttribute("data-prefix") || "";
this._linkBase = this.getAttribute("data-link-base") || "";
this._newLabel = this.getAttribute("data-new-label") || "(Neu)";
this._addToggleId = this.getAttribute("data-add-toggle-id") || "";
this._setupAddPanel();
this._setupDeleteToggles();
}
_setupAddPanel() {
this._addToggle = this.querySelector(ROLE_ADD_TOGGLE);
if (this._addToggleId) {
const externalToggle = document.getElementById(this._addToggleId);
if (externalToggle) {
this._addToggle = externalToggle;
}
}
this._addPanel = this.querySelector(ROLE_ADD_PANEL);
this._addClose = this.querySelector(ROLE_ADD_CLOSE);
this._addApply = this.querySelector(ROLE_ADD_APPLY);
this._addError = this.querySelector(ROLE_ADD_ERROR);
this._addRow = this.querySelector(ROLE_ADD_ROW);
this._addSelect = this.querySelector(ROLE_ADD_SELECT);
this._typeSelect = this.querySelector(ROLE_TYPE_SELECT);
this._uncertain = this.querySelector(ROLE_UNCERTAIN);
this._template = this.querySelector(ROLE_NEW_TEMPLATE);
this._addInput = this._addSelect ? this._addSelect.querySelector(".ssr-input") : null;
if (!this._addPanel || !this._addRow || !this._addSelect || !this._typeSelect || !this._uncertain || !this._template) {
return;
}
if (this._addToggle) {
this._addToggle.addEventListener("click", () => {
this._addPanel.classList.toggle("hidden");
});
}
if (this._addClose) {
this._addClose.addEventListener("click", () => {
this._addPanel.classList.add("hidden");
});
}
if (this._addInput) {
this._addInput.addEventListener("keydown", (event) => {
if (event.key === "Enter") {
this._pendingApply = true;
}
});
}
if (this._addApply) {
this._addApply.addEventListener("click", () => {
this._pendingApply = false;
const idInput = this._addPanel.querySelector(`input[name='${this._prefix}_new_id']`);
const hasSelection = idInput && idInput.value.trim().length > 0;
if (!hasSelection) {
if (this._addError) {
this._addError.classList.remove("hidden");
}
return;
}
if (this._addError) {
this._addError.classList.add("hidden");
}
if (!this._pendingItem) {
return;
}
this._insertNewRow();
});
}
this._addSelect.addEventListener("ssrchange", (event) => {
this._pendingItem = event.detail?.item || null;
if (this._pendingItem && this._addError) {
this._addError.classList.add("hidden");
}
if (this._pendingApply && this._pendingItem && this._addApply) {
this._pendingApply = false;
this._addApply.click();
}
});
}
_clearAddPanel() {
if (this._addSelect) {
const clearButton = this._addSelect.querySelector(".ssr-clear-button");
if (clearButton) {
clearButton.click();
}
}
if (this._typeSelect) {
this._typeSelect.selectedIndex = 0;
}
if (this._uncertain) {
this._uncertain.checked = false;
}
if (this._addError) {
this._addError.classList.add("hidden");
}
}
_insertNewRow() {
const fragment = this._template.content.cloneNode(true);
const row = fragment.querySelector(ROLE_REL_ROW) || fragment.firstElementChild;
if (!row) {
return;
}
const link = fragment.querySelector("[data-rel-link]");
if (link) {
link.setAttribute("href", `${this._linkBase}${this._pendingItem.id}`);
}
const nameEl = fragment.querySelector("[data-rel-name]");
if (nameEl) {
nameEl.textContent = this._pendingItem.name || "";
}
const detailEl = fragment.querySelector("[data-rel-detail]");
const detailContainer = fragment.querySelector("[data-rel-detail-container]");
const detailText = this._pendingItem.detail || this._pendingItem.bio || "";
if (detailEl && detailText) {
detailEl.textContent = detailText;
} else if (detailContainer) {
detailContainer.remove();
}
const newBadge = fragment.querySelector("[data-rel-new]");
if (newBadge) {
newBadge.textContent = this._newLabel;
}
const typeSelect = fragment.querySelector("[data-rel-input='type']");
if (typeSelect && this._typeSelect) {
typeSelect.innerHTML = this._typeSelect.innerHTML;
typeSelect.value = this._typeSelect.value;
typeSelect.name = `${this._prefix}_new_type`;
}
const uncertain = fragment.querySelector("[data-rel-input='uncertain']");
if (uncertain && this._uncertain) {
uncertain.checked = this._uncertain.checked;
uncertain.name = `${this._prefix}_new_uncertain`;
const uncertainId = `${this._prefix}_new_uncertain_row`;
uncertain.id = uncertainId;
const uncertainLabel = fragment.querySelector("[data-rel-uncertain-label]");
if (uncertainLabel) {
uncertainLabel.setAttribute("for", uncertainId);
}
}
const hiddenId = fragment.querySelector("[data-rel-input='id']");
if (hiddenId) {
hiddenId.name = `${this._prefix}_new_id`;
hiddenId.value = this._pendingItem.id;
}
const deleteButton = fragment.querySelector(ROLE_NEW_DELETE);
if (deleteButton) {
deleteButton.addEventListener("click", () => {
this._addRow.innerHTML = "";
this._pendingItem = null;
this._clearAddPanel();
if (this._addPanel) {
this._addPanel.classList.add("hidden");
}
});
}
this._addRow.innerHTML = "";
this._addRow.appendChild(fragment);
this._pendingItem = null;
this._clearAddPanel();
if (this._addPanel) {
this._addPanel.classList.add("hidden");
}
}
_setupDeleteToggles() {
this.querySelectorAll("[data-delete-toggle]").forEach((button) => {
button.addEventListener("click", () => {
const targetId = button.getAttribute("data-delete-toggle");
const checkbox = this.querySelector(`#${CSS.escape(targetId)}`);
if (!checkbox) {
return;
}
checkbox.checked = !checkbox.checked;
button.classList.toggle("opacity-60", checkbox.checked);
const row = button.closest(ROLE_REL_ROW);
if (row) {
row.classList.toggle("bg-red-50", checkbox.checked);
row.querySelectorAll(ROLE_REL_STRIKE).forEach((el) => {
el.classList.toggle("is-removed", checkbox.checked);
el.classList.toggle("text-gray-500", checkbox.checked);
});
}
const label = button.querySelector("[data-delete-label]");
if (label) {
label.textContent = checkbox.checked
? label.getAttribute("data-delete-active") || "Wird entfernt"
: label.getAttribute("data-delete-default") || "Entfernen";
}
const icon = button.querySelector("i");
if (icon) {
if (checkbox.checked) {
icon.classList.add("hidden");
icon.classList.remove("ri-delete-bin-line", "ri-arrow-go-back-line");
} else {
icon.classList.remove("hidden");
icon.classList.add("ri-delete-bin-line");
icon.classList.remove("ri-arrow-go-back-line");
}
}
});
button.addEventListener("mouseenter", () => {
const targetId = button.getAttribute("data-delete-toggle");
const checkbox = this.querySelector(`#${CSS.escape(targetId)}`);
if (!checkbox || !checkbox.checked) {
return;
}
const label = button.querySelector("[data-delete-label]");
if (label) {
label.textContent = label.getAttribute("data-delete-hover") || "Rückgängig";
label.classList.add("text-orange-700");
label.classList.remove("text-gray-500");
}
const icon = button.querySelector("i");
if (icon) {
icon.classList.remove("hidden");
icon.classList.add("ri-arrow-go-back-line");
icon.classList.remove("ri-delete-bin-line");
}
});
button.addEventListener("mouseleave", () => {
const targetId = button.getAttribute("data-delete-toggle");
const checkbox = this.querySelector(`#${CSS.escape(targetId)}`);
const label = button.querySelector("[data-delete-label]");
if (!label) {
return;
}
label.classList.remove("text-orange-700");
if (checkbox && checkbox.checked) {
label.textContent = label.getAttribute("data-delete-active") || "Wird entfernt";
} else {
label.textContent = label.getAttribute("data-delete-default") || "Entfernen";
}
const icon = button.querySelector("i");
if (icon) {
if (checkbox && checkbox.checked) {
icon.classList.add("hidden");
icon.classList.remove("ri-delete-bin-line", "ri-arrow-go-back-line");
} else {
icon.classList.remove("hidden");
icon.classList.add("ri-delete-bin-line");
icon.classList.remove("ri-arrow-go-back-line");
}
}
});
});
}
}

73
views/transform/single-select-remote.js
View File

@@ -22,6 +22,7 @@ export class SingleSelectRemote extends HTMLElement {
this._placeholder = "Search...";
this._options = [];
this._selected = null;
this._highlightedIndex = -1;
this._fetchTimeout = null;
this._fetchController = null;
this._listVisible = false;
@@ -93,6 +94,7 @@ export class SingleSelectRemote extends HTMLElement {
_handleInput(event) {
const value = event.target.value.trim();
this._selected = null;
this._highlightedIndex = -1;
this._syncHiddenInput();
if (value.length < this._minChars) {
@@ -114,6 +116,35 @@ export class SingleSelectRemote extends HTMLElement {
_handleKeyDown(event) {
if (event.key === "Escape") {
this._hideList();
return;
}
if (event.key === "ArrowDown") {
event.preventDefault();
this._moveHighlight(1);
return;
}
if (event.key === "ArrowUp") {
event.preventDefault();
this._moveHighlight(-1);
return;
}
if (event.key === "Home") {
event.preventDefault();
this._setHighlight(0);
return;
}
if (event.key === "End") {
event.preventDefault();
this._setHighlight(this._options.length - 1);
return;
}
if (event.key === "Enter") {
if (this._options.length === 0) {
return;
}
event.preventDefault();
const index = this._highlightedIndex >= 0 ? this._highlightedIndex : 0;
this._selectOption(this._options[index]);
}
}
@@ -164,6 +195,7 @@ export class SingleSelectRemote extends HTMLElement {
const data = await resp.json();
const items = Array.isArray(data?.[this._resultKey]) ? data[this._resultKey] : [];
this._options = items.filter((item) => item && item.id && item.name);
this._highlightedIndex = this._options.length > 0 ? 0 : -1;
this._renderOptions();
if (this._options.length > 0) {
this._showList();
@@ -186,10 +218,16 @@ export class SingleSelectRemote extends HTMLElement {
this._options.forEach((item) => {
const option = document.createElement("button");
option.type = "button";
option.setAttribute("data-index", String(this._options.indexOf(item)));
option.className = [
SSR_OPTION_CLASS,
"w-full text-left px-3 py-2 hover:bg-slate-100 transition-colors",
].join(" ");
const optionIndex = this._options.indexOf(item);
const isHighlighted = optionIndex === this._highlightedIndex;
option.classList.toggle("bg-slate-100", isHighlighted);
option.classList.toggle("text-gray-900", isHighlighted);
option.setAttribute("aria-selected", isHighlighted ? "true" : "false");
const nameEl = document.createElement("div");
nameEl.className = [SSR_OPTION_NAME_CLASS, "text-sm font-semibold text-gray-800"].join(" ");
@@ -218,6 +256,41 @@ export class SingleSelectRemote extends HTMLElement {
});
}
_setHighlight(index) {
if (this._options.length === 0) {
this._highlightedIndex = -1;
return;
}
const nextIndex = Math.max(0, Math.min(index, this._options.length - 1));
this._highlightedIndex = nextIndex;
this._renderOptions();
this._scrollHighlightedIntoView();
this._showList();
}
_moveHighlight(delta) {
if (this._options.length === 0) {
this._highlightedIndex = -1;
return;
}
const startIndex = this._highlightedIndex >= 0 ? this._highlightedIndex : 0;
const nextIndex = Math.max(0, Math.min(startIndex + delta, this._options.length - 1));
this._highlightedIndex = nextIndex;
this._renderOptions();
this._scrollHighlightedIntoView();
this._showList();
}
_scrollHighlightedIntoView() {
if (!this._list || this._highlightedIndex < 0) {
return;
}
const option = this._list.querySelector(`[data-index="${this._highlightedIndex}"]`);
if (option) {
option.scrollIntoView({ block: "nearest" });
}
}
_selectOption(item) {
this._selected = item;
if (this._input) {