Fix RTD version switcher hiding

docs/conf.py

@@ -175,6 +175,7 @@
     # "footer_start": ["test.html", "test.html"],
     # "secondary_sidebar_items": ["page-toc.html"],  # Remove the source buttons
     "switcher": {
+        "use_rtd": True,
         "json_url": json_url,
         "version_match": version_match,
     },

src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js

@@ -483,15 +483,32 @@ function initRTDObserver() {
   const mutatedCallback = (mutationList, observer) => {
     mutationList.forEach((mutation) => {
       // Check whether the mutation is for RTD, which will have a specific structure
+      console.log(`XXX {mutation.type} XXX`);
       if (mutation.addedNodes.length === 0) {
         return;
       }
       if (mutation.addedNodes[0].data === undefined) {
         return;
       }
       if (mutation.addedNodes[0].data.search("Inserted RTD Footer") != -1) {
-        mutation.addedNodes.forEach((node) => {
-          document.getElementById("rtd-footer-container").append(node);
+        console.log("XXX FOUND MUTATED NODE XXX");
+        let flyout = mutation.addedNodes[0].cloneNode(true);
+        console.log(flyout);
+        // 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) => {
+          console.log("XXX FOUND A TARGET NODE XXX");
+          if (!node.hasChildNodes()) {
+            console.log("XXX FOUND CHILDLESS NODE XXX");
+            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");
+              });
+          }
         });
       }
     });

src/pydata_sphinx_theme/assets/styles/abstracts/_links.scss

@@ -22,39 +22,46 @@ $link-underline-offset: 0.1578em !default;
 //  - 0.12em (relative to the link's text size)
 $link-hover-decoration-thickness: unquote("max(3px, .1875rem, .12em)") !default;
 
+@function if-important($important) {
+  @return #{if($important, "!important", "")};
+}
+
 //  Ensures links have an underline decoration by default - needed to meet
 // WCAG SC 1.4.1
