respective book and chapter structure added.

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

diff --git a/resources/js/components/page-comments.js b/resources/js/components/page-comments.js
index 0ac9d05720de80cdf9ec1b71e31d4ed02c77d1e0..1d6abfe2044ff3a0a9e006f29e04fb4fef94601c 100644 (file)
--- a/resources/js/components/page-comments.js
+++ b/resources/js/components/page-comments.js
@@ -1,6 +1,6 @@
-import {scrollAndHighlightElement} from '../services/util';

 import {Component} from './component';
 import {Component} from './component';

-import {htmlToDom} from '../services/dom';
+import {getLoading, htmlToDom} from '../services/dom';
+import {buildForInput} from '../wysiwyg-tinymce/config';

 
 export class PageComments extends Component {
 
 
 export class PageComments extends Component {
 


@@ -10,190 +10,167 @@ export class PageComments extends Component {
 
         // Element references
         this.container = this.$refs.commentContainer;
 
         // Element references
         this.container = this.$refs.commentContainer;

-        this.formContainer = this.$refs.formContainer;

         this.commentCountBar = this.$refs.commentCountBar;
         this.commentCountBar = this.$refs.commentCountBar;

+        this.commentsTitle = this.$refs.commentsTitle;

         this.addButtonContainer = this.$refs.addButtonContainer;
         this.replyToRow = this.$refs.replyToRow;
         this.addButtonContainer = this.$refs.addButtonContainer;
         this.replyToRow = this.$refs.replyToRow;

+        this.formContainer = this.$refs.formContainer;
+        this.form = this.$refs.form;
+        this.formInput = this.$refs.formInput;
+        this.formReplyLink = this.$refs.formReplyLink;
+        this.addCommentButton = this.$refs.addCommentButton;
+        this.hideFormButton = this.$refs.hideFormButton;
+        this.removeReplyToButton = this.$refs.removeReplyToButton;
+
+        // WYSIWYG options
+        this.wysiwygLanguage = this.$opts.wysiwygLanguage;
+        this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;
+        this.wysiwygEditor = null;

 
         // Translations
 
         // Translations

-        this.updatedText = this.$opts.updatedText;
-        this.deletedText = this.$opts.deletedText;

         this.createdText = this.$opts.createdText;
         this.countText = this.$opts.countText;
 
         // Internal State
         this.createdText = this.$opts.createdText;
         this.countText = this.$opts.countText;
 
         // Internal State

-        this.editingComment = null;

         this.parentId = null;
         this.parentId = null;

+        this.formReplyText = this.formReplyLink?.textContent || '';

 
 

-        if (this.formContainer) {
-            this.form = this.formContainer.querySelector('form');
-            this.formInput = this.form.querySelector('textarea');
-            this.form.addEventListener('submit', this.saveComment.bind(this));
-        }
-
-        this.elem.addEventListener('click', this.handleAction.bind(this));
-        this.elem.addEventListener('submit', this.updateComment.bind(this));
-    }
-
-    handleAction(event) {
-        const actionElem = event.target.closest('[action]');
-
-        if (event.target.matches('a[href^="#"]')) {
-            const id = event.target.href.split('#')[1];
-            scrollAndHighlightElement(document.querySelector(`#${id}`));
-        }
-
-        if (actionElem === null) return;
-        event.preventDefault();
-
-        const action = actionElem.getAttribute('action');
-        const comment = actionElem.closest('[comment]');
-        if (action === 'edit') this.editComment(comment);
-        if (action === 'closeUpdateForm') this.closeUpdateForm();
-        if (action === 'delete') this.deleteComment(comment);
-        if (action === 'addComment') this.showForm();
-        if (action === 'hideForm') this.hideForm();
-        if (action === 'reply') this.setReply(comment);
-        if (action === 'remove-reply-to') this.removeReplyTo();
-    }
-
-    closeUpdateForm() {
-        if (!this.editingComment) return;
-        this.editingComment.querySelector('[comment-content]').style.display = 'block';
-        this.editingComment.querySelector('[comment-edit-container]').style.display = 'none';
-    }
-
-    editComment(commentElem) {
-        this.hideForm();
-        if (this.editingComment) this.closeUpdateForm();
-        commentElem.querySelector('[comment-content]').style.display = 'none';
-        commentElem.querySelector('[comment-edit-container]').style.display = 'block';
-        const textArea = commentElem.querySelector('[comment-edit-container] textarea');
-        const lineCount = textArea.value.split('\n').length;
-        textArea.style.height = `${(lineCount * 20) + 40}px`;
-        this.editingComment = commentElem;
+        this.setupListeners();

     }
 
     }
 

-    updateComment(event) {
-        const form = event.target;
-        event.preventDefault();
-        const text = form.querySelector('textarea').value;
-        const reqData = {
-            text,
-            parent_id: this.parentId || null,
-        };
-        this.showLoading(form);
-        const commentId = this.editingComment.getAttribute('comment');
-        window.$http.put(`/comment/${commentId}`, reqData).then(resp => {
-            const newComment = document.createElement('div');
-            newComment.innerHTML = resp.data;
-            this.editingComment.innerHTML = newComment.children[0].innerHTML;
-            window.$events.success(this.updatedText);
-            window.$components.init(this.editingComment);
-            this.closeUpdateForm();
-            this.editingComment = null;
-        }).catch(window.$events.showValidationErrors).then(() => {
-            this.hideLoading(form);
+    setupListeners() {
+        this.elem.addEventListener('page-comment-delete', () => {
+            setTimeout(() => this.updateCount(), 1);
+            this.hideForm();

         });
         });

-    }

 
 

-    deleteComment(commentElem) {
-        const id = commentElem.getAttribute('comment');
-        this.showLoading(commentElem.querySelector('[comment-content]'));
-        window.$http.delete(`/comment/${id}`).then(() => {
-            commentElem.parentNode.removeChild(commentElem);
-            window.$events.success(this.deletedText);
-            this.updateCount();
-            this.hideForm();
+        this.elem.addEventListener('page-comment-reply', event => {
+            this.setReply(event.detail.id, event.detail.element);

         });
         });

+
+        if (this.form) {
+            this.removeReplyToButton.addEventListener('click', this.removeReplyTo.bind(this));
+            this.hideFormButton.addEventListener('click', this.hideForm.bind(this));
+            this.addCommentButton.addEventListener('click', this.showForm.bind(this));
+            this.form.addEventListener('submit', this.saveComment.bind(this));
+        }

     }
 
     saveComment(event) {
         event.preventDefault();
         event.stopPropagation();
     }
 
     saveComment(event) {
         event.preventDefault();
         event.stopPropagation();

-        const text = this.formInput.value;
+
+        const loading = getLoading();
+        loading.classList.add('px-l');
+        this.form.after(loading);
+        this.form.toggleAttribute('hidden', true);
+

         const reqData = {
         const reqData = {

-            text,
+            html: this.wysiwygEditor.getContent(),

             parent_id: this.parentId || null,
         };
             parent_id: this.parentId || null,
         };

-        this.showLoading(this.form);
+

         window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => {
             const newElem = htmlToDom(resp.data);
         window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => {
             const newElem = htmlToDom(resp.data);

-            this.container.appendChild(newElem);
-            window.$components.init(newElem);
+
+            if (reqData.parent_id) {
+                this.formContainer.after(newElem);
+            } else {
+                this.container.append(newElem);
+            }
+

             window.$events.success(this.createdText);
             window.$events.success(this.createdText);

-            this.resetForm();
+            this.hideForm();

             this.updateCount();
         }).catch(err => {
             this.updateCount();
         }).catch(err => {

+            this.form.toggleAttribute('hidden', false);

             window.$events.showValidationErrors(err);
             window.$events.showValidationErrors(err);

-            this.hideLoading(this.form);

         });
         });

+
+        this.form.toggleAttribute('hidden', false);
+        loading.remove();

     }
 
     updateCount() {
     }
 
     updateCount() {

-        const count = this.container.children.length;
-        this.elem.querySelector('[comments-title]').textContent = window.trans_plural(this.countText, count, {count});
+        const count = this.getCommentCount();
+        console.log('update count', count, this.container);
+        this.commentsTitle.textContent = window.$trans.choice(this.countText, count, {count});

     }
 
     resetForm() {
     }
 
     resetForm() {

+        this.removeEditor();

         this.formInput.value = '';
         this.formInput.value = '';

-        this.formContainer.appendChild(this.form);
-        this.hideForm();
-        this.removeReplyTo();
-        this.hideLoading(this.form);
+        this.parentId = null;
+        this.replyToRow.toggleAttribute('hidden', true);
+        this.container.append(this.formContainer);

     }
 
     showForm() {
     }
 
     showForm() {

-        this.formContainer.style.display = 'block';
-        this.formContainer.parentNode.style.display = 'block';
-        this.addButtonContainer.style.display = 'none';
-        this.formInput.focus();
-        this.formInput.scrollIntoView({behavior: 'smooth'});
+        this.removeEditor();
+        this.formContainer.toggleAttribute('hidden', false);
+        this.addButtonContainer.toggleAttribute('hidden', true);
+        this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
+        this.loadEditor();

     }
 
     hideForm() {
     }
 
     hideForm() {

-        this.formContainer.style.display = 'none';
-        this.formContainer.parentNode.style.display = 'none';
+        this.resetForm();
+        this.formContainer.toggleAttribute('hidden', true);

         if (this.getCommentCount() > 0) {
         if (this.getCommentCount() > 0) {

-            this.elem.appendChild(this.addButtonContainer);
+            this.elem.append(this.addButtonContainer);

         } else {
         } else {

-            this.commentCountBar.appendChild(this.addButtonContainer);
+            this.commentCountBar.append(this.addButtonContainer);

         }
         }

-        this.addButtonContainer.style.display = 'block';
+        this.addButtonContainer.toggleAttribute('hidden', false);

     }
 
     }
 

