diff options
author | HombreLaser <sebastian-440@live.com> | 2024-02-24 17:12:34 -0600 |
---|---|---|
committer | HombreLaser <sebastian-440@live.com> | 2024-02-24 17:12:34 -0600 |
commit | a0ff547c4bd4361f60baf2d82d511a291b5996ff (patch) | |
tree | 99d99ee7c27a7f28d44f74735327027099a25fc9 /static/js/controllers/replies_controller.js | |
parent | 4aa78f692bc4346a7a565cdedae9acd1cd1e75dc (diff) |
Improve comments rendering
Diffstat (limited to 'static/js/controllers/replies_controller.js')
-rw-r--r-- | static/js/controllers/replies_controller.js | 84 |
1 files changed, 48 insertions, 36 deletions
diff --git a/static/js/controllers/replies_controller.js b/static/js/controllers/replies_controller.js index 5d638a5..5f767be 100644 --- a/static/js/controllers/replies_controller.js +++ b/static/js/controllers/replies_controller.js @@ -1,58 +1,70 @@ import { BaseController } from "./base_controller.js"; export class RepliesController extends BaseController { - constructor() { - super(); - } + constructor() { + super(); + } - async init() { - this.comment_id = 0; - this.reply_form = await this.getReplyForm(); - this.listenButtons("replies-button", this.showReplies.bind(this)); - this.listenButtons("new-reply-button", this.showReplyForm.bind(this)); - } + async init() { + this.comment_id = 0; + this.reply_form = await this.getReplyForm(); + this.listenButtons("replies-button", this.renderReplies.bind(this)); + this.listenButtons("new-reply-button", this.showReplyForm.bind(this)); + } - async submit(event) { - await super.submit(event, `${this.comments_server_host}/api/comments/${this.comment_id}/replies`); - } + async submit(event) { + await super.submit(event, `${this.comments_server_host}/api/comments/${this.comment_id}/replies`); + } - listenButtons(class_name, func) { - const buttons = document.getElementsByClassName(class_name); + listenButtons(class_name, func) { + const buttons = document.getElementsByClassName(class_name); - if(buttons) { + if(buttons) { for(let button of buttons) - button.addEventListener("click", func); - } - } + button.addEventListener("click", func); + } + } - showReplyForm(event) { - const replies_section = event.target.parentElement.parentElement.childNodes[3]; - const form = replies_section.querySelector(".reply-form"); + showReplyForm(event) { + const replies_section = event.target.parentElement.parentElement.childNodes[3]; + const form = replies_section.querySelector(".reply-form"); - if(form == null) { + if(form == null) { replies_section.appendChild(this.reply_form); this.setCommentId(replies_section); this.reply_form.addEventListener("submit", this.submit.bind(this)); - } else - form.remove(); - } + } else + form.remove(); + } - showReplies(event) { - /* The div to contain the comment's replies. From the element id - we can get the comment's id. */ - this.setCommentId(event.target); - console.log("You're in showReplies()"); - } + renderReplies(event) { + /* The div to contain the comment's replies. From the element id + we can get the comment's id. */ + const comment_replies_section = event.target.parentElement.parentElement.parentElement; + const replies = comment_replies_section.querySelector(".replies-section"); + this.setCommentId(comment_replies_section); + + if( replies != null) { + replies.remove(); - setCommentId(parent) { - const replies_section = parent.parentElement.parentElement.childNodes[3]; + return; + } + + this.get(`/api/comments/${this.comment_id}/replies`).then((value) => { + const replies = value?.getElementById(`replies-section-${this.comment_id}`); + + if(replies != null) + comment_replies_section.appendChild(replies); + }); + } - this.comment_id = /\d/.exec(replies_section.id)[0]; + setCommentId(replies_section) { + this.comment_id = /\d/.exec(replies_section.id)[0]; } async getReplyForm() { - var form = await this.get("/api/replies/new"); + var form = await this.get("/api/replies/new"); - return form.getElementsByClassName("reply-form")[0]; + return form.getElementsByClassName("reply-form")[0]; } } |