tubearchivist
/
tubearchivist
mirror of https://github.com/tubearchivist/tubearchivist.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add comment reply toggle

This commit is contained in:
simon 2022-11-21 09:55:33 +07:00
parent 4d2bd51603
commit e052935e2d
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
2 changed files with 33 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
tubearchivist/static/css/style.css
View File

@ -829,6 +829,7 @@ video:-webkit-full-screen {
}
.comments-replies {
display: none;
padding-left: 3rem;
margin-top: 1rem;
}

34
tubearchivist/static/script.js
View File

@ -1123,12 +1123,18 @@ function writeComments(allComments) {
if (rootComment.comment_replies) {
let commentReplyBox = document.createElement('div');
commentReplyBox.setAttribute('class', 'comments-replies');
for (let j = 0; j < rootComment.comment_replies.length; j++) {
commentReplyBox.setAttribute('id', rootComment.comment_id + '-replies');
let totalReplies = rootComment.comment_replies.length;
if (totalReplies > 0) {
let replyButton = createReplyButton(rootComment.comment_id + '-replies', totalReplies);
commentBox.appendChild(replyButton);
}
for (let j = 0; j < totalReplies; j++) {
const commentReply = rootComment.comment_replies[j];
let commentReplyDiv = createCommentBox(commentReply, false);
commentReplyBox.appendChild(commentReplyDiv);
}
if (rootComment.comment_replies.length > 0) {
if (totalReplies > 0) {
commentBox.appendChild(commentReplyBox);
}
}
@ -1136,6 +1142,30 @@ function writeComments(allComments) {
}
}
function createReplyButton(replyId, totalReplies) {
let replyButton = document.createElement('button');
replyButton.innerHTML = `<span id="toggle-icon">+</span> ${totalReplies} replies`;
replyButton.setAttribute('data-id', replyId);
replyButton.setAttribute('onclick', 'toggleCommentReplies(this)');
return replyButton
}
function toggleCommentReplies(button) {
let commentReplyId = button.getAttribute("data-id");
console.log('toggle comment reply for ' + commentReplyId);
let state = document.getElementById(commentReplyId).style.display;
if (state == "none" || state == false) {
document.getElementById(commentReplyId).style.display = "block";
button.querySelector("#toggle-icon").innerHTML = "-";
} else {
document.getElementById(commentReplyId).style.display = "none";
button.querySelector("#toggle-icon").innerHTML = "+";
}
}
function createCommentBox(comment, isRoot) {
let commentBox = document.createElement('div');
commentBox.setAttribute('class', 'comment-box');