-    getCommentCount() {
-        return this.elem.querySelectorAll('.comment-box[comment]').length;
+    loadEditor() {
+        if (this.wysiwygEditor) {
+            this.wysiwygEditor.focus();
+            return;
+        }
+
+        const config = buildForInput({
+            language: this.wysiwygLanguage,
+            containerElement: this.formInput,
+            darkMode: document.documentElement.classList.contains('dark-mode'),
+            textDirection: this.wysiwygTextDirection,
+            translations: {},
+            translationMap: window.editor_translations,
+        });
+
+        window.tinymce.init(config).then(editors => {
+            this.wysiwygEditor = editors[0];
+            setTimeout(() => this.wysiwygEditor.focus(), 50);
+        });

     }
 
     }
 

-    setReply(commentElem) {
-        this.showForm();
-        this.parentId = Number(commentElem.getAttribute('local-id'));
-        this.replyToRow.style.display = 'block';
-        const replyLink = this.replyToRow.querySelector('a');
-        replyLink.textContent = `#${this.parentId}`;
-        replyLink.href = `#comment${this.parentId}`;
+    removeEditor() {
+        if (this.wysiwygEditor) {
+            this.wysiwygEditor.remove();
+            this.wysiwygEditor = null;
+        }

     }
 
     }
 

