Added prototype UI language selector

Known issues

- styling / placement

- language changes via the selector UI are not recorded in the
  navigation history

- changing the language via the UI doesn't update the `?userlang=` URL
  query parameter
This commit is contained in:
Veloman Yunkan 2023-01-20 18:06:57 +04:00
parent eba7e15358
commit 6c2f229d31
4 changed files with 30 additions and 4 deletions

View File

@ -44,6 +44,10 @@
margin: 0 auto;
}
#ui_language {
float: left
}
#kiwix_button_show_toggle {
display: none;
}

View File

@ -403,6 +403,25 @@ function setupSuggestions() {
});
}
function initUILanguageSelector() {
const languageSelector = document.getElementById("ui_language");
for (const lang of uiLanguages ) {
const lang_name = Object.getOwnPropertyNames(lang)[0];
const lang_code = lang[lang_name];
const is_selected = lang_code == viewerState.uiLanguage;
languageSelector.appendChild(new Option(lang_name, lang_code, is_selected, is_selected));
}
}
function changeUILanguage() {
const s = document.getElementById("ui_language");
const lang = s.options[s.selectedIndex].value;
viewerState.uiLanguage = lang;
setUserLanguage(lang, () => {
updateUIText();
});
}
function setupViewer() {
// Defer the call of handle_visual_viewport_change() until after the
// presence or absence of the taskbar as determined by this function
@ -425,6 +444,7 @@ function setupViewer() {
document.getElementById("kiwix_serve_taskbar_library_button").remove();
}
initUILanguageSelector();
setupSuggestions();
// cybook hack

View File

@ -29,6 +29,8 @@
<body style="margin:0" onload="setupViewer()">
<div class="kiwix" style="display:none" id="kiwixtoolbarwrapper">
<div id="kiwixtoolbar" class="ui-widget-header">
<select id="ui_language" onchange="changeUILanguage()">
</select>
<div class="kiwix_centered">
<div class="kiwix_searchform">
<form class="kiwixsearch" method="GET" action="javascript:performSearch()" id="kiwixsearchform">

View File

@ -71,9 +71,9 @@ const ResourceCollection resources200Compressible{
{ DYNAMIC_CONTENT, "/ROOT/skin/mustache.min.js" },
{ STATIC_CONTENT, "/ROOT/skin/mustache.min.js?cacheid=bd23c4fb" },
{ DYNAMIC_CONTENT, "/ROOT/skin/taskbar.css" },
{ STATIC_CONTENT, "/ROOT/skin/taskbar.css?cacheid=216d6b5d" },
{ STATIC_CONTENT, "/ROOT/skin/taskbar.css?cacheid=2cbac34b" },
{ DYNAMIC_CONTENT, "/ROOT/skin/viewer.js" },
{ STATIC_CONTENT, "/ROOT/skin/viewer.js?cacheid=961068b0" },
{ STATIC_CONTENT, "/ROOT/skin/viewer.js?cacheid=eca8fdbe" },
{ DYNAMIC_CONTENT, "/ROOT/skin/fonts/Poppins.ttf" },
{ STATIC_CONTENT, "/ROOT/skin/fonts/Poppins.ttf?cacheid=af705837" },
{ DYNAMIC_CONTENT, "/ROOT/skin/fonts/Roboto.ttf" },
@ -298,11 +298,11 @@ R"EXPECTEDRESULT( <img src="../skin/download.png?
},
{
/* url */ "/ROOT/viewer",
R"EXPECTEDRESULT( <link type="text/css" href="./skin/taskbar.css?cacheid=216d6b5d" rel="Stylesheet" />
R"EXPECTEDRESULT( <link type="text/css" href="./skin/taskbar.css?cacheid=2cbac34b" rel="Stylesheet" />
<link type="text/css" href="./skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
<script type="module" src="./skin/i18n.js?cacheid=eb41f5ce" defer></script>
<script type="text/javascript" src="./skin/languages.js?cacheid=fe100348" defer></script>
<script type="text/javascript" src="./skin/viewer.js?cacheid=961068b0" defer></script>
<script type="text/javascript" src="./skin/viewer.js?cacheid=eca8fdbe" defer></script>
<script type="text/javascript" src="./skin/autoComplete.min.js?cacheid=1191aaaf"></script>
const blankPageUrl = root + "/skin/blank.html?cacheid=6b1fa032";
<label for="kiwix_button_show_toggle"><img src="./skin/caret.png?cacheid=22b942b4" alt=""></label>