diff options
-rw-r--r-- | static/js/controllers/base_controller.js | 13 | ||||
-rw-r--r-- | static/js/controllers/comments_controller.js | 13 | ||||
-rw-r--r-- | static/js/controllers/replies_controller.js | 20 | ||||
-rw-r--r-- | templates/comments/index.jinja | 2 |
4 files changed, 31 insertions, 17 deletions
diff --git a/static/js/controllers/base_controller.js b/static/js/controllers/base_controller.js index c5b562f..fc05e29 100644 --- a/static/js/controllers/base_controller.js +++ b/static/js/controllers/base_controller.js @@ -9,6 +9,19 @@ export class BaseController { this.parser = new DOMParser(); } + async submit(event, route) { + event.preventDefault(); + const form = new FormData(event.target); + + try { + const response = await fetch(route, { method: "POST", body: form }); + + response.text().then((response_document) => { + this.renderSubmitResponse(response_document); + }); + } catch(error) {} + } + getDomain() { return this.comments_server_url.split('/')[2]; } diff --git a/static/js/controllers/comments_controller.js b/static/js/controllers/comments_controller.js index 08f9548..8989c5a 100644 --- a/static/js/controllers/comments_controller.js +++ b/static/js/controllers/comments_controller.js @@ -39,18 +39,7 @@ export class CommentsController extends BaseController { } async submit(event) { - event.preventDefault(); - var form = new FormData(event.target); - form.append("domain", `${window.location.protocol}//${window.location.host}`); - - try { - const response = await fetch(`${this.comments_server_host}/api/comments?path=${this.post}`, - { method: "POST", body: form }); - - response.text().then((response_document) => { - this.renderSubmitResponse(response_document); - }); - } catch(error) {} + super.submit(event, `${this.comments_server_host}/api/comments?path=${this.post}`); } } diff --git a/static/js/controllers/replies_controller.js b/static/js/controllers/replies_controller.js index 5e67057..5d638a5 100644 --- a/static/js/controllers/replies_controller.js +++ b/static/js/controllers/replies_controller.js @@ -6,11 +6,16 @@ export class RepliesController extends BaseController { } 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 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); @@ -24,20 +29,27 @@ export class RepliesController extends BaseController { 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); - else + this.setCommentId(replies_section); + this.reply_form.addEventListener("submit", this.submit.bind(this)); + } else form.remove(); } showReplies(event) { /* The div to contain the comment's replies. From the element id we can get the comment's id. */ - const replies_section = event.target.parentElement.parentElement.childNodes[3]; - const comment_id = /\d/.exec(replies_section.id)[0]; + this.setCommentId(event.target); console.log("You're in showReplies()"); } + setCommentId(parent) { + const replies_section = parent.parentElement.parentElement.childNodes[3]; + + this.comment_id = /\d/.exec(replies_section.id)[0]; + } + async getReplyForm() { var form = await this.get("/api/replies/new"); diff --git a/templates/comments/index.jinja b/templates/comments/index.jinja index bb310c5..4f082bd 100644 --- a/templates/comments/index.jinja +++ b/templates/comments/index.jinja @@ -21,7 +21,7 @@ <input class="replies-button" type="button" value="Replies" /> <input class="new-reply-button" type="button" value="New Reply" /> </div> - <div id="comment-replies-{{ comment.id }}" class="date"> + <div id="comment-replies-{{ comment.id }}"> </div> </section> </div> |