Enabled home button in the iframe-based viewer

static/viewer.html

@@ -27,13 +27,16 @@
             <label for="kiwix_button_show_toggle"><img src="./skin/caret.png?KIWIXCACHEID" alt=""></label>
             <div class="kiwix_button_cont">
                 <a id="kiwix_serve_taskbar_library_button" title="Go to welcome page" aria-label="Go to welcome page" href="#"><button>&#x1f3e0;</button></a>
+              <span id="kiwix_serve_taskbar_book_ui_group">
+                <a id="kiwix_serve_taskbar_home_button"
+                   title="Go to the main page of the current book"
+                   aria-label="Go to the main page of the current book"
+                   onclick="gotoMainPageOfCurrentBook()"></a>
               <!--
-              {{#hascontent}}
-              <a id="kiwix_serve_taskbar_home_button" title="Go to the main page of '{{title}}'" aria-label="Go to the main page of '{{title}}'" href="{{root}}/{{content}}/"><button>{{title}}</button></a>
               <a id="kiwix_serve_taskbar_random_button" title="Go to a randomly selected page" aria-label="Go to a randomly selected page"
                 href="{{root}}/random?content={{#urlencoded}}{{{content}}}{{/urlencoded}}"><button>&#x1F3B2;</button></a>
-              {{/hascontent}}
               -->
+              </span>
             </div>
         </div>
       </span>
@@ -64,6 +67,63 @@
         return `/content/${url}`;
       }
 
+      function getBookFromUserUrl(url) {
+        if ( url == '' ) {
+          return null;
+        }
+
+        return url.split('/')[0];
+      }
+
+      let currentBook = null;
+      let currentBookTitle = null;
+
+      const bookUIGroup = document.getElementById('kiwix_serve_taskbar_book_ui_group');
+      const homeButton = document.getElementById('kiwix_serve_taskbar_home_button');
+
+      function gotoMainPageOfCurrentBook() {
+        location.hash = currentBook + '/';
+      }
+
+      function setCurrentBook(book, title) {
+        currentBook = book;
+        currentBookTitle = title;
+        homeButton.title = `Go to the main page of '${title}'`;
+        homeButton.setAttribute("aria-label", homeButton.title);
+        homeButton.innerHTML = `<button>${title}</button>`;
+        bookUIGroup.style.display = 'inline';
+      }
+
+      function noCurrentBook() {
+        currentBook = null;
+        currentBookTitle = null;
+        bookUIGroup.style.display = 'none';
+      }
+
+      function updateCurrentBookIfNeeded(userUrl) {
+        const book = getBookFromUserUrl(userUrl);
+        if ( currentBook != book ) {
+          updateCurrentBook(book);
+        }
+      }
+
+      function updateCurrentBook(book) {
+        if ( book == null ) {
+          noCurrentBook();
+        } else {
+          fetch(`./raw/${book}/meta/Title`).then(async (resp) => {
+            if ( resp.ok ) {
+              setCurrentBook(book, await resp.text());
+            } else {
+              noCurrentBook();
+            }
+          }).catch((err) => {
+            console.log("Error fetching book title: " + err);
+            noCurrentBook();
+          });
+        }
+      }
+
       function iframeUrl2UserUrl(url) {
         if ( url == '/skin/blank.html' ) {
           return '';
@@ -80,8 +140,9 @@
       window.onresize = handle_visual_viewport_change;
 
       function handle_location_hash_change() {
-        const hash = window.location.hash;
+        const hash = window.location.hash.slice(1);
-        const iframeContentUrl = userUrl2IframeUrl(hash.slice(1));
+        updateCurrentBookIfNeeded(hash);
+        const iframeContentUrl = userUrl2IframeUrl(hash);
         console.log("handle_location_hash_change: " + hash);
         if ( iframeContentUrl != cf.contentWindow.location.pathname ) {
           cf.contentWindow.location.replace(iframeContentUrl);