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
2 lines (1 loc) • 2.64 kB
JavaScript
"use strict";var h=Object.defineProperty;var u=(s,t,e)=>t in s?h(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var n=(s,t,e)=>u(s,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../../../core/ui/PopupManager.cjs"),l=require("../constants.cjs"),r=require("../../../utils/helpers.cjs");class C{constructor(t,e){n(this,"editor");n(this,"popup");n(this,"recentColors",[]);n(this,"onSelect",null);n(this,"color","");this.editor=t,this.popup=new d.PopupManager(t,{title:e,className:"color-picker",closeOnClickOutside:!0,items:this.createPopupItems(),buttons:[{label:"Apply",variant:"primary",onClick:()=>this.selectColor(this.color)}]}),this.loadRecentColors()}createPopupItems(){const t=[];return this.recentColors.length>0&&t.push({type:"custom",id:"recent-colors",content:()=>this.createColorGrid(this.editor.t("Recent Colors"),this.recentColors)}),t.push({type:"custom",id:"default-colors",content:()=>this.createColorGrid(this.editor.t("Default Colors"),l.COLORS)}),t.push({type:"color",id:"custom-color",onChange:e=>{this.color=e.toString()}}),t}createColorGrid(t,e){const i=r.createContainer(),c=r.createH("h3","text-sm font-medium text-gray-700 mb-2",t),o=r.createContainer("grid grid-cols-8 gap-2");return e.forEach(a=>{const p=this.createColorButton(a);o.appendChild(p)}),i.appendChild(c),i.appendChild(o),i}createColorButton(t){const e=r.createButton(t,()=>{const o=e.dataset.color;o&&(this.color=o,this.popup.setValue("custom-color",o))});e.className="color-button w-8 h-8 rounded-lg border border-gray-200 overflow-hidden relative group",e.dataset.color=t,e.title=t;const i=r.createContainer("absolute inset-0");i.style.backgroundColor=t;const c=r.createContainer("absolute inset-0 opacity-0 group-hover:opacity-10 bg-black transition-opacity");if(t.toLowerCase()==="#ffffff"){const o=r.createContainer("absolute inset-0 border border-gray-200 rounded-lg");e.appendChild(o)}return e.appendChild(i),e.appendChild(c),e}selectColor(t){this.recentColors.includes(t)||(this.recentColors.unshift(t),this.recentColors.length>8&&this.recentColors.pop(),localStorage.setItem(l.RECENT_COLORS_KEY,JSON.stringify(this.recentColors))),this.onSelect&&(this.onSelect(t),this.popup.hide())}loadRecentColors(){try{const t=localStorage.getItem(l.RECENT_COLORS_KEY);t&&(this.recentColors=JSON.parse(t))}catch(t){console.error("Failed to load recent colors:",t),this.recentColors=[]}}show(t){this.onSelect=t,this.popup.show()}destroy(){this.popup.destroy(),this.editor=null,this.popup=null,this.recentColors=[],this.onSelect=null,this.color=""}}exports.ColorPicker=C;