RTD: Clickable version selector is always at the bottom (#139)

mgeier · Jan 15, 2023 · 100f239 · 100f239
1 parent 8c8f153
commit 100f239
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/src/insipid_sphinx_theme/insipid/readthedocs-embed-flyout.html b/src/insipid_sphinx_theme/insipid/readthedocs-embed-flyout.html
@@ -1,3 +1,5 @@
+{# This is where https://readthedocs.org/ injects the version/language switcher #}
+<div id="readthedocs-embed-flyout"></div>
 {# We duplicate "rst-current-version" to be able to make it sticky. #}
 {# It is initially invisible and will be enabled via JavaScript below. #}
 <div id="duplicated-readthedocs-versions" class="rst-versions" role="note" style="display: none;">
@@ -8,5 +10,3 @@
 </div>
 {# Only show when JavaScript is enabled: #}
 <script>document.currentScript.previousElementSibling.style.display = 'block';</script>
-{# This is where https://readthedocs.org/ injects the version/language switcher #}
-<div id="readthedocs-embed-flyout"></div>
diff --git a/src/insipid_sphinx_theme/insipid/static/insipid-sidebar-readthedocs.css_t b/src/insipid_sphinx_theme/insipid/static/insipid-sidebar-readthedocs.css_t
@@ -11,7 +11,7 @@
     margin-right: -10px;
 }
 
-#readthedocs-embed-flyout {
+#duplicated-readthedocs-versions {
     margin-bottom: -10px;
 }
 

diff --git a/src/insipid_sphinx_theme/insipid/static/insipid-sidebar.js_t b/src/insipid_sphinx_theme/insipid/static/insipid-sidebar.js_t
@@ -332,8 +332,13 @@
 {%- if READTHEDOCS|tobool %}
     const rtd_current_version = document.getElementById('duplicated-readthedocs-versions');
     const rtd_other_versions = document.getElementById('readthedocs-embed-flyout');
+    const sidebarwrapper = document.querySelector('.sphinxsidebarwrapper');
     rtd_current_version.addEventListener('click', event => {
-        rtd_other_versions.scrollIntoView(true);
+        if (sidebar.scrollTop + 1 > rtd_other_versions.offsetTop || sidebar.scrollTop + 1 > sidebar.scrollHeight - sidebar.offsetHeight) {
+            sidebar.scroll({top: 0, behavior:'smooth'});
+        } else {
+            sidebar.scroll({top: rtd_other_versions.offsetTop, behavior:'smooth'});
+        }
     });
 {%- endif %}
 });