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
109 lines (108 loc) • 4.98 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 y = Object.defineProperty;
var D = (l, i, t) => i in l ? y(l, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[i] = t;
var e = (l, i, t) => D(l, typeof i != "symbol" ? i + "" : i, t);
import { createContainer as v, createForm as q, createLabel as d, createInputField as s, createTextarea as E } from "../../../utils/helpers.mjs";
class w {
constructor(i, t, r) {
e(this, "editor");
e(this, "onSubmit");
e(this, "timer");
e(this, "titleField");
e(this, "descriptionField");
e(this, "dateField");
e(this, "timeField");
e(this, "colorField");
e(this, "categoryField");
e(this, "tagsField");
this.editor = i, this.onSubmit = t, this.timer = r;
}
getElement() {
var F, p, u, g, f, T, C, b;
const i = v("timer-form-container"), t = q("timer-form"), r = d(this.editor.t("Title"), "title");
this.titleField = s(
"text",
this.editor.t("Enter timer title"),
((F = this.timer) == null ? void 0 : F.title) || ""
), this.titleField.id = "title", this.titleField.required = !0;
const a = d(this.editor.t("Description"), "description");
this.descriptionField = E(
this.editor.t("Enter timer description"),
((p = this.timer) == null ? void 0 : p.description) || ""
), this.descriptionField.id = "description";
const h = d(this.editor.t("Target Date"), "targetDate");
this.dateField = s(
"date",
"",
(u = this.timer) != null && u.targetDate ? this.formatDateForInput(this.timer.targetDate) : ""
), this.dateField.id = "targetDate", this.dateField.required = !0;
const n = d(this.editor.t("Target Time"), "targetTime");
this.timeField = s("time", "", ((g = this.timer) == null ? void 0 : g.targetTime) || ""), this.timeField.id = "targetTime", this.timeField.required = !0;
const c = d(this.editor.t("Color"), "color");
this.colorField = s("color", "", ((f = this.timer) == null ? void 0 : f.color) || "#3b82f6"), this.colorField.id = "color";
const m = d(this.editor.t("Category"), "category");
this.categoryField = s(
"text",
this.editor.t("Enter category"),
((T = this.timer) == null ? void 0 : T.category) || ""
), this.categoryField.id = "category";
const o = d(this.editor.t("Tags (comma separated)"), "tags");
return this.tagsField = s(
"text",
this.editor.t("Enter tags separated by commas"),
((b = (C = this.timer) == null ? void 0 : C.tags) == null ? void 0 : b.join(", ")) || ""
), this.tagsField.id = "tags", t.appendChild(r), t.appendChild(this.titleField), t.appendChild(a), t.appendChild(this.descriptionField), t.appendChild(h), t.appendChild(this.dateField), t.appendChild(n), t.appendChild(this.timeField), t.appendChild(c), t.appendChild(this.colorField), t.appendChild(m), t.appendChild(this.categoryField), t.appendChild(o), t.appendChild(this.tagsField), i.appendChild(t), i;
}
formatDateForInput(i) {
return i.toISOString().split("T")[0];
}
submit() {
var h, n, c, m;
if (!this.titleField || !this.dateField || !this.timeField) return;
const i = this.dateField.value, t = this.timeField.value;
let r;
if (i && t) {
const o = `${i}T${t}`;
r = new Date(o);
} else
r = /* @__PURE__ */ new Date();
const a = {
title: this.titleField.value || "",
description: ((h = this.descriptionField) == null ? void 0 : h.value) || "",
targetDate: r,
targetTime: this.timeField.value || "",
color: ((n = this.colorField) == null ? void 0 : n.value) || "#3b82f6",
category: ((c = this.categoryField) == null ? void 0 : c.value) || "",
tags: (((m = this.tagsField) == null ? void 0 : m.value) || "").split(",").map((o) => o.trim()).filter(Boolean)
};
if (!a.title.trim()) {
this.editor.showErrorNotification(this.editor.t("Title is required") || "Title is required");
return;
}
if (!i) {
this.editor.showErrorNotification(
this.editor.t("Target date is required") || "Target date is required"
);
return;
}
if (!t) {
this.editor.showErrorNotification(
this.editor.t("Target time is required") || "Target time is required"
);
return;
}
if (isNaN(r.getTime())) {
this.editor.showErrorNotification(
this.editor.t("Invalid date/time format") || "Invalid date/time format"
);
return;
}
this.onSubmit(a);
}
destroy() {
this.titleField = null, this.descriptionField = null, this.dateField = null, this.timeField = null, this.colorField = null, this.categoryField = null, this.tagsField = null, this.editor = null, this.onSubmit = null, this.timer = null;
}
}
export {
w as TimerForm
};