Adds overflow:auto to popup content to allow it to scroll in lower res.

[bookstack] / resources / assets / js / components / page-comments.js

diff --git a/resources/assets/js/components/page-comments.js b/resources/assets/js/components/page-comments.js
index 87cd88905d53270b4403e5249df3d092af18264d..ae2a30ff5064a5bd66686ab17dbadd4bd6b9d2ea 100644 (file)
--- a/resources/assets/js/components/page-comments.js
+++ b/resources/assets/js/components/page-comments.js
@@ -1,28 +1,35 @@
 const MarkdownIt = require("markdown-it");
-const md = new MarkdownIt({ html: true });
+const md = new MarkdownIt({ html: false });
 
 class PageComments {
 
     constructor(elem) {
         this.elem = elem;
         this.pageId = Number(elem.getAttribute('page-id'));
+        this.editingComment = null;
+        this.parentId = null;
 
-        this.formContainer = elem.querySelector('[comment-form-container]');
-        this.form = this.formContainer.querySelector('form');
-        this.formInput = this.form.querySelector('textarea');
         this.container = elem.querySelector('[comment-container]');
+        this.formContainer = elem.querySelector('[comment-form-container]');
+
+        if (this.formContainer) {
+            this.form = this.formContainer.querySelector('form');
+            this.formInput = this.form.querySelector('textarea');
+            this.form.addEventListener('submit', this.saveComment.bind(this));
+        }
 
-        // TODO - Handle elem usage when no permissions
-        this.form.addEventListener('submit', this.saveComment.bind(this));
         this.elem.addEventListener('click', this.handleAction.bind(this));
         this.elem.addEventListener('submit', this.updateComment.bind(this));
-
-        this.editingComment = null;
     }
 
     handleAction(event) {
         let actionElem = event.target.closest('[action]');
+        if (event.target.matches('a[href^="#"]')) {
+            let id = event.target.href.split('#')[1];
+            window.scrollAndHighlight(document.querySelector('#' + id));
+        }
         if (actionElem === null) return;
+        event.preventDefault();
 
         let action = actionElem.getAttribute('action');
         if (action === 'edit') this.editComment(actionElem.closest('[comment]'));
@@ -30,7 +37,8 @@ class PageComments {
         if (action === 'delete') this.deleteComment(actionElem.closest('[comment]'));
         if (action === 'addComment') this.showForm();
         if (action === 'hideForm') this.hideForm();
-        if (action === 'reply') this.setReply();
+        if (action === 'reply') this.setReply(actionElem.closest('[comment]'));
+        if (action === 'remove-reply-to') this.removeReplyTo();
     }
 
     closeUpdateForm() {
@@ -44,6 +52,9 @@ class PageComments {
         if (this.editingComment) this.closeUpdateForm();
         commentElem.querySelector('[comment-content]').style.display = 'none';
         commentElem.querySelector('[comment-edit-container]').style.display = 'block';
+        let textArea = commentElem.querySelector('[comment-edit-container] textarea');
+        let lineCount = textArea.value.split('\n').length;
+        textArea.style.height = (lineCount * 20) + 'px';
         this.editingComment = commentElem;
     }
 
@@ -54,24 +65,25 @@ class PageComments {
         let reqData = {
             text: text,
             html: md.render(text),
-            // parent_id: this.parent_id TODO - Handle replies
+            parent_id: this.parentId || null,
         };
-        // TODO - Loading indicator
+        this.showLoading(form);
         let commentId = this.editingComment.getAttribute('comment');
         window.$http.put(window.baseUrl(`/ajax/comment/${commentId}`), reqData).then(resp => {
             let newComment = document.createElement('div');
             newComment.innerHTML = resp.data;
             this.editingComment.innerHTML = newComment.children[0].innerHTML;
             window.$events.emit('success', window.trans('entities.comment_updated_success'));
+            window.components.init(this.editingComment);
             this.closeUpdateForm();
             this.editingComment = null;
+            this.hideLoading(form);
         });
     }
 
     deleteComment(commentElem) {
         let id = commentElem.getAttribute('comment');
-        // TODO - Loading indicator
-        // TODO - Confirm dropdown
+        this.showLoading(commentElem.querySelector('[comment-content]'));
         window.$http.delete(window.baseUrl(`/ajax/comment/${id}`)).then(resp => {
             commentElem.parentNode.removeChild(commentElem);
             window.$events.emit('success', window.trans('entities.comment_deleted_success'));
@@ -86,14 +98,15 @@ class PageComments {
         let reqData = {
             text: text,
             html: md.render(text),
-            // parent_id: this.parent_id TODO - Handle replies
+            parent_id: this.parentId || null,
         };
-        // TODO - Loading indicator
+        this.showLoading(this.form);
         window.$http.post(window.baseUrl(`/ajax/page/${this.pageId}/comment`), reqData).then(resp => {
             let newComment = document.createElement('div');
             newComment.innerHTML = resp.data;
-            this.container.appendChild(newComment.children[0]);
-
+            let newElem = newComment.children[0];
+            this.container.appendChild(newElem);
+            window.components.init(newElem);
             window.$events.emit('success', window.trans('entities.comment_created_success'));
             this.resetForm();
             this.updateCount();
@@ -109,13 +122,16 @@ class PageComments {
         this.formInput.value = '';
         this.formContainer.appendChild(this.form);
         this.hideForm();
+        this.removeReplyTo();
+        this.hideLoading(this.form);
     }
 
     showForm() {
         this.formContainer.style.display = 'block';
         this.formContainer.parentNode.style.display = 'block';
         this.elem.querySelector('[comment-add-button]').style.display = 'none';
-        this.formInput.focus(); // TODO - Scroll to input on focus
+        this.formInput.focus();
+        window.scrollToElement(this.formInput);
     }
 
     hideForm() {
@@ -124,14 +140,36 @@ class PageComments {
         this.elem.querySelector('[comment-add-button]').style.display = 'block';
     }
 
-    setReply() {
-
+    setReply(commentElem) {
         this.showForm();
+        this.parentId = Number(commentElem.getAttribute('local-id'));
+        this.elem.querySelector('[comment-form-reply-to]').style.display = 'block';
+        let replyLink = this.elem.querySelector('[comment-form-reply-to] a');
+        replyLink.textContent = `#${this.parentId}`;
+        replyLink.href = `#comment${this.parentId}`;
     }
 
-}
+    removeReplyTo() {
+        this.parentId = null;
+        this.elem.querySelector('[comment-form-reply-to]').style.display = 'none';
+    }
 
-// TODO - Go to comment if url param set
+    showLoading(formElem) {
+        let groups = formElem.querySelectorAll('.form-group');
+        for (let i = 0, len = groups.length; i < len; i++) {
+            groups[i].style.display = 'none';
+        }
+        formElem.querySelector('.form-group.loading').style.display = 'block';
+    }
 
+    hideLoading(formElem) {
+        let groups = formElem.querySelectorAll('.form-group');
+        for (let i = 0, len = groups.length; i < len; i++) {
+            groups[i].style.display = 'block';
+        }
+        formElem.querySelector('.form-group.loading').style.display = 'none';
+    }
+
+}
 
 module.exports = PageComments;
\ No newline at end of file