2023-06-08 00:47:37 +08:00
|
|
|
import {Component} from './component';
|
|
|
|
import {getLoading, htmlToDom} from '../services/dom';
|
2024-05-27 22:39:41 +08:00
|
|
|
import {buildForInput} from '../wysiwyg-tinymce/config';
|
2023-06-08 00:47:37 +08:00
|
|
|
|
|
|
|
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;
|
|
|
|
|
2024-01-30 22:27:09 +08:00
|
|
|
// Editor reference and text options
|
|
|
|
this.wysiwygEditor = null;
|
|
|
|
this.wysiwygLanguage = this.$opts.wysiwygLanguage;
|
|
|
|
this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;
|
|
|
|
|
|
|
|
// Element references
|
2023-06-08 00:47:37 +08:00
|
|
|
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() {
|
2023-06-10 00:36:30 +08:00
|
|
|
if (this.replyButton) {
|
|
|
|
this.replyButton.addEventListener('click', () => this.$emit('reply', {
|
|
|
|
id: this.commentLocalId,
|
|
|
|
element: this.container,
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.editButton) {
|
|
|
|
this.editButton.addEventListener('click', this.startEdit.bind(this));
|
|
|
|
this.form.addEventListener('submit', this.update.bind(this));
|
|
|
|
this.formCancel.addEventListener('click', () => this.toggleEditMode(false));
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.deleteButton) {
|
|
|
|
this.deleteButton.addEventListener('click', this.delete.bind(this));
|
|
|
|
}
|
2023-06-08 00:47:37 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
toggleEditMode(show) {
|
|
|
|
this.contentContainer.toggleAttribute('hidden', show);
|
|
|
|
this.form.toggleAttribute('hidden', !show);
|
|
|
|
}
|
|
|
|
|
|
|
|
startEdit() {
|
|
|
|
this.toggleEditMode(true);
|
2024-01-30 22:27:09 +08:00
|
|
|
|
|
|
|
if (this.wysiwygEditor) {
|
2024-01-30 23:16:58 +08:00
|
|
|
this.wysiwygEditor.focus();
|
2024-01-30 22:27:09 +08:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const config = buildForInput({
|
|
|
|
language: this.wysiwygLanguage,
|
|
|
|
containerElement: this.input,
|
|
|
|
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];
|
2024-01-30 23:16:58 +08:00
|
|
|
setTimeout(() => this.wysiwygEditor.focus(), 50);
|
2024-01-30 22:27:09 +08:00
|
|
|
});
|
2023-06-08 00:47:37 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
async update(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
const loading = this.showLoading();
|
|
|
|
this.form.toggleAttribute('hidden', true);
|
|
|
|
|
|
|
|
const reqData = {
|
2024-01-30 23:16:58 +08:00
|
|
|
html: this.wysiwygEditor.getContent(),
|
2023-06-08 00:47:37 +08:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|