Merge MonacoCSS Plugin directly into Themes as the native panel
Signed-off-by: AvaLilac <257690424+AvaLilac@users.noreply.github.com>
This commit is contained in:
AvaLilac
GitHub
parent
8b0e6588fd
commit
dec110d795
1 changed files with 298 additions and 255 deletions
|
|
@ -4,7 +4,8 @@
|
|||
window.__AVIA_THEMES_LOADED__ = true;
|
||||
|
||||
const STORAGE_KEY = "avia_themes";
|
||||
let editingTheme = null;
|
||||
let editingThemeId = null;
|
||||
let monacoEditorInstance = null;
|
||||
|
||||
const TEMPLATE = `/*
|
||||
@name Whatever name here
|
||||
|
|
@ -18,6 +19,19 @@
|
|||
const getThemes = () => JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
|
||||
const setThemes = (data) => localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
|
||||
|
||||
function preloadMonaco() {
|
||||
return new Promise(resolve => {
|
||||
if (window.monaco) return resolve();
|
||||
const loader = document.createElement("script");
|
||||
loader.src = "https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs/loader.js";
|
||||
loader.onload = function () {
|
||||
require.config({ paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs" } });
|
||||
require(["vs/editor/editor.main"], () => resolve());
|
||||
};
|
||||
document.head.appendChild(loader);
|
||||
});
|
||||
}
|
||||
|
||||
function parseMeta(css) {
|
||||
const name = css.match(/@name\s+(.+)/)?.[1] || "Unknown Theme";
|
||||
const author = css.match(/@author\s+(.+)/)?.[1] || "Unknown";
|
||||
|
|
@ -49,8 +63,7 @@
|
|||
|
||||
function applyThemes() {
|
||||
document.querySelectorAll(".avia-theme-style").forEach(e => e.remove());
|
||||
const themes = getThemes();
|
||||
themes.forEach(theme=>{
|
||||
getThemes().forEach(theme => {
|
||||
if (!theme.enabled) return;
|
||||
const style = document.createElement("style");
|
||||
style.className = "avia-theme-style";
|
||||
|
|
@ -93,44 +106,63 @@
|
|||
});
|
||||
}
|
||||
|
||||
function openThemeEditor(theme){
|
||||
editingTheme = theme;
|
||||
let panel = document.getElementById('avia-theme-editor');
|
||||
async function openThemeEditor(themeId) {
|
||||
await preloadMonaco();
|
||||
|
||||
editingThemeId = themeId;
|
||||
const themes = getThemes();
|
||||
const theme = themes.find(t => t.id === themeId);
|
||||
if (!theme) return;
|
||||
|
||||
const meta = parseMeta(theme.css);
|
||||
let panel = document.getElementById("avia-theme-editor");
|
||||
|
||||
if (panel) {
|
||||
panel.style.display = "flex";
|
||||
panel.querySelector("textarea").value = theme.css;
|
||||
panel.querySelector("#avia-theme-editor-title").textContent = "Theme Editor — " + meta.name;
|
||||
if (monacoEditorInstance) {
|
||||
monacoEditorInstance._aviaThemeId = themeId;
|
||||
const model = monacoEditorInstance.getModel();
|
||||
if (model) model.setValue(theme.css || "");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
panel = document.createElement("div");
|
||||
panel.id = "avia-theme-editor";
|
||||
Object.assign(panel.style, {
|
||||
position: "fixed",
|
||||
bottom: "24px",
|
||||
right: "24px",
|
||||
width:"420px",
|
||||
height:"340px",
|
||||
width: "650px",
|
||||
height: "420px",
|
||||
background: "var(--md-sys-color-surface, #1e1e1e)",
|
||||
color: "var(--md-sys-color-on-surface, #fff)",
|
||||
borderRadius: "16px",
|
||||
boxShadow: "0 8px 28px rgba(0,0,0,0.35)",
|
||||
zIndex:999999,
|
||||
zIndex: "9999999",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
border: "1px solid rgba(255,255,255,0.08)",
|
||||
backdropFilter: "blur(12px)"
|
||||
});
|
||||
|
||||
const header = document.createElement("div");
|
||||
header.textContent="Theme Editor";
|
||||
header.id = "avia-theme-editor-title";
|
||||
header.textContent = "Theme Editor — " + meta.name;
|
||||
Object.assign(header.style, {
|
||||
padding: "14px 16px",
|
||||
fontWeight: "600",
|
||||
fontSize: "14px",
|
||||
background: "var(--md-sys-color-surface-container, rgba(255,255,255,0.04))",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.08)",
|
||||
cursor:"move"
|
||||
cursor: "move",
|
||||
color: "#fff",
|
||||
flex: "0 0 auto"
|
||||
});
|
||||
makeDraggable(panel, header);
|
||||
|
||||
const close = document.createElement("div");
|
||||
close.textContent = "✕";
|
||||
Object.assign(close.style, {
|
||||
|
|
@ -141,37 +173,49 @@
|
|||
opacity: "0.6",
|
||||
fontSize: "15px",
|
||||
lineHeight: "1",
|
||||
padding:"2px 4px"
|
||||
padding: "2px 4px",
|
||||
color: "#fff"
|
||||
});
|
||||
close.onmouseenter = () => close.style.opacity = "1";
|
||||
close.onmouseleave = () => close.style.opacity = "0.6";
|
||||
close.onclick = () => panel.style.display = "none";
|
||||
const textarea=document.createElement("textarea");
|
||||
Object.assign(textarea.style,{
|
||||
flex:"1",
|
||||
border:"none",
|
||||
outline:"none",
|
||||
resize:"none",
|
||||
padding:"16px",
|
||||
background:"transparent",
|
||||
color:"inherit",
|
||||
fontFamily:"monospace",
|
||||
fontSize:"13px"
|
||||
});
|
||||
textarea.value=theme.css;
|
||||
textarea.addEventListener("input",()=>{
|
||||
const themes=getThemes();
|
||||
const t=themes.find(x=>x.id===editingTheme.id);
|
||||
if(!t) return;
|
||||
t.css=textarea.value;
|
||||
setThemes(themes);
|
||||
applyThemes();
|
||||
if(window.__avia_refresh_themes_panel){window.__avia_refresh_themes_panel();}
|
||||
});
|
||||
|
||||
const editorContainer = document.createElement("div");
|
||||
editorContainer.style.flex = "1";
|
||||
|
||||
panel.appendChild(header);
|
||||
panel.appendChild(close);
|
||||
panel.appendChild(textarea);
|
||||
panel.appendChild(editorContainer);
|
||||
document.body.appendChild(panel);
|
||||
|
||||
monacoEditorInstance = monaco.editor.create(editorContainer, {
|
||||
value: theme.css || "",
|
||||
language: "css",
|
||||
theme: "vs-dark",
|
||||
automaticLayout: true,
|
||||
minimap: { enabled: false },
|
||||
fontSize: 13,
|
||||
scrollBeyondLastLine: false,
|
||||
wordWrap: "on"
|
||||
});
|
||||
|
||||
monacoEditorInstance._aviaThemeId = themeId;
|
||||
|
||||
monacoEditorInstance.onDidChangeModelContent(() => {
|
||||
const id = monacoEditorInstance._aviaThemeId;
|
||||
if (!id) return;
|
||||
const value = monacoEditorInstance.getValue();
|
||||
const all = getThemes();
|
||||
const target = all.find(t => t.id === id);
|
||||
if (!target) return;
|
||||
target.css = value;
|
||||
setThemes(all);
|
||||
applyThemes();
|
||||
header.textContent = "Theme Editor — " + parseMeta(value).name;
|
||||
if (typeof window.__avia_refresh_themes_panel === "function") {
|
||||
window.__avia_refresh_themes_panel();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function toggleThemesPanel() {
|
||||
|
|
@ -180,6 +224,7 @@
|
|||
panel.style.display = panel.style.display === "none" ? "flex" : "none";
|
||||
return;
|
||||
}
|
||||
|
||||
panel = document.createElement("div");
|
||||
panel.id = "avia-themes-panel";
|
||||
Object.assign(panel.style, {
|
||||
|
|
@ -192,7 +237,7 @@
|
|||
color: "var(--md-sys-color-on-surface, #fff)",
|
||||
borderRadius: "16px",
|
||||
boxShadow: "0 8px 28px rgba(0,0,0,0.35)",
|
||||
zIndex:999999,
|
||||
zIndex: "999999",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
|
|
@ -319,10 +364,8 @@
|
|||
dropOverlay.style.opacity = "0";
|
||||
panel.style.border = "1px solid rgba(255,255,255,0.08)";
|
||||
dragDepth = 0;
|
||||
|
||||
const files = [...e.dataTransfer.files].filter(f => f.name.endsWith(".css") || f.name.endsWith(".txt"));
|
||||
if (!files.length) return;
|
||||
|
||||
const themes = getThemes();
|
||||
for (const file of files) {
|
||||
const css = await file.text();
|
||||
|
|
@ -356,8 +399,7 @@
|
|||
padding: "10px 12px",
|
||||
borderRadius: "10px",
|
||||
background: "rgba(255,255,255,0.04)",
|
||||
border:"1px solid rgba(255,255,255,0.06)",
|
||||
marginBottom:"0"
|
||||
border: "1px solid rgba(255,255,255,0.06)"
|
||||
});
|
||||
|
||||
const left = document.createElement("div");
|
||||
|
|
@ -395,13 +437,13 @@
|
|||
const edit = document.createElement("button");
|
||||
edit.textContent = "Edit";
|
||||
styleBtn(edit, "rgba(100,160,255,0.15)");
|
||||
edit.onclick=()=>openThemeEditor(theme);
|
||||
edit.onclick = () => openThemeEditor(theme.id);
|
||||
|
||||
const dlBtn = document.createElement("button");
|
||||
dlBtn.textContent = "Export";
|
||||
styleBtn(dlBtn, "rgba(80,200,120,0.15)");
|
||||
dlBtn.title = "Download theme as .css";
|
||||
dlBtn.onclick=(e)=>{
|
||||
dlBtn.onclick = e => {
|
||||
e.stopPropagation();
|
||||
downloadTheme(theme);
|
||||
};
|
||||
|
|
@ -475,5 +517,6 @@
|
|||
new MutationObserver(injectButton).observe(document.body, { childList: true, subtree: true });
|
||||
injectButton();
|
||||
applyThemes();
|
||||
preloadMonaco();
|
||||
|
||||
})();
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue