Update themes.js
Signed-off-by: AvaLilac <amyshimplays@gmail.com>
This commit is contained in:
AvaLilac
GitHub
parent
b2afc5d363
commit
45b96855eb
1 changed files with 14 additions and 149 deletions
161
src/themes.js
161
src/themes.js
|
|
@ -18,65 +18,45 @@ function parseMeta(css){
|
|||
}
|
||||
|
||||
function applyThemes(){
|
||||
|
||||
document.querySelectorAll(".avia-theme-style").forEach(e=>e.remove());
|
||||
|
||||
const themes = getThemes();
|
||||
|
||||
themes.forEach(theme=>{
|
||||
if(!theme.enabled) return;
|
||||
|
||||
const style=document.createElement("style");
|
||||
style.className="avia-theme-style";
|
||||
style.textContent=theme.css;
|
||||
|
||||
document.head.appendChild(style);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function makeDraggable(panel, handle){
|
||||
|
||||
let dragging=false,offsetX,offsetY;
|
||||
|
||||
handle.addEventListener("mousedown",e=>{
|
||||
dragging=true;
|
||||
offsetX=e.clientX-panel.offsetLeft;
|
||||
offsetY=e.clientY-panel.offsetTop;
|
||||
document.body.style.userSelect="none";
|
||||
});
|
||||
|
||||
document.addEventListener("mouseup",()=>{
|
||||
dragging=false;
|
||||
document.body.style.userSelect="";
|
||||
});
|
||||
|
||||
document.addEventListener("mouseup",()=>{dragging=false;document.body.style.userSelect="";});
|
||||
document.addEventListener("mousemove",e=>{
|
||||
if(!dragging) return;
|
||||
|
||||
panel.style.left=(e.clientX-offsetX)+"px";
|
||||
panel.style.top=(e.clientY-offsetY)+"px";
|
||||
panel.style.right="auto";
|
||||
panel.style.bottom="auto";
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function openThemeEditor(theme){
|
||||
|
||||
editingTheme = theme;
|
||||
|
||||
let panel = document.getElementById('avia-theme-editor');
|
||||
|
||||
if(panel){
|
||||
panel.style.display="flex";
|
||||
panel.querySelector("textarea").value = theme.css;
|
||||
return;
|
||||
}
|
||||
|
||||
panel=document.createElement("div");
|
||||
panel.id="avia-theme-editor";
|
||||
|
||||
Object.assign(panel.style,{
|
||||
position:"fixed",
|
||||
bottom:"24px",
|
||||
|
|
@ -93,10 +73,8 @@ function openThemeEditor(theme){
|
|||
overflow:"hidden",
|
||||
border:"1px solid rgba(255,255,255,0.08)"
|
||||
});
|
||||
|
||||
const header=document.createElement("div");
|
||||
header.textContent="Theme Editor";
|
||||
|
||||
Object.assign(header.style,{
|
||||
padding:"14px 16px",
|
||||
fontWeight:"600",
|
||||
|
|
@ -105,23 +83,12 @@ function openThemeEditor(theme){
|
|||
borderBottom:"1px solid rgba(255,255,255,0.08)",
|
||||
cursor:"move"
|
||||
});
|
||||
|
||||
makeDraggable(panel,header);
|
||||
|
||||
const close=document.createElement("div");
|
||||
close.textContent="✕";
|
||||
|
||||
Object.assign(close.style,{
|
||||
position:"absolute",
|
||||
right:"16px",
|
||||
top:"12px",
|
||||
cursor:"pointer"
|
||||
});
|
||||
|
||||
Object.assign(close.style,{position:"absolute",right:"16px",top:"12px",cursor:"pointer"});
|
||||
close.onclick=()=>panel.style.display="none";
|
||||
|
||||
const textarea=document.createElement("textarea");
|
||||
|
||||
Object.assign(textarea.style,{
|
||||
flex:"1",
|
||||
border:"none",
|
||||
|
|
@ -133,46 +100,30 @@ function openThemeEditor(theme){
|
|||
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();
|
||||
}
|
||||
|
||||
if(window.__avia_refresh_themes_panel){window.__avia_refresh_themes_panel();}
|
||||
});
|
||||
|
||||
panel.appendChild(header);
|
||||
panel.appendChild(close);
|
||||
panel.appendChild(textarea);
|
||||
|
||||
document.body.appendChild(panel);
|
||||
|
||||
}
|
||||
|
||||
function toggleThemesPanel(){
|
||||
|
||||
let panel=document.getElementById("avia-themes-panel");
|
||||
|
||||
if(panel){
|
||||
panel.style.display = panel.style.display==="none"?"flex":"none";
|
||||
return;
|
||||
}
|
||||
|
||||
panel=document.createElement("div");
|
||||
panel.id="avia-themes-panel";
|
||||
|
||||
Object.assign(panel.style,{
|
||||
position:"fixed",
|
||||
bottom:"40px",
|
||||
|
|
@ -189,10 +140,8 @@ function toggleThemesPanel(){
|
|||
overflow:"hidden",
|
||||
border:"1px solid rgba(255,255,255,0.08)"
|
||||
});
|
||||
|
||||
const header=document.createElement("div");
|
||||
header.textContent="Themes";
|
||||
|
||||
Object.assign(header.style,{
|
||||
padding:"14px 16px",
|
||||
fontWeight:"600",
|
||||
|
|
@ -201,24 +150,13 @@ function toggleThemesPanel(){
|
|||
borderBottom:"1px solid rgba(255,255,255,0.08)",
|
||||
cursor:"move"
|
||||
});
|
||||
|
||||
makeDraggable(panel,header);
|
||||
|
||||
const close=document.createElement("div");
|
||||
close.textContent="✕";
|
||||
|
||||
Object.assign(close.style,{
|
||||
position:"absolute",
|
||||
right:"16px",
|
||||
top:"12px",
|
||||
cursor:"pointer"
|
||||
});
|
||||
|
||||
Object.assign(close.style,{position:"absolute",right:"16px",top:"12px",cursor:"pointer"});
|
||||
close.onclick=()=>panel.style.display="none";
|
||||
|
||||
const importBtn=document.createElement("button");
|
||||
importBtn.textContent="Import Theme";
|
||||
|
||||
Object.assign(importBtn.style,{
|
||||
margin:"10px",
|
||||
padding:"10px",
|
||||
|
|
@ -230,17 +168,9 @@ function toggleThemesPanel(){
|
|||
cursor:"pointer",
|
||||
transition:"all .15s ease"
|
||||
});
|
||||
|
||||
importBtn.onmouseenter=()=>{
|
||||
importBtn.style.background="rgba(255,255,255,0.12)";
|
||||
};
|
||||
|
||||
importBtn.onmouseleave=()=>{
|
||||
importBtn.style.background="rgba(255,255,255,0.06)";
|
||||
};
|
||||
|
||||
importBtn.onmouseenter=()=>{importBtn.style.background="rgba(255,255,255,0.12)";};
|
||||
importBtn.onmouseleave=()=>{importBtn.style.background="rgba(255,255,255,0.06)";};
|
||||
const list=document.createElement("div");
|
||||
|
||||
Object.assign(list.style,{
|
||||
flex:"1",
|
||||
overflowY:"auto",
|
||||
|
|
@ -249,26 +179,17 @@ function toggleThemesPanel(){
|
|||
flexDirection:"column",
|
||||
gap:"8px"
|
||||
});
|
||||
|
||||
panel.appendChild(header);
|
||||
panel.appendChild(close);
|
||||
panel.appendChild(importBtn);
|
||||
panel.appendChild(list);
|
||||
|
||||
document.body.appendChild(panel);
|
||||
|
||||
function render(){
|
||||
|
||||
list.innerHTML="";
|
||||
|
||||
const themes=getThemes();
|
||||
|
||||
themes.forEach(theme=>{
|
||||
|
||||
const meta=parseMeta(theme.css);
|
||||
|
||||
const card=document.createElement("div");
|
||||
|
||||
Object.assign(card.style,{
|
||||
padding:"10px",
|
||||
borderRadius:"10px",
|
||||
|
|
@ -277,124 +198,68 @@ function toggleThemesPanel(){
|
|||
justifyContent:"space-between",
|
||||
alignItems:"center"
|
||||
});
|
||||
|
||||
const info=document.createElement("div");
|
||||
info.innerHTML=`
|
||||
<div style="font-weight:600">${meta.name}</div>
|
||||
<div style="font-size:11px;opacity:.7">${meta.author} • v${meta.version}</div>
|
||||
<div style="font-size:11px;opacity:.6">${meta.description}</div>
|
||||
`;
|
||||
|
||||
info.innerHTML=`<div style="font-weight:600">${meta.name}</div><div style="font-size:11px;opacity:.7">${meta.author} • v${meta.version}</div><div style="font-size:11px;opacity:.6">${meta.description}</div>`;
|
||||
const controls=document.createElement("div");
|
||||
|
||||
const toggle=document.createElement("button");
|
||||
toggle.textContent=theme.enabled?"Disable":"Enable";
|
||||
|
||||
toggle.onclick=()=>{
|
||||
theme.enabled=!theme.enabled;
|
||||
setThemes(themes);
|
||||
applyThemes();
|
||||
render();
|
||||
};
|
||||
|
||||
const edit=document.createElement("button");
|
||||
edit.textContent="Edit";
|
||||
edit.onclick=()=>openThemeEditor(theme);
|
||||
|
||||
const del=document.createElement("button");
|
||||
del.textContent="Delete";
|
||||
|
||||
del.onclick=()=>{
|
||||
const updated=themes.filter(t=>t.id!==theme.id);
|
||||
setThemes(updated);
|
||||
applyThemes();
|
||||
render();
|
||||
};
|
||||
|
||||
[toggle,edit,del].forEach(b=>{
|
||||
Object.assign(b.style,{
|
||||
marginLeft:"6px",
|
||||
padding:"4px 8px",
|
||||
borderRadius:"6px",
|
||||
border:"none",
|
||||
cursor:"pointer"
|
||||
});
|
||||
controls.appendChild(b);
|
||||
});
|
||||
|
||||
[toggle,edit,del].forEach(b=>{Object.assign(b.style,{marginLeft:"6px",padding:"4px 8px",borderRadius:"6px",border:"none",cursor:"pointer"});controls.appendChild(b);});
|
||||
card.appendChild(info);
|
||||
card.appendChild(controls);
|
||||
list.appendChild(card);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
window.__avia_refresh_themes_panel = render;
|
||||
|
||||
importBtn.onclick=()=>{
|
||||
|
||||
const input=document.createElement("input");
|
||||
input.type="file";
|
||||
input.accept=".css,.txt";
|
||||
|
||||
input.onchange=async()=>{
|
||||
|
||||
const file=input.files[0];
|
||||
if(!file) return;
|
||||
|
||||
const css=await file.text();
|
||||
|
||||
const themes=getThemes();
|
||||
|
||||
themes.push({
|
||||
id:crypto.randomUUID(),
|
||||
css,
|
||||
enabled:true
|
||||
});
|
||||
|
||||
themes.push({id:crypto.randomUUID(),css,enabled:true});
|
||||
setThemes(themes);
|
||||
applyThemes();
|
||||
render();
|
||||
|
||||
};
|
||||
|
||||
input.click();
|
||||
|
||||
};
|
||||
|
||||
render();
|
||||
|
||||
}
|
||||
|
||||
function injectButton(){
|
||||
|
||||
if(document.getElementById("avia-themes-btn")) return;
|
||||
|
||||
const appearanceBtn=[...document.querySelectorAll("a")]
|
||||
.find(a=>a.textContent.trim()==="Appearance");
|
||||
|
||||
const appearanceBtn=[...document.querySelectorAll("a")].find(a=>a.textContent.trim()==="Appearance");
|
||||
const quickCSS=document.getElementById("stoat-fake-quickcss");
|
||||
|
||||
if(!appearanceBtn || !quickCSS) return;
|
||||
|
||||
const clone=appearanceBtn.cloneNode(true);
|
||||
clone.id="avia-themes-btn";
|
||||
|
||||
const text=[...clone.querySelectorAll("div")]
|
||||
.find(d=>d.children.length===0);
|
||||
|
||||
const text=[...clone.querySelectorAll("div")].find(d=>d.children.length===0);
|
||||
if(text) text.textContent="(Avia) Themes";
|
||||
|
||||
clone.onclick=toggleThemesPanel;
|
||||
|
||||
quickCSS.parentElement.insertBefore(clone,quickCSS.nextSibling);
|
||||
|
||||
quickCSS.parentElement.insertBefore(clone, quickCSS.nextSibling);
|
||||
}
|
||||
|
||||
new MutationObserver(injectButton)
|
||||
.observe(document.body,{childList:true,subtree:true});
|
||||
|
||||
new MutationObserver(injectButton).observe(document.body,{childList:true,subtree:true});
|
||||
injectButton();
|
||||
applyThemes();
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue