|
// retoor <retoor@molodetz.nl>
|
|
|
|
export class FormManager {
|
|
constructor() {
|
|
this.initPostForm();
|
|
this.initCommentForms();
|
|
this.initFormDisable();
|
|
this.initAutoSubmitSelects();
|
|
}
|
|
|
|
initPostForm() {
|
|
const form = document.getElementById("create-post-form");
|
|
if (!form) {
|
|
return;
|
|
}
|
|
const content = form.querySelector("#post-content");
|
|
const title = form.querySelector("#post-title");
|
|
const contentCount = form.querySelector("#post-content-count");
|
|
const titleCount = form.querySelector("#post-title-count");
|
|
|
|
if (content && contentCount) {
|
|
content.addEventListener("input", () => {
|
|
contentCount.textContent = `${content.value.length}/125000`;
|
|
});
|
|
}
|
|
if (title && titleCount) {
|
|
title.addEventListener("input", () => {
|
|
titleCount.textContent = `${title.value.length}/500`;
|
|
});
|
|
}
|
|
|
|
form.addEventListener("submit", () => {
|
|
const btn = form.querySelector("button[type='submit']");
|
|
if (btn) {
|
|
btn.disabled = true;
|
|
btn.textContent = "Posting...";
|
|
}
|
|
});
|
|
}
|
|
|
|
initCommentForms() {
|
|
document.querySelectorAll(".comment-form").forEach((form) => {
|
|
const textarea = form.querySelector("textarea");
|
|
if (!textarea) {
|
|
return;
|
|
}
|
|
textarea.addEventListener("input", () => {
|
|
textarea.style.height = "auto";
|
|
textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`;
|
|
});
|
|
});
|
|
}
|
|
|
|
initFormDisable() {
|
|
document.querySelectorAll("form").forEach((form) => {
|
|
if (form.hasAttribute("data-live-form")) {
|
|
return;
|
|
}
|
|
form.addEventListener("submit", () => {
|
|
const btn = form.querySelector("button[type='submit']");
|
|
if (btn) {
|
|
btn.disabled = true;
|
|
btn.classList.add("is-loading");
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
initAutoSubmitSelects() {
|
|
document.querySelectorAll("[data-auto-submit]").forEach((select) => {
|
|
let previous = select.value;
|
|
select.addEventListener("change", () => {
|
|
const form = select.closest("form");
|
|
if (!form) return;
|
|
const message = select.dataset.confirm;
|
|
if (!message) {
|
|
previous = select.value;
|
|
form.submit();
|
|
return;
|
|
}
|
|
const dialog = window.app && window.app.dialog;
|
|
if (!dialog) {
|
|
if (confirm(message)) { previous = select.value; form.submit(); }
|
|
else select.value = previous;
|
|
return;
|
|
}
|
|
dialog.confirm({
|
|
message,
|
|
title: select.dataset.confirmTitle || "Please confirm",
|
|
confirmLabel: select.dataset.confirmLabel,
|
|
danger: select.dataset.confirmDanger !== undefined,
|
|
}).then((ok) => {
|
|
if (ok) { previous = select.value; form.submit(); }
|
|
else select.value = previous;
|
|
});
|
|
});
|
|
});
|
|
}
|
|
}
|