revealjs, tabby - Trigger event for shiny rendering when tab change

Author: cderv

news/changelog-1.7.md

@@ -53,6 +53,10 @@ All changes included in 1.7:
 - ([#11903](https://github.com/quarto-dev/quarto-cli/issues/11903)): `crossref` configuration like `fig-title` or `tbl-title` now correctly supports multi word values, e.g. `fig-title: 'Supplementary Figure'`.
 - ([#11878](https://github.com/quarto-dev/quarto-cli/issues/11878), [#12085](https://github.com/quarto-dev/quarto-cli/issues/12085)): Correctly fixup raw LaTeX table having an unexpected table env with options (e.g `\begin{table}[!ht]`) to be handled as crossref table.
 
+## `revealjs` format
+
+- ([#12307](https://github.com/quarto-dev/quarto-cli/issues/12307)): Tabset in Revealjs now correctly render reactive content when `server: shiny` is used.
+
 ### Quarto PDF engine
 
 - ([#12194](https://github.com/quarto-dev/quarto-cli/issues/12194)): More specific checks added in log parsing to automatically find missing fonts.

src/resources/formats/revealjs/plugins/support/support.js

@@ -281,36 +281,49 @@ window.QuartoSupport = function () {
     }
   }
 
+  // dispatch for htmlwidgets
+  // they use slideenter event to trigger resize
+  const fireSlideEnter = () => {
+    const event = window.document.createEvent("Event");
+    event.initEvent("slideenter", true, true);
+    window.document.dispatchEvent(event);
+  };
+
+  // dispatch for shiny
+  // they use BS shown and hidden events to trigger rendering
+  const distpatchShinyEvents = (previous, current) => {
+    if (window.jQuery) {
+      if (previous) {
+        window.jQuery(previous).trigger("hidden");
+      }
+      if (current) {
+        window.jQuery(current).trigger("shown");
+      }
+    }
+  };
+
   function handleSlideChanges(deck) {
-    // dispatch for htmlwidgets
-    const fireSlideEnter = () => {
-      const event = window.document.createEvent("Event");
-      event.initEvent("slideenter", true, true);
-      window.document.dispatchEvent(event);
-    };
 
     const fireSlideChanged = (previousSlide, currentSlide) => {
       fireSlideEnter();
-
-      // dispatch for shiny
-      if (window.jQuery) {
-        if (previousSlide) {
-          window.jQuery(previousSlide).trigger("hidden");
-        }
-        if (currentSlide) {
-          window.jQuery(currentSlide).trigger("shown");
-        }
-      }
+      distpatchShinyEvents(previousSlide, currentSlide);
     };
 
-    // fire slideEnter for tabby tab activations (for htmlwidget resize behavior)
-    document.addEventListener("tabby", fireSlideEnter, false);
-
     deck.on("slidechanged", function (event) {
       fireSlideChanged(event.previousSlide, event.currentSlide);
     });
   }
 
+  function handleTabbyChanges() {
+    const fireTabChanged = (previousTab, currentTab) => {
+      fireSlideEnter()
+      distpatchShinyEvents(previousTab, currentTab);
+    };
+    document.addEventListener("tabby", function(event) {
+      fireTabChanged(event.detail.previousTab, event.detail.tab);
+    }, false);
+  }
+
   function workaroundMermaidDistance(deck) {
     if (window.document.querySelector("pre.mermaid-js")) {
       const slideCount = deck.getTotalSlides();
@@ -390,6 +403,7 @@ window.QuartoSupport = function () {
       addFooter(deck);
       addChalkboardButtons(deck);
       handleTabbyClicks();
+      handleTabbyChanges();
       handleSlideChanges(deck);
       workaroundMermaidDistance(deck);
       handleWhiteSpaceInColumns(deck);