From 514d6e65146d5155922b7fdd3af926e2bc866c6a Mon Sep 17 00:00:00 2001
From: Veloman Yunkan <veloman.yunkan@gmail.com>
Date: Thu, 9 Feb 2023 16:23:27 +0100
Subject: [PATCH] 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       |  9 +++++++--
 static/skin/index.js        |  9 +++++++++
 static/skin/taskbar.css     |  2 +-
 static/templates/index.html |  3 +++
 test/server.cpp             | 13 +++++++------
 5 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/static/skin/index.css b/static/skin/index.css
index ae9294fa..e0d43fbb 100644
--- a/static/skin/index.css
+++ b/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;
@@ -472,11 +477,11 @@ body {
     .kiwixHomeBody {
         min-height: calc(100vh - 287px);
     }
-    
+
     .kiwixSearch {
         margin-top: 11px;
     }
-    
+
     .kiwixButton {
         margin: 15px 0;
         width: 229px;
diff --git a/static/skin/index.js b/static/skin/index.js
index a2e7479c..81ddc971 100644
--- a/static/skin/index.js
+++ b/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:{
diff --git a/static/skin/taskbar.css b/static/skin/taskbar.css
index 87fbdc31..084b7150 100644
--- a/static/skin/taskbar.css
+++ b/static/skin/taskbar.css
@@ -45,7 +45,7 @@
 }
 
 .kiwix #ui_language {
-  float: left;
+  float: right;
 }
 
 #kiwix_button_show_toggle {
diff --git a/static/templates/index.html b/static/templates/index.html
index 2b2039a1..6096c701 100644
--- a/static/templates/index.html
+++ b/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'>
diff --git a/test/server.cpp b/test/server.cpp
index 54f7cbb5..17eaaaf0 100644
--- a/test/server.cpp
+++ b/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>