Libdoc: Enhancing search #1872

- Initial implementation to search by hash - Initial styles Now search is somewhat usesable already!
robotframework · Dec 12, 2014 · 4b7b844 · 4b7b844
1 parent 9b64b68
commit 4b7b844
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 21 deletions.
diff --git a/src/robot/htmldata/libdoc/libdoc.css b/src/robot/htmldata/libdoc/libdoc.css
@@ -74,3 +74,33 @@ table.keywords td.arg {
 .doc div > *:last-child {    /* Does not work with IE8. */
     margin-bottom: 0;
 }
+#search, #open-search {
+    position: fixed;
+    bottom: 5px;
+    right: 5px;
+    z-index: 1000;
+}
+#search {
+    width:30em;
+    display: none;
+}
+#open-search {
+    font-size: 40px;
+    font-weight: bold;
+    line-height: 30px;
+    text-align: center;
+    border: 2px solid black;
+    border-radius: 4px;
+    width: 40px;
+    height: 40px;
+    background: white;
+}
+#open-search:hover {
+    background: yellow;
+}
+fieldset {
+    background: white;
+}
+#search-pattern {
+    width: 20em;
+}
diff --git a/src/robot/htmldata/libdoc/libdoc.html b/src/robot/htmldata/libdoc/libdoc.html
@@ -37,14 +37,19 @@ <h1>Opening library documentation failed</h1>
     $(document).ready(function() {
         parseTemplates();
         document.title = libdoc.name;
-        $.tmpl('base-template', libdoc).appendTo($('body'));
+        renderTemplate('base', libdoc, $('body'));
         if (libdoc.inits.length > 0) {
             renderTemplate('importing', libdoc);
         }
-        renderTemplate('shortcuts', libdoc);
-        renderTemplate('keywords', libdoc);
-        renderTemplate('footer', libdoc);
-        scrollToHash();
+        if (window.location.hash.indexOf('search?') == 1) {
+            searchByHash();
+            openSearch();
+        } else {
+            renderTemplate('shortcuts', libdoc);
+            renderTemplate('keywords', libdoc);
+            renderTemplate('footer', libdoc);
+            scrollToHash();
+        }
     });
 
     function parseTemplates() {
@@ -53,9 +58,11 @@ <h1>Opening library documentation failed</h1>
         });
     }
 
-    function renderTemplate(name, argument) {
-        var container = $('#' + name + '-container');
-        container.empty();
+    function renderTemplate(name, argument, container) {
+        if (!container) {
+            container = $('#' + name + '-container');
+            container.empty();
+        }
         $.tmpl(name + '-template', argument).appendTo(container);
     }
 
@@ -66,17 +73,44 @@ <h1>Opening library documentation failed</h1>
         }
     }
 
+    function searchByHash() {
+        // Cannot use window.location.hash because Firefox incorrectly decodes it:
+        // http://stackoverflow.com/questions/1703552/encoding-of-window-location-hash
+        var hash = window.location.href.split('#').splice(1).join('#');
+        var query = hash.slice('search?'.length);
+        var params = util.parseQueryString(query);
+        $('#search-pattern').val(params.pattern);
+        $('#include-name').prop('checked', params.name || false);
+        $('#include-args').prop('checked', params.args || false);
+        $('#include-doc').prop('checked', params.doc || false);
+        $('#search-button').click();
+    }
+
     function search(pattern, includeName, includeArgs, includeDoc) {
         var result = $.extend({}, libdoc);
         var matcher = util.Matcher('*' + pattern + '*');
         result.keywords = util.filter(result.keywords, function (kw) {
-            console.log(kw.doc);
             return (includeName && matcher.matches(kw.name) ||
                     includeArgs && matcher.matches(kw.args) ||
                     includeDoc && matcher.matches(kw.doc));
         });
         renderTemplate('shortcuts', result);
         renderTemplate('keywords', result);
+        var anchor = 'search?pattern=' + encodeURIComponent(pattern);
+        if (includeName) anchor += '&name=true';
+        if (includeArgs) anchor += '&args=true';
+        if (includeDoc) anchor += '&doc=true';
+        window.location.hash = anchor;
+    }
+
+    function openSearch() {
+        $('#search').show();
+        $('#open-search').hide();
+    }
+
+    function closeSearch() {
+        $('#search').hide();
+        $('#open-search').show();
     }
 </script>
 
@@ -87,35 +121,38 @@ <h1>${name}</h1>
     {{if scope}}<tr><th>Library scope:</th><td>${scope}</td></tr>{{/if}}
     <tr><th>Named arguments:</th><td>{{if named_args}}supported{{else}}not supported{{/if}}</td></tr>
     </table>
-    <form action="javascript:void(0)">
+    <div id="introduction-container">
+        <h2 id="Introduction">Introduction</h2>
+        <div class="doc">{{html doc}}</div>
+    </div>
+    <div id="importing-container"></div>
+    <div id="shortcuts-container"></div>
+    <div id="keywords-container"></div>
+    <div id="footer-container"></div>
+    <form id="search" action="javascript:void(0)">
         <fieldset>
             <legend>Search</legend>
             <label for="search-pattern">Pattern</label>
             <input type="text" id="search-pattern">
             <fieldset>
                 <legend>Include</legend>
-                <label for="include-name">Name</label>
                 <input type="checkbox" id="include-name" checked>
-                <label for="include-args">Arguments</label>
+                <label for="include-name">Name</label>
                 <input type="checkbox" id="include-args" checked>
-                <label for="include-doc">Documentation</label>
+                <label for="include-args">Arguments</label>
                 <input type="checkbox" id="include-doc" checked>
+                <label for="include-doc">Documentation</label>
             </fieldset>
             <input type="submit" id="search-button" value="Search"
                     onclick="search($('#search-pattern').val(),
                                     $('#include-name').prop('checked'),
                                     $('#include-args').prop('checked'),
                                     $('#include-doc').prop('checked'))">
+            <input type="button" value="Close" onclick="closeSearch()">
         </fieldset>
     </form>
-    <div id="introduction-container">
-        <h2 id="Introduction">Introduction</h2>
-        <div class="doc">{{html doc}}</div>
-    </div>
-    <div id="importing-container"></div>
-    <div id="shortcuts-container"></div>
-    <div id="keywords-container"></div>
-    <div id="footer-container"></div>
+    <!-- TODO: Placefolder until we get real icon -->
+    <div id="open-search" onclick="openSearch()">&#8981;</div>
 </script>
 
 <script type="text/x-jquery-tmpl" id="importing-template">