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
147 lines (146 loc) • 4.41 kB
JavaScript
var l = Object.defineProperty;
var h = (s, t, e) => t in s ? l(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
var o = (s, t, e) => h(s, typeof t != "symbol" ? t + "" : t, e);
import { PopupManager as p } from "../../../core/ui/PopupManager.mjs";
import { TemplatesList as r } from "./TemplatesList.mjs";
import { TemplateForm as n } from "./TemplateForm.mjs";
class w {
constructor(t, e) {
o(this, "popup");
o(this, "editor");
o(this, "manager");
o(this, "list");
o(this, "onSelect", null);
this.editor = e, this.manager = t, this.list = new r(
this.editor,
(i) => this.handleSelect(i),
(i) => this.showEditForm(i),
(i) => this.handleDelete(i)
), this.popup = this.createMainPopup(), this.updateContent();
}
createMainPopup() {
return new p(this.editor, {
title: this.editor.t("Templates"),
className: "templates-menu",
closeOnClickOutside: !0,
buttons: [
{
label: this.editor.t("New Template"),
variant: "primary",
onClick: () => this.showNewForm()
}
],
items: [
{
type: "custom",
id: "templates-content",
content: () => this.list.getElement()
}
]
});
}
updateContent() {
const t = this.manager.getTemplates();
this.list.setTemplates(t), this.popup.setContent(this.list.getElement());
}
showNewForm() {
const t = new n(this.editor, (e) => {
this.manager.saveTemplate(e), this.popup.hide(), this.popup = this.createMainPopup(), this.updateContent(), this.popup.show();
});
this.popup = new p(this.editor, {
title: this.editor.t("New"),
className: "templates-menu",
closeOnClickOutside: !0,
buttons: [
{
label: this.editor.t("Cancel"),
variant: "secondary",
onClick: () => {
this.popup = this.createMainPopup(), this.updateContent(), this.popup.show();
}
},
{
label: this.editor.t("Save"),
variant: "primary",
onClick: () => {
const e = t.getElement().querySelector("form");
if (e) {
const i = new Event("submit", {
bubbles: !0,
cancelable: !0
});
e.dispatchEvent(i);
}
}
}
],
items: [
{
type: "custom",
id: "template-form",
content: () => t.getElement()
}
]
}), this.popup.show();
}
showEditForm(t) {
const e = new n(
this.editor,
(i) => {
this.manager.updateTemplate(t.id, i), this.popup.hide(), this.popup = this.createMainPopup(), this.updateContent(), this.popup.show();
},
t
);
this.popup = new p(this.editor, {
title: this.editor.t("Edit"),
className: "templates-menu",
closeOnClickOutside: !0,
buttons: [
{
label: this.editor.t("Cancel"),
variant: "secondary",
onClick: () => {
this.popup = this.createMainPopup(), this.updateContent(), this.popup.show();
}
},
{
label: this.editor.t("Update"),
variant: "primary",
onClick: () => {
const i = e.getElement().querySelector("form");
if (i) {
const a = new Event("submit", {
bubbles: !0,
cancelable: !0
});
i.dispatchEvent(a);
}
}
}
],
items: [
{
type: "custom",
id: "template-form",
content: () => e.getElement()
}
]
}), this.popup.show();
}
handleSelect(t) {
var e;
(e = this.onSelect) == null || e.call(this, t), this.popup.hide();
}
handleDelete(t) {
confirm(this.editor.t("Are you sure you want to delete this template?")) && (this.manager.deleteTemplate(t.id), this.updateContent());
}
show(t) {
this.onSelect = t, this.updateContent(), this.popup.show();
}
destroy() {
this.popup && (this.popup.hide(), typeof this.popup.destroy == "function" && this.popup.destroy(), this.popup = null), this.list && (this.list.destroy(), this.list = null), this.editor = null, this.manager = null, this.onSelect = null;
}
}
export {
w as TemplatesMenu
};