Add missing button and mode-toggle interactions to VSF list detail page

patterns/vsf-list-detailseite.html

@@ -116,23 +116,17 @@
 
   <script src="../scripts/help-icon-overlays.js"></script>
   <script>
-    const updatePulldownSelectionState = (pulldownDemo) => {
+    document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {
-      const checkedOption = pulldownDemo.querySelector('[data-pulldown-option][aria-checked="true"] span');
+      group.querySelectorAll('.sg-tab-button').forEach((button) => {
-      const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
+        button.addEventListener('click', () => {
-      const labelBase = trigger?.dataset.labelBase || '';
+          group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
-
+            const isActive = otherButton === button;
-      if (!trigger) {
+            otherButton.setAttribute('aria-selected', String(isActive));
-        return;
+            otherButton.dataset.componentState = isActive ? 'active' : 'inactive';
-      }
+          });
-
+        });
-      if (checkedOption) {
+      });
-        trigger.textContent = `${labelBase}: ${checkedOption.textContent?.trim() || ''}`;
+    });
-        pulldownDemo.dataset.componentState = 'active';
-      } else {
-        trigger.textContent = labelBase;
-        pulldownDemo.dataset.componentState = 'inactive-selectable';
-      }
-    };
 
     document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
       const button = wrap.querySelector('.sg-sandwich-button');
@@ -142,29 +136,81 @@
 
       button.addEventListener('click', (event) => {
         event.stopPropagation();
-        const isOpen = wrap.dataset.open === 'true';
+        const nextState = wrap.dataset.open !== 'true';
-        wrap.dataset.open = String(!isOpen);
+        document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
-        button.setAttribute('aria-expanded', String(!isOpen));
+          const otherButton = otherWrap.querySelector('.sg-sandwich-button');
+          otherWrap.dataset.open = 'false';
+          if (otherButton) {
+            otherButton.setAttribute('aria-expanded', 'false');
+          }
+        });
+
+        wrap.dataset.open = String(nextState);
+        button.setAttribute('aria-expanded', String(nextState));
       });
     });
 
-    document.querySelectorAll('.sg-pulldown-demo .sg-pulldown-demo__trigger').forEach((trigger) => {
+    document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {
+      toggle.addEventListener('click', () => {
+        const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';
+        toggle.dataset.active = nextState;
+        toggle.dataset.componentState = nextState;
+        toggle.setAttribute(
+          'aria-label',
+          `Modus Schieber global: ${nextState === 'relative' ? 'relativ' : 'absolut'} aktiv`
+        );
+      });
+    });
+
+    const updatePulldownSelectionState = (demo) => {
+      const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
+      const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
+
+      if (!trigger || selectableOptions.length === 0) {
+        return;
+      }
+
+      const selectedCount = Array.from(selectableOptions).filter((option) => {
+        return option.getAttribute('aria-checked') === 'true';
+      }).length;
+
+      selectableOptions.forEach((option) => {
+        const optionRow = option.closest('.sg-pulldown-option');
+        if (!optionRow) {
+          return;
+        }
+
+        optionRow.classList.toggle(
+          'sg-pulldown-option--selected',
+          option.getAttribute('aria-checked') === 'true'
+        );
+      });
+
+      const labelBase = trigger.dataset.labelBase || 'Auswahl';
+      trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
+      trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
+      trigger.classList.toggle('sg-form-active', selectedCount > 0);
+      trigger.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
+      demo.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
+      trigger.setAttribute(
+        'aria-label',
+        selectedCount > 0 ? `Pulldown ${labelBase} mit aktiver Auswahl` : `Pulldown ${labelBase} ohne aktive Auswahl`
+      );
+    };
+
+    document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
+      const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
+      if (!trigger) {
+        return;
+      }
+
       trigger.addEventListener('click', (event) => {
         event.stopPropagation();
-        const demo = trigger.closest('.sg-pulldown-demo');
-        if (!demo) {
-          return;
-        }
-
         const nextState = demo.dataset.open !== 'true';
 
-        document.querySelectorAll('.sg-pulldown-demo').forEach((other) => {
+        document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
-          if (other === demo) {
+          const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
-            return;
+          otherDemo.dataset.open = 'false';
-          }
-
-          other.dataset.open = 'false';
-          const otherTrigger = other.querySelector('.sg-pulldown-demo__trigger');
           if (otherTrigger) {
             otherTrigger.setAttribute('aria-expanded', 'false');
           }
@@ -199,10 +245,7 @@
       option.addEventListener('click', (event) => {
         event.stopPropagation();
         const pulldownDemo = option.closest('.sg-pulldown-demo');
-        if (!pulldownDemo) {
+        if (pulldownDemo) {
-          return;
-        }
-
           pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
             otherOption.setAttribute('aria-checked', String(otherOption === option));
           });
@@ -213,6 +256,7 @@
           if (trigger) {
             trigger.setAttribute('aria-expanded', 'false');
           }
+        }
       });
     });