fs
99f8b55d49
JS components: migrate app-custom-field-options-toggle, app-color-default-toggle, and app-settings-telemetry to shared conditional-controls factory/utility, removing duplicated syncControlState logic and init boilerplate. grid.php: extract gridQueryCsvInput() to DRY up 3 CSV parsers, simplify multi_csv handler via gridNormalizeLabelList, delegate order type to gridQueryEnum. Tests: add 23 SearchQueryNormalizer tests (LIKE escaping, wildcards, Unicode) and 7 additional Crypto edge-case tests (empty input, missing fields, special chars, binary content, truncation). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
69 lines
2.2 KiB
JavaScript
69 lines
2.2 KiB
JavaScript
/**
|
|
* Toggles color input between custom value and default/inherited color.
|
|
*/
|
|
import { warnOnce } from '../core/app-dom.js';
|
|
import { createConditionalToggleInit } from '../core/app-conditional-controls.js';
|
|
|
|
const syncToggle = (toggle, scope) => {
|
|
const targetSelector = toggle.dataset.colorTarget || '';
|
|
if (!targetSelector) {
|
|
warnOnce('UI_EL_MISSING', 'Missing data-color-target', { module: 'color-default-toggle' });
|
|
return;
|
|
}
|
|
const target = scope.querySelector(targetSelector);
|
|
if (!(target instanceof HTMLInputElement)) {
|
|
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;
|
|
}
|
|
}
|
|
};
|
|
|
|
const initRoot = (toggle) => {
|
|
if (!(toggle instanceof HTMLInputElement)) {
|
|
return null;
|
|
}
|
|
|
|
const scope = document;
|
|
const targetSelector = toggle.dataset.colorTarget || '';
|
|
const target = targetSelector ? scope.querySelector(targetSelector) : null;
|
|
if (targetSelector && !target) {
|
|
warnOnce('UI_EL_MISSING', `Missing color target: ${targetSelector}`, { module: 'color-default-toggle' });
|
|
}
|
|
|
|
const onToggleChange = () => syncToggle(toggle, scope);
|
|
toggle.addEventListener('change', onToggleChange);
|
|
const cleanups = [() => toggle.removeEventListener('change', onToggleChange)];
|
|
|
|
if (target instanceof HTMLInputElement) {
|
|
const onTargetInput = () => {
|
|
if (toggle.checked) {
|
|
toggle.checked = false;
|
|
target.removeAttribute('disabled');
|
|
}
|
|
};
|
|
target.addEventListener('input', onTargetInput);
|
|
cleanups.push(() => target.removeEventListener('input', onTargetInput));
|
|
}
|
|
|
|
syncToggle(toggle, scope);
|
|
return () => cleanups.forEach((fn) => fn());
|
|
};
|
|
|
|
export const initColorDefaultToggle = createConditionalToggleInit({
|
|
rootSelector: '[data-color-default-toggle]',
|
|
boundKey: 'colorDefaultToggleBound',
|
|
initRoot,
|
|
});
|