-    removeReplyTo() {
-        this.parentId = null;
-        this.replyToRow.style.display = 'none';
+    getCommentCount() {
+        return this.container.querySelectorAll('[component="page-comment"]').length;

     }
 
     }
 

-    showLoading(formElem) {
-        const groups = formElem.querySelectorAll('.form-group');
-        for (const group of groups) {
-            group.style.display = 'none';
-        }
-        formElem.querySelector('.form-group.loading').style.display = 'block';
+    setReply(commentLocalId, commentElement) {
+        const targetFormLocation = commentElement.closest('.comment-branch').querySelector('.comment-branch-children');
+        targetFormLocation.append(this.formContainer);
+        this.showForm();
+        this.parentId = commentLocalId;
+        this.replyToRow.toggleAttribute('hidden', false);
+        this.formReplyLink.textContent = this.formReplyText.replace('1234', this.parentId);
+        this.formReplyLink.href = `#comment${this.parentId}`;

     }
 
     }
 

-    hideLoading(formElem) {
-        const groups = formElem.querySelectorAll('.form-group');
-        for (const group of groups) {
-            group.style.display = 'block';
-        }
-        formElem.querySelector('.form-group.loading').style.display = 'none';
+    removeReplyTo() {
+        this.parentId = null;
+        this.replyToRow.toggleAttribute('hidden', true);
+        this.container.append(this.formContainer);
+        this.showForm();

     }
 
 }
     }
 
 }