97 lines
No EOL
4 KiB
JavaScript
97 lines
No EOL
4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
// all available settings
|
|
const fontInputs = document.querySelectorAll('input[name="font-setting"]');
|
|
const themeInputs = document.querySelectorAll('input[name="theme-setting"]');
|
|
const uncapitalizationCheckbox = document.getElementById('uncapitalization');
|
|
const disableBgCheckbox = document.getElementById('disable-bg');
|
|
const disableAnimationsCheckbox = document.getElementById('disable-animations');
|
|
const disableAlttextCheckbox = document.getElementById('disable-alttext');
|
|
|
|
// load saved settings
|
|
loadSettings();
|
|
applyTheme();
|
|
|
|
// event listeners on all inputs
|
|
fontInputs.forEach(input => {
|
|
input.addEventListener('change', saveSettings);
|
|
});
|
|
|
|
themeInputs.forEach(input => {
|
|
input.addEventListener('change', function() {
|
|
saveSettings();
|
|
applyTheme();
|
|
});
|
|
});
|
|
|
|
uncapitalizationCheckbox.addEventListener('change', saveSettings);
|
|
disableBgCheckbox.addEventListener('change', saveSettings);
|
|
disableAnimationsCheckbox.addEventListener('change', saveSettings);
|
|
disableAlttextCheckbox.addEventListener('change', saveSettings);
|
|
|
|
// settings saving function
|
|
function saveSettings() {
|
|
// save font setting
|
|
const selectedFont = document.querySelector('input[name="font-setting"]:checked').id;
|
|
localStorage.setItem('accessibility-font', selectedFont);
|
|
|
|
// save theme setting
|
|
const selectedTheme = document.querySelector('input[name="theme-setting"]:checked').value;
|
|
localStorage.setItem('accessibility-theme', selectedTheme);
|
|
|
|
// save toggle states
|
|
localStorage.setItem('accessibility-uncapitalization', uncapitalizationCheckbox.checked);
|
|
localStorage.setItem('accessibility-disable-bg', disableBgCheckbox.checked);
|
|
localStorage.setItem('accessibility-disable-animations', disableAnimationsCheckbox.checked);
|
|
localStorage.setItem('accessibility-disable-alttext', disableAlttextCheckbox.checked);
|
|
}
|
|
|
|
// settings loading function
|
|
function loadSettings() {
|
|
// load the font setting
|
|
const savedFont = localStorage.getItem('accessibility-font');
|
|
if (savedFont) {
|
|
const fontInput = document.getElementById(savedFont);
|
|
if (fontInput) fontInput.checked = true;
|
|
}
|
|
|
|
// load the theme setting
|
|
const savedTheme = localStorage.getItem('accessibility-theme');
|
|
if (savedTheme) {
|
|
const themeInput = document.querySelector(`input[name="theme-setting"][value="${savedTheme}"]`);
|
|
if (themeInput) themeInput.checked = true;
|
|
}
|
|
|
|
// load toggle states
|
|
if (localStorage.getItem('accessibility-uncapitalization') === 'true') {
|
|
uncapitalizationCheckbox.checked = true;
|
|
}
|
|
|
|
if (localStorage.getItem('accessibility-disable-bg') === 'true') {
|
|
disableBgCheckbox.checked = true;
|
|
}
|
|
|
|
if (localStorage.getItem('accessibility-disable-animations') === 'true') {
|
|
disableAnimationsCheckbox.checked = true;
|
|
}
|
|
|
|
if (localStorage.getItem('accessibility-disable-alttext') === 'true') {
|
|
disableAlttextCheckbox.checked = true;
|
|
}
|
|
}
|
|
|
|
// apply the theme based on user preference
|
|
function applyTheme() {
|
|
const selectedTheme = document.querySelector('input[name="theme-setting"]:checked').value;
|
|
|
|
// remove any existing theme
|
|
document.documentElement.removeAttribute('data-theme');
|
|
|
|
// apply the selected theme
|
|
if (selectedTheme === 'light') {
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
|
} else if (selectedTheme === 'dark') {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
}
|
|
// if auto, don't set a data-theme attribute, let the media query handle it
|
|
}
|
|
}); |