add group attribute to panel-tabset for syncing selected tab across many tabsets

Author: jjallaire

news/changelog-1.1.md

@@ -50,6 +50,7 @@
 ## HTML Format
 
 - Respect toc-depth in the HTML format (bootstrap) rather than always acting as if depth is 3.
+- Add `group` attribute to `panel-tabset` for syncing selected tab across many tabsets
 
 ## RevealJS Format
 

src/command/render/filters.ts

@@ -611,7 +611,7 @@ function pdfEngine(options: PandocOptions): string {
 }
 
 const kQuartoExtOrganization = "quarto-ext";
-const kQuartoExtBuiltIn = ["code-filename"];
+const kQuartoExtBuiltIn = ["code-filename", "grouped-tabsets"];
 
 function resolveFilterExtension(
   options: PandocOptions,

src/resources/formats/html/quarto.js

@@ -653,6 +653,99 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
   highlightReaderToggle(isReaderMode());
 });
 
+// grouped tabsets
+window.addEventListener("pageshow", (_event) => {
+  function getTabSettings() {
+    const data = localStorage.getItem("quarto-persistent-tabsets-data");
+    if (!data) {
+      localStorage.setItem("quarto-persistent-tabsets-data", "{}");
+      return {};
+    }
+    if (data) {
+      return JSON.parse(data);
+    }
+  }
+
+  function setTabSettings(data) {
+    localStorage.setItem(
+      "quarto-persistent-tabsets-data",
+      JSON.stringify(data)
+    );
+  }
+
+  function setTabState(groupName, groupValue) {
+    const data = getTabSettings();
+    data[groupName] = groupValue;
+    setTabSettings(data);
+  }
+
+  function toggleTab(tab, active) {
+    const tabPanelId = tab.getAttribute("aria-controls");
+    const tabPanel = document.getElementById(tabPanelId);
+    if (active) {
+      tab.classList.add("active");
+      tabPanel.classList.add("active");
+    } else {
+      tab.classList.remove("active");
+      tabPanel.classList.remove("active");
+    }
+  }
+
+  function toggleAll(selectedGroup, selectorsToSync) {
+    for (const [thisGroup, tabs] of Object.entries(selectorsToSync)) {
+      const active = selectedGroup === thisGroup;
+      for (const tab of tabs) {
+        toggleTab(tab, active);
+      }
+    }
+  }
+
+  function findSelectorsToSyncByLanguage() {
+    const result = {};
+    const tabs = Array.from(
+      document.querySelectorAll(`div[data-group] a[id^='tabset-']`)
+    );
+    for (const item of tabs) {
+      const div = item.parentElement.parentElement.parentElement;
+      const group = div.getAttribute("data-group");
+      if (!result[group]) {
+        result[group] = {};
+      }
+      const selectorsToSync = result[group];
+      const value = item.innerHTML;
+      if (!selectorsToSync[value]) {
+        selectorsToSync[value] = [];
+      }
+      selectorsToSync[value].push(item);
+    }
+    return result;
+  }
+
+  function setupSelectorSync() {
+    const selectorsToSync = findSelectorsToSyncByLanguage();
+    Object.entries(selectorsToSync).forEach(([group, tabSetsByValue]) => {
+      Object.entries(tabSetsByValue).forEach(([value, items]) => {
+        items.forEach((item) => {
+          item.addEventListener("click", (_event) => {
+            setTabState(group, value);
+            toggleAll(value, selectorsToSync[group]);
+          });
+        });
+      });
+    });
+    return selectorsToSync;
+  }
+
+  const selectorsToSync = setupSelectorSync();
+  for (const [group, selectedName] of Object.entries(getTabSettings())) {
+    const selectors = selectorsToSync[group];
+    // it's possible that stale state gives us empty selections, so we explicitly check here.
+    if (selectors) {
+      toggleAll(selectedName, selectors);
+    }
+  }
+});
+
 function throttle(func, wait) {
   let waiting = false;
   return function () {