engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

Fix theme radio button localStorage synchronization

Browse source 
Fix radio buttons to properly reflect localStorage theme preference on page load.
Replaced unsupported :has() selector with closest() for better browser compatibility.
Added missing logic to sync radio button selection with stored theme preference.
This commit is contained in:
Russell Ballestrini 2025-10-04 17:23:57 -04:00
parent 8faec3256c
commit fa1e3d56d5
1 changed files with 26 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

35
make_post_sell/templates/user_settings.j2
View file

@ -64,18 +64,35 @@
<script>
// Handle theme preference form specifically
document.addEventListener('DOMContentLoaded', function() {
const themeForm = document.querySelector('form:has(input[name="theme_id"])');
const themeRadios = document.querySelectorAll('input[name="theme_id"]');
if (themeForm && themeRadios.length > 0) {
themeForm.addEventListener('submit', function() {
// Set localStorage to match the selected theme preference
const selectedRadio = document.querySelector('input[name="theme_id"]:checked');
if (selectedRadio) {
const newTheme = selectedRadio.value === '0' ? 'dark' : 'light';
localStorage.setItem('theme-preference', newTheme);
if (themeRadios.length > 0) {
// Set radio button based on localStorage on page load
const storedTheme = localStorage.getItem('theme-preference');
if (storedTheme) {
const targetValue = storedTheme === 'dark' ? '0' : '1';
const targetRadio = document.querySelector(`input[name="theme_id"][value="${targetValue}"]`);
if (targetRadio) {
// Uncheck all first
themeRadios.forEach(radio => radio.checked = false);
// Check the one that matches localStorage
targetRadio.checked = true;
}
});
}
// Find the form containing theme radios (more compatible than :has())
const themeForm = themeRadios[0].closest('form');
if (themeForm) {
themeForm.addEventListener('submit', function() {
// Set localStorage to match the selected theme preference
const selectedRadio = document.querySelector('input[name="theme_id"]:checked');
if (selectedRadio) {
const newTheme = selectedRadio.value === '0' ? 'dark' : 'light';
localStorage.setItem('theme-preference', newTheme);
}
});
}
// Also update localStorage immediately when radio button changes
themeRadios.forEach(function(radio) {