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>
102 lines
3.1 KiB
JavaScript
102 lines
3.1 KiB
JavaScript
/**
|
|
* Shows/hides custom field option list based on field type selection.
|
|
*/
|
|
import { warnOnce } from '../core/app-dom.js';
|
|
|
|
const TYPES_WITH_OPTIONS = new Set(['select', 'multiselect']);
|
|
const FILTERABLE_TYPES = new Set(['select', 'multiselect', 'boolean', 'date']);
|
|
const sources = document.querySelectorAll('[data-custom-field-type-source]');
|
|
|
|
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);
|
|
const checkbox = target.querySelector('[data-custom-field-filterable-input]');
|
|
|
|
if (!checkbox) {
|
|
warnOnce('UI_EL_MISSING', 'Missing filterable checkbox in custom field group', {
|
|
module: 'custom-field-options-toggle'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!checkbox.dataset.initialDisabled) {
|
|
checkbox.dataset.initialDisabled = checkbox.hasAttribute('disabled') ? '1' : '0';
|
|
}
|
|
|
|
if (!filterableAllowed) {
|
|
checkbox.checked = false;
|
|
checkbox.setAttribute('disabled', 'disabled');
|
|
target.setAttribute('aria-disabled', 'true');
|
|
return;
|
|
}
|
|
|
|
target.removeAttribute('aria-disabled');
|
|
if (checkbox.dataset.initialDisabled === '1') {
|
|
checkbox.setAttribute('disabled', 'disabled');
|
|
return;
|
|
}
|
|
|
|
checkbox.removeAttribute('disabled');
|
|
};
|
|
|
|
sources.forEach((source) => {
|
|
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) {
|
|
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) {
|
|
warnOnce('UI_EL_MISSING', `Missing custom field filterable target for group: ${group}`, {
|
|
module: 'custom-field-options-toggle'
|
|
});
|
|
return;
|
|
}
|
|
|
|
source.addEventListener('change', () => {
|
|
syncOptionsVisibility(source, target);
|
|
syncFilterableAvailability(source, filterableTarget);
|
|
});
|
|
|
|
syncOptionsVisibility(source, target);
|
|
syncFilterableAvailability(source, filterableTarget);
|
|
});
|