-import {scrollAndHighlightElement} from "../services/util";
+import {Component} from './component';
+import {getLoading, htmlToDom} from '../services/dom';
+import {buildForInput} from '../wysiwyg-tinymce/config';
-/**
- * @extends {Component}
- */
-class PageComments {
+export class PageComments extends Component {
setup() {
this.elem = this.$el;
// 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.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
- 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;
+ 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) {
- let 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';
- let textArea = commentElem.querySelector('[comment-edit-container] textarea');
- let lineCount = textArea.value.split('\n').length;
- textArea.style.height = ((lineCount * 20) + 40) + 'px';
- this.editingComment = commentElem;
+ this.setupListeners();
}
- updateComment(event) {
- let form = event.target;
- event.preventDefault();
- let text = form.querySelector('textarea').value;
- let reqData = {
- text: text,
- parent_id: this.parentId || null,
- };
- this.showLoading(form);
- let commentId = this.editingComment.getAttribute('comment');
- window.$http.put(`/comment/${commentId}`, reqData).then(resp => {
- let 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) {
- let id = commentElem.getAttribute('comment');
- this.showLoading(commentElem.querySelector('[comment-content]'));
- window.$http.delete(`/comment/${id}`).then(resp => {
- 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();
- let text = this.formInput.value;
- let reqData = {
- text: text,
+
+ const loading = getLoading();
+ loading.classList.add('px-l');
+ this.form.after(loading);
+ this.form.toggleAttribute('hidden', true);
+
+ const reqData = {
+ html: this.wysiwygEditor.getContent(),
parent_id: this.parentId || null,
};
- this.showLoading(this.form);
+
window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => {
- let newComment = document.createElement('div');
- newComment.innerHTML = resp.data;
- let newElem = newComment.children[0];
- this.container.appendChild(newElem);
- window.components.init(newElem);
+ const newElem = htmlToDom(resp.data);
+
+ if (reqData.parent_id) {
+ this.formContainer.after(newElem);
+ } else {
+ this.container.append(newElem);
+ }
+
window.$events.success(this.createdText);
- this.resetForm();
+ this.hideForm();
this.updateCount();
}).catch(err => {
+ this.form.toggleAttribute('hidden', false);
window.$events.showValidationErrors(err);
- this.hideLoading(this.form);
});
+
+ this.form.toggleAttribute('hidden', false);
+ loading.remove();
}
updateCount() {
- let 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.choice(this.countText, count, {count});
}
resetForm() {
+ this.removeEditor();
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() {
- 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() {
- this.formContainer.style.display = 'none';
- this.formContainer.parentNode.style.display = 'none';
+ 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.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 (let 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 (let 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();
}
}
-
-export default PageComments;
\ No newline at end of file
projects / bookstack / blobdiff