- Move all inline <script> blocks (layout head/theme, topbar dark toggle, foot, paste, new, history, mine, settings, admin, unlock) to external files under internal/web/static/. Page data reaches scripts via data-* attributes (data-paste-id, data-default-dark) instead of template vars. - Replace inline onclick handlers (copy, delete, stats toggle) with addEventListener wiring. - Convert inline style="" attributes to CSS utility classes; swatch colors are now set via CSSOM/DOM APIs instead of innerHTML strings. - script-src/style-src are now plain 'self'; img-src data: stays for the SVG data-URI backgrounds. Verified with headless chromium: zero CSP violations on all pages in dark and light presets, theme swatches, admin lock, tables and paste view render correctly.
This commit is contained in:
@@ -2,82 +2,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
<script>
|
||||
// preset hook (#16): ?theme= wins; else persisted choice (#100).
|
||||
// #127: theme pairs - each base theme has a light and dark variant;
|
||||
// palette-theme stores the base id, palette-dark the dark flag.
|
||||
(function () {
|
||||
var PAIRS = {
|
||||
'midnight': { light: 'midnight-light', dark: 'midnight' },
|
||||
'smooth': { light: 'smooth', dark: 'smooth-dark' },
|
||||
'pastel-lavender': { light: 'pastel-lavender', dark: 'pastel-lavender-dark' },
|
||||
'pastel-peach': { light: 'pastel-peach', dark: 'pastel-peach-dark' },
|
||||
'pastel-cloud': { light: 'pastel-cloud', dark: 'pastel-cloud-dark' }
|
||||
};
|
||||
function resolve(t, dark) {
|
||||
for (var base in PAIRS) {
|
||||
if (t === PAIRS[base].light || t === PAIRS[base].dark) return t;
|
||||
if (t === base) return dark ? PAIRS[base].dark : PAIRS[base].light;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
var t = new URLSearchParams(location.search).get('theme');
|
||||
// precedence: URL ?theme= > stored pair+dark prefs > server default dark > dark on
|
||||
var dark = {{ defaultDark }};
|
||||
try {
|
||||
var stored = localStorage.getItem('palette-dark');
|
||||
if (stored !== null) dark = stored !== 'false';
|
||||
} catch (e) {}
|
||||
if (t) {
|
||||
// URL ?theme= wins and accepts both base and variant ids; a variant id
|
||||
// also sets the dark flag and normalizes t back to its base pair id.
|
||||
var found = false;
|
||||
for (var base in PAIRS) {
|
||||
if (t === PAIRS[base].dark) { dark = true; t = base; found = true; break; }
|
||||
if (t === PAIRS[base].light) { dark = false; t = base; found = true; break; }
|
||||
if (t === base) { found = true; break; }
|
||||
}
|
||||
if (!found) t = null;
|
||||
}
|
||||
if (!t) {
|
||||
try { t = localStorage.getItem('palette-theme'); } catch (e) {}
|
||||
}
|
||||
if (!PAIRS[t]) t = 'midnight';
|
||||
// do not persist anything here: URL theme is a one-off override
|
||||
document.documentElement.dataset.preset = dark ? PAIRS[t].dark : PAIRS[t].light;
|
||||
})();
|
||||
// #130: shared line wrap preference (localStorage 'palette-wrap', default off)
|
||||
(function () {
|
||||
function wrapOn() {
|
||||
try { return localStorage.getItem('palette-wrap') === '1'; } catch (e) { return false; }
|
||||
}
|
||||
function wrapApply(on) {
|
||||
if (on) document.documentElement.setAttribute('data-wrap', '1');
|
||||
else document.documentElement.removeAttribute('data-wrap');
|
||||
document.querySelectorAll('.wrap-toggle').forEach(function (b) {
|
||||
b.setAttribute('aria-pressed', on ? 'true' : 'false');
|
||||
});
|
||||
var s = document.getElementById('wrap-setting');
|
||||
if (s) s.checked = on;
|
||||
}
|
||||
window.paletteWrapToggle = function () {
|
||||
var on = !wrapOn();
|
||||
try { localStorage.setItem('palette-wrap', on ? '1' : '0'); } catch (e) {}
|
||||
wrapApply(on);
|
||||
return on;
|
||||
};
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
wrapApply(wrapOn());
|
||||
document.querySelectorAll('.wrap-toggle').forEach(function (b) {
|
||||
b.addEventListener('click', function () { window.paletteWrapToggle(); });
|
||||
});
|
||||
var s = document.getElementById('wrap-setting');
|
||||
if (s) s.addEventListener('change', function () {
|
||||
if (s.checked !== wrapOn()) window.paletteWrapToggle();
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<script src="/static/theme.js" data-default-dark="{{ if defaultDark }}1{{ else }}0{{ end }}"></script>
|
||||
{{end}}
|
||||
|
||||
{{define "topbar"}}
|
||||
@@ -98,49 +23,5 @@
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<script>
|
||||
// #127: dark mode toggle - flips to the other variant of the active pair.
|
||||
(function () {
|
||||
var PAIRS = {
|
||||
'midnight': { light: 'midnight-light', dark: 'midnight' },
|
||||
'smooth': { light: 'smooth', dark: 'smooth-dark' },
|
||||
'pastel-lavender': { light: 'pastel-lavender', dark: 'pastel-lavender-dark' },
|
||||
'pastel-peach': { light: 'pastel-peach', dark: 'pastel-peach-dark' },
|
||||
'pastel-cloud': { light: 'pastel-cloud', dark: 'pastel-cloud-dark' }
|
||||
};
|
||||
var root = document.documentElement;
|
||||
function state() {
|
||||
var p = root.dataset.preset || 'midnight';
|
||||
for (var base in PAIRS) {
|
||||
if (p === PAIRS[base].dark) return { base: base, dark: true };
|
||||
if (p === PAIRS[base].light) return { base: base, dark: false };
|
||||
}
|
||||
return { base: 'midnight', dark: true };
|
||||
}
|
||||
function apply() {
|
||||
var s = state();
|
||||
document.body.classList.toggle('dark', s.dark);
|
||||
root.classList.toggle('dark', s.dark);
|
||||
}
|
||||
function sync(btns) {
|
||||
btns.forEach(function (b) {
|
||||
b.setAttribute('aria-pressed', state().dark ? 'true' : 'false');
|
||||
});
|
||||
}
|
||||
var btns = document.querySelectorAll('.dark-toggle');
|
||||
apply();
|
||||
sync(Array.prototype.slice.call(btns));
|
||||
btns.forEach(function (b) {
|
||||
b.addEventListener('click', function () {
|
||||
var s = state();
|
||||
var dark = !s.dark;
|
||||
root.dataset.preset = dark ? PAIRS[s.base].dark : PAIRS[s.base].light;
|
||||
try { localStorage.setItem('palette-dark', dark ? 'true' : 'false'); } catch (e) {}
|
||||
apply();
|
||||
sync(Array.prototype.slice.call(btns));
|
||||
document.dispatchEvent(new CustomEvent('palette-darkchange'));
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<script src="/static/topbar.js" defer></script>
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user