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
84 lines (83 loc) • 2.72 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 u = Object.defineProperty;
var l = (a, e, t) => e in a ? u(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
var r = (a, e, t) => l(a, typeof e != "symbol" ? e + "" : e, t);
import { PopupManager as p } from "../../../core/ui/PopupManager.mjs";
class h {
constructor(e, t) {
r(this, "popup");
r(this, "editor");
r(this, "languageManager");
this.editor = e, this.languageManager = t, this.popup = this.createPopup();
}
createPopup() {
return new p(this.editor, {
title: this.editor.t("Language Settings"),
className: "language-menu",
closeOnClickOutside: !0,
items: [
{
type: "custom",
id: "language-list",
content: () => this.createLanguageList()
}
]
});
}
createLanguageList() {
const e = document.createElement("div");
e.className = "language-list-container";
const t = this.languageManager.getLocales(), i = this.editor.getLocale();
return t.forEach((n) => {
const s = document.createElement("button");
s.className = `language-option w-full text-left px-3 py-2 rounded-lg transition-colors ${n === i ? "bg-blue-100 text-blue-700 border border-blue-300" : "bg-gray-50 text-gray-700 hover:bg-gray-100 border border-transparent"}`;
const o = this.getLanguageName(n), g = n.toUpperCase();
s.innerHTML = `
<div class="flex items-center justify-between">
<span class="font-medium">${o}</span>
<span class="text-sm text-gray-500">${g}</span>
</div>
`, s.addEventListener("click", () => {
this.languageManager.setLocale(n), this.popup.hide();
}), e.appendChild(s);
}), e;
}
getLanguageName(e) {
return {
en: "English",
ru: "Русский",
de: "Deutsch",
fr: "Français",
es: "Español",
it: "Italiano",
pt: "Português",
pl: "Polski",
cs: "Čeština",
nl: "Nederlands",
tr: "Türkçe",
ja: "日本語",
ko: "한국어",
zh: "中文",
ar: "العربية",
hi: "हिन्दी",
vi: "Tiếng Việt",
th: "ไทย",
id: "Bahasa Indonesia"
}[e] || e;
}
show() {
this.popup.rerender([
{
type: "custom",
id: "language-list",
content: () => this.createLanguageList()
}
]), this.popup.show();
}
destroy() {
this.popup.destroy();
}
}
export {
h as LanguageMenu
};