better clckong and dragging behavior

This commit is contained in:
Simon Martens
2026-01-16 20:32:09 +01:00
parent 43a10e4ec2
commit 0a33796b4d
2 changed files with 19 additions and 1 deletions

View File

@@ -461,6 +461,22 @@
}); });
} }
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;
}
setCollapsed(item.dataset.collapsed !== "true");
updateCollapseAllLabel();
});
}
if (editButton) { if (editButton) {
editButton.addEventListener("click", () => { editButton.addEventListener("click", () => {
if (item.querySelector("[data-role='content-edit']")) { if (item.querySelector("[data-role='content-edit']")) {
@@ -710,6 +726,7 @@
return; return;
} }
draggedItem = item; draggedItem = item;
item.dataset.dragging = "true";
draggedItem.classList.add("opacity-60"); draggedItem.classList.add("opacity-60");
list.style.rowGap = "0.75rem"; list.style.rowGap = "0.75rem";
list.style.paddingTop = "0.25rem"; list.style.paddingTop = "0.25rem";
@@ -740,6 +757,7 @@
list.addEventListener("dragend", () => { list.addEventListener("dragend", () => {
if (draggedItem) { if (draggedItem) {
draggedItem.classList.remove("opacity-60"); draggedItem.classList.remove("opacity-60");
draggedItem.dataset.dragging = "";
} }
draggedItem = null; draggedItem = null;
list.style.rowGap = ""; list.style.rowGap = "";

View File

@@ -21,7 +21,7 @@
<div data-role="content-item" class="relative {{ if $isNew }}data-new-content{{ end }} {{ if $openEdit }}data-editing{{ end }}" data-open-edit="{{ if $openEdit }}true{{ end }}" data-content-temp="{{ if $isNew }}true{{ end }}" data-content-id="{{ $contentID }}" data-collapsed="true"> <div data-role="content-item" class="relative {{ if $isNew }}data-new-content{{ end }} {{ if $openEdit }}data-editing{{ end }}" data-open-edit="{{ if $openEdit }}true{{ end }}" data-content-temp="{{ if $isNew }}true{{ end }}" data-content-id="{{ $contentID }}" data-collapsed="true">
<div data-role="content-view" class="{{ if $openEdit }}hidden{{ end }} mt-2"> <div data-role="content-view" class="{{ if $openEdit }}hidden{{ end }} mt-2">
<div class="border border-slate-200 bg-stone-100 rounded-xs overflow-hidden"> <div class="border border-slate-200 bg-stone-100 rounded-xs overflow-hidden">
<div class="flex items-center justify-between gap-4 border-b border-slate-200 bg-stone-100 px-3 py-2 cursor-grab" data-role="content-drag-handle" data-content-header="true" draggable="true" aria-label="Beitrag verschieben"> <div class="flex items-center justify-between gap-4 border-b border-slate-200 bg-stone-100 px-3 py-2 cursor-pointer hover:bg-stone-200 transition-colors duration-75" data-role="content-drag-handle" data-content-header="true" draggable="true" aria-label="Beitrag verschieben">
<div class="flex items-center gap-2 text-sm font-bold text-gray-800"> <div class="flex items-center gap-2 text-sm font-bold text-gray-800">
<button type="button" class="text-slate-600 rounded-xs px-2 py-1 text-sm transition-colors hover:bg-stone-100 {{ if $isNew }}hidden{{ end }}" data-role="content-collapse-toggle" aria-label="Beitrag einklappen" aria-expanded="true"> <button type="button" class="text-slate-600 rounded-xs px-2 py-1 text-sm transition-colors hover:bg-stone-100 {{ if $isNew }}hidden{{ end }}" data-role="content-collapse-toggle" aria-label="Beitrag einklappen" aria-expanded="true">
<i class="ri-arrow-up-s-line" data-role="content-collapse-icon"></i> <i class="ri-arrow-up-s-line" data-role="content-collapse-icon"></i>