try to clone flyout to smallscreen sidebar too

pydata · Aug 5, 2023 · 8aea24b · 8aea24b
1 parent a09c9ac
commit 8aea24b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js b/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js
@@ -490,8 +490,20 @@ function initRTDObserver() {
         return;
       }
       if (mutation.addedNodes[0].data.search("Inserted RTD Footer") != -1) {
-        mutation.addedNodes.forEach((node) => {
-          document.getElementById("rtd-footer-container").append(node);
+        let flyout = mutation.addedNodes[0].cloneNode(true);
+        // copy the flyout menu to whichever of the 2 target nodes didn't already get
+        // written to by the RTD injection script.
+        document.querySelectorAll('[data-rtd-target="rtd"]').forEach((node) => {
+          if (!node.hasChildNodes()) {
+            node.appendChild(flyout);
+            flyout.onclick = toggleFlyout;
+            // replicate the onclick function RTD uses: it can't be cloned by cloneNode()
+            flyout
+              .querySelector(".rst-current-version")
+              .addEventListener("click", function (e) {
+                e.currentTarget.classList.toggleClass("shift-up");
+              });
+          }
         });
       }
     });
@@ -531,4 +543,4 @@ documentReady(addModeListener);
 documentReady(scrollToActive);
 documentReady(addTOCInteractivity);
 documentReady(setupSearchButtons);
-// documentReady(initRTDObserver);
+documentReady(initRTDObserver);
diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html
@@ -2,7 +2,7 @@
  #}
 {% if theme_switcher.get('use_rtd') is defined and theme_switcher.get('use_rtd') %}
   <script>
-    document.write(`<div id="readthedocs-embed-flyout"></div>`);
+    document.write(`<div id="readthedocs-embed-flyout" data-rtd-target="rtd"></div>`);
   </script>
 {% else %}
   <script>