breadcrumb-the-shire/web/js/components/app-settings-telemetry.js

/**
 * Tracks settings page interactions for telemetry.
 */
import { resolveHost } from '../core/app-dom.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: () => {} };
  }

  const syncSamplingVisibility = () => {
    const active = Boolean(toggle.checked);
    samplingFieldset.hidden = !active;
    if (samplingRow) {
      samplingRow.hidden = !active;
    }
    if (samplingSelect) {
      samplingSelect.disabled = !active || toggle.disabled;
    }
  };

  toggle.addEventListener('change', syncSamplingVisibility);
  syncSamplingVisibility();
  return {
    destroy: () => {
      toggle.removeEventListener('change', syncSamplingVisibility);
    },
  };
};