From ca7f615c39a9b2b4e334dce5170790938df770b4 Mon Sep 17 00:00:00 2001
From: Manuel Kaufmann <humitos@gmail.com>
Date: Tue, 17 Sep 2024 15:50:28 +0200
Subject: [PATCH] HTML layout rework

---
 sphinx_rtd_theme/layout.html             |  8 +--
 sphinx_rtd_theme/static/js/versions.js_t | 79 +++++++++++-------------
 2 files changed, 39 insertions(+), 48 deletions(-)

diff --git a/sphinx_rtd_theme/layout.html b/sphinx_rtd_theme/layout.html
index 7a7229c68..94e25bb8a 100644
--- a/sphinx_rtd_theme/layout.html
+++ b/sphinx_rtd_theme/layout.html
@@ -137,12 +137,8 @@
           {%- endif %}
 
           {%- if READTHEDOCS %}
-            <div class="dropdown-selectors">
-              {%- if theme_version_selector %}
-                <select id="readthedocs-version-selector"></select>
-              {%- endif %}
-              {%- if theme_language_selector %}
-                <select id="readthedocs-language-selector"></select>
+              {%- if theme_version_selector or theme_language_selector %}
+              <div class="dropdown-selectors"></div>
               {%- endif %}
             </div>
           {%- endif %}
diff --git a/sphinx_rtd_theme/static/js/versions.js_t b/sphinx_rtd_theme/static/js/versions.js_t
index 581a4aa03..d05a568e8 100644
--- a/sphinx_rtd_theme/static/js/versions.js_t
+++ b/sphinx_rtd_theme/static/js/versions.js_t
@@ -137,36 +137,28 @@ function onSelectorSwitch(event) {
 document.addEventListener("readthedocs-addons-data-ready", function(event) {
   const config = event.detail.data();
 
-  {%- if theme_version_selector %}
-  const versionOptions = `
-   ${ config.versions.active.map(
-       (version) => `
-       <option
-           value="${ version.slug }"
-           ${ config.versions.current.slug === version.slug ? 'selected="selected"' : '' }
-           data-url="${ version.urls.documentation }">
-           ${ version.slug }
-       </option>`
-   ).join("\n") }
-   `;
-
-  // Prepend the current version to the options if it's hidden since it won't
-  // appear in the "config.versions.active" list
-  let currentHiddenVersion = "";
-  if (config.versions.current.hidden) {
-    currentHiddenVersion = `
-      <option
-           value="${ config.versions.current.slug }"
-           selected="selected"
-           data-url="${ config.versions.current.urls.documentation }">
-           ${ config.versions.current.slug }
-      </option>
-    `;
-  }
+  const dropdownSelectors = document.querySelector("div.dropdown-selectors");
 
-  const versionSelect = document.querySelector("#readthedocs-version-selector");
-  versionSelect.addEventListener("change", onSelectorSwitch);
-  versionSelect.innerHTML = currentHiddenVersion + versionOptions;
+  {%- if theme_version_selector %}
+  const versionSelect = `
+    <select id="readthedocs-version-selector">
+      ${ config.versions.active.map(
+          (version) => `
+          <option
+              value="${ version.slug }"
+              ${ config.versions.current.slug === version.slug ? 'selected="selected"' : '' }
+              data-url="${ version.urls.documentation }">
+              ${ version.slug }
+          </option>`
+      ).join("\n") }
+    </select>
+  `;
+
+  dropdownSelectors.insertAdjacentHTML("beforeend", versionSelect);
+
+  const versionSelector = document.querySelector("#readthedocs-version-selector");
+  versionSelector.addEventListener("change", onSelectorSwitch);
+  versionSelector.innerHTML = versionSelect;
   {%- endif %}
 
 
@@ -176,21 +168,24 @@ document.addEventListener("readthedocs-addons-data-ready", function(event) {
     let languages = config.projects.translations.concat(config.projects.current);
     languages = languages.sort((a, b) => a.language.name.localeCompare(b.language.name));
 
-    const languageOptions = `
-    ${ languages.map(
-        (language) => `
-          <option
-    value="${ language.language.code }"
-    ${ config.projects.current.slug === language.slug ? 'selected="selected"' : '' }
-    data-url="${ language.urls.documentation }">
-      ${ language.language.name }
-    </option>`
-    ).join("\n") }
+    const languageSelect= `
+      <select id="readthedocs-version-selector">
+        ${ languages.map(
+          (language) => `
+              <option
+                  value="${ language.language.code }"
+                  ${ config.projects.current.slug === language.slug ? 'selected="selected"' : '' }
+                  data-url="${ language.urls.documentation }">
+                  ${ language.language.name }
+              </option>`
+        ).join("\n") }
+       </select>
     `;
 
-    const languageSelect = document.querySelector("#readthedocs-language-selector");
-    languageSelect.addEventListener("change", onSelectorSwitch);
-    languageSelect.innerHTML = languageOptions;
+    dropdownSelectors.insertAdjacentHTML("beforeend", languageSelect);
+    const languageSelector = document.querySelector("#readthedocs-language-selector");
+    languageSelector.addEventListener("change", onSelectorSwitch);
+    languageSelector.innerHTML = languageSelect;
   }
   {%- endif %}
 });