From 500bca80c1c367bf420363d7ecaa0d1f2e27f3dd Mon Sep 17 00:00:00 2001 From: NOrtmann1 Date: Sun, 14 Jun 2026 23:00:21 +0200 Subject: [PATCH] Update editor.js --- js/editor.js | 51 ++++++++++++++++++++++++++++++++++----------------- 1 file changed, 34 insertions(+), 17 deletions(-) diff --git a/js/editor.js b/js/editor.js index fc4fe51..cb614be 100644 --- a/js/editor.js +++ b/js/editor.js @@ -15,6 +15,8 @@ function initEditor() { const popup = document.getElementById("block-popup"); const hiddenContentInput = document.getElementById("content"); + const initialImages = []; + // Pop-up umschalten bei Klick auf das Plus plusButton.addEventListener("click", () => { popup.classList.toggle("hidden"); @@ -35,25 +37,19 @@ function initEditor() { blockDiv.classList.add("editor-block"); blockDiv.setAttribute("data-type", type); - // Löschen-Button für den Block + // Wenn es ein existierendes Server-Bild beim Laden ist, Pfad im globalen Array sichern + if (type === "image" && value && typeof value === 'string' && value.startsWith('uploads/')) { + initialImages.push(value); + blockDiv.setAttribute("data-value", value); + } + + // Löschen-Button const deleteBtn = document.createElement("button"); deleteBtn.type = "button"; deleteBtn.innerHTML = "✕"; deleteBtn.classList.add("delete-block-btn"); deleteBtn.addEventListener("click", () => { - const blockType = blockDiv.getAttribute("data-type"); - - // holt den Pfad aus dem data-value Attribut des divs - const blockValue = blockDiv.getAttribute("data-value"); - - if (blockType === "image" && blockValue && blockValue.startsWith("uploads/")) { - const deletedInput = document.getElementById("deleted-images"); - if (deletedInput) { - let deletedList = JSON.parse(deletedInput.value || "[]"); - deletedList.push(blockValue); - deletedInput.value = JSON.stringify(deletedList); - } - } + // ANPASSUNG 2B: Logik hier komplett geleert. Das '✕' entfernt den Block jetzt nur noch sicher aus dem HTML. blockDiv.remove(); }); blockDiv.appendChild(deleteBtn); @@ -98,23 +94,44 @@ function initEditor() { container.appendChild(blockDiv); } - // Beim Abschicken: HTML-Blöcke auslesen und als JSON-String serialisieren + // beim Abschicken verbliebene Blöcke auslesen UND gelöschte Bilder ermitteln form.addEventListener("submit", function(e) { const blocks = []; + const currentImages = []; + + // alle aktuell im Formular verbliebenen Blöcke scannen container.querySelectorAll(".editor-block").forEach(blockDiv => { const type = blockDiv.getAttribute("data-type"); - let value = ""; + let value = blockDiv.getAttribute("data-value") || ""; if (type === "text") { value = blockDiv.querySelector("textarea").value; } else if (type === "image") { - value = blockDiv.getAttribute("data-value") || ""; + // Pfade sammeln, die der Nutzer NICHT gelöscht hat + if (value && value.startsWith('uploads/')) { + currentImages.push(value); + } } blocks.push({ type: type, value: value }); }); + // das reguläre unsichtbare Content-Feld befüllen hiddenContentInput.value = JSON.stringify(blocks); + + // Welche Bilder aus 'initialImages' fehlen in 'currentImages' ? + const deletedImages = initialImages.filter(img => !currentImages.includes(img)); + + // 'deleted_images'-Feld dynamisch erzeugen + let deletedInput = document.getElementById("deleted-images"); + if (!deletedInput) { + deletedInput = document.createElement("input"); + deletedInput.type = "hidden"; + deletedInput.id = "deleted-images"; + deletedInput.name = "deleted_images"; + form.appendChild(deletedInput); + } + deletedInput.value = JSON.stringify(deletedImages); }); // Existierende Blöcke laden (stellt alte Daten aus der Session wieder her)