1 function onSwitch(event) { 2 const option = event.target.selectedIndex; 3 const item = event.target.options[option]; 4 window.location.href = item.dataset.url; 5 } 6 7 document.addEventListener("readthedocs-addons-data-ready", function(event) { 8 const config = event.detail.data() 9 const versionSelect = ` 10 <select id="version_select" aria-label="Python version"> 11 ${ config.versions.active.map( 12 (version) => ` 13 <option 14 value="${ version.slug }" 15 ${ config.versions.current.slug === version.slug ? 'selected="selected"' : '' } 16 data-url="${ version.urls.documentation }"> 17 ${ version.slug } 18 </option>` 19 ).join("\n") } 20 </select> 21 `; 22 23 // Prepend the current language to the options on the selector 24 let languages = config.projects.translations.concat(config.projects.current); 25 languages = languages.sort((a, b) => a.language.name.localeCompare(b.language.name)); 26 27 const languageSelect = ` 28 <select id="language_select" aria-label="Language"> 29 ${ languages.map( 30 (translation) => ` 31 <option 32 value="${ translation.slug }" 33 ${ config.projects.current.slug === translation.slug ? 'selected="selected"' : '' } 34 data-url="${ translation.urls.documentation }"> 35 ${ translation.language.name } 36 </option>` 37 ).join("\n") } 38 </select> 39 `; 40 41 // Query all the placeholders because there are different ones for Desktop/Mobile 42 const versionPlaceholders = document.querySelectorAll(".version_switcher_placeholder"); 43 for (placeholder of versionPlaceholders) { 44 placeholder.innerHTML = versionSelect; 45 let selectElement = placeholder.querySelector("select"); 46 selectElement.addEventListener("change", onSwitch); 47 } 48 49 const languagePlaceholders = document.querySelectorAll(".language_switcher_placeholder"); 50 for (placeholder of languagePlaceholders) { 51 placeholder.innerHTML = languageSelect; 52 let selectElement = placeholder.querySelector("select"); 53 selectElement.addEventListener("change", onSwitch); 54 } 55 }); 56