github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-07 03:14:33 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Comments: Updated to show form in expected location

Browse Source 
Includes a change of create response to use a branch as a template.
This commit is contained in:
Dan Brown
2023-06-08 15:03:38 +01:00
parent 154924cc0c
commit 3b46b92bb9
7 changed files with 68 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
resources/js/components/page-comment.js
View File

@ -25,7 +25,10 @@ export class PageComment extends Component {
}
setupListeners() {
this.replyButton.addEventListener('click', () => this.$emit('reply', {id: this.commentLocalId}));
this.replyButton.addEventListener('click', () => this.$emit('reply', {
id: this.commentLocalId,
element: this.container,
}));
this.editButton.addEventListener('click', this.startEdit.bind(this));
this.deleteButton.addEventListener('click', this.delete.bind(this));
this.form.addEventListener('submit', this.update.bind(this));

25
resources/js/components/page-comments.js
View File

@ -41,7 +41,7 @@ export class PageComments extends Component {
});
this.elem.addEventListener('page-comment-reply', event => {
this.setReply(event.detail.id);
this.setReply(event.detail.id, event.detail.element);
});
if (this.form) {
@ -66,15 +66,16 @@ export class PageComments extends Component {
window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => {
const newElem = htmlToDom(resp.data);
this.container.appendChild(newElem);
this.formContainer.after(newElem);
window.$events.success(this.createdText);
this.resetForm();
this.hideForm();
this.updateCount();
}).catch(err => {
this.form.toggleAttribute('hidden', false);
window.$events.showValidationErrors(err);
});
this.form.toggleAttribute('hidden', false);
loading.remove();
}
@ -85,32 +86,38 @@ export class PageComments extends Component {
resetForm() {
this.formInput.value = '';
this.hideForm();
this.removeReplyTo();
this.container.append(this.formContainer);
}
showForm() {
this.formContainer.toggleAttribute('hidden', false);
this.addButtonContainer.toggleAttribute('hidden', true);
this.formInput.focus();
setTimeout(() => {
this.formInput.focus();
}, 100);
}
hideForm() {
this.resetForm();
this.formContainer.toggleAttribute('hidden', true);
if (this.getCommentCount() > 0) {
this.elem.appendChild(this.addButtonContainer);
this.elem.append(this.addButtonContainer);
} else {
this.commentCountBar.appendChild(this.addButtonContainer);
this.commentCountBar.append(this.addButtonContainer);
}
this.addButtonContainer.toggleAttribute('hidden', false);
}
getCommentCount() {
return this.container.querySelectorAll('[compontent="page-comment"]').length;
return this.container.querySelectorAll('[component="page-comment"]').length;
}
setReply(commentLocalId) {
setReply(commentLocalId, commentElement) {
const targetFormLocation = commentElement.closest('.comment-branch').querySelector('.comment-branch-children');
this.showForm();
targetFormLocation.append(this.formContainer);
this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
this.parentId = commentLocalId;
this.replyToRow.toggleAttribute('hidden', false);
const replyLink = this.replyToRow.querySelector('a');