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;
@@ -472,11 +477,11 @@ body {
     .kiwixHomeBody {
         min-height: calc(100vh - 287px);
     }
-    
+
     .kiwixSearch {
         margin-top: 11px;
     }
-    
+
     .kiwixButton {
         margin: 15px 0;
         width: 229px;

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 {