Added UI language selector on the welcome page

Also:

- Moved the language selector to the right hand side on the ZIM viewer
  page (to be consistent with the welcome page)

static/skin/index.css

@@ -157,6 +157,11 @@ body {
     font-weight: bolder;
 }
 
+#ui_language {
+  float: right;
+  top: 0;
+}
+
 .book__list {
     position: relative;
     margin: 0 auto;

static/skin/index.js

@@ -31,6 +31,14 @@
         document.querySelector('#feedLink').href = feedLink;
     }
 
+    function changeUILanguage() {
+      const s = document.getElementById("ui_language");
+      const lang = s.options[s.selectedIndex].value;
+      const q = new URLSearchParams(window.location.search);
+      q.set("userlang", lang);
+      location.search = q.toString();
+    }
+
     function queryUrlBuilder() {
         let url = `${root}/catalog/search?`;
         url += Object.keys(incrementalLoadingParams).map(key => `${key}=${incrementalLoadingParams[key]}`).join("&");
@@ -466,6 +474,7 @@
     }
 
     async function onload() {
+        initUILanguageSelector(getUserLanguage(), changeUILanguage);
         iso = new Isotope( '.book__list', {
             itemSelector: '.book',
             getSortData:{

static/skin/taskbar.css

@@ -45,7 +45,7 @@
 }
 
 .kiwix #ui_language {
-  float: left;
+  float: right;
 }
 
 #kiwix_button_show_toggle {

static/templates/index.html

@@ -38,6 +38,7 @@
       }
     </style>
     <script type="module" src="{{root}}/skin/i18n.js?KIWIXCACHEID" defer></script>
+    <script type="text/javascript" src="{{root}}/skin/languages.js?KIWIXCACHEID" defer></script>
     <script src="{{root}}/skin/isotope.pkgd.min.js?KIWIXCACHEID" defer></script>
     <script src="{{root}}/skin/iso6391To3.js?KIWIXCACHEID"></script>
     <script type="text/javascript" src="{{root}}/skin/index.js?KIWIXCACHEID" defer></script>
@@ -47,6 +48,8 @@
       <img src="{{root}}/skin/feed.png?KIWIXCACHEID" class="feedLogo" alt="Library OPDS Feed" aria-label="Library OPDS Feed" title="Library OPDS Feed">
     </a>
     <div class='kiwixNav'>
+      <select id="ui_language">
+      </select>
       <div class="kiwixNav__filters">
         <div class="kiwixNav__select">
           <select name="lang" id="languageFilter" class='kiwixNav__kiwixFilter filter'>

test/server.cpp

@@ -61,9 +61,9 @@ const ResourceCollection resources200Compressible{
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/i18n.js?cacheid=c475fe0b" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.css?cacheid=316dbc21" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.css?cacheid=ac5767d8" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.js?cacheid=1f5f1cce" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.js?cacheid=c333bdba" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/isotope.pkgd.min.js" },
@@ -71,7 +71,7 @@ const ResourceCollection resources200Compressible{
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/mustache.min.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/mustache.min.js?cacheid=bd23c4fb" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/taskbar.css" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/taskbar.css?cacheid=eb3bec90" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/taskbar.css?cacheid=af241ff1" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/viewer.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/viewer.js?cacheid=d0c7f567" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/fonts/Poppins.ttf" },
@@ -270,7 +270,7 @@ TEST_F(ServerTest, CacheIdsOfStaticResources)
   const std::vector<UrlAndExpectedResult> testData{
     {
       /* url */ "/ROOT%23%3F/",
-R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=316dbc21"
+R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=ac5767d8"
     <link rel="apple-touch-icon" sizes="180x180" href="/ROOT%23%3F/skin/favicon/apple-touch-icon.png?cacheid=f86f8df3">
     <link rel="icon" type="image/png" sizes="32x32" href="/ROOT%23%3F/skin/favicon/favicon-32x32.png?cacheid=79ded625">
     <link rel="icon" type="image/png" sizes="16x16" href="/ROOT%23%3F/skin/favicon/favicon-16x16.png?cacheid=a986fedc">
@@ -281,9 +281,10 @@ R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=316dbc21"
         src: url("/ROOT%23%3F/skin/fonts/Poppins.ttf?cacheid=af705837") format("truetype");
           src: url("/ROOT%23%3F/skin/fonts/Roboto.ttf?cacheid=84d10248") format("truetype");
     <script type="module" src="/ROOT%23%3F/skin/i18n.js?cacheid=c475fe0b" defer></script>
+    <script type="text/javascript" src="/ROOT%23%3F/skin/languages.js?cacheid=fe100348" defer></script>
     <script src="/ROOT%23%3F/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script>
     <script src="/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3"></script>
-    <script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=1f5f1cce" defer></script>
+    <script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=c333bdba" defer></script>
       <img src="/ROOT%23%3F/skin/feed.png?cacheid=56a672b1" class="feedLogo" alt="Library OPDS Feed" aria-label="Library OPDS Feed" title="Library OPDS Feed">
 )EXPECTEDRESULT"
     },
@@ -302,7 +303,7 @@ R"EXPECTEDRESULT(                                <img src="${root}/skin/download
     },
     {
       /* url */ "/ROOT%23%3F/viewer",
-R"EXPECTEDRESULT(    <link type="text/css" href="./skin/taskbar.css?cacheid=eb3bec90" rel="Stylesheet" />
+R"EXPECTEDRESULT(    <link type="text/css" href="./skin/taskbar.css?cacheid=af241ff1" rel="Stylesheet" />
     <link type="text/css" href="./skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
     <script type="module" src="./skin/i18n.js?cacheid=c475fe0b" defer></script>
     <script type="text/javascript" src="./skin/languages.js?cacheid=fe100348" defer></script>