You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.6 KiB
JavaScript
107 lines
2.6 KiB
JavaScript
import $ from 'jquery';
|
|
import _ from 'lodash';
|
|
import DOMAttachedObject from 'vj/components/DOMAttachedObject';
|
|
import TextareaHandler from 'vj/components/editor/textareaHandler';
|
|
import Notification from 'vj/components/notification';
|
|
import { request } from 'vj/utils';
|
|
|
|
let initialized = false;
|
|
const $template = $('.dczcomments__box').eq(0).clone();
|
|
|
|
function getClosestInstance($dom) {
|
|
return $dom.closest('.dczcomments__box').data('instance');
|
|
}
|
|
|
|
function onBoxCancel(ev) {
|
|
const commentBox = getClosestInstance($(ev.currentTarget));
|
|
if (commentBox) commentBox.onCancel(ev);
|
|
}
|
|
|
|
function onBoxSubmit(ev) {
|
|
const commentBox = getClosestInstance($(ev.currentTarget));
|
|
if (commentBox) commentBox.onSubmit(ev);
|
|
ev.preventDefault();
|
|
}
|
|
|
|
function init() {
|
|
if (initialized) return;
|
|
$(document).on('submit', '[name="dczcomments__box__form"]', onBoxSubmit);
|
|
$(document).on('vjCommentBoxCancel', '[name="dczcomments__box__form"]', onBoxCancel);
|
|
$(document).on('click', '[name="dczcomments__box__cancel"]', onBoxCancel);
|
|
initialized = true;
|
|
}
|
|
|
|
export default class CommentBox extends DOMAttachedObject {
|
|
static DOMAttachKey = 'vjCommentBoxInstance';
|
|
|
|
constructor($dom, options = {}) {
|
|
super($dom);
|
|
init();
|
|
this.$box = $template.clone();
|
|
this.$box.data('instance', this);
|
|
this.options = {
|
|
initialText: null,
|
|
mode: null,
|
|
form: null,
|
|
onCancel: () => null,
|
|
...options,
|
|
};
|
|
if (this.options.initialText) this.setText(this.options.initialText);
|
|
if (this.options.mode) {
|
|
const submitButton = this.$box.find('.dczcomments__box__submit');
|
|
submitButton.val(submitButton.attr(`data-value-${this.options.mode}`));
|
|
}
|
|
}
|
|
|
|
getTextareaHandler() {
|
|
const $textarea = this.$box.find('textarea');
|
|
return TextareaHandler.getOrConstruct($textarea);
|
|
}
|
|
|
|
focus() {
|
|
this.getTextareaHandler().focus();
|
|
return this;
|
|
}
|
|
|
|
setText(text) {
|
|
this.getTextareaHandler().val(text);
|
|
return this;
|
|
}
|
|
|
|
getText() {
|
|
return this.getTextareaHandler().val();
|
|
}
|
|
|
|
insertText(text) {
|
|
const handler = this.getTextareaHandler();
|
|
handler.val(handler.val() + text);
|
|
return this;
|
|
}
|
|
|
|
appendTo($dom) {
|
|
this.$box.appendTo($dom);
|
|
this.$box.trigger('vjContentNew');
|
|
return this;
|
|
}
|
|
|
|
async onSubmit() {
|
|
try {
|
|
await request.post('', {
|
|
...this.options.form,
|
|
content: this.getText(),
|
|
});
|
|
window.location.reload();
|
|
} catch (error) {
|
|
Notification.error(error.message);
|
|
}
|
|
}
|
|
|
|
async onCancel(ev) {
|
|
await this.options.onCancel(ev);
|
|
this.$box.remove();
|
|
this.detach();
|
|
}
|
|
}
|
|
|
|
_.assign(CommentBox, DOMAttachedObject);
|