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
92 lines (91 loc) • 3.26 kB
JavaScript
var h = Object.defineProperty;
var d = (r, t, o) => t in r ? h(r, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[t] = o;
var i = (r, t, o) => d(r, typeof t != "symbol" ? t + "" : t, o);
import { PopupManager as u } from "../../../core/ui/PopupManager.mjs";
import { COLORS as C, RECENT_COLORS_KEY as n } from "../constants.mjs";
import { createContainer as l, createH as f, createButton as m } from "../../../utils/helpers.mjs";
class O {
constructor(t, o) {
i(this, "editor");
i(this, "popup");
i(this, "recentColors", []);
i(this, "onSelect", null);
i(this, "color", "");
this.editor = t, this.popup = new u(t, {
title: o,
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"), C)
}), t.push({
type: "color",
id: "custom-color",
onChange: (o) => {
this.color = o.toString();
}
}), t;
}
createColorGrid(t, o) {
const s = l(), c = f("h3", "text-sm font-medium text-gray-700 mb-2", t), e = l("grid grid-cols-8 gap-2");
return o.forEach((a) => {
const p = this.createColorButton(a);
e.appendChild(p);
}), s.appendChild(c), s.appendChild(e), s;
}
createColorButton(t) {
const o = m(t, () => {
const e = o.dataset.color;
e && (this.color = e, this.popup.setValue("custom-color", e));
});
o.className = "color-button w-8 h-8 rounded-lg border border-gray-200 overflow-hidden relative group", o.dataset.color = t, o.title = t;
const s = l("absolute inset-0");
s.style.backgroundColor = t;
const c = l(
"absolute inset-0 opacity-0 group-hover:opacity-10 bg-black transition-opacity"
);
if (t.toLowerCase() === "#ffffff") {
const e = l("absolute inset-0 border border-gray-200 rounded-lg");
o.appendChild(e);
}
return o.appendChild(s), o.appendChild(c), o;
}
selectColor(t) {
this.recentColors.includes(t) || (this.recentColors.unshift(t), this.recentColors.length > 8 && this.recentColors.pop(), localStorage.setItem(n, JSON.stringify(this.recentColors))), this.onSelect && (this.onSelect(t), this.popup.hide());
}
loadRecentColors() {
try {
const t = localStorage.getItem(n);
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 = "";
}
}
export {
O as ColorPicker
};