X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/d673bf61c221ca1aa1b72d636ee354e8ac933fd2..refs/pull/1576/head:/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 c86b90d2c..cabce9139 100644
--- a/resources/assets/js/components/page-comments.js
+++ b/resources/assets/js/components/page-comments.js
@@ -1,4 +1,6 @@
 import MarkdownIt from "markdown-it";
+import {scrollAndHighlightElement} from "../services/util";
+
 const md = new MarkdownIt({ html: false });
 
 class PageComments {
@@ -25,8 +27,8 @@ class PageComments {
     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));
+            const id = event.target.href.split('#')[1];
+            scrollAndHighlightElement(document.querySelector('#' + id));
         }
         if (actionElem === null) return;
         event.preventDefault();
@@ -54,7 +56,7 @@ class PageComments {
         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';
+        textArea.style.height = ((lineCount * 20) + 40) + 'px';
         this.editingComment = commentElem;
     }
 
@@ -88,6 +90,7 @@ class PageComments {
             commentElem.parentNode.removeChild(commentElem);
             window.$events.emit('success', window.trans('entities.comment_deleted_success'));
             this.updateCount();
+            this.hideForm();
         });
     }
 
@@ -129,15 +132,26 @@ class PageComments {
     showForm() {
         this.formContainer.style.display = 'block';
         this.formContainer.parentNode.style.display = 'block';
-        this.elem.querySelector('[comment-add-button]').style.display = 'none';
+        this.elem.querySelector('[comment-add-button-container]').style.display = 'none';
         this.formInput.focus();
-        window.scrollToElement(this.formInput);
+        this.formInput.scrollIntoView({behavior: "smooth"});
     }
 
     hideForm() {
         this.formContainer.style.display = 'none';
         this.formContainer.parentNode.style.display = 'none';
-        this.elem.querySelector('[comment-add-button]').style.display = 'block';
+        const addButtonContainer = this.elem.querySelector('[comment-add-button-container]');
+        if (this.getCommentCount() > 0) {
+            this.elem.appendChild(addButtonContainer)
+        } else {
+            const countBar = this.elem.querySelector('[comment-count-bar]');
+            countBar.appendChild(addButtonContainer);
+        }
+        addButtonContainer.style.display = 'block';
+    }
+
+    getCommentCount() {
+        return this.elem.querySelectorAll('.comment-box[comment]').length;
     }
 
     setReply(commentElem) {