syhily/yufan.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: better style for replying the root comments.

Browse Source
This commit is contained in:
Yufan Sheng 2024-06-17 03:46:20 +08:00
parent 6131b97ec5
commit f4a216e6cf
Signed by: syhily
GPG Key ID: DEB186763C308C31
2 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/asserts/scripts/yufan.me.js
View File

@ -92,12 +92,23 @@ if (typeof comments !== 'undefined' && comments !== null) {
const replyForm = comments.querySelector('#respond');
const cancelReply = () => {
cancel.hidden = true;
replyForm.querySelector('input[name="rid"]').value = '0';
replyForm.querySelector('textarea[name="content"]').value = '';
// Move the form back to top.
const commentCount = comments.querySelector('.comment-total-count');
commentCount.after(replyForm);
// Get rid to clean up the children form.
const ridInput = replyForm.querySelector('input[name="rid"]');
const rid = ridInput.value;
ridInput.value = '0';
if (rid !== '0') {
console.log({ rid: rid });
const children = comments.querySelector(`#atk-comment-${rid}`).querySelector('.children');
if (children !== null && children.querySelectorAll('li').length === 0) {
children.remove();
}
}
};
// TODO: Load the commenter information from the cookie.
@ -147,7 +158,17 @@ if (typeof comments !== 'undefined' && comments !== null) {
// Move form to the reply.
const commentItem = event.target.closest('li');
if (commentItem.dataset.depth === '1') {
if (commentItem.querySelector('ul.children') === null) {
// Create this for better architecture.
commentItem.insertAdjacentHTML('beforeend', '<ul class="children"></ul>');
}
commentItem.querySelector('ul.children').appendChild(replyForm);
} else {
commentItem.after(replyForm);
}
// Focus the comment form.
replyForm.querySelector('#content').focus();
}

2
src/components/comment/CommentItem.astro
View File

@ -13,7 +13,7 @@ interface Props {
const { comment, config, depth, pending } = Astro.props;
---
<li id={`atk-comment-${comment.id}`} class={`comment odd alt thread-odd thread-alt depth-${depth}`}>
<li id={`atk-comment-${comment.id}`} class="comment odd alt thread-odd thread-alt" data-depth={depth}>
<article id={`div-comment-${comment.id}`} class="comment-body">
<div class="comment-avatar flex-avatar">
<img