niklas.ortmann/webprogrammierung
0
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

merge-commit

Browse Source
This commit is contained in:
NOrtmann1
2026-07-19 10:50:22 +02:00
parent d3884d2fc1 325df51812
commit 0c6cf13efa
12 changed files with 1104 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/comments.js
+192 -43
View File
@@ -11,20 +11,31 @@ document.addEventListener("DOMContentLoaded", function () {
const parentCommentInput = document.getElementById("parent-comment-id");
const replyInfo = document.getElementById("reply-info");
if (!form || !commentsList || !commentContent || !parentCommentInput || !replyInfo) {
if (!form || !commentsList || !commentContent || !parentCommentInput) {
return;
}
/**
* Aktiviert einen einzelnen Antworten-Button.
* Aktiviert einen einzelnen Antworten-Link.
*
* @param {HTMLButtonElement} button Antworten-Button
* @param {HTMLAnchorElement} replyLink Antworten-Link
*/
function registerReplyButton(button) {
button.addEventListener("click", function () {
parentCommentInput.value = button.dataset.commentId;
replyInfo.textContent = "Antwort auf " + button.dataset.author;
replyInfo.style.display = "block";
function registerReplyButton(replyLink) {
replyLink.addEventListener("click", function (event) {
/*
* Mit JavaScript wird die Seite nicht neu geladen.
* Ohne JavaScript funktioniert der normale Link.
*/
event.preventDefault();
parentCommentInput.value = replyLink.dataset.commentId;
if (replyInfo) {
replyInfo.textContent =
"Antwort auf " + replyLink.dataset.author;
replyInfo.style.display = "block";
}
commentContent.focus();
});
}
@@ -45,18 +56,29 @@ document.addEventListener("DOMContentLoaded", function () {
const formData = new FormData(form);
const parentCommentId = parentCommentInput.value;
fetch("php/ajax/add-comment.php", {
fetch(form.action, {
method: "POST",
body: formData
body: formData,
headers: {
"X-Requested-With": "XMLHttpRequest"
}
})
.then(response => response.json())
.then(data => {
.then(function (response) {
if (!response.ok) {
throw new Error("Fehlerhafte Serverantwort.");
}
return response.json();
})
.then(function (data) {
if (!data.success) {
alert(data.message);
return;
}
const emptyMessage = commentsList.querySelector(".no-comments-message");
const emptyMessage = commentsList.querySelector(
".no-comments-message"
);
if (emptyMessage) {
emptyMessage.remove();
@@ -64,49 +86,172 @@ document.addEventListener("DOMContentLoaded", function () {
const commentElement = document.createElement("div");
commentElement.classList.add("comment-item");
commentElement.dataset.commentId = data.commentId;
if (parentCommentId) {
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>
`;
<p>
<strong>${escapeHtml(data.author)}</strong>
<span>${escapeHtml(data.created)}</span>
</p>
const parentReplies = document.querySelector(
<p>${escapeHtml(data.content).replace(/\n/g, "<br>")}</p>
<details class="edit-comment-details">
<summary class="edit-comment-button">
Antwort bearbeiten
</summary>
<form
method="post"
action="index.php?pfad=updateComment"
class="edit-comment-form"
>
<input
type="hidden"
name="comment_id"
value="${escapeHtml(data.commentId)}"
>
<input
type="hidden"
name="article_id"
value="${escapeHtml(formData.get("article_id"))}"
>
<textarea
name="content"
required
>${escapeHtml(data.content)}</textarea>
<button type="submit" class="button">
Änderungen speichern
</button>
</form>
</details>
<form
method="post"
action="index.php?pfad=deleteComment"
class="delete-comment-form"
>
<input
type="hidden"
name="comment_id"
value="${escapeHtml(data.commentId)}"
>
<input
type="hidden"
name="article_id"
value="${escapeHtml(formData.get("article_id"))}"
>
<button
type="submit"
class="delete-comment-button"
onclick="return confirm('Möchtest du diesen Kommentar wirklich löschen?');"
>
Kommentar löschen
</button>
</form>
`;
const parentReplies = commentsList.querySelector(
`.comment-item[data-comment-id="${parentCommentId}"] .comment-replies`
);
if (parentReplies) {
parentReplies.appendChild(commentElement);
} else {
commentsList.prepend(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>
<p>
<strong>${escapeHtml(data.author)}</strong>
<span>${escapeHtml(data.created)}</span>
</p>
<button type="button"
class="reply-button"
data-comment-id="${escapeHtml(data.commentId)}"
data-author="${escapeHtml(data.author)}">
Antworten
</button>
<p>${escapeHtml(data.content).replace(/\n/g, "<br>")}</p>
<div class="comment-replies"></div>
`;
<details class="edit-comment-details">
<summary class="edit-comment-button">
Kommentar bearbeiten
</summary>
<form
method="post"
action="index.php?pfad=updateComment"
class="edit-comment-form"
>
<input
type="hidden"
name="comment_id"
value="${escapeHtml(data.commentId)}"
>
<input
type="hidden"
name="article_id"
value="${escapeHtml(formData.get("article_id"))}"
>
<textarea
name="content"
required
>${escapeHtml(data.content)}</textarea>
<button type="submit" class="button">
Änderungen speichern
</button>
</form>
</details>
<form
method="post"
action="index.php?pfad=deleteComment"
class="delete-comment-form"
>
<input
type="hidden"
name="comment_id"
value="${escapeHtml(data.commentId)}"
>
<input
type="hidden"
name="article_id"
value="${escapeHtml(formData.get("article_id"))}"
>
<button
type="submit"
class="delete-comment-button"
onclick="return confirm('Möchtest du diesen Kommentar wirklich löschen?');"
>
Kommentar löschen
</button>
</form>
<a
href="#comment-form"
class="reply-button"
data-comment-id="${escapeHtml(data.commentId)}"
data-author="${escapeHtml(data.author)}"
>
Antworten
</a>
<div class="comment-replies"></div>
`;
commentsList.prepend(commentElement);
const newReplyButton = commentElement.querySelector(".reply-button");
const newReplyButton =
commentElement.querySelector(".reply-button");
if (newReplyButton) {
registerReplyButton(newReplyButton);
@@ -115,10 +260,14 @@ document.addEventListener("DOMContentLoaded", function () {
commentContent.value = "";
parentCommentInput.value = "";
replyInfo.textContent = "";
replyInfo.style.display = "none";
if (replyInfo) {
replyInfo.textContent = "";
replyInfo.style.display = "none";
}
})
.catch(() => {
.catch(function (error) {
console.error(error);
alert("Kommentar konnte nicht gesendet werden.");
});
});
@@ -126,12 +275,12 @@ document.addEventListener("DOMContentLoaded", function () {
/**
* Entfernt HTML-Sonderzeichen aus Nutzereingaben.
*
* @param {string} text Zu bereinigender Text
* @param {*} text Zu bereinigender Text
* @returns {string} Sicherer Text
*/
function escapeHtml(text) {
const div = document.createElement("div");
div.textContent = text;
div.textContent = String(text ?? "");
return div.innerHTML;
}
});