diff --git a/sphinx_rtd_theme/layout.html b/sphinx_rtd_theme/layout.html index e6f964ff9..d884163b1 100644 --- a/sphinx_rtd_theme/layout.html +++ b/sphinx_rtd_theme/layout.html @@ -124,7 +124,7 @@ {%- endif %} - {%- if theme_display_version %} + {%- if theme_display_version and theme_flyout_display != "selectors" %} {%- set nav_version = version %} {%- if READTHEDOCS and current_version %} {%- set nav_version = current_version %} @@ -136,6 +136,11 @@ {%- endif %} {%- endif %} + {%- if READTHEDOCS and theme_flyout_display == "selectors" %} + + + {%- endif %} + {%- include "searchbox.html" %} {%- endblock %} diff --git a/sphinx_rtd_theme/static/js/versions.js_t b/sphinx_rtd_theme/static/js/versions.js_t index 3a8ab05e0..0dfd8c186 100644 --- a/sphinx_rtd_theme/static/js/versions.js_t +++ b/sphinx_rtd_theme/static/js/versions.js_t @@ -1,3 +1,4 @@ +{%- if theme_flyout_display == "attached" %} function renderLanguages(config) { if (!config.projects.translations.length) { return ""; @@ -123,3 +124,54 @@ function renderLanguages(config) { document.dispatchEvent(event); }); }); +{%- endif %} + + +{%- if theme_flyout_display == "selectors" %} +function onSelectorSwitch(event) { + const option = event.target.selectedIndex; + const item = event.target.options[option]; + window.location.href = item.dataset.url; + } + +document.addEventListener("readthedocs-addons-data-ready", function(event) { + const config = event.detail.data(); + + const versionOptions = ` + ${ config.versions.active.map( + (version) => ` + ` + ).join("\n") } + `; + + // Prepend the current language to the options on the selector + 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) => ` + ` + ).join("\n") } + `; + + + const versionSelect = document.querySelector("#readthedocs-version-selector"); + versionSelect.addEventListener("change", onSelectorSwitch); + versionSelect.innerHTML = versionOptions; + + const languageSelect = document.querySelector("#readthedocs-language-selector"); + languageSelect.addEventListener("change", onSelectorSwitch); + languageSelect.innerHTML = languageOptions; +}); +{%- endif %}