breadcrumb-the-shire/web/js/components/app-custom-field-options-toggle.js

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);
});