85 lines
3.4 KiB
JavaScript
85 lines
3.4 KiB
JavaScript
/*
|
|
* tonalmine: per-user appearance (mode + color palette).
|
|
*
|
|
* Redmine loads this file in <head>, so the saved choice is applied before the page renders
|
|
* (no flash of the default colors). The picker is added to the profile menu and the mobile
|
|
* flyout. The choice is stored per browser in localStorage.
|
|
*/
|
|
(function () {
|
|
// Ids must match PALETTES in tools/palettes/build_palettes.mjs (the build checks this).
|
|
var PALETTES = [
|
|
['purple', 'Purple', '#6750A4'],
|
|
['blue', 'Blue', '#0061A4'],
|
|
['teal', 'Teal', '#006A6A'],
|
|
['green', 'Green', '#386A20'],
|
|
['orange', 'Orange', '#8B5000']
|
|
];
|
|
var MODES = [['auto', 'Auto'], ['light', 'Light'], ['dark', 'Dark']];
|
|
var KEY = 'tonalmine';
|
|
var root = document.documentElement;
|
|
|
|
function load() {
|
|
try { return JSON.parse(localStorage.getItem(KEY)) || {}; } catch (e) { return {}; }
|
|
}
|
|
|
|
function save(prefs) {
|
|
try { localStorage.setItem(KEY, JSON.stringify(prefs)); } catch (e) { /* private mode: applies to this page only */ }
|
|
}
|
|
|
|
function apply(prefs) {
|
|
if (prefs.palette && prefs.palette !== PALETTES[0][0]) root.setAttribute('data-palette', prefs.palette);
|
|
else root.removeAttribute('data-palette');
|
|
if (prefs.mode === 'light' || prefs.mode === 'dark') root.setAttribute('data-mode', prefs.mode);
|
|
else root.removeAttribute('data-mode');
|
|
}
|
|
|
|
var prefs = load();
|
|
apply(prefs);
|
|
|
|
function button(attr, value, label, pressed, extra) {
|
|
return '<button type="button" ' + attr + '="' + value + '" aria-pressed="' + pressed + '"' + (extra || '') + '>' + label + '</button>';
|
|
}
|
|
|
|
function pickerHtml() {
|
|
var mode = prefs.mode || 'auto';
|
|
var palette = prefs.palette || PALETTES[0][0];
|
|
return '<div class="nm-appearance">' +
|
|
'<div class="nm-appearance__title">Appearance</div>' +
|
|
'<div class="nm-segmented" role="group" aria-label="Mode">' +
|
|
MODES.map(function (m) { return button('data-nm-mode', m[0], m[1], m[0] === mode); }).join('') +
|
|
'</div>' +
|
|
'<div class="nm-swatches" role="group" aria-label="Color">' +
|
|
PALETTES.map(function (p) {
|
|
return button('data-nm-palette', p[0], '', p[0] === palette,
|
|
' class="nm-swatch" title="' + p[1] + '" aria-label="' + p[1] + '" style="--nm-swatch: ' + p[2] + '"');
|
|
}).join('') +
|
|
'</div></div>';
|
|
}
|
|
|
|
function sync() {
|
|
document.querySelectorAll('[data-nm-mode]').forEach(function (b) {
|
|
b.setAttribute('aria-pressed', String(b.getAttribute('data-nm-mode') === (prefs.mode || 'auto')));
|
|
});
|
|
document.querySelectorAll('[data-nm-palette]').forEach(function (b) {
|
|
b.setAttribute('aria-pressed', String(b.getAttribute('data-nm-palette') === (prefs.palette || PALETTES[0][0])));
|
|
});
|
|
}
|
|
|
|
document.addEventListener('click', function (event) {
|
|
var target = event.target.closest('[data-nm-mode], [data-nm-palette]');
|
|
if (!target) return;
|
|
if (target.hasAttribute('data-nm-mode')) prefs.mode = target.getAttribute('data-nm-mode');
|
|
else prefs.palette = target.getAttribute('data-nm-palette');
|
|
save(prefs);
|
|
apply(prefs);
|
|
sync();
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var menu = document.querySelector('#account .dropdown-content .dropdown-divider');
|
|
if (menu) menu.insertAdjacentHTML('afterend', pickerHtml() + '<div class="dropdown-divider"></div>');
|
|
var flyout = document.querySelector('.js-flyout-menu');
|
|
if (flyout) flyout.insertAdjacentHTML('beforeend', pickerHtml());
|
|
});
|
|
})();
|