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
30 lines (29 loc) • 3.86 kB
JavaScript
"use strict";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);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../utils/colors.cjs"),s=require("../../../icons/delete.svg.cjs"),x=require("../../../utils/helpers.cjs");class b{constructor(e,t,o,n,i){l(this,"element");l(this,"requiresXY");l(this,"isScatter");l(this,"onChange");l(this,"onDelete");this.element=x.createContainer(),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.getRandomColor();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.default}</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.default}</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.default}</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.getRandomColor(),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}}exports.DataRow=b;