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
73 lines (72 loc) • 2.85 kB
JavaScript
var c = Object.defineProperty;
var u = (o, e, t) => e in o ? c(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
var l = (o, e, t) => u(o, typeof e != "symbol" ? e + "" : e, t);
import { formatDate as f } from "../utils/formatters.mjs";
import C from "../../../icons/delete.svg.mjs";
import E from "../../../icons/edit.svg.mjs";
import { createContainer as i, createButton as h } from "../../../utils/helpers.mjs";
class I {
constructor(e, t, n, s) {
l(this, "editor");
l(this, "element");
l(this, "templates", []);
l(this, "onSelect");
l(this, "onEdit");
l(this, "onDelete");
this.editor = e, this.element = i(), this.onSelect = t, this.onEdit = n, this.onDelete = s;
}
setTemplates(e) {
this.templates = e, this.render();
}
render() {
if (this.element.innerHTML = "", this.templates.length === 0) {
const t = i(
"text-center text-gray-500 py-4",
'No templates yet. Click "New Template" to create one.'
);
this.element.appendChild(t);
return;
}
const e = i("space-y-2");
this.templates.forEach((t) => {
const n = this.createTemplateItem(t);
e.appendChild(n);
}), this.element.appendChild(e), this.setupEventListeners();
}
createTemplateItem(e) {
const t = i("template-item");
t.dataset.templateId = e.id;
const n = i(
"flex items-center justify-between p-3 rounded-lg cursor-pointer"
), s = i("div"), r = i("font-medium", e.name), a = i(
"ext-xs text-gray-500",
this.editor.t("Updated") + ` ${f(e.updatedAt)}`
);
s.appendChild(r), s.appendChild(a);
const d = i("flex items-center gap-2"), m = h("", () => {
});
m.className = "edit-button p-1 text-gray-500 hover:text-gray-700 rounded", m.innerHTML = E;
const p = h("", () => {
});
return p.className = "delete-button p-1 text-gray-500 hover:text-red-600 rounded", p.innerHTML = C, d.appendChild(m), d.appendChild(p), n.appendChild(s), n.appendChild(d), t.appendChild(n), t;
}
setupEventListeners() {
this.element.addEventListener("click", (e) => {
const t = e.target, n = t.closest("[data-template-id]");
if (!n) return;
const s = n.getAttribute("data-template-id");
if (!s) return;
const r = this.templates.find((a) => a.id === s);
r && (t.closest(".delete-button") ? this.onDelete(r) : t.closest(".edit-button") ? this.onEdit(r) : this.onSelect(r));
});
}
getElement() {
return this.element;
}
destroy() {
this.element.removeEventListener("click", this.setupEventListeners), this.element.parentElement && this.element.parentElement.removeChild(this.element), this.editor = null, this.element = null, this.templates = [], this.onSelect = null, this.onEdit = null, this.onDelete = null;
}
}
export {
I as TemplatesList
};