add comment reply toggle
This commit is contained in:
parent
4d2bd51603
commit
e052935e2d
|
@ -829,6 +829,7 @@ video:-webkit-full-screen {
|
||||||
}
|
}
|
||||||
|
|
||||||
.comments-replies {
|
.comments-replies {
|
||||||
|
display: none;
|
||||||
padding-left: 3rem;
|
padding-left: 3rem;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1123,12 +1123,18 @@ function writeComments(allComments) {
|
||||||
if (rootComment.comment_replies) {
|
if (rootComment.comment_replies) {
|
||||||
let commentReplyBox = document.createElement('div');
|
let commentReplyBox = document.createElement('div');
|
||||||
commentReplyBox.setAttribute('class', 'comments-replies');
|
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];
|
const commentReply = rootComment.comment_replies[j];
|
||||||
let commentReplyDiv = createCommentBox(commentReply, false);
|
let commentReplyDiv = createCommentBox(commentReply, false);
|
||||||
commentReplyBox.appendChild(commentReplyDiv);
|
commentReplyBox.appendChild(commentReplyDiv);
|
||||||
}
|
}
|
||||||
if (rootComment.comment_replies.length > 0) {
|
if (totalReplies > 0) {
|
||||||
commentBox.appendChild(commentReplyBox);
|
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) {
|
function createCommentBox(comment, isRoot) {
|
||||||
let commentBox = document.createElement('div');
|
let commentBox = document.createElement('div');
|
||||||
commentBox.setAttribute('class', 'comment-box');
|
commentBox.setAttribute('class', 'comment-box');
|
||||||
|
|
Loading…
Reference in New Issue