forked from fa/breadcrumb-the-shire
refactor: consolidate JS toggle components, grid query parsers, and add tests
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>
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
/**
|
||||
* Toggles color input between custom value and default/inherited color.
|
||||
*/
|
||||
import { warnOnce, resolveHost } from '../core/app-dom.js';
|
||||
import { warnOnce } from '../core/app-dom.js';
|
||||
import { createConditionalToggleInit } from '../core/app-conditional-controls.js';
|
||||
|
||||
const syncToggle = (toggle, scope) => {
|
||||
const targetSelector = toggle.dataset.colorTarget || '';
|
||||
@@ -29,54 +30,39 @@ const syncToggle = (toggle, scope) => {
|
||||
}
|
||||
};
|
||||
|
||||
export function initColorDefaultToggle(root = document, options = {}) {
|
||||
const host = resolveHost(root);
|
||||
const selector = String(options.selector || '[data-color-default-toggle]').trim() || '[data-color-default-toggle]';
|
||||
const toggles = Array.from(host.querySelectorAll(selector)).filter(
|
||||
(toggle) => toggle instanceof HTMLInputElement
|
||||
);
|
||||
if (!toggles.length) {
|
||||
return { destroy: () => {} };
|
||||
const initRoot = (toggle) => {
|
||||
if (!(toggle instanceof HTMLInputElement)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const cleanupFns = [];
|
||||
toggles.forEach((toggle) => {
|
||||
if (toggle.dataset.colorDefaultToggleBound === '1') {
|
||||
return;
|
||||
}
|
||||
toggle.dataset.colorDefaultToggleBound = '1';
|
||||
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 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)];
|
||||
|
||||
const onToggleChange = () => syncToggle(toggle, scope);
|
||||
toggle.addEventListener('change', onToggleChange);
|
||||
cleanupFns.push(() => 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));
|
||||
}
|
||||
|
||||
if (target instanceof HTMLInputElement) {
|
||||
const onTargetInput = () => {
|
||||
if (toggle.checked) {
|
||||
toggle.checked = false;
|
||||
target.removeAttribute('disabled');
|
||||
}
|
||||
};
|
||||
target.addEventListener('input', onTargetInput);
|
||||
cleanupFns.push(() => target.removeEventListener('input', onTargetInput));
|
||||
}
|
||||
syncToggle(toggle, scope);
|
||||
return () => cleanups.forEach((fn) => fn());
|
||||
};
|
||||
|
||||
syncToggle(toggle, scope);
|
||||
cleanupFns.push(() => {
|
||||
delete toggle.dataset.colorDefaultToggleBound;
|
||||
});
|
||||
});
|
||||
|
||||
const destroy = () => {
|
||||
cleanupFns.forEach((cleanup) => cleanup());
|
||||
};
|
||||
|
||||
return { destroy };
|
||||
}
|
||||
export const initColorDefaultToggle = createConditionalToggleInit({
|
||||
rootSelector: '[data-color-default-toggle]',
|
||||
boundKey: 'colorDefaultToggleBound',
|
||||
initRoot,
|
||||
});
|
||||
|
||||
@@ -1,35 +1,12 @@
|
||||
/**
|
||||
* Shows/hides custom field option list based on field type selection.
|
||||
*/
|
||||
import { warnOnce, resolveHost } from '../core/app-dom.js';
|
||||
import { warnOnce } from '../core/app-dom.js';
|
||||
import { syncControlState, createConditionalToggleInit } from '../core/app-conditional-controls.js';
|
||||
|
||||
const TYPES_WITH_OPTIONS = new Set(['select', 'multiselect']);
|
||||
const FILTERABLE_TYPES = new Set(['select', 'multiselect', 'boolean', 'date']);
|
||||
|
||||
const syncOptionsVisibility = (source, target) => {
|
||||
const selectedType = String(source.value || '').trim().toLowerCase();
|
||||
const showOptions = TYPES_WITH_OPTIONS.has(selectedType);
|
||||
|
||||
target.hidden = !showOptions;
|
||||
target.querySelectorAll('textarea, input, select').forEach((control) => {
|
||||
if (!control.dataset.initialDisabled) {
|
||||
control.dataset.initialDisabled = control.hasAttribute('disabled') ? '1' : '0';
|
||||
}
|
||||
|
||||
if (!showOptions) {
|
||||
control.setAttribute('disabled', 'disabled');
|
||||
return;
|
||||
}
|
||||
|
||||
if (control.dataset.initialDisabled === '1') {
|
||||
control.setAttribute('disabled', 'disabled');
|
||||
return;
|
||||
}
|
||||
|
||||
control.removeAttribute('disabled');
|
||||
});
|
||||
};
|
||||
|
||||
const syncFilterableAvailability = (source, target) => {
|
||||
const selectedType = String(source.value || '').trim().toLowerCase();
|
||||
const filterableAllowed = FILTERABLE_TYPES.has(selectedType);
|
||||
@@ -62,63 +39,52 @@ const syncFilterableAvailability = (source, target) => {
|
||||
checkbox.removeAttribute('disabled');
|
||||
};
|
||||
|
||||
export function initCustomFieldOptionsToggle(root = document, options = {}) {
|
||||
const host = resolveHost(root);
|
||||
const sourceSelector = String(options.sourceSelector || '[data-custom-field-type-source]').trim() || '[data-custom-field-type-source]';
|
||||
const sources = Array.from(host.querySelectorAll(sourceSelector));
|
||||
if (!sources.length) {
|
||||
return { destroy: () => {} };
|
||||
const initRoot = (source) => {
|
||||
if (!(source instanceof HTMLSelectElement)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const cleanupFns = [];
|
||||
sources.forEach((source) => {
|
||||
if (!(source instanceof HTMLSelectElement) || source.dataset.customFieldOptionsBound === '1') {
|
||||
return;
|
||||
}
|
||||
source.dataset.customFieldOptionsBound = '1';
|
||||
const group = String(source.dataset.customFieldGroup || '').trim();
|
||||
if (!group) {
|
||||
warnOnce('UI_EL_MISSING', 'Missing data-custom-field-group', { module: 'custom-field-options-toggle' });
|
||||
return null;
|
||||
}
|
||||
|
||||
const group = String(source.dataset.customFieldGroup || '').trim();
|
||||
if (!group) {
|
||||
warnOnce('UI_EL_MISSING', 'Missing data-custom-field-group', { module: 'custom-field-options-toggle' });
|
||||
return;
|
||||
}
|
||||
|
||||
const target = document.querySelector(
|
||||
`[data-custom-field-options-target][data-custom-field-group="${group}"]`
|
||||
);
|
||||
if (!(target instanceof HTMLElement)) {
|
||||
warnOnce('UI_EL_MISSING', `Missing custom field options target for group: ${group}`, {
|
||||
module: 'custom-field-options-toggle',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const filterableTarget = document.querySelector(
|
||||
`[data-custom-field-filterable-target][data-custom-field-group="${group}"]`
|
||||
);
|
||||
if (!(filterableTarget instanceof HTMLElement)) {
|
||||
warnOnce('UI_EL_MISSING', `Missing custom field filterable target for group: ${group}`, {
|
||||
module: 'custom-field-options-toggle',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const onChange = () => {
|
||||
syncOptionsVisibility(source, target);
|
||||
syncFilterableAvailability(source, filterableTarget);
|
||||
};
|
||||
source.addEventListener('change', onChange);
|
||||
cleanupFns.push(() => {
|
||||
source.removeEventListener('change', onChange);
|
||||
delete source.dataset.customFieldOptionsBound;
|
||||
const target = document.querySelector(
|
||||
`[data-custom-field-options-target][data-custom-field-group="${group}"]`
|
||||
);
|
||||
if (!(target instanceof HTMLElement)) {
|
||||
warnOnce('UI_EL_MISSING', `Missing custom field options target for group: ${group}`, {
|
||||
module: 'custom-field-options-toggle',
|
||||
});
|
||||
return null;
|
||||
}
|
||||
|
||||
onChange();
|
||||
});
|
||||
const filterableTarget = document.querySelector(
|
||||
`[data-custom-field-filterable-target][data-custom-field-group="${group}"]`
|
||||
);
|
||||
if (!(filterableTarget instanceof HTMLElement)) {
|
||||
warnOnce('UI_EL_MISSING', `Missing custom field filterable target for group: ${group}`, {
|
||||
module: 'custom-field-options-toggle',
|
||||
});
|
||||
return null;
|
||||
}
|
||||
|
||||
const destroy = () => {
|
||||
cleanupFns.forEach((cleanup) => cleanup());
|
||||
const onChange = () => {
|
||||
const selectedType = String(source.value || '').trim().toLowerCase();
|
||||
syncControlState(target, TYPES_WITH_OPTIONS.has(selectedType));
|
||||
syncFilterableAvailability(source, filterableTarget);
|
||||
};
|
||||
source.addEventListener('change', onChange);
|
||||
onChange();
|
||||
|
||||
return { destroy };
|
||||
}
|
||||
return () => {
|
||||
source.removeEventListener('change', onChange);
|
||||
};
|
||||
};
|
||||
|
||||
export const initCustomFieldOptionsToggle = createConditionalToggleInit({
|
||||
rootSelector: '[data-custom-field-type-source]',
|
||||
boundKey: 'customFieldOptionsBound',
|
||||
initRoot,
|
||||
});
|
||||
|
||||
@@ -2,17 +2,17 @@
|
||||
* Tracks settings page interactions for telemetry.
|
||||
*/
|
||||
import { resolveHost } from '../core/app-dom.js';
|
||||
import { syncControlState } from '../core/app-conditional-controls.js';
|
||||
|
||||
export const initTelemetrySettings = (root = document, options = {}) => {
|
||||
const host = resolveHost(root);
|
||||
const toggleSelector = String(options.toggleSelector || '[data-telemetry-enabled-toggle]').trim() || '[data-telemetry-enabled-toggle]';
|
||||
const samplingFieldsetSelector = String(options.samplingFieldsetSelector || '[data-telemetry-sampling-fieldset]').trim() || '[data-telemetry-sampling-fieldset]';
|
||||
const samplingRowSelector = String(options.samplingRowSelector || '[data-telemetry-sampling-row]').trim() || '[data-telemetry-sampling-row]';
|
||||
const samplingSelectSelector = String(options.samplingSelectSelector || '[data-telemetry-sampling-select]').trim() || '[data-telemetry-sampling-select]';
|
||||
|
||||
const toggle = host.querySelector(toggleSelector);
|
||||
const samplingFieldset = host.querySelector(samplingFieldsetSelector);
|
||||
const samplingRow = host.querySelector(samplingRowSelector);
|
||||
const samplingSelect = host.querySelector(samplingSelectSelector);
|
||||
|
||||
if (!toggle || !samplingFieldset) {
|
||||
return { destroy: () => {} };
|
||||
@@ -20,13 +20,10 @@ export const initTelemetrySettings = (root = document, options = {}) => {
|
||||
|
||||
const syncSamplingVisibility = () => {
|
||||
const active = Boolean(toggle.checked);
|
||||
samplingFieldset.hidden = !active;
|
||||
if (samplingRow) {
|
||||
syncControlState(samplingFieldset, active);
|
||||
if (samplingRow instanceof HTMLElement) {
|
||||
samplingRow.hidden = !active;
|
||||
}
|
||||
if (samplingSelect) {
|
||||
samplingSelect.disabled = !active || toggle.disabled;
|
||||
}
|
||||
};
|
||||
|
||||
toggle.addEventListener('change', syncSamplingVisibility);
|
||||
|
||||
Reference in New Issue
Block a user