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
98 lines (97 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 u = Object.defineProperty;
var g = (o, e, t) => e in o ? u(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
var r = (o, e, t) => g(o, typeof e != "symbol" ? e + "" : e, t);
import { PopupManager as f } from "../../../core/ui/PopupManager.mjs";
import { TemplateManager as y } from "../services/TemplateManager.mjs";
import { createContainer as n, createLabel as m, createInputField as C, createButton as T } from "../../../utils/helpers.mjs";
class w {
constructor(e) {
r(this, "editor");
r(this, "popup");
r(this, "templateManager");
r(this, "callback", null);
r(this, "searchInput", null);
r(this, "templatesContainer", null);
r(this, "selectedCategory", "all");
this.editor = e, this.templateManager = new y(e), this.templateManager.initialize(), this.popup = new f(e, {
title: e.t("Form Templates"),
className: "templates-modal",
closeOnClickOutside: !0,
buttons: [
{
label: e.t("Cancel"),
variant: "secondary",
onClick: () => this.popup.hide()
}
],
items: [
{
type: "custom",
id: "templates-content",
content: () => this.createContent()
}
]
});
}
createContent() {
const e = n("templates-modal-content"), t = n("search-container"), a = m("Search templates:");
this.searchInput = C("text", "Search templates...", "", (p) => {
this.renderTemplates();
}), t.appendChild(a), t.appendChild(this.searchInput), e.appendChild(t);
const s = n("filter-container"), i = m("Category:"), l = C("select", "", "all", (p) => {
this.selectedCategory = p, this.renderTemplates();
}), c = this.templateManager.getCategories(), h = this.templateManager.getCategoryNames();
return l.innerHTML = '<option value="all">All Categories</option>', c.forEach((p) => {
const d = document.createElement("option");
d.value = p, d.textContent = h[p], l.appendChild(d);
}), s.appendChild(i), s.appendChild(l), e.appendChild(s), this.templatesContainer = n("templates-grid"), e.appendChild(this.templatesContainer), this.renderTemplates(), e;
}
renderTemplates() {
if (!this.templatesContainer) return;
this.templatesContainer.innerHTML = "";
const t = this.templateManager.getTemplates().filter((a) => {
var l;
const s = this.selectedCategory === "all" || a.category === this.selectedCategory, i = !((l = this.searchInput) != null && l.value) || a.name.toLowerCase().includes(this.searchInput.value.toLowerCase()) || a.description.toLowerCase().includes(this.searchInput.value.toLowerCase());
return s && i;
});
if (t.length === 0) {
const a = n("no-templates");
a.textContent = this.editor.t("No templates found"), this.templatesContainer.appendChild(a);
return;
}
t.forEach((a) => {
const s = this.createTemplateCard(a);
this.templatesContainer.appendChild(s);
});
}
createTemplateCard(e) {
const t = n("template-card"), a = n("template-card-header"), s = n("template-card-title");
s.textContent = e.name;
const i = n("template-card-category");
i.textContent = this.templateManager.getCategoryNames()[e.category], a.appendChild(s), a.appendChild(i);
const l = n("template-card-description");
l.textContent = e.description;
const c = n("template-card-fields");
c.textContent = `${e.config.fields.length} fields`;
const h = T(
this.editor.t("Use Template"),
() => this.selectTemplate(e),
"primary"
);
return t.appendChild(a), t.appendChild(l), t.appendChild(c), t.appendChild(h), t;
}
selectTemplate(e) {
var t;
(t = this.callback) == null || t.call(this, e), this.popup.hide();
}
show(e) {
this.callback = e, this.popup.show();
}
destroy() {
this.popup.destroy(), this.callback = null, this.searchInput = null, this.templatesContainer = null;
}
}
export {
w as TemplatesModal
};