https://www.battlefinensemble.com/js/components/view-toggle.js

1// public/js/components/view-toggle.js
2// Component spec row: UI System §4.2 → ViewToggle
3//
4// Segmented control. One option is active at a time. Pure render apart from
5// updating its own DOM on click; persistence/routing is the caller's job.
6
7(function () {
8  window.Components = window.Components || {};
9
10  window.Components.ViewToggle = {
11    /**
12     * @param {Object} props
13     *   options: Array<{ key, label }>
14     *   value: string — currently selected key
15     *   onChange: function(key)
16     *   ariaLabel: string — describes what's being toggled
17     * @returns HTMLElement
18     */
19    create: function (props) {
20      var p = Object.assign({
21        options: [],
22        value: null,
23        onChange: null,
24        ariaLabel: 'View'
25      }, props || {});
26
27      var wrap = document.createElement('div');
28      wrap.className = 'view-toggle';
29      wrap.setAttribute('role', 'tablist');
30      wrap.setAttribute('aria-label', p.ariaLabel);
31
32      p.options.forEach(function (opt) {
33        var btn = document.createElement('button');
34        btn.type = 'button';
35        btn.dataset.key = opt.key;
36        btn.className = 'view-toggle__option' +
37          (opt.key === p.value ? ' view-toggle__option--active' : '');
38        btn.setAttribute('role', 'tab');
39        btn.setAttribute('aria-selected', opt.key === p.value ? 'true' : 'false');
40        btn.textContent = opt.label;
41
42        btn.addEventListener('click', function () {
43          if (opt.key === p.value) return;
44          p.value = opt.key;
45          // Update sibling buttons
46          var siblings = wrap.querySelectorAll('.view-toggle__option');
47          Array.prototype.forEach.call(siblings, function (b) {
48            var isActive = b.dataset.key === opt.key;
49            b.classList.toggle('view-toggle__option--active', isActive);
50            b.setAttribute('aria-selected', isActive ? 'true' : 'false');
51          });
52          if (p.onChange) p.onChange(opt.key);
53        });
54
55        wrap.appendChild(btn);
56      });
57
58      return wrap;
59    }
60  };
61})();