2019-06-07 19:02:51 -04:00
|
|
|
import {scrollAndHighlightElement} from "../services/util";
|
2022-11-15 06:24:31 -05:00
|
|
|
import {Component} from "./component";
|
|
|
|
import {htmlToDom} from "../services/dom";
|
2019-06-07 19:02:51 -04:00
|
|
|
|
2022-11-15 06:24:31 -05:00
|
|
|
export class PageComments extends Component {
|
2017-09-03 11:37:51 -04:00
|
|
|
|
2020-07-28 13:19:18 -04:00
|
|
|
setup() {
|
|
|
|
this.elem = this.$el;
|
|
|
|
this.pageId = Number(this.$opts.pageId);
|
|
|
|
|
|
|
|
// Element references
|
|
|
|
this.container = this.$refs.commentContainer;
|
|
|
|
this.formContainer = this.$refs.formContainer;
|
|
|
|
this.commentCountBar = this.$refs.commentCountBar;
|
|
|
|
this.addButtonContainer = this.$refs.addButtonContainer;
|
|
|
|
this.replyToRow = this.$refs.replyToRow;
|
|
|
|
|
|
|
|
// Translations
|
|
|
|
this.updatedText = this.$opts.updatedText;
|
|
|
|
this.deletedText = this.$opts.deletedText;
|
|
|
|
this.createdText = this.$opts.createdText;
|
|
|
|
this.countText = this.$opts.countText;
|
|
|
|
|
|
|
|
// Internal State
|
2017-09-09 12:06:30 -04:00
|
|
|
this.editingComment = null;
|
|
|
|
this.parentId = null;
|
2017-09-03 11:37:51 -04:00
|
|
|
|
2017-09-09 12:06:30 -04:00
|
|
|
if (this.formContainer) {
|
|
|
|
this.form = this.formContainer.querySelector('form');
|
|
|
|
this.formInput = this.form.querySelector('textarea');
|
|
|
|
this.form.addEventListener('submit', this.saveComment.bind(this));
|
|
|
|
}
|
2017-09-03 11:37:51 -04:00
|
|
|
|
|
|
|
this.elem.addEventListener('click', this.handleAction.bind(this));
|
|
|
|
this.elem.addEventListener('submit', this.updateComment.bind(this));
|
|
|
|
}
|
|
|
|
|
|
|
|
handleAction(event) {
|
|
|
|
let actionElem = event.target.closest('[action]');
|
2019-10-07 15:21:04 -04:00
|
|
|
|
2017-09-09 10:56:24 -04:00
|
|
|
if (event.target.matches('a[href^="#"]')) {
|
2019-06-07 19:02:51 -04:00
|
|
|
const id = event.target.href.split('#')[1];
|
|
|
|
scrollAndHighlightElement(document.querySelector('#' + id));
|
2017-09-09 10:56:24 -04:00
|
|
|
}
|
2019-10-07 15:21:04 -04:00
|
|
|
|
2017-09-03 11:37:51 -04:00
|
|
|
if (actionElem === null) return;
|
2017-09-09 10:56:24 -04:00
|
|
|
event.preventDefault();
|
2017-09-03 11:37:51 -04:00
|
|
|
|
2020-07-28 13:19:18 -04:00
|
|
|
const action = actionElem.getAttribute('action');
|
|
|
|
const comment = actionElem.closest('[comment]');
|
|
|
|
if (action === 'edit') this.editComment(comment);
|
2017-09-03 11:37:51 -04:00
|
|
|
if (action === 'closeUpdateForm') this.closeUpdateForm();
|
2020-07-28 13:19:18 -04:00
|
|
|
if (action === 'delete') this.deleteComment(comment);
|
2017-09-03 11:37:51 -04:00
|
|
|
if (action === 'addComment') this.showForm();
|
|
|
|
if (action === 'hideForm') this.hideForm();
|
2020-07-28 13:19:18 -04:00
|
|
|
if (action === 'reply') this.setReply(comment);
|
2017-09-09 10:56:24 -04:00
|
|
|
if (action === 'remove-reply-to') this.removeReplyTo();
|
2017-09-03 11:37:51 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
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';
|
2017-09-09 12:06:30 -04:00
|
|
|
let textArea = commentElem.querySelector('[comment-edit-container] textarea');
|
|
|
|
let lineCount = textArea.value.split('\n').length;
|
2019-04-13 05:50:24 -04:00
|
|
|
textArea.style.height = ((lineCount * 20) + 40) + 'px';
|
2017-09-03 11:37:51 -04:00
|
|
|
this.editingComment = commentElem;
|
|
|
|
}
|
|
|
|
|
|
|
|
updateComment(event) {
|
|
|
|
let form = event.target;
|
|
|
|
event.preventDefault();
|
|
|
|
let text = form.querySelector('textarea').value;
|
|
|
|
let reqData = {
|
|
|
|
text: text,
|
2017-09-09 10:56:24 -04:00
|
|
|
parent_id: this.parentId || null,
|
2017-09-03 11:37:51 -04:00
|
|
|
};
|
2017-09-09 12:06:30 -04:00
|
|
|
this.showLoading(form);
|
2017-09-03 11:37:51 -04:00
|
|
|
let commentId = this.editingComment.getAttribute('comment');
|
2020-07-28 13:19:18 -04:00
|
|
|
window.$http.put(`/comment/${commentId}`, reqData).then(resp => {
|
2017-09-03 11:37:51 -04:00
|
|
|
let newComment = document.createElement('div');
|
|
|
|
newComment.innerHTML = resp.data;
|
|
|
|
this.editingComment.innerHTML = newComment.children[0].innerHTML;
|
2020-07-28 13:19:18 -04:00
|
|
|
window.$events.success(this.updatedText);
|
2022-11-14 18:19:02 -05:00
|
|
|
window.$components.init(this.editingComment);
|
2017-09-03 11:37:51 -04:00
|
|
|
this.closeUpdateForm();
|
|
|
|
this.editingComment = null;
|
2020-07-28 13:19:18 -04:00
|
|
|
}).catch(window.$events.showValidationErrors).then(() => {
|
2017-09-09 12:06:30 -04:00
|
|
|
this.hideLoading(form);
|
2017-09-03 11:37:51 -04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
deleteComment(commentElem) {
|
|
|
|
let id = commentElem.getAttribute('comment');
|
2017-09-09 12:06:30 -04:00
|
|
|
this.showLoading(commentElem.querySelector('[comment-content]'));
|
2020-07-28 13:19:18 -04:00
|
|
|
window.$http.delete(`/comment/${id}`).then(resp => {
|
2017-09-03 11:37:51 -04:00
|
|
|
commentElem.parentNode.removeChild(commentElem);
|
2020-07-28 13:19:18 -04:00
|
|
|
window.$events.success(this.deletedText);
|
2017-09-03 11:37:51 -04:00
|
|
|
this.updateCount();
|
2019-04-13 07:58:57 -04:00
|
|
|
this.hideForm();
|
2017-09-03 11:37:51 -04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
saveComment(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
|
|
|
let text = this.formInput.value;
|
|
|
|
let reqData = {
|
|
|
|
text: text,
|
2017-09-09 10:56:24 -04:00
|
|
|
parent_id: this.parentId || null,
|
2017-09-03 11:37:51 -04:00
|
|
|
};
|
2017-09-09 12:06:30 -04:00
|
|
|
this.showLoading(this.form);
|
2020-07-28 13:19:18 -04:00
|
|
|
window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => {
|
2022-11-15 06:24:31 -05:00
|
|
|
const newElem = htmlToDom(resp.data);
|
2017-09-09 10:56:24 -04:00
|
|
|
this.container.appendChild(newElem);
|
2022-11-14 18:19:02 -05:00
|
|
|
window.$components.init(newElem);
|
2020-07-28 13:19:18 -04:00
|
|
|
window.$events.success(this.createdText);
|
2017-09-03 11:37:51 -04:00
|
|
|
this.resetForm();
|
|
|
|
this.updateCount();
|
2020-07-28 13:19:18 -04:00
|
|
|
}).catch(err => {
|
|
|
|
window.$events.showValidationErrors(err);
|
|
|
|
this.hideLoading(this.form);
|
2017-09-03 11:37:51 -04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
updateCount() {
|
|
|
|
let count = this.container.children.length;
|
2020-07-28 13:19:18 -04:00
|
|
|
this.elem.querySelector('[comments-title]').textContent = window.trans_plural(this.countText, count, {count});
|
2017-09-03 11:37:51 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
resetForm() {
|
|
|
|
this.formInput.value = '';
|
|
|
|
this.formContainer.appendChild(this.form);
|
|
|
|
this.hideForm();
|
2017-09-09 10:56:24 -04:00
|
|
|
this.removeReplyTo();
|
2017-09-09 12:06:30 -04:00
|
|
|
this.hideLoading(this.form);
|
2017-09-03 11:37:51 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
showForm() {
|
|
|
|
this.formContainer.style.display = 'block';
|
|
|
|
this.formContainer.parentNode.style.display = 'block';
|
2020-07-28 13:19:18 -04:00
|
|
|
this.addButtonContainer.style.display = 'none';
|
2017-09-09 10:56:24 -04:00
|
|
|
this.formInput.focus();
|
2019-06-07 19:02:51 -04:00
|
|
|
this.formInput.scrollIntoView({behavior: "smooth"});
|
2017-09-03 11:37:51 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
hideForm() {
|
|
|
|
this.formContainer.style.display = 'none';
|
|
|
|
this.formContainer.parentNode.style.display = 'none';
|
2019-04-13 07:58:57 -04:00
|
|
|
if (this.getCommentCount() > 0) {
|
2020-07-28 13:19:18 -04:00
|
|
|
this.elem.appendChild(this.addButtonContainer)
|
2019-04-13 07:58:57 -04:00
|
|
|
} else {
|
2020-07-28 13:19:18 -04:00
|
|
|
this.commentCountBar.appendChild(this.addButtonContainer);
|
2019-04-13 07:58:57 -04:00
|
|
|
}
|
2020-07-28 13:19:18 -04:00
|
|
|
this.addButtonContainer.style.display = 'block';
|
2019-04-13 07:58:57 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
getCommentCount() {
|
|
|
|
return this.elem.querySelectorAll('.comment-box[comment]').length;
|
2017-09-03 11:37:51 -04:00
|
|
|
}
|
|
|
|
|
2017-09-09 10:56:24 -04:00
|
|
|
setReply(commentElem) {
|
2017-09-03 11:37:51 -04:00
|
|
|
this.showForm();
|
2017-09-09 10:56:24 -04:00
|
|
|
this.parentId = Number(commentElem.getAttribute('local-id'));
|
2020-07-28 13:19:18 -04:00
|
|
|
this.replyToRow.style.display = 'block';
|
|
|
|
const replyLink = this.replyToRow.querySelector('a');
|
2017-09-09 10:56:24 -04:00
|
|
|
replyLink.textContent = `#${this.parentId}`;
|
|
|
|
replyLink.href = `#comment${this.parentId}`;
|
|
|
|
}
|
|
|
|
|
|
|
|
removeReplyTo() {
|
|
|
|
this.parentId = null;
|
2020-07-28 13:19:18 -04:00
|
|
|
this.replyToRow.style.display = 'none';
|
2017-09-03 11:37:51 -04:00
|
|
|
}
|
|
|
|
|
2017-09-09 12:06:30 -04:00
|
|
|
showLoading(formElem) {
|
2020-05-01 18:24:11 -04:00
|
|
|
const groups = formElem.querySelectorAll('.form-group');
|
|
|
|
for (let group of groups) {
|
|
|
|
group.style.display = 'none';
|
2017-09-09 12:06:30 -04:00
|
|
|
}
|
|
|
|
formElem.querySelector('.form-group.loading').style.display = 'block';
|
|
|
|
}
|
2017-09-03 11:37:51 -04:00
|
|
|
|
2017-09-09 12:06:30 -04:00
|
|
|
hideLoading(formElem) {
|
2020-05-01 18:24:11 -04:00
|
|
|
const groups = formElem.querySelectorAll('.form-group');
|
|
|
|
for (let group of groups) {
|
|
|
|
group.style.display = 'block';
|
2017-09-09 12:06:30 -04:00
|
|
|
}
|
|
|
|
formElem.querySelector('.form-group.loading').style.display = 'none';
|
|
|
|
}
|
2017-09-03 11:37:51 -04:00
|
|
|
|
2022-11-15 06:24:31 -05:00
|
|
|
}
|