48 lines
1.4 KiB
JavaScript
48 lines
1.4 KiB
JavaScript
import { requireEl } from '../core/app-dom.js';
|
|
|
|
const STORAGE_KEY = 'app-contrast';
|
|
|
|
const setContrast = (contrast) => {
|
|
const root = document.documentElement;
|
|
root.dataset.contrast = contrast === 'high' ? 'high' : 'normal';
|
|
};
|
|
|
|
const setIcon = (button, contrast) => {
|
|
const icon = button.querySelector('i');
|
|
if (!icon) {return;}
|
|
icon.classList.remove('bi-circle-half', 'bi-highlights');
|
|
icon.classList.add(contrast === 'high' ? 'bi-highlights' : 'bi-circle-half');
|
|
};
|
|
|
|
const setPressedState = (button, contrast) => {
|
|
button.setAttribute('aria-pressed', contrast === 'high' ? 'true' : 'false');
|
|
};
|
|
|
|
const initContrastToggle = () => {
|
|
const button = requireEl('[data-contrast-toggle]', { module: 'contrast-toggle' });
|
|
if (!button) {return;}
|
|
const root = document.documentElement;
|
|
const getCurrent = () => (root.dataset.contrast === 'high' ? 'high' : 'normal');
|
|
const current = getCurrent();
|
|
setIcon(button, current);
|
|
setPressedState(button, current);
|
|
|
|
button.addEventListener('click', () => {
|
|
const next = getCurrent() === 'high' ? 'normal' : 'high';
|
|
setContrast(next);
|
|
setIcon(button, next);
|
|
setPressedState(button, next);
|
|
try {
|
|
window.localStorage.setItem(STORAGE_KEY, next);
|
|
} catch (e) {
|
|
// ignore storage errors
|
|
}
|
|
});
|
|
};
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initContrastToggle);
|
|
} else {
|
|
initContrastToggle();
|
|
}
|