Merge #722: Add search bar for rpc docs

caee34d Improve searchbar ui and add noscript tag (Nima Yazdanmehr)
39d3546 Add search bar for rpc docs (Nima Yazdanmehr)

Pull request description:

  This PR is addressing the problem of finding docs for one specific rpc command by its name. In the website one can not simply find his/her desired command in the menu. One should open all the parent categories (`Blockchain`, `Control`, etc) and then use Ctrl+F to find the command.

  I have added a little javascript code to handle the string search between all commands and make this process much easier.

ACKs for top commit:
  harding:
    Tested ACK caee34d Reviewed code, tested with Chromium, Firefox with NoJS, and Firefox with JS enabled.  Made several searches and didn't see anything odd.  Ran all repository tests.

Tree-SHA512: 6958cef8ada196e1920417cc44d9012e8d58f5c11441460296fcb238880b0191dce1fcd23f87080a79acaece86bf74bad9d858df3091911c1d52c9c29592d247

Author: harding

_includes/head.html

@@ -45,3 +45,10 @@
 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/images/apple-touch-icon-72x72-precomposed.png"><!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/images/apple-touch-icon-114x114-precomposed.png"><!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/images/apple-touch-icon-144x144-precomposed.png"><!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
+
+<!-- Hide Searchbar if nojs -->
+<noscript>
+  <style>
+      #searchbar { display:none; }
+  </style>
+</noscript>

_includes/js/main.js

@@ -64,3 +64,34 @@ $(function() {
     drawer.toggleClass("js-hidden");
   });
 });
+
+// Search functionality
+var toggleDrawers = function(show){
+  $(".toc header").each(function(){
+    var header = $(this);
+    var drawer = header.find(".toc-drawer");
+    if (show) {
+      drawer.removeClass("js-hidden");
+    } else {
+      drawer.addClass("js-hidden");
+    }
+  });
+};
+
+$(function() {
+  $("#searchbar").on('input', function(){
+    var query = $(this).val();
+    if (query.length > 1) {
+      toggleDrawers(true);
+      $(".leaf-article").each(function(){
+        $(this).show();
+        if ($(this).text().indexOf(query) == -1) {
+          $(this).hide();
+        }
+      });
+    } else {
+      $(".leaf-article").each(function(){ $(this).show(); });
+      toggleDrawers(false);
+    }
+  })
+});

_layouts/doc.html

@@ -35,6 +35,7 @@ <h1>{{ custom_title | xml_escape }}</h1>
       {% if page.btcversion != "index" %}
         {% assign groups = site.doc | where:"btcversion", page.btcversion | group_by:"btcgroup" | sort: "name" %}
         <section class="toc">
+        <input id="searchbar" type="text" value="" placeholder="Search ..."/>
         {% for group in groups %}
           {% if group.name != "index" %}
             <header>
@@ -45,7 +46,7 @@ <h3 class="toc-header">
               <div class="toc-drawer js-hide-on-start">
                 <ul>
                   {% for article in group.items %}
-                    <li><a href="{{article.url}}">{{article.name}}</a></li>
+                    <li class="leaf-article"><a href="{{article.url}}">{{article.name}}</a></li>
                   {% endfor %}
                 </ul>
               </div>

_sass/elements.scss

@@ -164,3 +164,12 @@ svg:not(:root) {
 	@include rounded(4px);
 	@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
 }
+
+/*
+   Searchbar
+   ========================================================================== */
+
+#searchbar {
+  background-color: #d3d3d3;
+  border-color: #2b2b2b;
+}