Enabled searchbox in the iframe-based viewer

This change includes a hack in the /search API endpoint. Now if it is invoked with the mode=raw parameter then 1. the taskbar in its response is disabled, 2. all links are generated for to the raw variants of article URLs.
kiwix · Mar 21, 2022 · 693cb82 · 693cb82
1 parent 58efab5
commit 693cb82
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 17 deletions.
diff --git a/include/search_renderer.h b/include/search_renderer.h
@@ -99,6 +99,11 @@ class SearchRenderer
     this->pageLength  = pageLength;
   }
 
+  /**
+   * produce results for display in an external viewer
+   */
+  void setRawMode(bool enable);
+
   /**
    * Generate the html page with the resutls of the search.
    */
@@ -113,6 +118,7 @@ class SearchRenderer
   std::string searchPattern;
   std::string protocolPrefix;
   std::string searchProtocolPrefix;
+  bool rawMode = false;
   unsigned int pageLength;
   unsigned int estimatedResultCount;
   unsigned int resultStart;

diff --git a/src/search_renderer.cpp b/src/search_renderer.cpp
@@ -86,6 +86,11 @@ void SearchRenderer::setSearchProtocolPrefix(const std::string& prefix)
   this->searchProtocolPrefix = prefix;
 }
 
+void SearchRenderer::setRawMode(bool enable)
+{
+  this->rawMode = enable;
+}
+
 std::string SearchRenderer::getHtml()
 {
   kainjow::mustache::data results{kainjow::mustache::data::type::list};
@@ -96,7 +101,11 @@ std::string SearchRenderer::getHtml()
     result.set("url", it.getPath());
     result.set("snippet", it.getSnippet());
     std::string zim_id(it.getZimId());
-    result.set("resultContentId", mp_nameMapper->getNameForId(zim_id));
+    std::string resultContentId = mp_nameMapper->getNameForId(zim_id);
+    if ( this->rawMode ) {
+      resultContentId += "/content";
+    }
+    result.set("resultContentId", resultContentId);
     if (!mp_library) {
       result.set("bookTitle", kainjow::mustache::data(false));
     } else {
@@ -146,6 +155,14 @@ std::string SearchRenderer::getHtml()
   std::string template_str = RESOURCE::templates::search_result_html;
   kainjow::mustache::mustache tmpl(template_str);
 
+  std::string protocolPrefixTweaked = this->protocolPrefix;
+  std::string searchProtocolPrefixTweaked = this->searchProtocolPrefix;
+
+  if ( this->rawMode ) {
+    protocolPrefixTweaked += "raw/";
+    searchProtocolPrefixTweaked += "mode=raw&";
+  }
+
   kainjow::mustache::data allData;
   allData.set("results", results);
   allData.set("pages", pages);
@@ -158,8 +175,8 @@ std::string SearchRenderer::getHtml()
   allData.set("resultEnd", to_string(min(resultEnd, estimatedResultCount)));
   allData.set("pageLength", to_string(pageLength));
   allData.set("resultLastPageStart", to_string(lastPageStart));
-  allData.set("protocolPrefix", this->protocolPrefix);
-  allData.set("searchProtocolPrefix", this->searchProtocolPrefix);
+  allData.set("protocolPrefix", protocolPrefixTweaked);
+  allData.set("searchProtocolPrefix", searchProtocolPrefixTweaked);
   allData.set("contentId", this->searchContent);
 
   std::stringstream ss;

diff --git a/src/server/internalServer.cpp b/src/server/internalServer.cpp
@@ -630,7 +630,9 @@ std::unique_ptr<Response> InternalServer::handle_search(const RequestContext& re
     renderer.setProtocolPrefix(m_root + "/");
     renderer.setSearchProtocolPrefix(m_root + "/search?");
     renderer.setPageLength(pageLength);
-    auto response = ContentResponse::build(*this, renderer.getHtml(), "text/html; charset=utf-8");
+    const bool rawMode = rawModeWasRequested(request);
+    renderer.setRawMode(rawMode);
+    auto response = ContentResponse::build(*this, renderer.getHtml(), "text/html; charset=utf-8", /*isHomePage=*/false, rawMode);
     response->set_taskbar(bookName, archive ? getArchiveTitle(*archive) : "");
 
     return std::move(response);

diff --git a/static/skin/viewer.html b/static/skin/viewer.html
@@ -16,15 +16,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="{{root}}/skin/caret.png" alt=""></label>
             <div class="kiwix_button_cont">
@@ -76,13 +73,24 @@
         if ( url == '' ) {
           return '/blank';
         }
+
+        if ( url.startsWith('search?') ) {
+          const p = new URLSearchParams(url.slice("search?".length));
+          p.set('mode', 'raw');
+          return `${root}/search?${p.toString()}`;
+        }
+
         const urlComponents = url.split('/');
         const book = urlComponents[0];
         const path = urlComponents.slice(1).join('/');
         return '/raw/' + book + '/content/' + path;
       }
 
       function getBookFromPublicUrl(url) {
+        if ( url.startsWith('search?') ) {
+          const p = new URLSearchParams(url.slice("search?".length));
+          return p.get('content');
+        }
         return url.split('/')[0];
       }
 
@@ -100,6 +108,12 @@
         cf.src = `${root}/random?content=${currentBook}&mode=raw`;
       }
 
+      function performSearch() {
+        const searchbox = document.getElementById('kiwixsearchbox');
+        const q = encodeURI(searchbox.value);
+        cf.src = `${root}/search?content=${currentBook}&pattern=${q}&mode=raw`;
+      }
+
       function setCurrentBook(book, title) {
         currentBook = book;
         currentBookTitle = title;
@@ -117,7 +131,11 @@
       function updateCurrentBookIfNeeded(url) {
         const book = getBookFromPublicUrl(url);
         if ( currentBook != book ) {
-          updateCurrentBook(book);
+          if ( book == null ) {
+            noCurrentBook();
+          } else {
+            updateCurrentBook(book);
+          }
         }
       }
 
@@ -134,10 +152,17 @@
         });
       }
 
