Merge branch 'dev' into SuchergebnisseJS
This commit is contained in:
rirat-0
+137
@@ -0,0 +1,137 @@
|
||||
/**
|
||||
* Initialisiert die Kommentarfunktion.
|
||||
*
|
||||
* Kommentare werden per AJAX gespeichert,
|
||||
* ohne dass die Seite neu geladen werden muss.
|
||||
*/
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const form = document.getElementById("comment-form");
|
||||
const commentsList = document.getElementById("comments-list");
|
||||
const commentContent = document.getElementById("comment-content");
|
||||
const parentCommentInput = document.getElementById("parent-comment-id");
|
||||
const replyInfo = document.getElementById("reply-info");
|
||||
|
||||
if (!form || !commentsList || !commentContent || !parentCommentInput || !replyInfo) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Aktiviert einen einzelnen Antworten-Button.
|
||||
*
|
||||
* @param {HTMLButtonElement} button Antworten-Button
|
||||
*/
|
||||
function registerReplyButton(button) {
|
||||
button.addEventListener("click", function () {
|
||||
parentCommentInput.value = button.dataset.commentId;
|
||||
replyInfo.textContent = "Antwort auf " + button.dataset.author;
|
||||
replyInfo.style.display = "block";
|
||||
commentContent.focus();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Registriert alle bereits vorhandenen Antwort-Buttons.
|
||||
*/
|
||||
document.querySelectorAll(".reply-button").forEach(function (button) {
|
||||
registerReplyButton(button);
|
||||
});
|
||||
|
||||
/**
|
||||
* Sendet Kommentare per AJAX an den Server.
|
||||
*/
|
||||
form.addEventListener("submit", function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const formData = new FormData(form);
|
||||
const parentCommentId = parentCommentInput.value;
|
||||
|
||||
fetch("php/ajax/add-comment.php", {
|
||||
method: "POST",
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (!data.success) {
|
||||
alert(data.message);
|
||||
return;
|
||||
}
|
||||
|
||||
const emptyMessage = commentsList.querySelector(".no-comments-message");
|
||||
|
||||
if (emptyMessage) {
|
||||
emptyMessage.remove();
|
||||
}
|
||||
|
||||
const commentElement = document.createElement("div");
|
||||
commentElement.classList.add("comment-item");
|
||||
|
||||
if (parentCommentId) {
|
||||
commentElement.classList.add("comment-reply");
|
||||
|
||||
commentElement.innerHTML = `
|
||||
<p>
|
||||
<strong>${escapeHtml(data.author)}</strong>
|
||||
<span>${escapeHtml(data.created)}</span>
|
||||
</p>
|
||||
<p>${escapeHtml(data.content).replace(/\n/g, "<br>")}</p>
|
||||
`;
|
||||
|
||||
const parentReplies = document.querySelector(
|
||||
`.comment-item[data-comment-id="${parentCommentId}"] .comment-replies`
|
||||
);
|
||||
|
||||
if (parentReplies) {
|
||||
parentReplies.appendChild(commentElement);
|
||||
}
|
||||
|
||||
} else {
|
||||
commentElement.dataset.commentId = data.commentId;
|
||||
|
||||
commentElement.innerHTML = `
|
||||
<p>
|
||||
<strong>${escapeHtml(data.author)}</strong>
|
||||
<span>${escapeHtml(data.created)}</span>
|
||||
</p>
|
||||
<p>${escapeHtml(data.content).replace(/\n/g, "<br>")}</p>
|
||||
|
||||
<button type="button"
|
||||
class="reply-button"
|
||||
data-comment-id="${escapeHtml(data.commentId)}"
|
||||
data-author="${escapeHtml(data.author)}">
|
||||
Antworten
|
||||
</button>
|
||||
|
||||
<div class="comment-replies"></div>
|
||||
`;
|
||||
|
||||
commentsList.prepend(commentElement);
|
||||
|
||||
const newReplyButton = commentElement.querySelector(".reply-button");
|
||||
|
||||
if (newReplyButton) {
|
||||
registerReplyButton(newReplyButton);
|
||||
}
|
||||
}
|
||||
|
||||
commentContent.value = "";
|
||||
parentCommentInput.value = "";
|
||||
replyInfo.textContent = "";
|
||||
replyInfo.style.display = "none";
|
||||
})
|
||||
.catch(() => {
|
||||
alert("Kommentar konnte nicht gesendet werden.");
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Entfernt HTML-Sonderzeichen aus Nutzereingaben.
|
||||
*
|
||||
* @param {string} text Zu bereinigender Text
|
||||
* @returns {string} Sicherer Text
|
||||
*/
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement("div");
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
});
|
||||
+179
@@ -0,0 +1,179 @@
|
||||
console.log("Die JavaScript-Datei wurde erfolgreich geladen!");
|
||||
|
||||
function initEditor() {
|
||||
const form = document.getElementById("editor-form");
|
||||
|
||||
if (!form) {
|
||||
console.error("Skript abgebrochen: Formular nicht gefunden!");
|
||||
return;
|
||||
} else {
|
||||
console.log("Formular gefunden und Editor initialisiert:", form);
|
||||
}
|
||||
|
||||
const container = document.getElementById("block-container");
|
||||
const plusButton = document.getElementById("plus-button");
|
||||
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");
|
||||
});
|
||||
|
||||
// Klick auf eine Block-Option im Pop-up
|
||||
popup.querySelectorAll("button").forEach(btn => {
|
||||
btn.addEventListener("click", function() {
|
||||
const type = this.getAttribute("data-type");
|
||||
addBlockElement(type, "");
|
||||
popup.classList.add("hidden");
|
||||
});
|
||||
});
|
||||
|
||||
// Erstellt ein visuelles HTML-Element im Editor
|
||||
function addBlockElement(type, value = "") {
|
||||
const blockDiv = document.createElement("div");
|
||||
blockDiv.classList.add("editor-block");
|
||||
blockDiv.setAttribute("data-type", type);
|
||||
|
||||
// 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", () => {
|
||||
// ANPASSUNG 2B: Logik hier komplett geleert. Das '✕' entfernt den Block jetzt nur noch sicher aus dem HTML.
|
||||
blockDiv.remove();
|
||||
});
|
||||
blockDiv.appendChild(deleteBtn);
|
||||
|
||||
if (type === "text") {
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.placeholder = "Schreibe deinen Textblock...";
|
||||
textarea.value = value;
|
||||
blockDiv.appendChild(textarea);
|
||||
} else if (type === "image") {
|
||||
const fileInput = document.createElement("input");
|
||||
fileInput.type = "file";
|
||||
fileInput.accept = "image/*";
|
||||
|
||||
const imgPreview = document.createElement("img");
|
||||
imgPreview.style.maxWidth = "200px";
|
||||
imgPreview.style.display = "block";
|
||||
imgPreview.style.marginTop = "10px";
|
||||
|
||||
if (value && typeof value === 'string') {
|
||||
if (value.startsWith('uploads/') || value.startsWith('data:image/')) {
|
||||
imgPreview.src = value;
|
||||
blockDiv.setAttribute("data-value", value);
|
||||
}
|
||||
}
|
||||
|
||||
fileInput.addEventListener("change", function() {
|
||||
if (this.files && this.files[0]) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
imgPreview.src = e.target.result;
|
||||
blockDiv.setAttribute("data-value", e.target.result);
|
||||
}
|
||||
reader.readAsDataURL(this.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
blockDiv.appendChild(fileInput);
|
||||
blockDiv.appendChild(imgPreview);
|
||||
}
|
||||
|
||||
container.appendChild(blockDiv);
|
||||
}
|
||||
|
||||
// beim Abschicken verbleibende 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 = "";
|
||||
|
||||
if (type === "text") {
|
||||
value = blockDiv.querySelector("textarea").value;
|
||||
} else if (type === "image") {
|
||||
|
||||
const imgTag = blockDiv.querySelector("img");
|
||||
if (imgTag) {
|
||||
const srcValue = imgTag.getAttribute("src") || "";
|
||||
// Wenn es ein neues Bild ist, nutzen wir das data-value (Base64)
|
||||
if (srcValue.startsWith('data:image/')) {
|
||||
value = blockDiv.getAttribute("data-value") || "";
|
||||
} else {
|
||||
value = srcValue;
|
||||
}
|
||||
}
|
||||
|
||||
// Pfade sammeln, die der Nutzer NICHT gelöscht hat (für den Abgleich)
|
||||
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);
|
||||
|
||||
// Differenz berechnen: Welche Bilder aus 'initialImages' fehlen in 'currentImages' ?
|
||||
const deletedImages = initialImages.filter(img => !currentImages.includes(img));
|
||||
|
||||
// das 'deleted_images'-Feld dynamisch befüllen und an den Controller senden
|
||||
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)
|
||||
try {
|
||||
const initialBlocks = JSON.parse(hiddenContentInput.value.trim());
|
||||
if (Array.isArray(initialBlocks)) {
|
||||
initialBlocks.forEach(b => {
|
||||
if (b.type === "image" && b.value && typeof b.value === 'string' && !b.value.startsWith('data:image/')) {
|
||||
let cleanPath = b.value.trim().replace(/\\\//g, '/'); // Verwandelt \/ in /
|
||||
|
||||
initialImages.push(cleanPath);
|
||||
addBlockElement(b.type, cleanPath);
|
||||
|
||||
} else {
|
||||
addBlockElement(b.type, b.value);
|
||||
}
|
||||
});
|
||||
console.log("Erfolgreich registrierte Start-Bilder:", initialImages);
|
||||
}
|
||||
} catch(e) {
|
||||
if (hiddenContentInput.value.trim() !== "") {
|
||||
addBlockElement("text", hiddenContentInput.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SICHERER START: Prüft, ob das HTML bereits bereit ist
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", initEditor);
|
||||
} else {
|
||||
// Falls das DOM schon fertig geladen ist, führen wir es direkt aus
|
||||
initEditor();
|
||||
}
|
||||
Reference in New Issue
Block a user