1 import {Component} from './component';
2 import {getLoading, htmlToDom} from '../services/dom';
4 export class PageComment extends Component {
8 this.commentId = this.$opts.commentId;
9 this.commentLocalId = this.$opts.commentLocalId;
10 this.commentParentId = this.$opts.commentParentId;
11 this.deletedText = this.$opts.deletedText;
12 this.updatedText = this.$opts.updatedText;
15 this.container = this.$el;
16 this.contentContainer = this.$refs.contentContainer;
17 this.form = this.$refs.form;
18 this.formCancel = this.$refs.formCancel;
19 this.editButton = this.$refs.editButton;
20 this.deleteButton = this.$refs.deleteButton;
21 this.replyButton = this.$refs.replyButton;
22 this.input = this.$refs.input;
24 this.setupListeners();
28 this.replyButton.addEventListener('click', () => this.$emit('reply', {id: this.commentLocalId}));
29 this.editButton.addEventListener('click', this.startEdit.bind(this));
30 this.deleteButton.addEventListener('click', this.delete.bind(this));
31 this.form.addEventListener('submit', this.update.bind(this));
32 this.formCancel.addEventListener('click', () => this.toggleEditMode(false));
35 toggleEditMode(show) {
36 this.contentContainer.toggleAttribute('hidden', show);
37 this.form.toggleAttribute('hidden', !show);
41 this.toggleEditMode(true);
42 const lineCount = this.$refs.input.value.split('\n').length;
43 this.$refs.input.style.height = `${(lineCount * 20) + 40}px`;
47 event.preventDefault();
48 const loading = this.showLoading();
49 this.form.toggleAttribute('hidden', true);
52 text: this.input.value,
53 parent_id: this.parentId || null,
57 const resp = await window.$http.put(`/comment/${this.commentId}`, reqData);
58 const newComment = htmlToDom(resp.data);
59 this.container.replaceWith(newComment);
60 window.$events.success(this.updatedText);
63 window.$events.showValidationErrors(err);
64 this.form.toggleAttribute('hidden', false);
72 await window.$http.delete(`/comment/${this.commentId}`);
73 this.container.closest('.comment-branch').remove();
74 window.$events.success(this.deletedText);
79 const loading = getLoading();
80 loading.classList.add('px-l');
81 this.container.append(loading);