X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/fea5630ea4343b33c353afb41d502d535f674331..refs/pull/714/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 87cd88905..ae2a30ff5 100644 --- 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