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
167 lines (166 loc) • 6.05 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 T = Object.defineProperty;
var w = (o, t, e) => t in o ? T(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
var p = (o, t, e) => w(o, typeof t != "symbol" ? t + "" : t, e);
import { PopupManager as u } from "../../../core/ui/PopupManager.mjs";
import { TimerForm as f } from "./TimerForm.mjs";
class v {
constructor(t, e) {
p(this, "popup");
p(this, "editor");
p(this, "manager");
p(this, "onSelect", null);
this.editor = e, this.manager = t, this.popup = this.createMainPopup();
}
createMainPopup() {
return new u(this.editor, {
title: this.editor.t("Timer"),
className: "timer-menu",
closeOnClickOutside: !0,
buttons: [
{
label: this.editor.t("Import"),
variant: "secondary",
onClick: () => this.showImportDialog()
},
{
label: this.editor.t("New Timer"),
variant: "primary",
onClick: () => this.showNewTimerForm()
}
],
items: [
{
type: "custom",
id: "timers-content",
content: () => this.createTimersList()
}
]
});
}
createTimersList() {
const t = document.createElement("div");
t.className = "timers-list";
const e = this.manager.getTimers();
if (e.length === 0) {
const i = document.createElement("div");
i.className = "empty-state", i.innerHTML = `
<p>${this.editor.t("No timers found")}</p>
<p>${this.editor.t("Create your first timer to get started")}</p>
`, t.appendChild(i);
} else
e.forEach((i) => {
const s = this.createTimerItem(i);
t.appendChild(s);
});
return t;
}
createTimerItem(t) {
const e = this.manager.getTimeLeft(t), i = document.createElement("div");
i.className = "timer-item";
const s = e.isExpired ? "expired" : "active", n = e.isExpired ? "Истек" : "Активен";
return i.innerHTML = `
<div class="timer-info">
<h4 class="timer-title">${t.title}</h4>
<p class="timer-description">${t.description || ""}</p>
<div class="timer-status ${s}">${n}</div>
</div>
<div class="timer-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", (r) => {
r.target.classList.contains("btn-edit") ? (r.stopPropagation(), this.showEditTimerForm(t)) : r.target.classList.contains("btn-delete") ? (r.stopPropagation(), this.handleDeleteTimer(t)) : this.handleSelectTimer(t);
}), i;
}
createFormPopup(t, e, i, s) {
this.popup = new u(this.editor, {
title: this.editor.t(t),
className: "timer-menu",
closeOnClickOutside: !0,
buttons: [
{
label: this.editor.t("Cancel"),
variant: "secondary",
onClick: () => {
s ? s() : 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();
}
showNewTimerForm(t) {
this.popup && this.popup.hide();
const e = new f(this.editor, (i) => {
const s = this.manager.createTimer(i);
this.popup.hide(), e.destroy(), this.popup = this.createMainPopup(), this.popup.show(), t && s && t(s);
});
this.createFormPopup("New Timer", e, "Create", () => {
e.destroy(), this.popup.hide(), this.popup = this.createMainPopup(), this.popup.show();
});
}
showEditTimerForm(t) {
this.popup && this.popup.hide();
const e = new f(
this.editor,
(i) => {
this.manager.updateTimer(t.id, i), this.popup.hide(), e.destroy(), this.popup = this.createMainPopup(), this.popup.show();
},
t
);
this.createFormPopup("Edit Timer", e, "Update", () => {
e.destroy(), this.popup = this.createMainPopup(), this.popup.show();
});
}
handleSelectTimer(t) {
var e;
(e = this.onSelect) == null || e.call(this, t), this.popup.hide();
}
handleDeleteTimer(t) {
confirm(this.editor.t("Are you sure you want to delete this timer?")) && (this.manager.deleteTimer(t.id), this.popup.hide(), this.popup = this.createMainPopup(), this.popup.show());
}
show(t) {
this.onSelect = t, this.popup.show();
}
showImportDialog() {
const t = document.createElement("input");
t.type = "file", t.accept = ".json", t.onchange = (e) => {
var s;
const i = (s = e.target.files) == null ? void 0 : s[0];
if (i) {
const n = new FileReader();
n.onload = (r) => {
var a, h, c, m, d;
try {
const l = JSON.parse((a = r.target) == null ? void 0 : a.result);
this.manager.importTimer(l), (c = this.editor) == null || c.showSuccessNotification(
((h = this.editor) == null ? void 0 : h.t("Timer imported successfully")) || "Timer imported successfully"
), this.popup.hide(), this.popup = this.createMainPopup(), this.popup.show();
} catch {
(d = this.editor) == null || d.showErrorNotification(((m = this.editor) == null ? void 0 : m.t("Import failed")) || "Import failed");
}
}, n.readAsText(i);
}
}, t.click();
}
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 TimerMenu
};