on-codemerge
Version:
A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product
115 lines (114 loc) • 4.23 kB
JavaScript
/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */
var b = Object.defineProperty;
var C = (o, t, e) => t in o ? b(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
var i = (o, t, e) => C(o, typeof t != "symbol" ? t + "" : t, e);
import { PopupManager as S } from "../../../core/ui/PopupManager.mjs";
import { TemplateManager as f } from "../services/TemplateManager.mjs";
import { createContainer as p, createLabel as h, createSelectField as r, createInputField as g, createCheckbox as k } from "../../../utils/helpers.mjs";
class O {
constructor(t) {
i(this, "editor");
i(this, "popup", null);
i(this, "templateManager");
i(this, "callback", null);
// Ссылки на элементы
i(this, "methodSelect", null);
i(this, "actionInput", null);
i(this, "submitButtonCheckbox", null);
i(this, "templateSelect", null);
this.editor = t, this.templateManager = new f(t);
}
createContent() {
const t = p("p-4 space-y-4"), e = p("template-section"), a = h(this.editor.t("Template (optional):"));
this.templateSelect = r(
this.getTemplateOptions(),
"",
(d) => this.handleTemplateChange(d)
), e.appendChild(a), e.appendChild(this.templateSelect), t.appendChild(e);
const l = p("method-section"), s = h(this.editor.t("Method:"));
this.methodSelect = r(
[
{ value: "GET", label: "GET" },
{ value: "POST", label: "POST" }
],
"POST",
() => {
}
), l.appendChild(s), l.appendChild(this.methodSelect), t.appendChild(l);
const n = p("action-section"), c = h(this.editor.t("Action URL:"));
this.actionInput = g(
"text",
this.editor.t("Enter form action URL"),
"",
() => {
}
), n.appendChild(c), n.appendChild(this.actionInput), t.appendChild(n);
const m = p("submit-section"), u = h("label");
return u.className = "flex items-center gap-2", this.submitButtonCheckbox = k(
this.editor.t("Include submit button"),
!0,
() => {
}
), this.submitButtonCheckbox.id = "submitButton", u.appendChild(this.submitButtonCheckbox), m.appendChild(u), t.appendChild(m), t;
}
getTemplateOptions() {
const t = this.templateManager.getTemplates(), e = [{ value: "", label: this.editor.t("No template") }];
return t.forEach((a) => {
e.push({
value: a.id,
label: a.name
});
}), e;
}
handleTemplateChange(t) {
if (!t) return;
const e = this.templateManager.getTemplate(t);
e && (this.methodSelect && (this.methodSelect.value = e.config.method), this.actionInput && (this.actionInput.value = e.config.action));
}
handleCreate() {
var e, a, l, s, n;
if (!this.callback) return;
const t = {
method: ((e = this.methodSelect) == null ? void 0 : e.value) || "POST",
action: ((a = this.actionInput) == null ? void 0 : a.value) || "",
hasSubmitButton: ((l = this.submitButtonCheckbox) == null ? void 0 : l.checked) || !1
};
if ((s = this.templateSelect) != null && s.value) {
const c = this.templateManager.getTemplate(this.templateSelect.value);
c && (t.template = c);
}
this.callback(t), (n = this.popup) == null || n.hide();
}
show(t) {
this.callback = t, this.popup || (this.popup = new S(this.editor, {
title: this.editor.t("Create Form"),
className: "form-popup",
closeOnClickOutside: !0,
buttons: [
{
label: this.editor.t("Create"),
variant: "primary",
onClick: () => this.handleCreate()
},
{
label: this.editor.t("Cancel"),
variant: "secondary",
onClick: () => this.popup.hide()
}
],
items: [
{
type: "custom",
id: "form-content",
content: () => this.createContent()
}
]
})), this.popup.show();
}
destroy() {
this.popup && (this.popup.destroy(), this.popup = null), this.callback = null;
}
}
export {
O as FormPopup
};