breadcrumb-the-shire/web/js/components/app-color-default-toggle.js

/**
 * 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,
});