Modal language selector on the welcome page

The language selector on the welcome page has been replaced with a smaller button that opens a modal language selector. Though the code for introducing such a modal language selector has been added in i18n.js, its appearance relies on styles defined in index.css. Once this new UI for changing the UI language is approved, it must be used in the ZIM viewer too. Known issues: - selecting the language with arrow keys (using the keyboard only, without pressing space first, so that the full list of languages is shown) doesn't work because as soon as the current language is changed the modal language selector disappears.
2023-02-19 16:30:38 +04:00 · 2023-02-19 16:30:38 +04:00 · 904615a51a
parent 763fb86ad0
commit 904615a51a
5 changed files with 87 additions and 12 deletions
--- a/static/skin/i18n.js
+++ b/static/skin/i18n.js
@ -97,7 +97,51 @@ function setUserLanguage(lang, callback) {
  Translations.whenReady(callback);
 }

+function createModalUILanguageSelector() {
+  document.body.insertAdjacentHTML('beforeend',
+    `<div id="uiLanguageSelector" class="modal-wrapper">
+      <div class="modal">
+        <div class="modal-heading">
+          <div class="modal-title">
+            <div>
+                Select UI language
+            </div>
+          </div>
+          <div onclick="window.modalUILanguageSelector.close()" class="modal-close-button">
+            <div>
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.7071 1.70711C14.0976 1.31658 14.0976
+                  0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711
+                  0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417
+                  -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834
+                  -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7
+                  8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166
+                  14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z" fill="black" />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div class="modal-content">
+          <select id="ui_language"></select>
+        </div>
+      </div>
+    </div>`);
+
+  window.modalUILanguageSelector = {
+    show: () => {
+      document.getElementById('uiLanguageSelector').style.display = 'flex';
+    },
+
+    close: () => {
+      document.getElementById('uiLanguageSelector').style.display = 'none';
+    }
+  };
+}
+
 function initUILanguageSelector(activeLanguage, languageChangeCallback) {
+  if ( document.getElementById("ui_language") == null ) {
+    createModalUILanguageSelector();
+  }
  const languageSelector = document.getElementById("ui_language");
  for (const lang of uiLanguages ) {
    const lang_name = Object.getOwnPropertyNames(lang)[0];
--- a/static/skin/index.css
+++ b/static/skin/index.css
@ -157,9 +157,26 @@ body {
    font-weight: bolder;
 }

-#ui_language {
+#uiLanguageSelector {
+  display: none;
+}
+
+#uiLanguageSelector .modal {
+  height: 140px;
+}
+
+#uiLanguageSelector .modal-heading {
+  height: 40%;
+}
+
+#uiLanguageSelector .modal-content #ui_language {
+  font-size: 1.6rem;
+  width: 100%;
+}
+
+#uiLanguageSelectorButton {
+  margin: 16px 12px 0 0;
  float: right;
-  top: 0;
 }

 .book__list {
--- a/static/skin/index.js
+++ b/static/skin/index.js
@ -33,6 +33,7 @@
    }

    function changeUILanguage() {
+      window.modalUILanguageSelector.close();
      const s = document.getElementById("ui_language");
      const lang = s.options[s.selectedIndex].value;
      setPermanentGlobalCookie('userlang', lang);
--- a/static/templates/index.html
+++ b/static/templates/index.html
@ -52,9 +52,18 @@
           aria-label="Library OPDS Feed"
           title="Library OPDS Feed">
    </a>
+    <a onclick="window.modalUILanguageSelector.show()">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           id="uiLanguageSelectorButton"
+           width="30"
+           height="30"
+           viewBox="0 0 20 20">
+        <g fill="#36c">
+          <path d="M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z"/>
+        </g>
+      </svg>
+    </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'>
@ -85,7 +94,11 @@
  <script>
    function closeModal() {
      for(modal of document.getElementsByClassName('modal-wrapper')) {
-        modal.remove();
+        if ( modal.id == "uiLanguageSelector" ) {
+          window.modalUILanguageSelector.close();
+        } else {
+          modal.remove();
+        }
      }
    }
  </script>
--- a/test/server.cpp
+++ b/test/server.cpp
@ -59,11 +59,11 @@ const ResourceCollection resources200Compressible{
  { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/css/autoComplete.css" },
  { STATIC_CONTENT,  "/ROOT%23%3F/skin/css/autoComplete.css?cacheid=08951e06" },
  { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/i18n.js?cacheid=c475fe0b" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/i18n.js?cacheid=2cf0f8c5" },
  { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.css?cacheid=ac5767d8" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.css?cacheid=489b1f15" },
  { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.js?cacheid=5b1775c2" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.js?cacheid=7348b4df" },
  { 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" },
@ -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=ac5767d8"
+R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=489b1f15"
    <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">
@ -280,11 +280,11 @@ R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=ac5767d8"
    <meta name="msapplication-config" content="/ROOT%23%3F/skin/favicon/browserconfig.xml?cacheid=f29a7c4a">
        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="module" src="/ROOT%23%3F/skin/i18n.js?cacheid=2cf0f8c5" 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=5b1775c2" defer></script>
+    <script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=7348b4df" defer></script>
      <img src="/ROOT%23%3F/skin/feed.png?cacheid=56a672b1"
 )EXPECTEDRESULT"
    },
@ -305,7 +305,7 @@ R"EXPECTEDRESULT(                                <img src="${root}/skin/download
      /* url */ "/ROOT%23%3F/viewer",
 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="module" src="./skin/i18n.js?cacheid=2cf0f8c5" defer></script>
    <script type="text/javascript" src="./skin/languages.js?cacheid=fe100348" defer></script>
    <script type="text/javascript" src="./skin/viewer.js?cacheid=d0c7f567" defer></script>
    <script type="text/javascript" src="./skin/autoComplete.min.js?cacheid=1191aaaf"></script>