Update

veryl-lang · Nov 29, 2024 · 86aa3c8 · 86aa3c8
1 parent 1f5ee7f
commit 86aa3c8
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 45 deletions.
diff --git a/book/book.toml b/book/book.toml
@@ -24,6 +24,7 @@ additional-css = [
 additional-js = [
   "mode-veryl.js",
   "editor.js",
+  "theme/language-picker.js",
 ]
 
 [output.html.fold]

diff --git a/book/theme/index.hbs b/book/theme/index.hbs
@@ -148,51 +148,6 @@
                     <h1 class="menu-title">{{ book_title }}</h1>
 
                     <div class="right-buttons">
-                        <button id="language-toggle" class="icon-button" type="button"
-                                title="Change language" aria-label="Change language"
-                                aria-haspopup="true" aria-expanded="false"
-                                aria-controls="language-list">
-                            <i class="fa fa-globe"></i>
-                        </button>
-                        <ul id="language-list" class="theme-popup" aria-label="Languages" role="menu">
-                          <li role="none"><button role="menuitem" class="theme">
-                              <a id="en">English</a>
-                          </button></li>
-                          <li role="none"><button role="menuitem" class="theme">
-                              <a id="ja">日本語</a>
-                          </button></li>
-                        </ul>
-
-                        <script>
-                          let langToggle = document.getElementById("language-toggle");
-                          let langList = document.getElementById("language-list");
-                          langToggle.addEventListener("click", (event) => {
-                              langList.style.display = langList.style.display == "block" ? "none" : "block";
-                          });
-                          let selectedLang = document.getElementById("{{ language }}");
-                          if (selectedLang) {
-                              selectedLang.parentNode.classList.add("theme-selected");
-                          }
-
-                          // The path to the root, taking the current
-                          // language into account.
-                          {{#if (eq language "en")}}
-                          let full_path_to_root = "{{ path_to_root }}";
-                          {{else}}
-                          let full_path_to_root = "{{ path_to_root }}../";
-                          {{/if}}
-                          // The page path (mdbook only gives us
-                          // access to the path to the Markdown file).
-                          let path = "{{ path }}".replace(/\.md$/, ".html");
-                          for (let lang of langList.querySelectorAll("a")) {
-                              if (lang.id == "en") {
-                                  lang.href = `${full_path_to_root}${path}`;
-                              } else {
-                                  lang.href = `${full_path_to_root}${lang.id}/${path}`;
-                              }
-                          }
-                        </script>
-
                         {{#if print_enable}}
                         <a href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book">
                             <i id="print-button" class="fa fa-print"></i>

diff --git a/book/theme/language-picker.js b/book/theme/language-picker.js
@@ -0,0 +1,47 @@
+const right_buttons = document.getElementsByClassName('right-buttons')[0];
+const language_toggle = `
+<button id="language-toggle" class="icon-button" type="button"
+        title="Change language" aria-label="Change language"
+        aria-haspopup="true" aria-expanded="false"
+        aria-controls="language-list">
+    <i class="fa fa-globe"></i>
+</button>
+<ul id="language-list" class="theme-popup" aria-label="Languages" role="menu">
+  <li role="none"><button role="menuitem" class="theme">
+      <a id="en">English</a>
+  </button></li>
+  <li role="none"><button role="menuitem" class="theme">
+      <a id="ja">日本語</a>
+  </button></li>
+</ul>
+`;
+right_buttons.insertAdjacentHTML('afterbegin', language_toggle);
+
+let langToggle = document.getElementById("language-toggle");
+let langList = document.getElementById("language-list");
+langToggle.addEventListener("click", (event) => {
+    langList.style.display = langList.style.display == "block" ? "none" : "block";
+});
+let lang = document.documentElement.lang;
+let selectedLang = document.getElementById(lang);
+if (selectedLang) {
+    selectedLang.parentNode.classList.add("theme-selected");
+}
+
+// The path to the root, taking the current
+// language into account.
+var full_path_to_root;
+if (lang == "en") {
+    full_path_to_root = `${path_to_root}`;
+} else {
+    full_path_to_root = `${path_to_root}../`;
+}
+let components = (path_to_root.match(/\//g) ?? []).length + 1;
+let path = window.location.pathname.split('/').slice(-components).join('/');
+for (let lang of langList.querySelectorAll("a")) {
+    if (lang.id == "en") {
+        lang.href = `${full_path_to_root}${path}`;
+    } else {
+        lang.href = `${full_path_to_root}${lang.id}/${path}`;
+    }
+}