ad3laid3/sanctum
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions

Merge MonacoCSS Plugin directly into QuickCSS as the native panel

Browse source 
Signed-off-by: AvaLilac <257690424+AvaLilac@users.noreply.github.com>
This commit is contained in:
AvaLilac 2026-04-06 18:44:10 -04:00 • committed by GitHub
parent dec110d795
commit 593271c2b9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 78 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

138
avia_core/inject.js
View file

@ -6,7 +6,22 @@
const LINKTREE_URL = "https://linktr.ee/GermanAvaLilac"; const LINKTREE_URL = "https://linktr.ee/GermanAvaLilac";
const STOAT_SERVER_URL = "https://stt.gg/GvBhcejB"; const STOAT_SERVER_URL = "https://stt.gg/GvBhcejB";
function toggleQuickCSSPanel() { 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);
});
}
async function toggleQuickCSSPanel() {
await preloadMonaco();
let panel = document.getElementById('avia-quickcss-panel'); let panel = document.getElementById('avia-quickcss-panel');
if (panel) { if (panel) {
panel.style.display = panel.style.display === 'none' ? 'flex' : 'none'; panel.style.display = panel.style.display === 'none' ? 'flex' : 'none';
@ -15,80 +30,88 @@
panel = document.createElement('div'); panel = document.createElement('div');
panel.id = 'avia-quickcss-panel'; panel.id = 'avia-quickcss-panel';
panel.style.position = 'fixed'; Object.assign(panel.style, {
panel.style.bottom = '24px'; position: 'fixed',
panel.style.right = '24px'; bottom: '24px',
panel.style.width = '420px'; right: '24px',
panel.style.height = '340px'; width: '650px',
panel.style.background = 'var(--md-sys-color-surface, #1e1e1e)'; height: '420px',
panel.style.color = 'var(--md-sys-color-on-surface, #fff)'; background: 'var(--md-sys-color-surface, #1e1e1e)',
panel.style.borderRadius = '16px'; color: 'var(--md-sys-color-on-surface, #fff)',
panel.style.boxShadow = '0 8px 28px rgba(0,0,0,0.35)'; borderRadius: '16px',
panel.style.zIndex = '999999'; boxShadow: '0 8px 28px rgba(0,0,0,0.35)',
panel.style.display = 'flex'; zIndex: '999999',
panel.style.flexDirection = 'column'; display: 'flex',
panel.style.overflow = 'hidden'; flexDirection: 'column',
panel.style.border = '1px solid rgba(255,255,255,0.08)'; overflow: 'hidden',
panel.style.backdropFilter = 'blur(12px)'; border: '1px solid rgba(255,255,255,0.08)',
backdropFilter: 'blur(12px)'
});
const header = document.createElement('div'); const header = document.createElement('div');
header.textContent = 'QuickCSS'; header.textContent = 'QuickCSS';
header.style.padding = '14px 16px'; Object.assign(header.style, {
header.style.fontWeight = '600'; padding: '14px 16px',
header.style.fontSize = '14px'; fontWeight: '600',
header.style.letterSpacing = '0.3px'; fontSize: '14px',
header.style.background = 'var(--md-sys-color-surface-container, rgba(255,255,255,0.04))'; letterSpacing: '0.3px',
header.style.borderBottom = '1px solid rgba(255,255,255,0.08)'; background: 'var(--md-sys-color-surface-container, rgba(255,255,255,0.04))',
header.style.cursor = 'move'; borderBottom: '1px solid rgba(255,255,255,0.08)',
cursor: 'move',
color: '#fff'
});
const closeBtn = document.createElement('div'); const closeBtn = document.createElement('div');
closeBtn.textContent = '✕'; closeBtn.textContent = '✕';
closeBtn.style.position = 'absolute'; Object.assign(closeBtn.style, {
closeBtn.style.top = '12px'; position: 'absolute',
closeBtn.style.right = '16px'; top: '12px',
closeBtn.style.cursor = 'pointer'; right: '16px',
closeBtn.style.opacity = '0.7'; cursor: 'pointer',
opacity: '0.7',
color: '#fff'
});
closeBtn.onmouseenter = () => closeBtn.style.opacity = '1'; closeBtn.onmouseenter = () => closeBtn.style.opacity = '1';
closeBtn.onmouseleave = () => closeBtn.style.opacity = '0.7'; closeBtn.onmouseleave = () => closeBtn.style.opacity = '0.7';
closeBtn.onclick = () => panel.style.display = 'none'; closeBtn.onclick = () => panel.style.display = 'none';
const textarea = document.createElement('textarea'); const editorContainer = document.createElement('div');
textarea.style.flex = '1'; editorContainer.style.flex = '1';
textarea.style.border = 'none';
textarea.style.outline = 'none';
textarea.style.resize = 'none';
textarea.style.padding = '16px';
textarea.style.background = 'transparent';
textarea.style.color = 'inherit';
textarea.style.fontFamily = 'monospace';
textarea.style.fontSize = '13px';
textarea.style.lineHeight = '1.4';
textarea.value = localStorage.getItem('avia_quickcss') || '';
textarea.addEventListener('input', () => {
localStorage.setItem('avia_quickcss', textarea.value);
applyQuickCSS(textarea.value);
});
panel.appendChild(header); panel.appendChild(header);
panel.appendChild(closeBtn); panel.appendChild(closeBtn);
panel.appendChild(textarea); panel.appendChild(editorContainer);
document.body.appendChild(panel); document.body.appendChild(panel);
const editor = monaco.editor.create(editorContainer, {
value: localStorage.getItem('avia_quickcss') || '',
language: 'css',
theme: 'vs-dark',
automaticLayout: true,
minimap: { enabled: false },
fontSize: 13,
scrollBeyondLastLine: false,
wordWrap: 'on'
});
editor.onDidChangeModelContent(() => {
const value = editor.getValue();
localStorage.setItem('avia_quickcss', value);
applyQuickCSS(value);
});
let isDragging = false, offsetX, offsetY; let isDragging = false, offsetX, offsetY;
header.addEventListener('mousedown', (e) => { header.addEventListener('mousedown', e => {
isDragging = true; isDragging = true;
offsetX = e.clientX - panel.offsetLeft; offsetX = e.clientX - panel.offsetLeft;
offsetY = e.clientY - panel.offsetTop; offsetY = e.clientY - panel.offsetTop;
document.body.style.userSelect = 'none'; document.body.style.userSelect = 'none';
}); });
document.addEventListener('mouseup', () => { document.addEventListener('mouseup', () => {
isDragging = false; isDragging = false;
document.body.style.userSelect = ''; document.body.style.userSelect = '';
}); });
document.addEventListener('mousemove', e => {
document.addEventListener('mousemove', (e) => {
if (!isDragging) return; if (!isDragging) return;
panel.style.left = (e.clientX - offsetX) + 'px'; panel.style.left = (e.clientX - offsetX) + 'px';
panel.style.top = (e.clientY - offsetY) + 'px'; panel.style.top = (e.clientY - offsetY) + 'px';
@ -204,8 +227,8 @@
styleTag.id = 'custom-font-style'; styleTag.id = 'custom-font-style';
document.head.appendChild(styleTag); document.head.appendChild(styleTag);
} }
let ext = url.split('.').pop().toLowerCase(); const ext = url.split('.').pop().toLowerCase();
let formatMap = { const formatMap = {
ttf: 'truetype', ttf: 'truetype',
otf: 'opentype', otf: 'opentype',
woff: 'woff', woff: 'woff',
@ -213,7 +236,7 @@
eot: 'embedded-opentype', eot: 'embedded-opentype',
css: 'truetype' css: 'truetype'
}; };
let format = formatMap[ext] || ''; const format = formatMap[ext] || '';
styleTag.textContent = ` styleTag.textContent = `
@font-face { @font-face {
font-family: '${fontName}'; font-family: '${fontName}';
@ -278,8 +301,6 @@
if (textNode) textNode.textContent = "(Avia) Font Loader"; if (textNode) textNode.textContent = "(Avia) Font Loader";
setIcon(newBtn, "upload"); setIcon(newBtn, "upload");
newBtn.addEventListener('click', showFontLoaderPopup); newBtn.addEventListener('click', showFontLoaderPopup);
const stoatBtn = document.getElementById('stoat-fake-stoatserver');
targetParent.appendChild(newBtn); targetParent.appendChild(newBtn);
if (!document.getElementById('stoat-fake-removefont')) { if (!document.getElementById('stoat-fake-removefont')) {
@ -300,11 +321,6 @@
if (quickCssTextNode) quickCssTextNode.textContent = "(Avia) QuickCSS"; if (quickCssTextNode) quickCssTextNode.textContent = "(Avia) QuickCSS";
setIcon(quickCssBtn, "code"); setIcon(quickCssBtn, "code");
quickCssBtn.addEventListener('click', toggleQuickCSSPanel); quickCssBtn.addEventListener('click', toggleQuickCSSPanel);
const lastBtn = document.getElementById('stoat-fake-removefont') ||
document.getElementById('stoat-fake-loadfont') ||
document.getElementById('stoat-fake-stoatserver') ||
document.getElementById('stoat-fake-linktree');
targetParent.appendChild(quickCssBtn); targetParent.appendChild(quickCssBtn);
} }
} }
@ -340,4 +356,6 @@
injectButtons(); injectButtons();
}); });
preloadMonaco();
})(); })();