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
82 lines (81 loc) • 4.44 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 h = (r, e, t) => e in r ? d(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
var l = (r, e, t) => h(r, typeof e != "symbol" ? e + "" : e, t);
import { getRandomColor as c } from "../utils/colors.mjs";
import s from "../../../icons/delete.svg.mjs";
import { createContainer as x } from "../../../utils/helpers.mjs";
class $ {
constructor(e, t, o, n, i) {
l(this, "element");
l(this, "requiresXY");
l(this, "isScatter");
l(this, "onChange");
l(this, "onDelete");
this.element = x(), this.requiresXY = t, this.isScatter = o, this.onChange = n, this.onDelete = i, this.initialize(e);
}
initialize(e) {
this.element.className = `grid ${this.getGridCols()} gap-2 items-center`;
const t = e.color || c();
this.element.innerHTML = this.requiresXY ? this.createXYRowContent(e, t) : this.createBasicRowContent(e, t), this.setupEventListeners();
}
getGridCols() {
return this.requiresXY ? this.isScatter ? "grid-cols-[1fr,80px,80px,40px]" : "grid-cols-[1fr,80px,80px,80px,40px,40px]" : "grid-cols-[1fr,120px,40px,40px]";
}
createBasicRowContent(e, t) {
return `
<input type="text" class="label-input px-2 py-1 border rounded text-sm"
value="${e.label || ""}" placeholder="Label">
<input type="number" class="value-input px-2 py-1 border rounded text-sm"
value="${e.value || ""}" placeholder="Value">
<input type="color" class="color-input w-8 h-8 rounded cursor-pointer"
value="${t}" title="Point Color">
<button class="delete-row-btn p-1 text-red-500 hover:text-red-700" title="Delete Point">${s}</button>
`;
}
createXYRowContent(e, t) {
return this.isScatter ? `
<input type="text" class="label-input px-2 py-1 border rounded text-sm"
value="${e.label || ""}" placeholder="Label">
<input type="number" class="x-input px-2 py-1 border rounded text-sm"
value="${e.x || ""}" placeholder="X">
<input type="number" class="y-input px-2 py-1 border rounded text-sm"
value="${e.y || ""}" placeholder="Y">
<button class="delete-row-btn p-1 text-red-500 hover:text-red-700" title="Delete Point">${s}</button>
` : `
<input type="text" class="label-input px-2 py-1 border rounded text-sm"
value="${e.label || ""}" placeholder="Label">
<input type="number" class="x-input px-2 py-1 border rounded text-sm"
value="${e.x || ""}" placeholder="X">
<input type="number" class="y-input px-2 py-1 border rounded text-sm"
value="${e.y || ""}" placeholder="Y">
<input type="number" class="r-input px-2 py-1 border rounded text-sm"
value="${e.r || "5"}" placeholder="Size" min="1" max="100">
<input type="color" class="color-input w-8 h-8 rounded cursor-pointer"
value="${t}" title="Point Color">
<button class="delete-row-btn p-1 text-red-500 hover:text-red-700" title="Delete Point">${s}</button>
`;
}
setupEventListeners() {
var e;
this.element.addEventListener("input", this.onChange), (e = this.element.querySelector(".delete-row-btn")) == null || e.addEventListener("click", this.onDelete);
}
getData() {
var t, o, n, i, u, p, a;
const e = {
label: ((t = this.element.querySelector(".label-input")) == null ? void 0 : t.value) || ""
};
return this.requiresXY ? (e.x = parseFloat(
((o = this.element.querySelector(".x-input")) == null ? void 0 : o.value) || "0"
), e.y = parseFloat(
((n = this.element.querySelector(".y-input")) == null ? void 0 : n.value) || "0"
), this.isScatter ? (e.color = c(), e.r = 5) : (e.r = parseFloat(
((i = this.element.querySelector(".r-input")) == null ? void 0 : i.value) || "5"
), e.color = (u = this.element.querySelector(".color-input")) == null ? void 0 : u.value), e.value = e.y) : (e.value = parseFloat(
((p = this.element.querySelector(".value-input")) == null ? void 0 : p.value) || "0"
), e.color = (a = this.element.querySelector(".color-input")) == null ? void 0 : a.value), e;
}
}
export {
$ as DataRow
};