Enabled searchbox in the iframe-based viewer

Known issues:

- the placeholder text in the searchbox is incorrect

static/skin/viewer_taskbar.js

@@ -42,11 +42,13 @@ document.addEventListener('DOMContentLoaded', function () {
 
   const bookName = location.hash.slice(1).split('/')[0];
 
-/*
+  const kiwixSearchBox = document.querySelector('#kiwixsearchbox');
+  const kiwixSearchFormWrapper = document.querySelector('.kiwix_searchform');
+
   const autoCompleteJS = new autoComplete(
     {
       selector: "#kiwixsearchbox",
-      placeHolder: document.querySelector("#kiwixsearchbox").title,
+      placeHolder: kiwixSearchBox.title,
       threshold: 1,
       debounce: 300,
       data : {
@@ -80,7 +82,7 @@ document.addEventListener('DOMContentLoaded', function () {
           } else {
             searchLink = `${root}/search?content=${encodeURIComponent(bookName)}&pattern=${encodeURIComponent(htmlDecode(data.value.value))}`;
           }
-          item.innerHTML = `<a class="suggest" href="${searchLink}">${htmlDecode(data.value.label)}</a>`;
+          item.innerHTML = `<a class="suggest" href="javascript:gotoUrl('${searchLink}')">${htmlDecode(data.value.label)}</a>`;
         },
         highlight: "autoComplete_highlight",
         selected: "autoComplete_selected"
@@ -90,23 +92,21 @@ document.addEventListener('DOMContentLoaded', function () {
 
   document.querySelector('#kiwixsearchform').addEventListener('submit', function(event) {
     try {
-      const selectedElemLink = document.querySelector('.autoComplete_selected > a').href;
-      if (selectedElemLink) {
+      const selectedElem = document.querySelector('.autoComplete_selected > a');
+      if (selectedElem) {
         event.preventDefault();
-        window.location = selectedElemLink;
+        selectedElem.click();
       }
     } catch (err) {}
   });
 
-  const kiwixSearchBox = document.querySelector('#kiwixsearchbox');
-  const kiwixSearchForm = document.querySelector('.kiwix_searchform');
   kiwixSearchBox.addEventListener('focus', () => {
-      kiwixSearchForm.classList.add('full_width');
+      kiwixSearchFormWrapper.classList.add('full_width');
       document.querySelector('label[for="kiwix_button_show_toggle"]').classList.add('searching');
       document.querySelector('.kiwix_button_cont').classList.add('searching');
   });
   kiwixSearchBox.addEventListener('blur', () => {
-      kiwixSearchForm.classList.remove('full_width');
+      kiwixSearchFormWrapper.classList.remove('full_width');
       document.querySelector('label[for="kiwix_button_show_toggle"]').classList.remove('searching');
       document.querySelector('.kiwix_button_cont').classList.remove('searching');
   });
@@ -119,5 +119,4 @@ document.addEventListener('DOMContentLoaded', function () {
   if (document.body.clientWidth < 520) {
     setupAutoHidingOfTheToolbar();
   }
-  */
 });

static/viewer.html

@@ -14,15 +14,12 @@
     <span class="kiwix">
       <span id="kiwixtoolbar" class="ui-widget-header">
         <div class="kiwix_centered">
-          <!--
           <div class="kiwix_searchform">
-            <form class="kiwixsearch" method="GET" action="{{root}}/search" id="kiwixsearchform">
-              {{#hascontent}}<input type="hidden" name="content" value="{{content}}" />{{/hascontent}}
+            <form class="kiwixsearch" method="GET" action="javascript:performSearch()" id="kiwixsearchform">
               <label for="kiwixsearchbox">&#x1f50d;</label>
               <input autocomplete="off" class="ui-autocomplete-input" id="kiwixsearchbox" name="pattern" type="text" title="Search '{{title}}'" aria-label="Search '{{title}}'">
             </form>
           </div>
-          -->
             <input type="checkbox" id="kiwix_button_show_toggle">
             <label for="kiwix_button_show_toggle"><img src="./skin/caret.png?KIWIXCACHEID" alt=""></label>
             <div class="kiwix_button_cont">
@@ -74,6 +71,10 @@
           return blankPageUrl;
         }
 
+        if ( url.startsWith('search?') ) {
+          return `${root}/${url}`;
+        }
+
         return `${root}/content/${url}`;
       }
 
