fs
d9f07dcd63
CSS: - Remove duplicate li::before block in app-search.css - Fix typo: search-reuslt → search-result in app-search.css - Remove commented-out CSS rules in app-flash.css - Add descriptive header comment to all 27 CSS component files JS: - Complete WAI-ARIA Tabs pattern: generate IDs, add aria-controls on tab buttons and aria-labelledby on tab panels (app-tabs.js) - Add JSDoc header comments to ~33 JS files (core + components) - Add explanatory block comment to app-boot.js (why classic IIFE) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
54 lines
1.6 KiB
JavaScript
54 lines
1.6 KiB
JavaScript
/**
|
|
* Toggles color input between custom value and default/inherited color.
|
|
*/
|
|
import { warnOnce } from '../core/app-dom.js';
|
|
|
|
const toggles = document.querySelectorAll('[data-color-default-toggle]');
|
|
|
|
const syncToggle = (toggle) => {
|
|
const targetSelector = toggle.dataset.colorTarget || '';
|
|
if (!targetSelector) {
|
|
warnOnce('UI_EL_MISSING', 'Missing data-color-target', { module: 'color-default-toggle' });
|
|
return;
|
|
}
|
|
const target = document.querySelector(targetSelector);
|
|
if (!target) {
|
|
warnOnce('UI_EL_MISSING', `Missing color target: ${targetSelector}`, { module: 'color-default-toggle' });
|
|
return;
|
|
}
|
|
const defaultValue = toggle.dataset.colorDefault || '#2fa4a4';
|
|
if (toggle.checked) {
|
|
if (!target.dataset.customValue) {
|
|
target.dataset.customValue = target.value;
|
|
}
|
|
target.value = defaultValue;
|
|
target.setAttribute('disabled', 'disabled');
|
|
} else {
|
|
target.removeAttribute('disabled');
|
|
if (target.dataset.customValue) {
|
|
target.value = target.dataset.customValue;
|
|
}
|
|
}
|
|
};
|
|
|
|
toggles.forEach((toggle) => {
|
|
const targetSelector = toggle.dataset.colorTarget || '';
|
|
const target = targetSelector ? document.querySelector(targetSelector) : null;
|
|
if (targetSelector && !target) {
|
|
warnOnce('UI_EL_MISSING', `Missing color target: ${targetSelector}`, { module: 'color-default-toggle' });
|
|
}
|
|
|
|
toggle.addEventListener('change', () => syncToggle(toggle));
|
|
|
|
if (target) {
|
|
target.addEventListener('input', () => {
|
|
if (toggle.checked) {
|
|
toggle.checked = false;
|
|
target.removeAttribute('disabled');
|
|
}
|
|
});
|
|
}
|
|
|
|
syncToggle(toggle);
|
|
});
|