BookStack Code Mirror - bookstack/blob - resources/js/components/page-comments.js

   1 import {scrollAndHighlightElement} from "../services/util";
   2
   3 /**
   4  * @extends {Component}
   5  */
   6 class PageComments {
   7
   8     setup() {
   9         this.elem = this.$el;
  10         this.pageId = Number(this.$opts.pageId);
  11
  12         // Element references
  13         this.container = this.$refs.commentContainer;
  14         this.formContainer = this.$refs.formContainer;
  15         this.commentCountBar = this.$refs.commentCountBar;
  16         this.addButtonContainer = this.$refs.addButtonContainer;
  17         this.replyToRow = this.$refs.replyToRow;
  18
  19         // Translations
  20         this.updatedText = this.$opts.updatedText;
  21         this.deletedText = this.$opts.deletedText;
  22         this.createdText = this.$opts.createdText;
  23         this.countText = this.$opts.countText;
  24
  25         // Internal State
  26         this.editingComment = null;
  27         this.parentId = null;
  28
  29         if (this.formContainer) {
  30             this.form = this.formContainer.querySelector('form');
  31             this.formInput = this.form.querySelector('textarea');
  32             this.form.addEventListener('submit', this.saveComment.bind(this));
  33         }
  34
  35         this.elem.addEventListener('click', this.handleAction.bind(this));
  36         this.elem.addEventListener('submit', this.updateComment.bind(this));
  37     }
  38
  39     handleAction(event) {
  40         let actionElem = event.target.closest('[action]');
  41
  42         if (event.target.matches('a[href^="#"]')) {
  43             const id = event.target.href.split('#')[1];
  44             scrollAndHighlightElement(document.querySelector('#' + id));
  45         }
  46
  47         if (actionElem === null) return;
  48         event.preventDefault();
  49
  50         const action = actionElem.getAttribute('action');
  51         const comment = actionElem.closest('[comment]');
  52         if (action === 'edit') this.editComment(comment);
  53         if (action === 'closeUpdateForm') this.closeUpdateForm();
  54         if (action === 'delete') this.deleteComment(comment);
  55         if (action === 'addComment') this.showForm();
  56         if (action === 'hideForm') this.hideForm();
  57         if (action === 'reply') this.setReply(comment);
  58         if (action === 'remove-reply-to') this.removeReplyTo();
  59     }
  60
  61     closeUpdateForm() {
  62         if (!this.editingComment) return;
  63         this.editingComment.querySelector('[comment-content]').style.display = 'block';
  64         this.editingComment.querySelector('[comment-edit-container]').style.display = 'none';
  65     }
  66
  67     editComment(commentElem) {
  68         this.hideForm();
  69         if (this.editingComment) this.closeUpdateForm();
  70         commentElem.querySelector('[comment-content]').style.display = 'none';
  71         commentElem.querySelector('[comment-edit-container]').style.display = 'block';
  72         let textArea = commentElem.querySelector('[comment-edit-container] textarea');
  73         let lineCount = textArea.value.split('\n').length;
  74         textArea.style.height = ((lineCount * 20) + 40) + 'px';
  75         this.editingComment = commentElem;
  76     }
  77
  78     updateComment(event) {
  79         let form = event.target;
  80         event.preventDefault();
  81         let text = form.querySelector('textarea').value;
  82         let reqData = {
  83             text: text,
  84             parent_id: this.parentId || null,
  85         };
  86         this.showLoading(form);
  87         let commentId = this.editingComment.getAttribute('comment');
  88         window.$http.put(`/comment/${commentId}`, reqData).then(resp => {
  89             let newComment = document.createElement('div');
  90             newComment.innerHTML = resp.data;
  91             this.editingComment.innerHTML = newComment.children[0].innerHTML;
  92             window.$events.success(this.updatedText);
  93             window.$components.init(this.editingComment);
  94             this.closeUpdateForm();
  95             this.editingComment = null;
  96         }).catch(window.$events.showValidationErrors).then(() => {
  97             this.hideLoading(form);
  98         });
  99     }
 100
 101     deleteComment(commentElem) {
 102         let id = commentElem.getAttribute('comment');
 103         this.showLoading(commentElem.querySelector('[comment-content]'));
 104         window.$http.delete(`/comment/${id}`).then(resp => {
 105             commentElem.parentNode.removeChild(commentElem);
 106             window.$events.success(this.deletedText);
 107             this.updateCount();
 108             this.hideForm();
 109         });
 110     }
 111
 112     saveComment(event) {
 113         event.preventDefault();
 114         event.stopPropagation();
 115         let text = this.formInput.value;
 116         let reqData = {
 117             text: text,
 118             parent_id: this.parentId || null,
 119         };
 120         this.showLoading(this.form);
 121         window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => {
 122             let newComment = document.createElement('div');
 123             newComment.innerHTML = resp.data;
 124             let newElem = newComment.children[0];
 125             this.container.appendChild(newElem);
 126             window.$components.init(newElem);
 127             window.$events.success(this.createdText);
 128             this.resetForm();
 129             this.updateCount();
 130         }).catch(err => {
 131             window.$events.showValidationErrors(err);
 132             this.hideLoading(this.form);
 133         });
 134     }
 135
 136     updateCount() {
 137         let count = this.container.children.length;
 138         this.elem.querySelector('[comments-title]').textContent = window.trans_plural(this.countText, count, {count});
 139     }
 140
 141     resetForm() {
 142         this.formInput.value = '';
 143         this.formContainer.appendChild(this.form);
 144         this.hideForm();
 145         this.removeReplyTo();
 146         this.hideLoading(this.form);
 147     }
 148
 149     showForm() {
 150         this.formContainer.style.display = 'block';
 151         this.formContainer.parentNode.style.display = 'block';
 152         this.addButtonContainer.style.display = 'none';
 153         this.formInput.focus();
 154         this.formInput.scrollIntoView({behavior: "smooth"});
 155     }
 156
 157     hideForm() {
 158         this.formContainer.style.display = 'none';
 159         this.formContainer.parentNode.style.display = 'none';
 160         if (this.getCommentCount() > 0) {
 161             this.elem.appendChild(this.addButtonContainer)
 162         } else {
 163             this.commentCountBar.appendChild(this.addButtonContainer);
 164         }
 165         this.addButtonContainer.style.display = 'block';
 166     }
 167
 168     getCommentCount() {
 169         return this.elem.querySelectorAll('.comment-box[comment]').length;
 170     }
 171
 172     setReply(commentElem) {
 173         this.showForm();
 174         this.parentId = Number(commentElem.getAttribute('local-id'));
 175         this.replyToRow.style.display = 'block';
 176         const replyLink = this.replyToRow.querySelector('a');
 177         replyLink.textContent = `#${this.parentId}`;
 178         replyLink.href = `#comment${this.parentId}`;
 179     }
 180
 181     removeReplyTo() {
 182         this.parentId = null;
 183         this.replyToRow.style.display = 'none';
 184     }
 185
 186     showLoading(formElem) {
 187         const groups = formElem.querySelectorAll('.form-group');
 188         for (let group of groups) {
 189             group.style.display = 'none';
 190         }
 191         formElem.querySelector('.form-group.loading').style.display = 'block';
 192     }
 193
 194     hideLoading(formElem) {
 195         const groups = formElem.querySelectorAll('.form-group');
 196         for (let group of groups) {
 197             group.style.display = 'block';
 198         }
 199         formElem.querySelector('.form-group.loading').style.display = 'none';
 200     }
 201
 202 }
 203
 204 export default PageComments;