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

move dialog out of the thing

Browse Source
This commit is contained in:
Simon Martens
2026-01-21 20:11:29 +01:00
parent 007fc0cc9c
commit bd4d6571e0
2 changed files with 53 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
views/routes/almanach/contents/edit/body.gohtml
View File

@@ -198,6 +198,22 @@
{{- end -}} {{- end -}}
</div> </div>
</div> </div>
<dialog id="content-delete-dialog" class="dbform fixed inset-0 m-auto rounded-md border border-slate-200 p-0 shadow-xl backdrop:bg-black/40">
<div class="p-5 w-[22rem]">
<div class="text-base font-bold text-gray-900">Eintrag löschen?</div>
<div id="content-delete-dialog-title" class="text-sm font-bold text-gray-900 mt-1"></div>
<p class="text-sm text-gray-700 mt-2">
Der Eintrag wird dauerhaft gelöscht. Verknüpfungen, Exemplare und Beiträge werden entfernt.
</p>
<div class="flex items-center justify-end gap-3 mt-4">
<button type="button" class="resetbutton w-auto px-3 py-1 text-sm" data-role="content-delete-cancel">Abbrechen</button>
<button type="button" class="submitbutton w-auto bg-red-700 hover:bg-red-800 px-3 py-1 text-sm" data-role="content-delete-confirm">
Löschen
</button>
</div>
</div>
</dialog>
</edit-page> </edit-page>
<script> <script>
@@ -506,7 +522,14 @@
} }
syncIndicator.classList.toggle("hidden", !active); syncIndicator.classList.toggle("hidden", !active);
}; };
const deleteContent = (item, dialog) => { // Shared delete dialog
const deleteDialog = document.getElementById("content-delete-dialog");
const deleteDialogTitle = document.getElementById("content-delete-dialog-title");
const deleteConfirmBtn = deleteDialog?.querySelector("[data-role='content-delete-confirm']");
const deleteCancelBtn = deleteDialog?.querySelector("[data-role='content-delete-cancel']");
let itemToDelete = null;
const deleteContent = (item) => {
if (!item) { if (!item) {
return; return;
} }
@@ -523,7 +546,7 @@
content_id: contentId, content_id: contentId,
}, },
}); });
dialog?.close(); deleteDialog?.close();
return; return;
} }
const payload = new URLSearchParams(); const payload = new URLSearchParams();
@@ -542,10 +565,25 @@
}) })
.catch(() => null) .catch(() => null)
.finally(() => { .finally(() => {
dialog?.close(); deleteDialog?.close();
}); });
}; };
// Setup shared delete dialog events
if (deleteDialog) {
deleteCancelBtn?.addEventListener("click", () => deleteDialog.close());
deleteDialog.addEventListener("cancel", (e) => {
e.preventDefault();
deleteDialog.close();
});
deleteConfirmBtn?.addEventListener("click", () => {
if (itemToDelete) {
deleteContent(itemToDelete);
itemToDelete = null;
}
});
}
const performOrderSync = () => { const performOrderSync = () => {
if (!list || !orderEndpoint || !csrfToken || isOrderSyncing) { if (!list || !orderEndpoint || !csrfToken || isOrderSyncing) {
pendingOrderSync = true; pendingOrderSync = true;
@@ -603,35 +641,19 @@
item.dataset.init = "true"; item.dataset.init = "true";
const deleteButtonView = item.querySelector("[data-role='content-delete-view']"); const deleteButtonView = item.querySelector("[data-role='content-delete-view']");
const deleteDialogView = item.querySelector("[data-role='content-delete-dialog-view']");
const deleteConfirmView = item.querySelector("[data-role='content-delete-confirm-view']");
const deleteCancelView = item.querySelector("[data-role='content-delete-cancel-view']");
const view = item.querySelector("[data-role='content-view']");
const viewBody = item.querySelector("[data-role='content-view-body']");
if (deleteButtonView && deleteDialogView) { if (deleteButtonView && deleteDialog) {
deleteButtonView.addEventListener("click", () => { deleteButtonView.addEventListener("click", () => {
if (deleteDialogView.showModal) { itemToDelete = item;
deleteDialogView.showModal(); // Get title from search index for the dialog
} else { const contentId = item.dataset.contentId;
deleteDialogView.setAttribute("open", "true"); const contentData = window.contentsSearchIndex?.[contentId];
const title = contentData?.titleStmt || contentData?.preferredTitle || '';
if (deleteDialogTitle) {
deleteDialogTitle.textContent = title;
deleteDialogTitle.style.display = title ? '' : 'none';
} }
}); deleteDialog.showModal();
}
if (deleteCancelView && deleteDialogView) {
deleteCancelView.addEventListener("click", () => {
deleteDialogView.close();
});
deleteDialogView.addEventListener("cancel", (event) => {
event.preventDefault();
deleteDialogView.close();
});
}
if (deleteConfirmView) {
deleteConfirmView.addEventListener("click", () => {
deleteContent(item, deleteDialogView);
}); });
} }
}; };
@@ -643,6 +665,8 @@
if (list.dataset.pageInit !== "true") { if (list.dataset.pageInit !== "true") {
list.dataset.pageInit = "true"; list.dataset.pageInit = "true";
let draggedItem = null; let draggedItem = null;
let lastDragOverTime = 0;
const DRAG_THROTTLE_MS = 100;
list.addEventListener("click", (event) => { list.addEventListener("click", (event) => {
const moveUp = event.target.closest("[data-role='content-move-up']"); const moveUp = event.target.closest("[data-role='content-move-up']");
const moveDown = event.target.closest("[data-role='content-move-down']"); const moveDown = event.target.closest("[data-role='content-move-down']");

17
views/routes/components/_content_item.gohtml
View File

@@ -80,23 +80,6 @@
</div> </div>
</div> </div>
<div data-role="content-match-display" class="hidden px-2 py-1 text-sm text-gray-600 bg-amber-50 border-l-2 border-amber-400"></div> <div data-role="content-match-display" class="hidden px-2 py-1 text-sm text-gray-600 bg-amber-50 border-l-2 border-amber-400"></div>
<dialog data-role="content-delete-dialog-view" class="dbform fixed inset-0 m-auto rounded-md border border-slate-200 p-0 shadow-xl backdrop:bg-black/40">
<div class="p-5 w-[22rem]">
<div class="text-base font-bold text-gray-900">Eintrag löschen?</div>
{{- if $content.TitleStmt -}}
<div class="text-sm font-bold text-gray-900 mt-1">{{ $content.TitleStmt }}</div>
{{- end -}}
<p class="text-sm text-gray-700 mt-2">
Der Eintrag wird dauerhaft gelöscht. Verknüpfungen, Exemplare und Beiträge werden entfernt.
</p>
<div class="flex items-center justify-end gap-3 mt-4">
<button type="button" class="resetbutton w-auto px-3 py-1 text-sm" data-role="content-delete-cancel-view">Abbrechen</button>
<button type="button" class="submitbutton w-auto bg-red-700 hover:bg-red-800 px-3 py-1 text-sm" data-role="content-delete-confirm-view">
Löschen
</button>
</div>
</div>
</dialog>
</div> </div>
</div> </div>
</div> </div>