webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +03:00
Code Activity

Comments: updated component and split out code

Browse Source 
Split out comment component code so single-comment actions (delete, edit) are handled within their own compontent.
Modernised existing component code.
This commit is contained in:
Dan Brown
2023-06-07 17:47:37 +01:00
parent 4b9f6beb37
commit 154924cc0c
8 changed files with 167 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
resources/js/components/index.js
View File

@ -34,6 +34,7 @@ export {MarkdownEditor} from './markdown-editor';
export {NewUserPassword} from './new-user-password';
export {Notification} from './notification';
export {OptionalInput} from './optional-input';
export {PageComment} from './page-comment';
export {PageComments} from './page-comments';
export {PageDisplay} from './page-display';
export {PageEditor} from './page-editor';

85
resources/js/components/page-comment.js Normal file
View File

@ -0,0 +1,85 @@
import {Component} from './component';
import {getLoading, htmlToDom} from '../services/dom';
export class PageComment extends Component {
setup() {
// Options
this.commentId = this.$opts.commentId;
this.commentLocalId = this.$opts.commentLocalId;
this.commentParentId = this.$opts.commentParentId;
this.deletedText = this.$opts.deletedText;
this.updatedText = this.$opts.updatedText;
// Element References
this.container = this.$el;
this.contentContainer = this.$refs.contentContainer;
this.form = this.$refs.form;
this.formCancel = this.$refs.formCancel;
this.editButton = this.$refs.editButton;
this.deleteButton = this.$refs.deleteButton;
this.replyButton = this.$refs.replyButton;
this.input = this.$refs.input;
this.setupListeners();
}
setupListeners() {
this.replyButton.addEventListener('click', () => this.$emit('reply', {id: this.commentLocalId}));
this.editButton.addEventListener('click', this.startEdit.bind(this));
this.deleteButton.addEventListener('click', this.delete.bind(this));
this.form.addEventListener('submit', this.update.bind(this));
this.formCancel.addEventListener('click', () => this.toggleEditMode(false));
}
toggleEditMode(show) {
this.contentContainer.toggleAttribute('hidden', show);
this.form.toggleAttribute('hidden', !show);
}
startEdit() {
this.toggleEditMode(true);
const lineCount = this.$refs.input.value.split('\n').length;
this.$refs.input.style.height = `${(lineCount * 20) + 40}px`;
}
async update(event) {
event.preventDefault();
const loading = this.showLoading();
this.form.toggleAttribute('hidden', true);
const reqData = {
text: this.input.value,
parent_id: this.parentId || null,
};
try {
const resp = await window.$http.put(`/comment/${this.commentId}`, reqData);
const newComment = htmlToDom(resp.data);
this.container.replaceWith(newComment);
window.$events.success(this.updatedText);
} catch (err) {
console.error(err);
window.$events.showValidationErrors(err);
this.form.toggleAttribute('hidden', false);
loading.remove();
}
}
async delete() {
this.showLoading();
await window.$http.delete(`/comment/${this.commentId}`);
this.container.closest('.comment-branch').remove();
window.$events.success(this.deletedText);
this.$emit('delete');
}
showLoading() {
const loading = getLoading();
loading.classList.add('px-l');
this.container.append(loading);
return loading;
}
}

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

@ -1,6 +1,5 @@
import {scrollAndHighlightElement} from '../services/util';
import {Component} from './component';
import {htmlToDom} from '../services/dom';
import {getLoading, htmlToDom} from '../services/dom';
export class PageComments extends Component {
@ -10,166 +9,110 @@ export class PageComments extends Component {
// Element references
this.container = this.$refs.commentContainer;
this.formContainer = this.$refs.formContainer;
this.commentCountBar = this.$refs.commentCountBar;
this.commentsTitle = this.$refs.commentsTitle;
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.addCommentButton = this.$refs.addCommentButton;
this.hideFormButton = this.$refs.hideFormButton;
this.removeReplyToButton = this.$refs.removeReplyToButton;
// Translations
this.updatedText = this.$opts.updatedText;
this.deletedText = this.$opts.deletedText;
this.createdText = this.$opts.createdText;
this.countText = this.$opts.countText;
// Internal State
this.editingComment = null;
this.parentId = null;
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));
this.setupListeners();
}
handleAction(event) {
const actionElem = event.target.closest('[action]');
setupListeners() {
this.removeReplyToButton.addEventListener('click', this.removeReplyTo.bind(this));
this.hideFormButton.addEventListener('click', this.hideForm.bind(this));
this.addCommentButton.addEventListener('click', this.showForm.bind(this));
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;
}
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);
});
}
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.elem.addEventListener('page-comment-delete', () => {
this.updateCount();
this.hideForm();
});
this.elem.addEventListener('page-comment-reply', event => {
this.setReply(event.detail.id);
});
if (this.form) {
this.form.addEventListener('submit', this.saveComment.bind(this));
}
}
saveComment(event) {
event.preventDefault();
event.stopPropagation();
const loading = getLoading();
loading.classList.add('px-l');
this.form.after(loading);
this.form.toggleAttribute('hidden', true);
const text = this.formInput.value;
const reqData = {
text,
parent_id: this.parentId || null,
};
this.showLoading(this.form);
window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => {
const newElem = htmlToDom(resp.data);
this.container.appendChild(newElem);
window.$components.init(newElem);
window.$events.success(this.createdText);
this.resetForm();
this.updateCount();
}).catch(err => {
this.form.toggleAttribute('hidden', false);
window.$events.showValidationErrors(err);
this.hideLoading(this.form);
});
loading.remove();
}
updateCount() {
const count = this.container.children.length;
this.elem.querySelector('[comments-title]').textContent = window.trans_plural(this.countText, count, {count});
const count = this.getCommentCount();
this.commentsTitle.textContent = window.trans_plural(this.countText, count, {count});
}
resetForm() {
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.addButtonContainer.style.display = 'none';
this.formContainer.toggleAttribute('hidden', false);
this.addButtonContainer.toggleAttribute('hidden', true);
this.formInput.focus();
this.formInput.scrollIntoView({behavior: 'smooth'});
}
hideForm() {
this.formContainer.style.display = 'none';
this.formContainer.parentNode.style.display = 'none';
this.formContainer.toggleAttribute('hidden', true);
if (this.getCommentCount() > 0) {
this.elem.appendChild(this.addButtonContainer);
} else {
this.commentCountBar.appendChild(this.addButtonContainer);
}
this.addButtonContainer.style.display = 'block';
this.addButtonContainer.toggleAttribute('hidden', false);
}
getCommentCount() {
return this.elem.querySelectorAll('.comment-box[comment]').length;
return this.container.querySelectorAll('[compontent="page-comment"]').length;
}
setReply(commentElem) {
setReply(commentLocalId) {
this.showForm();
this.parentId = Number(commentElem.getAttribute('local-id'));
this.replyToRow.style.display = 'block';
this.parentId = commentLocalId;
this.replyToRow.toggleAttribute('hidden', false);
const replyLink = this.replyToRow.querySelector('a');
replyLink.textContent = `#${this.parentId}`;
replyLink.href = `#comment${this.parentId}`;
@ -177,23 +120,7 @@ export class PageComments extends Component {
removeReplyTo() {
this.parentId = null;
this.replyToRow.style.display = 'none';
}
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';
}
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';
this.replyToRow.toggleAttribute('hidden', true);
}
}