-@mixin link-decoration {
-  text-decoration: underline;
+@mixin link-decoration($important: false) {
+  text-decoration: underline if-important($important);
 
   @if $link-underline-thickness {
-    text-decoration-thickness: $link-underline-thickness;
+    text-decoration-thickness: $link-underline-thickness
+      if-important($important);
   }
 
   @if $link-underline-offset {
-    text-underline-offset: $link-underline-offset;
+    text-underline-offset: $link-underline-offset if-important($important);
   }
 }
 
 // Ensures links have an underline decoration on hover - distinct from the
 // default behaviour
-@mixin link-decoration-hover {
+@mixin link-decoration-hover($important: false) {
   @if $link-hover-decoration-thickness {
-    text-decoration-thickness: $link-hover-decoration-thickness;
+    text-decoration-thickness: $link-hover-decoration-thickness
+      if-important($important);
     // Disable ink skipping on underlines on hover. Browsers haven't
     // standardised on this part of the spec yet, so set both properties
-    text-decoration-skip-ink: none; // Chromium, Firefox
-    text-decoration-skip: none; // Safari
+    text-decoration-skip-ink: none
+      if-important($important); // Chromium, Firefox
+    text-decoration-skip: none if-important($important); // Safari
   }
 }
 
 // Simple hover style - can be used alone or in conjunction with other mixins
 // Add the text underline and change in thickness on hover
-@mixin link-style-hover {
+@mixin link-style-hover($important: false) {
   &:hover {
-    @include link-decoration;
-    @include link-decoration-hover;
-    color: var(--pst-color-link-hover);
+    @include link-decoration($important: $important);
+    @include link-decoration-hover($important: $important);
+    color: var(--pst-color-link-hover) if-important($important);
   }
 }
 

src/pydata_sphinx_theme/assets/styles/components/_readthedocs-switcher.scss

@@ -1,69 +1,54 @@
-.bd-sidebar-primary div#rtd-footer-container {
-  position: sticky;
-  bottom: -1rem;
-  margin: -1rem; // ignore sidebar padding
-
-  .rst-versions.rst-badge {
-    position: unset;
-    font-size: 0.9em;
-    font-family: var(--pst-font-family-base);
-    max-width: unset;
-
-    .rst-current-version {
-      display: flex;
-      align-items: center;
-      gap: 0.2rem;
-      height: 2.5rem;
-      transition: background-color 0.2s ease-out;
-      background-color: var(--pst-color-background);
-      color: var(--pst-color-success);
-      border-top: 1px solid var(--pst-color-border);
-    }
-
-    .fa.fa-book {
-      color: var(--pst-color-text-muted);
-      margin-right: auto;
-
-      &::after {
-        color: var(--pst-color-text-base);
-        content: "Read The Docs";
-        font-family: var(--pst-font-family-base);
-        font-weight: var(--pst-admonition-font-weight-heading);
+.rst-versions {
+  position: relative !important;
+  font-family: inherit !important;
+  a {
+    color: var(--pst-color-link) !important;
+    text-decoration: underline !important;
+    @include link-style-hover($important: true);
+  }
+  &.rst-badge {
+    border-color: var(--pst-color-border) !important;
+    border-radius: $admonition-border-radius;
+    border-style: solid !important;
+    border-width: 1px !important;
+    bottom: unset !important;
+    right: unset !important;
+    &.shift-up .rst-current-version {
+      .fa-book {
+        float: none !important;
+      }
+      > .rst-current-version {
+        height: inherit !important;
       }
-    }
-    .fa.fa-caret-down {
-      color: var(--pst-color-text-muted);
     }
   }
-
-  .rst-versions.rst-badge.shift-up {
-    .rst-current-version {
-      border-bottom: 1px solid var(--pst-color-border);
+  .rst-current-version {
+    background-color: var(--pst-color-on-background) !important;
+    color: var(--pst-color-text-base) !important;
+    font-size: unset !important;
+    .fa-book {
+      float: none;
+      display: inline-block !important;
     }
   }
-
   .rst-other-versions {
-    background-color: var(--pst-color-surface);
-    color: var(--pst-color-text-base);
-
-    dl {
-      dd a {
-        color: var(--pst-color-text-muted);
-      }
-    }
-
+    position: absolute;
+    width: 300px;
+    color: var(--pst-color-text-muted) !important;
+    background-color: var(--pst-color-on-background) !important;
     hr {
-      background-color: var(--pst-color-border);
+      border: none !important;
+      border-top: solid 1px var(--pst-color-border) !important;
     }
-
-    small a {
-      color: var(--pst-color-link);
+    dl {
+      border-top: solid 1px var(--pst-color-border) !important;
     }
-
-    input {
-      padding-left: 0.5rem;
-      border: 1px solid var(--pst-color-border);
-      background-color: var(--pst-color-surface);
+    dd {
+      a {
+        @include link-style-hover($important: true);
+        color: var(--pst-color-text-base) !important;
+        text-decoration: none !important;
+      }
     }
   }
 }

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html

@@ -1,15 +1,21 @@
 {# As the version switcher will only work when JavaScript is enabled, we add it through JavaScript.
  #}
-<script>
-document.write(`
-  <div class="version-switcher__container dropdown">
-    <button id="versionswitcherbutton" type="button" role="button" class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="listbox" aria-controls="versionswitcherlist" aria-label="Version switcher list">
-      {{ theme_switcher.get('version_match') }}  <!-- this text may get changed later by javascript -->
-      <span class="caret"></span>
-    </button>
-    <div id="versionswitcherlist" class="version-switcher__menu dropdown-menu list-group-flush py-0" role="listbox" aria-labelledby="versionswitcherbutton">
-    <!-- dropdown will be populated by javascript on page load -->
-    </div>
-  </div>
-`);
-</script>
+{% if theme_switcher.get('use_rtd') is defined and theme_switcher.get('use_rtd') %}
+  <script>
+    document.write(`<div id="readthedocs-embed-flyout" data-rtd-target="rtd"></div>`);
+  </script>
+{% else %}
+  <script>
+    document.write(`
+      <div class="version-switcher__container dropdown">
+        <button id="versionswitcherbutton" type="button" role="button" class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="listbox" aria-controls="versionswitcherlist" aria-label="Version switcher list">
+          {{ theme_switcher.get('version_match') }}  <!-- this text may get changed later by javascript -->
+          <span class="caret"></span>
+        </button>
+        <div id="versionswitcherlist" class="version-switcher__menu dropdown-menu list-group-flush py-0" role="listbox" aria-labelledby="versionswitcherbutton">
+        <!-- dropdown will be populated by javascript on page load -->
+        </div>
+      </div>
+    `);
+  </script>
+{% endif %}