rust/comprehensive-rust
1
0
Fork 0
mirror of https://github.com/google/comprehensive-rust.git synced 2024-12-25 19:04:32 +02:00
Code Issues Releases Activity

Add language picker menu (#411)

Browse Source 
The picker is a drop-down menu using the same design as the theme
picker in the top-left.

There doesn’t seem to be an easy way to pass in a list of languages
and descriptions, so for now we’ll have to expand the menu by hand as
we add new languages. A comment has been added to `publish.yml` to
remind us of this.
This commit is contained in:
Martin Geisler 2023-02-15 15:10:16 +01:00 committed by GitHub
parent 8e4bf245d3
commit 3b7123d21a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 44 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.github/workflows/publish.yml vendored
View File

@ -18,6 +18,7 @@ concurrency:
env:
CARGO_TERM_COLOR: always
# Update the language picker in index.hbs to link new languages.
LANGUAGES: da pt-BR
jobs:

2
book.toml
View File

@ -31,7 +31,7 @@ class = "bob"
[output.html]
curly-quotes = true
additional-js = ["ga4.js", "speaker-notes.js"]
additional-css = ["svgbob.css", "speaker-notes.css"]
additional-css = ["svgbob.css", "speaker-notes.css", "language-picker.css"]
site-url = "/comprehensive-rust/"
git-repository-url = "https://github.com/google/comprehensive-rust"
edit-url-template = "https://github.com/google/comprehensive-rust/edit/main/{path}"

8
language-picker.css Normal file
View File

@ -0,0 +1,8 @@
#language-list {
left: auto;
right: 10px;
}
#language-list a {
color: inherit;
}

34
theme/index.hbs
View File

@ -147,6 +147,40 @@
<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="pt-BR">Brazilian Portuguese</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 }}");
selectedLang.parentNode.classList.add("theme-selected");
for (let lang of langList.querySelectorAll("a")) {
if (lang.id == "en") {
lang.href = "{{ path_to_root }}{{ path }}";
} else {
lang.href = `{{ path_to_root }}${lang.id}/{{ path }}`;
}
lang.href = lang.href.replace(/\.md$/, ".html");
console.log(lang);
}
</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>