0
0
mirror of https://github.com/python/cpython.git synced 2024-11-28 16:45:42 +01:00
cpython/Doc/tools/static/rtd_switcher.js
Kerim Kabirov 1306f33c84
gh-125933: Add ARIA labels to select elements in the version switcher (#125934)
Co-authored-by: Hugo van Kemenade <1324225+hugovk@users.noreply.github.com>
2024-10-24 23:52:21 +03:00

56 lines
2.1 KiB
JavaScript

function onSwitch(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 versionSelect = `
<select id="version_select" aria-label="Python version">
${ 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>
`;
// 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 languageSelect = `
<select id="language_select" aria-label="Language">
${ languages.map(
(translation) => `
<option
value="${ translation.slug }"
${ config.projects.current.slug === translation.slug ? 'selected="selected"' : '' }
data-url="${ translation.urls.documentation }">
${ translation.language.name }
</option>`
).join("\n") }
</select>
`;
// Query all the placeholders because there are different ones for Desktop/Mobile
const versionPlaceholders = document.querySelectorAll(".version_switcher_placeholder");
for (placeholder of versionPlaceholders) {
placeholder.innerHTML = versionSelect;
let selectElement = placeholder.querySelector("select");
selectElement.addEventListener("change", onSwitch);
}
const languagePlaceholders = document.querySelectorAll(".language_switcher_placeholder");
for (placeholder of languagePlaceholders) {
placeholder.innerHTML = languageSelect;
let selectElement = placeholder.querySelector("select");
selectElement.addEventListener("change", onSwitch);
}
});