baseline

web/js/components/app-toggle-toolbar.js

@@ -0,0 +1,86 @@
+export function initToolbarToggles(root = document) {
+  const toggles = root.querySelectorAll('[data-toolbar-toggle]');
+  toggles.forEach((toggle) => {
+    if (toggle.dataset.toolbarBound === '1') {
+      return;
+    }
+    toggle.dataset.toolbarBound = '1';
+    if (!toggle.hasAttribute('type')) {
+      toggle.setAttribute('type', 'button');
+    }
+
+    const targetSelector = toggle.dataset.toolbarTarget || toggle.getAttribute('aria-controls');
+    if (!targetSelector) {
+      return;
+    }
+
+    const targets = Array.from(root.querySelectorAll(targetSelector)).filter(Boolean);
+    if (!targets.length) {
+      return;
+    }
+
+    const labelTarget = toggle.querySelector('[data-toolbar-label]');
+    const showLabel = toggle.dataset.toolbarTextShow;
+    const hideLabel = toggle.dataset.toolbarTextHide;
+    const storageKey =
+      toggle.dataset.toolbarStorageKey ||
+      (targets.length === 1 && targets[0].id
+        ? `toolbar:${targets[0].id}`
+        : `toolbar:${targetSelector}`);
+
+    if (!toggle.getAttribute('aria-controls') && targets.length === 1 && targets[0].id) {
+      toggle.setAttribute('aria-controls', targets[0].id);
+    }
+
+    targets.forEach((target) => {
+      if (target.dataset.toolbarInitialized === '1') {
+        return;
+      }
+      const initial = target.dataset.toolbarInitial;
+      if (initial === 'hidden') {
+        target.hidden = true;
+      } else if (initial === 'shown') {
+        target.hidden = false;
+      }
+      target.dataset.toolbarInitialized = '1';
+    });
+
+    if (storageKey) {
+      try {
+        const stored = localStorage.getItem(storageKey);
+        if (stored === 'hidden' || stored === 'shown') {
+          const shouldShow = stored === 'shown';
+          targets.forEach((target) => {
+            target.hidden = !shouldShow;
+          });
+        }
+      } catch (error) {
+        // localStorage not available
+      }
+    }
+
+    const getExpanded = () => targets.every((target) => !target.hidden);
+    const setExpanded = (expanded) => {
+      targets.forEach((target) => {
+        target.hidden = !expanded;
+      });
+      toggle.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+      if (labelTarget && (showLabel || hideLabel)) {
+        labelTarget.textContent = expanded ? (hideLabel || labelTarget.textContent) : (showLabel || labelTarget.textContent);
+      }
+      if (storageKey) {
+        try {
+          localStorage.setItem(storageKey, expanded ? 'shown' : 'hidden');
+        } catch (error) {
+          // localStorage not available
+        }
+      }
+    };
+
+    setExpanded(getExpanded());
+
+    toggle.addEventListener('click', () => {
+      setExpanded(!getExpanded());
+    });
+  });
+}