Add feature: live search for side nav TOC

cjaoude · cjaoude · commit 0eabe4b9ca58 · 2016-03-19T00:13:24.000-04:00
+ replace Google Search with List.js live search
+ drop 'Philosopher' font

...not sure if you would like to keep 'Philosopher' font on the hero "Codeception" text
diff --git a/_layouts/bootstrap.html b/_layouts/bootstrap.html
@@ -23,6 +23,7 @@
     <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
     <script src="/js/jquery.toc.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="/js/contributors.js" type="text/javascript" charset="utf-8"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.2.0/list.min.js"></script>
 
     <!-- Other -->
     <link title="Codeception Blog" type="application/rss+xml" rel="alternate" href="/rss.xml">
diff --git a/_layouts/doc.html b/_layouts/doc.html
@@ -16,7 +16,12 @@
   </div>
   <div class="col-sm-4 col-lg-4">
 
-   <div id="toc" class="nav"></div>
+   <div id="searchable">
+    <input type="search" class="search" placeholder="live search...">
+    <br>
+     <!-- toc.js generated nav... -->
+     <div id="toc" class="nav"></div>
+   </div> <!-- /#searchable -->
 
    <script type="text/javascript">
     $(document).ready(function () {
@@ -25,24 +30,22 @@
         'prefix': 'toc',
         'container': '#page',
         //custom function for anchor name
+        'anchorName': function(i, heading, prefix) {
           return $(heading).text().replace(/\s/g, '-').replace(/[^\w-]/g, '');
         },
       });
-    });
-  </script>
 
-  <div class="well">
-    <script>
-      (function() {
-        var cx = '009959493015473517972:mxjflnekt-y';
-        var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
-        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
-        '//www.google.com/cse/cse.js?cx=' + cx;
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
-      })();
-    </script>
-    <gcse:search></gcse:search>
-  </div>
+      // List.js
+      $('#toc > ul').addClass('list');
+      $('#toc ul.list li a').addClass('searchitem');
+      var options = {
+        valueNames: [ 'searchitem' ]
+      };
+      var userList = new List('searchable', options);
+      // end List.js
+
+    }); // docrdy
+  </script>
 
 </div>
 </div>
diff --git a/css/codeception.css b/css/codeception.css
@@ -38,7 +38,7 @@ body .hero-unit {
 }
 
 body h1, body h2, body h3, body h3 {
-	font-family: "Philosopher", "Open Sans", "Lucida Grande","Helvetica Neue",Helvetica,Arial,sans-serif;
+	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 	color: #45414B;
 }
 
@@ -299,3 +299,14 @@ ul.navbar-nav {
 		overflow: visible!important;
 	}
 }
+#searchable > .search {
+	width: 100%;
+	height: 45px;
+	color: #333;
+	text-indent: 16px;
+	border-radius: 24px;
+	border: 1px solid #ddd;
+	box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075);
+	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+	outline: none;
+}

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ body .hero-unit {`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`body h1, body h2, body h3, body h3 {`
`41`		`- font-family: "Philosopher", "Open Sans", "Lucida Grande","Helvetica Neue",Helvetica,Arial,sans-serif;`
	`41`	`+ font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;`
`42`	`42`	`color: #45414B;`
`43`	`43`	`}`
`44`	`44`
`@@ -299,3 +299,14 @@ ul.navbar-nav {`
`299`	`299`	`overflow: visible!important;`
`300`	`300`	`}`
`301`	`301`	`}`
	`302`	`+#searchable > .search {`
	`303`	`+ width: 100%;`
	`304`	`+ height: 45px;`
	`305`	`+ color: #333;`
	`306`	`+ text-indent: 16px;`
	`307`	`+ border-radius: 24px;`
	`308`	`+ border: 1px solid #ddd;`
	`309`	`+ box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075);`
	`310`	`+ transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;`
	`311`	`+ outline: none;`
	`312`	`+}`