|
import { Http } from "./Http.js";
|
|
|
|
export class CommentManager {
|
|
constructor() {
|
|
this.initCommentReply();
|
|
}
|
|
|
|
initCommentReply() {
|
|
document.addEventListener("click", (e) => {
|
|
const btn = e.target.closest("[data-action='reply']");
|
|
if (!btn) return;
|
|
e.preventDefault();
|
|
this.toggleReplyForm(btn);
|
|
});
|
|
}
|
|
|
|
toggleReplyForm(btn) {
|
|
const comment = btn.closest(".comment");
|
|
if (!comment) return;
|
|
const body = comment.querySelector(".comment-body");
|
|
if (!body) return;
|
|
|
|
const existing = body.querySelector(":scope > .comment-reply-form");
|
|
if (existing) {
|
|
existing.remove();
|
|
return;
|
|
}
|
|
|
|
const template = document.getElementById("comment-reply-template");
|
|
if (!template) {
|
|
Http.toLogin();
|
|
return;
|
|
}
|
|
|
|
const container = comment.closest(".post-card, .comments-section");
|
|
const source = container && container.querySelector(".comment-form:not(.comment-reply-form)");
|
|
if (!source) return;
|
|
const targetUid = source.querySelector('input[name="target_uid"]').value;
|
|
const targetType = source.querySelector('input[name="target_type"]').value;
|
|
|
|
const fragment = template.content.cloneNode(true);
|
|
const form = fragment.querySelector(".comment-form");
|
|
if (!form) return;
|
|
form.classList.add("comment-reply-form");
|
|
form.querySelector('input[name="target_uid"]').value = targetUid;
|
|
form.querySelector('input[name="target_type"]').value = targetType;
|
|
|
|
const parentInput = document.createElement("input");
|
|
parentInput.type = "hidden";
|
|
parentInput.name = "parent_uid";
|
|
parentInput.value = body.dataset.commentUid || "";
|
|
form.appendChild(parentInput);
|
|
|
|
const cancel = document.createElement("button");
|
|
cancel.type = "button";
|
|
cancel.className = "comment-action-btn comment-reply-cancel";
|
|
cancel.textContent = "Cancel";
|
|
cancel.addEventListener("click", () => form.remove());
|
|
form.querySelector(".comment-form-actions").appendChild(cancel);
|
|
|
|
const actions = body.querySelector(":scope > .comment-actions");
|
|
actions.insertAdjacentElement("afterend", form);
|
|
|
|
this.enhanceForm(form);
|
|
const textarea = form.querySelector("textarea");
|
|
if (textarea) textarea.focus();
|
|
}
|
|
|
|
enhanceForm(form) {
|
|
const enhancer = window.app && window.app.content;
|
|
if (enhancer) {
|
|
enhancer.initEmojiPickers();
|
|
enhancer.initMentionInputs();
|
|
enhancer.initAttachmentManagers();
|
|
}
|
|
const textarea = form.querySelector("textarea");
|
|
if (textarea) {
|
|
textarea.addEventListener("input", () => {
|
|
textarea.style.height = "auto";
|
|
textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`;
|
|
});
|
|
}
|
|
form.addEventListener("submit", () => {
|
|
const btn = form.querySelector("button[type='submit']");
|
|
if (btn) btn.disabled = true;
|
|
});
|
|
}
|
|
}
|