-      function rawUrl2PublicUrl(url) {
+      function rawUrl2PublicUrl(url, query) {
         if ( url == '/blank' ) {
           return '';
         }
+
+        if ( url == `${root}/search` ) {
+          const p = new URLSearchParams(query);
+          p.delete('mode');
+          return `search?${p.toString()}`;
+        }
+
         const urlComponents = url.split('/');
         const book = urlComponents[2];
         const path = urlComponents.slice(4).join('/');
@@ -167,11 +192,12 @@
       function handle_content_url_change() {
         document.title = cf.contentDocument.title;
         const iframeContentUrl = cf.contentWindow.location.pathname;
-        console.log('handle_content_url_change: ' + iframeContentUrl);
+        const iframeContentQuery = cf.contentWindow.location.search;
+        console.log('handle_content_url_change: ' + cf.contentWindow.location.href);
         // FIXME: iframeContentUrl is assumed to be a /raw URL
         // FIXME: however it can be a public URL because of a redirection.
         // FIXME: In this case the legacy viewer is loaded inside iframe
-        const newHash = '#' + rawUrl2PublicUrl(iframeContentUrl);
+        const newHash = '#' + rawUrl2PublicUrl(iframeContentUrl, iframeContentQuery);
         const viewerURL = location.origin + location.pathname + location.search;
         window.location.replace(viewerURL + newHash);
       };

diff --git a/static/skin/viewer_taskbar.js b/static/skin/viewer_taskbar.js
@@ -10,8 +10,8 @@ jq(document).ready(() => {
         const root = p.slice(0, p.length - '/viewer'.length);
 
         const bookName = location.hash.slice(1).split('/')[0];
+        const contentIframe = document.getElementById('content_iframe');
 
-/*
         $( "#kiwixsearchbox" ).autocomplete({
 
             source: `${root}/suggest?content=${bookName}`,
@@ -28,7 +28,7 @@ jq(document).ready(() => {
 
             select: function(event, ui) {
                 if (ui.item.kind === 'path') {
-                    window.location.href = `${root}/${bookName}/${encodeURI(ui.item.path)}`;
+                    contentIframe.src = `${root}/raw/${bookName}/content/${encodeURI(ui.item.path)}`;
                 } else {
                     $( "#kiwixsearchbox" ).val(ui.item.value);
                     $( "#kiwixsearchform" ).submit();
@@ -40,10 +40,8 @@ jq(document).ready(() => {
               .append( item.label )
               .appendTo( ul );
         };
-*/
 
         /* cybook hack */
-/*
         if (navigator.userAgent.indexOf("bookeen/cybook") != -1) {
             $("html").addClass("cybook");
         }
@@ -94,6 +92,5 @@ jq(document).ready(() => {
                 $('label[for="kiwix_button_show_toggle"], .kiwix_button_cont').removeClass('searching');
             }
         });
-*/
     })(jq);
 })