Update to latest

_site/site_libs/quarto-html/quarto.js

@@ -1,3 +1,5 @@
+import * as tabsets from "./tabsets/tabsets.js";
+
 const sectionChanged = new CustomEvent("quarto-sectionChanged", {
   detail: {},
   bubbles: true,
@@ -64,19 +66,41 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
     }
   };
 
-  // fire slideEnter for bootstrap tab activations (for htmlwidget resize behavior)
-  function fireSlideEnter(e) {
+  // dispatch for htmlwidgets
+  // they use slideenter event to trigger resize
+  function fireSlideEnter() {
     const event = window.document.createEvent("Event");
     event.initEvent("slideenter", true, true);
     window.document.dispatchEvent(event);
   }
+
   const tabs = window.document.querySelectorAll('a[data-bs-toggle="tab"]');
   tabs.forEach((tab) => {
     tab.addEventListener("shown.bs.tab", fireSlideEnter);
   });
 
-  // fire slideEnter for tabby tab activations (for htmlwidget resize behavior)
-  document.addEventListener("tabby", fireSlideEnter, false);
+  // dispatch for shiny
+  // they use BS shown and hidden events to trigger rendering
+  function distpatchShinyEvents(previous, current) {
+    if (window.jQuery) {
+      if (previous) {
+        window.jQuery(previous).trigger("hidden");
+      }
+      if (current) {
+        window.jQuery(current).trigger("shown");
+      }
+    }
+  }
+
+  // tabby.js listener: Trigger event for htmlwidget and shiny
+  document.addEventListener(
+    "tabby",
+    function (event) {
+      fireSlideEnter();
+      distpatchShinyEvents(event.detail.previousTab, event.detail.tab);
+    },
+    false
+  );
 
   // Track scrolling and mark TOC links as active
   // get table of contents and sidebar (bail if we don't have at least one)
@@ -236,9 +260,10 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
         for (const listingPath of listingPaths) {
           const pathWithoutLeadingSlash = listingPath.listing.substring(1);
           for (const item of listingPath.items) {
+            const encodedItem = encodeURI(item);
             if (
-              item === currentPagePath ||
-              item === currentPagePath + "index.html"
+              encodedItem === currentPagePath ||
+              encodedItem === currentPagePath + "index.html"
             ) {
               // Resolve this path against the offset to be sure
               // we already are using the correct path to the listing
@@ -740,7 +765,7 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
 
     // See if there is an active child to this element
     let hasActiveChild = false;
-    for (child of el.children) {
+    for (const child of el.children) {
       hasActiveChild = walk(child, depth) || hasActiveChild;
     }
 
@@ -800,98 +825,7 @@ 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);
-    }
-  }
-});
+tabsets.init();
 
 function throttle(func, wait) {
   let waiting = false;