@@ -82,6 +83,10 @@
           return null;
         }
 
+        if ( url.startsWith('search?') ) {
+          const p = new URLSearchParams(url.slice("search?".length));
+          return p.get('books.name');
+        }
         return url.split('/')[0];
       }
 
@@ -95,8 +100,18 @@
         location.hash = currentBook + '/';
       }
 
+      function gotoUrl(url) {
+        cf.src = url;
+      }
+
       function gotoRandomPage() {
-        cf.src = `${root}/random?content=${currentBook}`;
+        gotoUrl(`${root}/random?content=${currentBook}`);
+      }
+
+      function performSearch() {
+        const searchbox = document.getElementById('kiwixsearchbox');
+        const q = encodeURIComponent(searchbox.value);
+        gotoUrl(`${root}/search?books.name=${currentBook}&pattern=${q}`);
       }
 
       function setCurrentBook(book, title) {
@@ -105,6 +120,9 @@
         homeButton.title = `Go to the main page of '${title}'`;
         homeButton.setAttribute("aria-label", homeButton.title);
         homeButton.innerHTML = `<button>${title}</button>`;
+        const searchbox = document.getElementById('kiwixsearchbox');
+        searchbox.title = `Search '${title}'`;
+        searchbox.setAttribute("aria-label", searchbox.title);
         bookUIGroup.style.display = 'inline';
       }
 
@@ -138,11 +156,15 @@
         }
       }
 
-      function iframeUrl2UserUrl(url) {
+      function iframeUrl2UserUrl(url, query) {
         if ( url == blankPageUrl ) {
           return '';
         }
 
+        if ( url == `${root}/search` ) {
+          return `search${query}`;
+        }
+
         url = url.slice(root.length);
 
         return url.split('/').slice(2).join('/');
@@ -171,8 +193,9 @@
       function handle_content_url_change() {
         document.title = cf.contentDocument.title;
         const iframeContentUrl = cf.contentWindow.location.pathname;
-        console.log('handle_content_url_change: ' + iframeContentUrl);
-        const newHash = '#' + iframeUrl2UserUrl(iframeContentUrl);
+        const iframeContentQuery = cf.contentWindow.location.search;
+        console.log('handle_content_url_change: ' + cf.contentWindow.location.href);
+        const newHash = '#' + iframeUrl2UserUrl(iframeContentUrl, iframeContentQuery);
         const viewerURL = location.origin + location.pathname + location.search;
         window.location.replace(viewerURL + newHash);
       };

test/server.cpp

@@ -202,11 +202,10 @@ R"EXPECTEDRESULT(                                <img src="../skin/download.png?
       /* url */ "/ROOT/viewer",
 R"EXPECTEDRESULT(    <link type="text/css" href="./skin/taskbar.css?cacheid=26082885" rel="Stylesheet" />
     <link type="text/css" href="./skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
-    <script type="text/javascript" src="./skin/viewer_taskbar.js?cacheid=5d6c2a30" defer></script>
+    <script type="text/javascript" src="./skin/viewer_taskbar.js?cacheid=9d78a751" defer></script>
     <script type="text/javascript" src="./skin/autoComplete.min.js?cacheid=1191aaaf"></script>
             <label for="kiwix_button_show_toggle"><img src="./skin/caret.png?cacheid=22b942b4" alt=""></label>
-          return '/skin/blank.html';
-        if ( url == '/skin/blank.html' ) {
+      const blankPageUrl = `${root}/skin/blank.html`;
 )EXPECTEDRESULT"
     },
     {