Generowanie prostej listy komentarzy (poglądowo):
Poglądowo
$SESSION['logged_user_id'] = 2;
$zap = "SELECT id_comment, user_id, user_name, comment FROM forum";
if ($zap->num_rows > 0) {
while ($w = $zap->fetch_assoc()) {
if ($w['user_id'] == $SESSION['logged_user_id']) {
$id_comment = " id=\"c".$w['id_comment']."\"";
$button = "<button id=\"b".$w['id_comment']."\">Edytuj</button>"
."<span id=\"m".$w['id_comment']."\"></span>";
} else {
$id_comment = "";
$button = "";
}
echo '
<div class="comment-wrap">
<div class="user">'.$w['user_name'].'</div>
<div class="comment"'. $id_comment.'>'.$w['comment'].'</div>'
.$button.'</div>';
}
echo '<script src="./js/comment_edit.js"></script>';
} else {
echo '<div class="comment-wrap">Brak komentarzy</div>';
}
comment_edit.js
const BUTTON_EDIT_MODE = "Edytuj";
const BUTTON_SAVE_MODE = "Zapisz";
let before_content = "";
const MESSAGE = {
CLEAR: 0,
INFO: 1,
SUCCESS: 2,
ERROR: 3
};
const MODE = {
EDIT: 1,
UPDATE: 2
};
let mode = MODE.EDIT;
const buttons_edit = document.querySelectorAll("[id^='b']");
buttons_edit.forEach((button_edit) => {
button_edit.addEventListener('click', ({target}) => {
let id_comment = target.id.replace('b','c');
const comment = document.getElementById(id_comment);
if (target.textContent == BUTTON_EDIT_MODE && mode != MODE.UPDATE) {
comment.contentEditable = true;
comment.className = "user-comment-edit-mode";
before_content = comment.innerHTML;
comment.focus();
} else if (target.textContent == BUTTON_SAVE_MODE) {
target.textContent = BUTTON_EDIT_MODE;
const comment_html = comment.innerHTML;
id_comment = id_comment.replace('c','');
mode = MODE.UPDATE;
showMessage(id_comment, MESSAGE.INFO);
setTimeout(updateComment, 2000, id_comment, comment_html);
}
});
});
function updateComment(id_comment, comment_html) {
const id_comment_encode = encodeURIComponent(id_comment);
const comment_encode = encodeURIComponent(comment_html);
const body = `id_comment=${id_comment_encode}&comment=${comment_encode}`;
//console.log(body);
/*
W pliku update_user_comment.php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (isset($_POST['id_comment']) && isset($_POST['comment'])) {
...
header("HTTP/1.1 200 OK");
exit(0);
}
}
*/
fetch("update_user_comment.php", {
method: "post",
body: body,
headers: { 'Content-type': 'application/x-www-form-urlencoded' }
})
.then(res => {
if (res.ok) {
return res.text();
} else {
throw new Error(`${res.status} ${res.statusText}`);
}
})
.then(res => {
//showMessage(id_comment, MESSAGE.SUCCESS, res);
showMessage(id_comment, MESSAGE.SUCCESS);
})
.catch(error => {
showMessage(id_comment, MESSAGE.ERROR, error);
});
setTimeout(showMessage, 5000, id_comment, MESSAGE.CLEAR);
}
function showMessage(id, type, add_message = "") {
const message_box = document.getElementById(`m${id}`);
let class_name = "";
let message = "";
switch (type) {
case MESSAGE.INFO:
class_name = "message-info";
message = "Zapisuje komentarz ...";
break;
case MESSAGE.SUCCESS:
class_name = "message-success";
message = "Komentarz został zapisany.";
break;
case MESSAGE.ERROR:
class_name = "message-error";
message = "Wystąpił błąd.";
break;
case MESSAGE.CLEAR:
default:
mode = MODE.EDIT;
}
message_box.className = class_name;
message_box.textContent = message + " " + add_message;
}
const comments_box = document.querySelectorAll("[id^='c']");
comments_box.forEach((comment_box) => {
comment_box.addEventListener('focusout', ({target}) => {
const comment = document.getElementById(target.id);
comment.contentEditable = false;
comment.className = "user-comment";
});
});
comments_box.forEach((comment_box) => {
comment_box.addEventListener('input', ({target}) => {
const id_button = target.id.replace('c','b');
const button_edit = document.getElementById(id_button);
if (before_content != target.innerHTML) {
button_edit.textContent = BUTTON_SAVE_MODE;
} else {
button_edit.textContent = BUTTON_EDIT_MODE;
}
});
});
CodePen
Do edytowanych pól można dodać proste menu edycji podobne do tego :