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

/**
 * Shows/hides custom field option list based on field type selection.
 */
import { warnOnce, resolveHost } from '../core/app-dom.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);
  const checkbox = target.querySelector('[data-custom-field-filterable-input]');

  if (!(checkbox instanceof HTMLInputElement)) {
    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');
};

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

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

    onChange();
  });

  const destroy = () => {
    cleanupFns.forEach((cleanup) => cleanup());
  };

  return { destroy };
}