|
1 | 1 | <script> |
2 | | - const mdbookPath = "{{ path }}"; |
3 | | - const mdbookPathToRoot = "{{ path_to_root }}"; |
| 2 | + document.addEventListener('DOMContentLoaded', function() { |
| 3 | + const mdbookPath = "{{ path }}"; |
| 4 | + const mdbookPathToRoot = "{{ path_to_root }}"; |
| 5 | + const rightButtonsElement = document.querySelector('.right-buttons'); |
| 6 | + rightButtonsElement.insertAdjacentHTML("afterbegin", ` |
| 7 | + <button id="language-toggle" class="icon-button" type="button" |
| 8 | + title="Change language" aria-label="Change language" |
| 9 | + aria-haspopup="true" aria-expanded="false" |
| 10 | + aria-controls="language-list"> |
| 11 | + {{fa "solid" "globe"}} |
| 12 | + </button> |
| 13 | + <ul id="language-list" class="theme-popup" aria-label="Languages" role="menu"> |
| 14 | + <li role="none"><button role="menuitem" class="theme"> |
| 15 | + <a id="en">English</a> |
| 16 | + </button></li> |
| 17 | + <li role="none"><button role="menuitem" class="theme"> |
| 18 | + <a id="ja">日本語</a> |
| 19 | + </button></li> |
| 20 | + <li role="none"><button role="menuitem" class="theme"> |
| 21 | + <a id="zh">中文</a> |
| 22 | + </button></li> |
| 23 | + <li role="none"><button role="menuitem" class="theme"> |
| 24 | + <a id="es">Español</a> |
| 25 | + </button></li> |
| 26 | + </ul> |
| 27 | + `); |
| 28 | +
|
| 29 | + const language = document.documentElement.getAttribute("lang"); |
| 30 | + let langToggle = document.getElementById("language-toggle"); |
| 31 | + let langList = document.getElementById("language-list"); |
| 32 | + langToggle.addEventListener("click", (event) => { |
| 33 | + langList.style.display = |
| 34 | + langList.style.display == "block" ? "none" : "block"; |
| 35 | + }); |
| 36 | + let selectedLang = document.getElementById(language); |
| 37 | + if (selectedLang) { |
| 38 | + selectedLang.parentNode.classList.add("theme-selected"); |
| 39 | + } |
| 40 | +
|
| 41 | + // The path to the root, taking the current language into account. |
| 42 | + let full_path_to_root = |
| 43 | + language == "en" ? `${mdbookPathToRoot}` : `${mdbookPathToRoot}../`; |
| 44 | + // The page path (mdbook only gives us access to the path to the Markdown file). |
| 45 | + let path = mdbookPath.replace(/\.md$/, ".html"); |
| 46 | + const langAnchors = Array.from(langList.querySelectorAll("a")); |
| 47 | + for (let lang of langAnchors) { |
| 48 | + if (lang.id == "en") { |
| 49 | + lang.href = `${full_path_to_root}${path}`; |
| 50 | + } else { |
| 51 | + lang.href = `${full_path_to_root}${lang.id}/${path}`; |
| 52 | + } |
| 53 | + } |
| 54 | +
|
| 55 | + // Hide languages whose target page is not available (e.g., not deployed). |
| 56 | + // This prevents users from hitting 404s on sites that only ship some locales. |
| 57 | + for (let lang of langAnchors) { |
| 58 | + const url = lang.href; |
| 59 | + // Attempt a lightweight HEAD request; fall back to hiding on failure. |
| 60 | + fetch(url, { method: "HEAD" }).then((resp) => { |
| 61 | + if (!resp.ok) { |
| 62 | + const li = lang.parentNode && lang.parentNode.parentNode; |
| 63 | + if (li) li.style.display = "none"; |
| 64 | + } |
| 65 | + }).catch(() => { |
| 66 | + const li = lang.parentNode && lang.parentNode.parentNode; |
| 67 | + if (li) li.style.display = "none"; |
| 68 | + }); |
| 69 | + } |
| 70 | + }); |
4 | 71 | </script> |
0 commit comments