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

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