mirror of
https://github.com/Theodor-Springmann-Stiftung/musenalm.git
synced 2026-02-04 02:25:30 +00:00
886 lines
28 KiB
Plaintext
886 lines
28 KiB
Plaintext
{{ $model := . }}
|
|
|
|
<edit-page>
|
|
<div class="flex container-normal bg-slate-100 mx-auto px-8">
|
|
<div class="flex flex-row w-full justify-between">
|
|
<div class="flex flex-col justify-end-safe flex-2/5">
|
|
<div class="mb-1">
|
|
<i class="ri-file-list-3-line"></i> Inhalte
|
|
</div>
|
|
<h1 class="text-2xl w-full font-bold text-slate-900 mb-1">
|
|
{{- if $model.result -}}
|
|
{{- $model.result.Entry.PreferredTitle -}}
|
|
{{- else -}}
|
|
Inhalte bearbeiten
|
|
{{- end -}}
|
|
</h1>
|
|
{{- if $model.result -}}
|
|
<div class="flex flex-row gap-x-3">
|
|
<div>
|
|
<a
|
|
href="/almanach/{{ $model.result.Entry.MusenalmID }}"
|
|
class="text-gray-700 hover:text-slate-950 block no-underline">
|
|
<i class="ri-eye-line"></i> Anschauen
|
|
</a>
|
|
</div>
|
|
·
|
|
<div class="flex flex-row">
|
|
{{- if $model.result.PrevByID -}}
|
|
<div>
|
|
<a href="/almanach/{{ $model.result.PrevByID.MusenalmID }}/contents/edit" class="text-gray-700 hover:text-slate-950 no-underline block">
|
|
<i class="ri-arrow-left-s-line"></i>
|
|
</a>
|
|
</div>
|
|
{{- end -}}
|
|
<div class="px-1.5 py-0.5 rounded-xs bg-gray-200 w-fit font-bold">
|
|
{{ $model.result.Entry.MusenalmID }}
|
|
</div>
|
|
{{- if $model.result.NextByID -}}
|
|
<div>
|
|
<a href="/almanach/{{ $model.result.NextByID.MusenalmID }}/contents/edit" class="text-gray-700 hover:text-slate-950 no-underline block">
|
|
<i class="ri-arrow-right-s-line"></i>
|
|
</a>
|
|
</div>
|
|
{{- end -}}
|
|
</div>
|
|
·
|
|
<div>
|
|
<a href="/almanach/{{- $model.result.Entry.MusenalmID -}}/contents/edit" class="text-gray-700 no-underline hover:text-slate-950 block">
|
|
<i class="ri-loop-left-line"></i> Reset
|
|
</a>
|
|
</div>
|
|
·
|
|
<div>
|
|
<a href="/almanach/{{- $model.result.Entry.MusenalmID -}}/edit" class="text-gray-700 no-underline hover:text-slate-950 block">
|
|
<i class="ri-edit-2-line"></i> Almanach
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{{- end -}}
|
|
</div>
|
|
{{- if $model.result -}}
|
|
<div class="flex flex-row" id="contents-header-data">
|
|
<div class="flex flex-col justify-end gap-y-6 pr-20">
|
|
<div class="">
|
|
<div class="font-bold text-sm">
|
|
<i class="ri-navigation-line"></i> Navigation
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
{{- if $model.result.PrevByTitle -}}
|
|
<tool-tip position="top" class="!inline">
|
|
<div class="data-tip">{{ $model.result.PrevByTitle.PreferredTitle }}</div>
|
|
<a
|
|
href="/almanach/{{ $model.result.PrevByTitle.MusenalmID }}/contents/edit"
|
|
class="text-gray-700 hover:text-slate-950 no-underline">
|
|
<i class="ri-arrow-left-s-line"></i>
|
|
</a>
|
|
</tool-tip>
|
|
{{- end -}}
|
|
<span class="text-gray-800 font-bold no-underline">
|
|
A - Z
|
|
</span>
|
|
{{- if $model.result.NextByTitle -}}
|
|
<tool-tip position="top" class="!inline">
|
|
<div class="data-tip">{{ $model.result.NextByTitle.PreferredTitle }}</div>
|
|
<a
|
|
href="/almanach/{{ $model.result.NextByTitle.MusenalmID }}/contents/edit"
|
|
class="text-gray-700 hover:text-slate-950 no-underline">
|
|
<i class="ri-arrow-right-s-line"></i>
|
|
</a>
|
|
</tool-tip>
|
|
{{- end -}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col justify-end gap-y-6 pr-10">
|
|
<div class="">
|
|
<div class="font-bold text-sm">
|
|
<i class="ri-database-2-line"></i> Datenbank-ID
|
|
</div>
|
|
<div class="">{{ $model.result.Entry.Id }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col justify-end gap-y-6 pr-4">
|
|
<div class="">
|
|
<div class="font-bold text-sm mb-1"><i class="ri-calendar-line"></i> Zuletzt bearbeitet</div>
|
|
<div>
|
|
<div class="px-1.5 py-0.5 rounded-xs bg-gray-200 w-fit">
|
|
<span>{{ GermanDate $model.result.Entry.Updated }}</span>,
|
|
<span>{{ GermanTime $model.result.Entry.Updated }}</span>h
|
|
</div>
|
|
<div
|
|
class="px-1.5 py-0.5 rounded-xs mt-1.5 bg-gray-200 w-fit {{ if not $model.result.User }}hidden{{ end }}">
|
|
<i class="ri-user-line mr-1"></i>
|
|
<span>{{- if $model.result.User -}}{{ $model.result.User.Name }}{{- end -}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{- end -}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-normal mx-auto mt-4 !px-0">
|
|
{{ template "_usermessage" $model }}
|
|
<div id="contents-sync-indicator" class="fixed right-6 bottom-6 z-50 hidden rounded-full bg-stone-200 px-3 py-2 text-sm text-stone-700 shadow-md">
|
|
<i class="ri-loader-4-line spinning mr-2"></i>
|
|
Reihenfolge wird gespeichert
|
|
</div>
|
|
<div id="contents-htmx-indicator" class="fixed right-6 bottom-16 z-50 hidden rounded-full bg-stone-200 px-3 py-2 text-sm text-stone-700 shadow-md">
|
|
<i class="ri-loader-4-line spinning mr-2"></i>
|
|
<span data-role="contents-htmx-label">Eintrag wird geladen</span>
|
|
</div>
|
|
<input type="hidden" name="csrf_token" value="{{ $model.csrf_token }}" data-role="csrf-token" />
|
|
<div class="flex items-center justify-end gap-2 px-4">
|
|
<button type="button" class="resetbutton w-auto px-3 py-2 flex items-center gap-2" data-role="contents-collapse-all" data-state="expanded">
|
|
<i class="ri-arrow-up-s-line" data-role="contents-collapse-all-icon"></i>
|
|
<span data-role="contents-collapse-all-label">Alle Eintraege einklappen</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="resetbutton w-auto px-3 py-2 flex items-center gap-2"
|
|
data-role="contents-create"
|
|
data-loading-label="Eintrag wird geladen"
|
|
hx-post="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/insert"
|
|
hx-target="[data-role='contents-list']"
|
|
hx-swap="beforeend"
|
|
hx-include="[data-role='csrf-token']"
|
|
hx-vals='{"position":"after","content_id":""}'>
|
|
<i class="ri-add-line"></i>
|
|
<span>Eintrag anlegen</span>
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-col gap-1"
|
|
data-role="contents-list"
|
|
data-insert-endpoint="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/insert"
|
|
data-edit-endpoint="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/edit/form"
|
|
data-order-endpoint="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/edit">
|
|
{{- range $_, $content := $model.result.Contents -}}
|
|
{{- template "_content_item" (Dict
|
|
"content" $content
|
|
"entry" $model.result.Entry
|
|
"csrf_token" $model.csrf_token
|
|
"content_types" $model.content_types
|
|
"musenalm_types" $model.musenalm_types
|
|
"pagination_values" $model.pagination_values
|
|
"agents" $model.result.Agents
|
|
"content_agents" (index $model.result.ContentsAgents $content.Id)
|
|
"agent_relations" $model.agent_relations
|
|
"open_edit" false
|
|
"is_new" false
|
|
) -}}
|
|
{{- end -}}
|
|
</div>
|
|
</div>
|
|
</edit-page>
|
|
|
|
<script type="module">
|
|
const applyMultiSelectInit = (el) => {
|
|
if (!el) return;
|
|
const optionsRaw = el.getAttribute("data-initial-options") || "[]";
|
|
const valuesRaw = el.getAttribute("data-initial-values") || "[]";
|
|
let options = [];
|
|
let values = [];
|
|
try {
|
|
options = JSON.parse(optionsRaw);
|
|
values = JSON.parse(valuesRaw);
|
|
} catch {
|
|
return;
|
|
}
|
|
if (options.length && typeof el.setOptions === "function") {
|
|
el.setOptions(options);
|
|
}
|
|
if (values.length) {
|
|
el.value = values;
|
|
if (typeof el.captureInitialSelection === "function") {
|
|
el.captureInitialSelection();
|
|
}
|
|
}
|
|
};
|
|
|
|
let enterEditMode = null;
|
|
let setupEditFormGlobal = null;
|
|
|
|
const initPage = () => {
|
|
const list = document.querySelector("[data-role='contents-list']");
|
|
if (!list) {
|
|
return;
|
|
}
|
|
|
|
const getItems = () => Array.from(list.querySelectorAll("[data-role='content-item']"));
|
|
const collapseAllButton = document.querySelector("[data-role='contents-collapse-all']");
|
|
const collapseAllLabel = document.querySelector("[data-role='contents-collapse-all-label']");
|
|
const collapseAllIcon = document.querySelector("[data-role='contents-collapse-all-icon']");
|
|
const removeGaps = () => {
|
|
list.querySelectorAll("[data-role='content-gap']").forEach((gap) => gap.remove());
|
|
};
|
|
const renderInsertGaps = () => {
|
|
removeGaps();
|
|
const insertEndpoint = list.dataset.insertEndpoint || "";
|
|
const items = getItems();
|
|
if (!insertEndpoint) {
|
|
return;
|
|
}
|
|
if (list.querySelector("[data-role='content-item'].data-editing")) {
|
|
return;
|
|
}
|
|
const createGap = (position, contentId, label) => {
|
|
const gap = document.createElement("div");
|
|
gap.className = "relative group h-6 -my-2.5";
|
|
gap.dataset.role = "content-gap";
|
|
const line = document.createElement("div");
|
|
line.className = "pointer-events-none absolute left-0 right-0 top-1/2 h-0.5 -translate-y-1/2 bg-slate-300 opacity-0 transition-opacity duration-150 group-hover:opacity-100";
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.className = "absolute left-1/2 top-1/2 z-[10000] -translate-x-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-150 rounded-full border border-slate-300 bg-stone-100 text-slate-700 px-3 py-2 text-base shadow-sm";
|
|
button.dataset.loadingLabel = "Eintrag wird geladen";
|
|
button.setAttribute("aria-label", "Beitrag einfügen");
|
|
button.setAttribute("hx-post", insertEndpoint);
|
|
button.setAttribute("hx-target", "closest [data-role='content-gap']");
|
|
button.setAttribute("hx-swap", "beforebegin");
|
|
button.setAttribute("hx-include", "[data-role='csrf-token']");
|
|
button.setAttribute("hx-vals", JSON.stringify({ position, content_id: contentId }));
|
|
button.innerHTML = label ? '<i class="ri-add-line"></i><span>Neuer Beitrag</span>' : '<i class="ri-add-line"></i>';
|
|
gap.appendChild(line);
|
|
gap.appendChild(button);
|
|
gap.appendChild(document.createElement("div")).className = "h-1";
|
|
return gap;
|
|
};
|
|
|
|
items.forEach((item) => {
|
|
if (item.parentElement !== list) {
|
|
return;
|
|
}
|
|
const contentId = item.dataset.contentId || "";
|
|
list.insertBefore(createGap("before", contentId, false), item);
|
|
});
|
|
list.appendChild(createGap("after", "", true));
|
|
if (window.htmx?.process) {
|
|
list.querySelectorAll("[data-role='content-gap']").forEach((gap) => {
|
|
window.htmx.process(gap);
|
|
});
|
|
}
|
|
};
|
|
const setEditSpacing = (active) => {
|
|
list.style.rowGap = active ? "0.75rem" : "";
|
|
list.style.paddingTop = active ? "0.25rem" : "";
|
|
list.style.paddingBottom = active ? "0.25rem" : "";
|
|
};
|
|
const syncEditSpacing = () => {
|
|
setEditSpacing(!!list.querySelector("[data-role='content-item'].data-editing"));
|
|
};
|
|
const showEditButtonsIfIdle = () => {
|
|
if (list.querySelector("[data-role='content-item'].data-editing")) {
|
|
return;
|
|
}
|
|
getItems().forEach((item) => {
|
|
const editButton = item.querySelector("[data-role='content-edit-button']");
|
|
if (editButton) {
|
|
editButton.classList.remove("hidden");
|
|
}
|
|
});
|
|
};
|
|
if (getItems().length === 0) {
|
|
return;
|
|
}
|
|
|
|
const isTempContentId = (contentId) => contentId && contentId.startsWith("tmp");
|
|
const orderEndpoint = list.dataset.orderEndpoint || getItems()[0]?.querySelector("form")?.getAttribute("action") || "";
|
|
const deleteEndpoint = window.location.pathname.replace(/\/contents\/edit\/?$/, "/contents/delete");
|
|
const csrfToken = document.querySelector("input[name='csrf_token']")?.value || "";
|
|
const syncIndicator = document.querySelector("#contents-sync-indicator");
|
|
const htmxIndicator = document.querySelector("#contents-htmx-indicator");
|
|
let orderSyncTimer = null;
|
|
let isOrderSyncing = false;
|
|
let pendingOrderSync = false;
|
|
|
|
const setSyncIndicator = (active) => {
|
|
if (!syncIndicator) {
|
|
return;
|
|
}
|
|
syncIndicator.classList.toggle("hidden", !active);
|
|
};
|
|
const setHtmxIndicator = (active) => {
|
|
if (!htmxIndicator) {
|
|
return;
|
|
}
|
|
htmxIndicator.classList.toggle("hidden", !active);
|
|
};
|
|
const setHtmxIndicatorLabel = (label) => {
|
|
if (!htmxIndicator || !label) {
|
|
return;
|
|
}
|
|
const labelEl = htmxIndicator.querySelector("[data-role='contents-htmx-label']");
|
|
if (labelEl) {
|
|
labelEl.textContent = label;
|
|
}
|
|
};
|
|
|
|
const performOrderSync = () => {
|
|
if (!list || !orderEndpoint || !csrfToken || isOrderSyncing) {
|
|
pendingOrderSync = true;
|
|
return;
|
|
}
|
|
isOrderSyncing = true;
|
|
pendingOrderSync = false;
|
|
setSyncIndicator(true);
|
|
const payload = new URLSearchParams();
|
|
payload.set("csrf_token", csrfToken);
|
|
list.querySelectorAll("[data-role='content-item']").forEach((card) => {
|
|
const contentId = card.dataset.contentId;
|
|
if (!contentId || isTempContentId(contentId)) {
|
|
return;
|
|
}
|
|
payload.append("content_order[]", contentId);
|
|
});
|
|
fetch(orderEndpoint, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/x-www-form-urlencoded",
|
|
},
|
|
body: payload.toString(),
|
|
})
|
|
.catch(() => null)
|
|
.finally(() => {
|
|
isOrderSyncing = false;
|
|
setSyncIndicator(false);
|
|
if (pendingOrderSync) {
|
|
performOrderSync();
|
|
}
|
|
});
|
|
};
|
|
|
|
const syncOrder = () => {
|
|
if (orderSyncTimer) {
|
|
clearTimeout(orderSyncTimer);
|
|
}
|
|
orderSyncTimer = setTimeout(() => {
|
|
performOrderSync();
|
|
}, 300);
|
|
};
|
|
|
|
const closeAll = (keepItem = null) => {
|
|
getItems().forEach((item) => {
|
|
if (keepItem && item === keepItem) {
|
|
return;
|
|
}
|
|
const view = item.querySelector("[data-role='content-view']");
|
|
const edit = item.querySelector("[data-role='content-edit']");
|
|
const editButton = item.querySelector("[data-role='content-edit-button']");
|
|
item.classList.remove("data-editing");
|
|
if (view) {
|
|
view.classList.remove("hidden");
|
|
}
|
|
if (edit) {
|
|
edit.remove();
|
|
}
|
|
if (editButton) {
|
|
editButton.classList.remove("hidden");
|
|
}
|
|
});
|
|
};
|
|
const preserveScroll = (action) => {
|
|
const top = window.scrollY;
|
|
const left = window.scrollX;
|
|
action();
|
|
requestAnimationFrame(() => {
|
|
window.scrollTo(left, top);
|
|
});
|
|
};
|
|
|
|
enterEditMode = (item) => {
|
|
const view = item.querySelector("[data-role='content-view']");
|
|
if (view) {
|
|
view.classList.add("hidden");
|
|
}
|
|
item.classList.add("data-editing");
|
|
setEditSpacing(true);
|
|
removeGaps();
|
|
getItems().forEach((other) => {
|
|
const otherButton = other.querySelector("[data-role='content-edit-button']");
|
|
if (!otherButton || other === item) {
|
|
return;
|
|
}
|
|
otherButton.classList.add("hidden");
|
|
});
|
|
};
|
|
|
|
const openItem = (item) => {
|
|
closeAll(item);
|
|
const edit = item.querySelector("[data-role='content-edit']");
|
|
if (!edit) {
|
|
item.dataset.pendingEdit = "true";
|
|
const editButton = item.querySelector("[data-role='content-edit-button']");
|
|
if (editButton) {
|
|
editButton.click();
|
|
}
|
|
return;
|
|
}
|
|
enterEditMode(item);
|
|
};
|
|
|
|
const removeItem = (item) => {
|
|
const gap = item.previousElementSibling;
|
|
if (gap && gap.matches("[data-role='content-gap']")) {
|
|
gap.remove();
|
|
}
|
|
item.remove();
|
|
renderInsertGaps();
|
|
getItems().forEach((other) => {
|
|
const otherButton = other.querySelector("[data-role='content-edit-button']");
|
|
if (otherButton) {
|
|
otherButton.classList.remove("hidden");
|
|
}
|
|
});
|
|
};
|
|
|
|
const setupItem = (item) => {
|
|
if (!item || item.dataset.init === "true") {
|
|
return;
|
|
}
|
|
item.dataset.init = "true";
|
|
|
|
const editButton = item.querySelector("[data-role='content-edit-button']");
|
|
const view = item.querySelector("[data-role='content-view']");
|
|
const collapseButton = item.querySelector("[data-role='content-collapse-toggle']");
|
|
const collapseIcon = item.querySelector("[data-role='content-collapse-icon']");
|
|
const collapsedSummary = item.querySelector("[data-role='content-collapsed-summary']");
|
|
const viewBody = item.querySelector("[data-role='content-view-body']");
|
|
const header = item.querySelector("[data-content-header='true']");
|
|
|
|
const setCollapsed = (collapsed) => {
|
|
if (!viewBody || !collapsedSummary) {
|
|
return;
|
|
}
|
|
item.dataset.collapsed = collapsed ? "true" : "";
|
|
item.classList.toggle("data-collapsed", collapsed);
|
|
viewBody.classList.toggle("hidden", collapsed);
|
|
collapsedSummary.classList.toggle("hidden", !collapsed);
|
|
if (header) {
|
|
header.classList.toggle("bg-stone-100", collapsed);
|
|
header.classList.toggle("bg-stone-200", !collapsed);
|
|
}
|
|
if (collapseButton) {
|
|
collapseButton.setAttribute("aria-expanded", (!collapsed).toString());
|
|
collapseButton.setAttribute("aria-label", collapsed ? "Beitrag ausklappen" : "Beitrag einklappen");
|
|
}
|
|
if (collapseIcon) {
|
|
collapseIcon.classList.toggle("ri-arrow-up-s-line", !collapsed);
|
|
collapseIcon.classList.toggle("ri-arrow-down-s-line", collapsed);
|
|
}
|
|
};
|
|
|
|
if (collapseButton) {
|
|
setCollapsed(item.dataset.collapsed === "true");
|
|
collapseButton.addEventListener("click", () => {
|
|
if (item.classList.contains("data-editing") || item.dataset.contentTemp === "true") {
|
|
return;
|
|
}
|
|
preserveScroll(() => {
|
|
setCollapsed(item.dataset.collapsed !== "true");
|
|
updateCollapseAllLabel();
|
|
});
|
|
});
|
|
}
|
|
|
|
if (header) {
|
|
header.addEventListener("click", (event) => {
|
|
if (item.dataset.dragging === "true") {
|
|
return;
|
|
}
|
|
if (item.classList.contains("data-editing") || item.dataset.contentTemp === "true") {
|
|
return;
|
|
}
|
|
if (event.target.closest("button, a, select, input, textarea")) {
|
|
return;
|
|
}
|
|
preserveScroll(() => {
|
|
setCollapsed(item.dataset.collapsed !== "true");
|
|
updateCollapseAllLabel();
|
|
});
|
|
});
|
|
}
|
|
|
|
if (editButton) {
|
|
editButton.addEventListener("click", () => {
|
|
if (item.querySelector("[data-role='content-edit']")) {
|
|
enterEditMode(item);
|
|
return;
|
|
}
|
|
item.dataset.pendingEdit = "true";
|
|
});
|
|
}
|
|
|
|
const pendingEdit = item.dataset.pendingEdit === "true";
|
|
if (pendingEdit && item.querySelector("[data-role='content-edit']")) {
|
|
item.dataset.pendingEdit = "";
|
|
enterEditMode(item);
|
|
}
|
|
|
|
|
|
item.querySelectorAll("multi-select-simple[data-initial-options], multi-select-simple[data-initial-values]").forEach((el) => {
|
|
applyMultiSelectInit(el);
|
|
});
|
|
|
|
if (item.dataset.openEdit === "true") {
|
|
item.dataset.openEdit = "";
|
|
openItem(item);
|
|
}
|
|
};
|
|
|
|
const setupEditForm = (item) => {
|
|
const edit = item.querySelector("[data-role='content-edit']");
|
|
if (!edit || edit.dataset.init === "true") {
|
|
return;
|
|
}
|
|
edit.dataset.init = "true";
|
|
const cancelButton = edit.querySelector("[data-role='content-edit-cancel']");
|
|
const deleteButton = edit.querySelector("[data-role='content-delete']");
|
|
const deleteDialog = edit.querySelector("[data-role='content-delete-dialog']");
|
|
const deleteConfirm = edit.querySelector("[data-role='content-delete-confirm']");
|
|
const deleteCancel = edit.querySelector("[data-role='content-delete-cancel']");
|
|
const form = edit.querySelector("form");
|
|
const view = item.querySelector("[data-role='content-view']");
|
|
|
|
if (cancelButton && view) {
|
|
cancelButton.addEventListener("click", () => {
|
|
if (item.dataset.contentTemp === "true") {
|
|
removeItem(item);
|
|
return;
|
|
}
|
|
edit.remove();
|
|
view.classList.remove("hidden");
|
|
item.classList.remove("data-editing");
|
|
showEditButtonsIfIdle();
|
|
syncEditSpacing();
|
|
renderInsertGaps();
|
|
});
|
|
}
|
|
|
|
if (deleteButton && deleteDialog) {
|
|
deleteButton.addEventListener("click", () => {
|
|
if (deleteDialog.showModal) {
|
|
deleteDialog.showModal();
|
|
} else {
|
|
deleteDialog.setAttribute("open", "true");
|
|
}
|
|
});
|
|
}
|
|
|
|
if (deleteCancel && deleteDialog) {
|
|
deleteCancel.addEventListener("click", () => {
|
|
deleteDialog.close();
|
|
});
|
|
deleteDialog.addEventListener("cancel", (event) => {
|
|
event.preventDefault();
|
|
deleteDialog.close();
|
|
});
|
|
}
|
|
|
|
if (deleteConfirm) {
|
|
deleteConfirm.addEventListener("click", () => {
|
|
if (item.dataset.contentTemp === "true") {
|
|
deleteDialog?.close();
|
|
removeItem(item);
|
|
return;
|
|
}
|
|
const payload = new URLSearchParams();
|
|
payload.set("csrf_token", csrfToken);
|
|
payload.set("content_id", item.dataset.contentId || "");
|
|
fetch(deleteEndpoint, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/x-www-form-urlencoded",
|
|
},
|
|
body: payload.toString(),
|
|
})
|
|
.then((response) => {
|
|
if (response.redirected) {
|
|
window.location.assign(response.url);
|
|
} else {
|
|
window.location.reload();
|
|
}
|
|
})
|
|
.catch(() => null);
|
|
});
|
|
}
|
|
|
|
if (form) {
|
|
form.addEventListener("submit", () => {
|
|
form.querySelectorAll("input[name='content_order[]']").forEach((input) => input.remove());
|
|
getItems().forEach((card) => {
|
|
const contentId = card.dataset.contentId;
|
|
if (!contentId) {
|
|
return;
|
|
}
|
|
const input = document.createElement("input");
|
|
input.type = "hidden";
|
|
input.name = "content_order[]";
|
|
input.value = contentId;
|
|
form.appendChild(input);
|
|
});
|
|
});
|
|
}
|
|
};
|
|
setupEditFormGlobal = setupEditForm;
|
|
|
|
const updateCollapseAllLabel = () => {
|
|
if (!collapseAllButton || !collapseAllLabel) {
|
|
return;
|
|
}
|
|
const items = getItems().filter((item) => item.dataset.contentTemp !== "true");
|
|
const allCollapsed = items.length > 0 && items.every((item) => item.dataset.collapsed === "true");
|
|
collapseAllButton.dataset.state = allCollapsed ? "collapsed" : "expanded";
|
|
collapseAllLabel.textContent = allCollapsed ? "Alle Eintraege ausklappen" : "Alle Eintraege einklappen";
|
|
if (collapseAllIcon) {
|
|
collapseAllIcon.classList.toggle("ri-arrow-up-s-line", !allCollapsed);
|
|
collapseAllIcon.classList.toggle("ri-arrow-down-s-line", allCollapsed);
|
|
}
|
|
};
|
|
|
|
const setAllCollapsed = (collapsed) => {
|
|
getItems().forEach((item) => {
|
|
if (item.dataset.contentTemp === "true" || item.classList.contains("data-editing")) {
|
|
return;
|
|
}
|
|
const viewBody = item.querySelector("[data-role='content-view-body']");
|
|
const collapsedSummary = item.querySelector("[data-role='content-collapsed-summary']");
|
|
const collapseButton = item.querySelector("[data-role='content-collapse-toggle']");
|
|
const collapseIcon = item.querySelector("[data-role='content-collapse-icon']");
|
|
const header = item.querySelector("[data-content-header='true']");
|
|
if (!viewBody || !collapsedSummary) {
|
|
return;
|
|
}
|
|
item.dataset.collapsed = collapsed ? "true" : "";
|
|
item.classList.toggle("data-collapsed", collapsed);
|
|
viewBody.classList.toggle("hidden", collapsed);
|
|
collapsedSummary.classList.toggle("hidden", !collapsed);
|
|
if (header) {
|
|
header.classList.toggle("bg-stone-100", collapsed);
|
|
header.classList.toggle("bg-stone-200", !collapsed);
|
|
}
|
|
if (collapseButton) {
|
|
collapseButton.setAttribute("aria-expanded", (!collapsed).toString());
|
|
collapseButton.setAttribute("aria-label", collapsed ? "Beitrag ausklappen" : "Beitrag einklappen");
|
|
}
|
|
if (collapseIcon) {
|
|
collapseIcon.classList.toggle("ri-arrow-up-s-line", !collapsed);
|
|
collapseIcon.classList.toggle("ri-arrow-down-s-line", collapsed);
|
|
}
|
|
});
|
|
updateCollapseAllLabel();
|
|
};
|
|
|
|
if (collapseAllButton) {
|
|
updateCollapseAllLabel();
|
|
if (collapseAllButton.dataset.init !== "true") {
|
|
collapseAllButton.dataset.init = "true";
|
|
collapseAllButton.addEventListener("click", () => {
|
|
const shouldCollapse = collapseAllButton.dataset.state !== "collapsed";
|
|
setAllCollapsed(shouldCollapse);
|
|
});
|
|
}
|
|
}
|
|
|
|
getItems().forEach((item) => {
|
|
setupItem(item);
|
|
setupEditForm(item);
|
|
});
|
|
renderInsertGaps();
|
|
syncEditSpacing();
|
|
showEditButtonsIfIdle();
|
|
if (!list.dataset.collapseInit) {
|
|
list.dataset.collapseInit = "true";
|
|
setAllCollapsed(true);
|
|
}
|
|
updateCollapseAllLabel();
|
|
|
|
if (list.dataset.pageInit !== "true") {
|
|
list.dataset.pageInit = "true";
|
|
let draggedItem = null;
|
|
const createButton = document.querySelector("[data-role='contents-create']");
|
|
if (createButton) {
|
|
createButton.addEventListener("click", () => {
|
|
requestAnimationFrame(() => {
|
|
window.scrollTo({ top: document.documentElement.scrollHeight, behavior: "smooth" });
|
|
});
|
|
});
|
|
}
|
|
list.addEventListener("click", (event) => {
|
|
const moveUp = event.target.closest("[data-role='content-move-up']");
|
|
const moveDown = event.target.closest("[data-role='content-move-down']");
|
|
if (!moveUp && !moveDown) {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
const item = event.target.closest("[data-role='content-item']");
|
|
if (!item) {
|
|
return;
|
|
}
|
|
if (moveUp) {
|
|
let prev = item.previousElementSibling;
|
|
while (prev && !prev.matches("[data-role='content-item']")) {
|
|
prev = prev.previousElementSibling;
|
|
}
|
|
if (prev) {
|
|
prev.before(item);
|
|
}
|
|
} else {
|
|
let next = item.nextElementSibling;
|
|
while (next && !next.matches("[data-role='content-item']")) {
|
|
next = next.nextElementSibling;
|
|
}
|
|
if (next) {
|
|
next.after(item);
|
|
}
|
|
}
|
|
syncOrder();
|
|
renderInsertGaps();
|
|
});
|
|
|
|
list.addEventListener("dragstart", (event) => {
|
|
if (event.target.closest("[data-role='content-edit-button']")) {
|
|
return;
|
|
}
|
|
if (event.target.closest("[data-role='content-move-up']") || event.target.closest("[data-role='content-move-down']")) {
|
|
return;
|
|
}
|
|
if (event.target.closest(".status-badge") || event.target.closest("multi-select-simple") || event.target.closest("select")) {
|
|
return;
|
|
}
|
|
const handle = event.target.closest("[data-role='content-drag-handle']");
|
|
if (!handle) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
const item = handle.closest("[data-role='content-item']");
|
|
if (!item) {
|
|
return;
|
|
}
|
|
if (item.classList.contains("data-editing")) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
draggedItem = item;
|
|
item.dataset.dragging = "true";
|
|
draggedItem.classList.add("opacity-60");
|
|
list.style.rowGap = "0.75rem";
|
|
list.style.paddingTop = "0.25rem";
|
|
list.style.paddingBottom = "0.25rem";
|
|
removeGaps();
|
|
event.dataTransfer.effectAllowed = "move";
|
|
event.dataTransfer.setData("text/plain", "move");
|
|
});
|
|
|
|
list.addEventListener("dragover", (event) => {
|
|
if (!draggedItem) {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
const targetItem = event.target.closest("[data-role='content-item']");
|
|
if (!targetItem || targetItem === draggedItem) {
|
|
return;
|
|
}
|
|
const rect = targetItem.getBoundingClientRect();
|
|
const before = event.clientY - rect.top < rect.height / 2;
|
|
if (before) {
|
|
targetItem.before(draggedItem);
|
|
} else {
|
|
targetItem.after(draggedItem);
|
|
}
|
|
});
|
|
|
|
list.addEventListener("dragend", () => {
|
|
if (draggedItem) {
|
|
draggedItem.classList.remove("opacity-60");
|
|
draggedItem.dataset.dragging = "";
|
|
}
|
|
draggedItem = null;
|
|
list.style.rowGap = "";
|
|
list.style.paddingTop = "";
|
|
list.style.paddingBottom = "";
|
|
syncOrder();
|
|
renderInsertGaps();
|
|
});
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
const editContentId = params.get("edit_content");
|
|
if (editContentId) {
|
|
const targetItem = getItems().find((item) => {
|
|
return item.dataset.contentId === editContentId;
|
|
});
|
|
if (targetItem) {
|
|
openItem(targetItem);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const initWhenReady = () => {
|
|
if (window.customElements?.whenDefined) {
|
|
window.customElements.whenDefined("multi-select-simple").then(() => {
|
|
requestAnimationFrame(initPage);
|
|
});
|
|
} else {
|
|
initPage();
|
|
}
|
|
};
|
|
|
|
initWhenReady();
|
|
|
|
document.body.addEventListener("htmx:afterSwap", (event) => {
|
|
const target = event.detail?.target;
|
|
if (target && target.matches("[data-role='content-edit-container']")) {
|
|
const item = target.closest("[data-role='content-item']");
|
|
if (item && item.dataset.pendingEdit === "true" && enterEditMode) {
|
|
item.dataset.pendingEdit = "";
|
|
enterEditMode(item);
|
|
if (setupEditFormGlobal) {
|
|
setupEditFormGlobal(item);
|
|
}
|
|
}
|
|
target.querySelectorAll("multi-select-simple[data-initial-options], multi-select-simple[data-initial-values]").forEach((el) => {
|
|
applyMultiSelectInit(el);
|
|
});
|
|
}
|
|
initWhenReady();
|
|
});
|
|
|
|
document.body.addEventListener("htmx:beforeRequest", (event) => {
|
|
const elt = event.detail?.elt;
|
|
if (!elt || !list) {
|
|
return;
|
|
}
|
|
if (elt.closest("[data-role='contents-list']")) {
|
|
const label = elt.getAttribute("data-loading-label");
|
|
if (label) {
|
|
setHtmxIndicatorLabel(label);
|
|
} else {
|
|
setHtmxIndicatorLabel("Eintrag wird geladen");
|
|
}
|
|
setHtmxIndicator(true);
|
|
}
|
|
});
|
|
|
|
document.body.addEventListener("htmx:afterRequest", (event) => {
|
|
const elt = event.detail?.elt;
|
|
if (!elt || !list) {
|
|
return;
|
|
}
|
|
if (elt.closest("[data-role='contents-list']")) {
|
|
setHtmxIndicator(false);
|
|
}
|
|
});
|
|
|
|
document.body.addEventListener("htmx:responseError", (event) => {
|
|
const elt = event.detail?.elt;
|
|
if (!elt || !list) {
|
|
return;
|
|
}
|
|
if (elt.closest("[data-role='contents-list']")) {
|
|
setHtmxIndicator(false);
|
|
}
|
|
});
|
|
</script>
|