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
175 lines (174 loc) • 5.88 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 d = Object.defineProperty;
var l = (o, t, e) => t in o ? d(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
var s = (o, t, e) => l(o, typeof t != "symbol" ? t + "" : t, e);
import { PopupManager as r } from "../../../core/ui/PopupManager.mjs";
import { CategoryManager as c } from "../services/CategoryManager.mjs";
import { CalendarForm as p } from "./CalendarForm.mjs";
import { EventForm as h } from "./EventForm.mjs";
class v {
constructor(t, e, i, a) {
s(this, "popup");
s(this, "editor");
s(this, "manager");
s(this, "categoryManager");
s(this, "onSelect", null);
s(this, "onImport");
this.editor = e, this.manager = t, this.categoryManager = a || new c(), this.onImport = i, this.popup = this.createMainPopup();
}
createMainPopup() {
return new r(this.editor, {
title: this.editor.t("Calendar"),
className: "calendar-menu",
closeOnClickOutside: !0,
buttons: [
{
label: this.editor.t("Import"),
variant: "secondary",
onClick: () => this.showImportDialog()
},
{
label: this.editor.t("New Calendar"),
variant: "primary",
onClick: () => this.showNewCalendarForm()
}
],
items: [
{
type: "custom",
id: "calendars-content",
content: () => this.createCalendarsList()
}
]
});
}
createCalendarsList() {
const t = document.createElement("div");
t.className = "calendars-list";
const e = this.manager.getCalendars();
if (e.length === 0) {
const i = document.createElement("div");
i.className = "empty-state", i.innerHTML = `
<p>${this.editor.t("No calendars found")}</p>
<p>${this.editor.t("Create your first calendar to get started")}</p>
`, t.appendChild(i);
} else
e.forEach((i) => {
const a = this.createCalendarItem(i);
t.appendChild(a);
});
return t;
}
createCalendarItem(t) {
const e = this.manager.getEvents(t.id), i = document.createElement("div");
return i.className = "calendar-item", i.innerHTML = `
<div class="calendar-info">
<h4 class="calendar-title">${t.title}</h4>
<p class="calendar-description">${t.description || ""}</p>
<span class="calendar-events-count">${e.length} events</span>
</div>
<div class="calendar-actions">
<button class="btn-edit" title="${this.editor.t("Edit")}">✏️</button>
<button class="btn-delete" title="${this.editor.t("Delete")}">🗑️</button>
</div>
`, i.addEventListener("click", (a) => {
a.target.classList.contains("btn-edit") ? (a.stopPropagation(), this.showEditCalendarForm(t)) : a.target.classList.contains("btn-delete") ? (a.stopPropagation(), this.handleDeleteCalendar(t)) : this.handleSelectCalendar(t);
}), i;
}
createFormPopup(t, e, i, a) {
this.popup = new r(this.editor, {
title: this.editor.t(t),
className: "calendar-menu",
closeOnClickOutside: !0,
buttons: [
{
label: this.editor.t("Cancel"),
variant: "secondary",
onClick: a || (() => this.popup.hide())
},
{
label: this.editor.t(i),
variant: "primary",
onClick: () => {
this.editor.ensureEditorFocus(), e.submit();
}
}
],
items: [
{
type: "custom",
id: "form-content",
content: () => e.getElement()
}
]
}), this.popup.show();
}
showNewCalendarForm(t) {
const e = new p(this.editor, (i) => {
const a = this.manager.createCalendar(i);
this.popup.hide(), this.popup = this.createMainPopup(), this.popup.show(), t && a && t(a);
});
this.createFormPopup("New Calendar", e, "Create", () => {
this.popup = this.createMainPopup(), this.popup.show();
});
}
showEditCalendarForm(t) {
const e = new p(
this.editor,
(i) => {
this.manager.updateCalendar(t.id, i), this.popup.hide(), this.popup = this.createMainPopup(), this.popup.show();
},
t
);
this.createFormPopup("Edit Calendar", e, "Update", () => {
this.popup = this.createMainPopup(), this.popup.show();
});
}
handleSelectCalendar(t) {
var e;
(e = this.onSelect) == null || e.call(this, t), this.popup.hide();
}
handleDeleteCalendar(t) {
confirm(this.editor.t("Are you sure you want to delete this calendar?")) && (this.manager.deleteCalendar(t.id), this.popup.hide(), this.popup = this.createMainPopup(), this.popup.show());
}
show(t) {
this.onSelect = t, this.popup.show();
}
showEditEvent(t, e) {
const i = new h(
this.editor,
(a) => {
const n = this.manager.updateEvent(t.id, a);
this.popup.hide(), e(n);
},
t,
this.categoryManager
);
this.createFormPopup("Edit Event", i, "Update", () => {
this.popup.hide();
});
}
showCreateEvent(t, e) {
const i = new h(
this.editor,
(a) => {
const n = this.manager.createEvent(a, t);
this.popup.hide(), e(n);
},
void 0,
this.categoryManager
);
this.createFormPopup("New Event", i, "Create", () => {
this.popup.hide();
});
}
showImportDialog() {
this.onImport && this.onImport();
}
destroy() {
this.popup && (this.popup.hide(), typeof this.popup.destroy == "function" && this.popup.destroy(), this.popup = null), this.editor = null, this.manager = null, this.onSelect = null;
}
}
export {
v as CalendarMenu
};