Add 'quick nav' search box and associated results drop-down

WasabiFan · WasabiFan · commit e4b644bc90df · 2014-11-25T17:37:08.000-08:00
diff --git a/_config.yml b/_config.yml
@@ -9,17 +9,24 @@ gems:
 defaults:
   -
     scope:
-      path: "docs"
+      path: "docs/"
       type: "pages"
     values:
       layout: "docs"
       category: "docs"
+  -
+    scope:
+      path: "docs/drivers"
+      type: "pages"
+    values:
+      layout: "docs"
+      categories: "docs drivers"
   -
     scope:
       path: "docs/tutorials"
       type: "pages"
     values:
-      category: "tutorials"
+      categories: "tutorials docs"
   -
     scope:
       path: "docs/drivers"
@@ -31,7 +38,7 @@ defaults:
       path: "docs/sensors"
       type: "pages"
     values:
-      category: "sensors"
+      categories: "sensors docs"
   -
     scope:
       path: ""
diff --git a/_includes/breadcrumbs.html b/_includes/breadcrumbs.html
@@ -0,0 +1,10 @@
+﻿{% assign parent_dirs=page.url | replace_first: '/', '' | split: '/' %}
+{% assign link='/' %}
+{% for dir in parent_dirs %}
+    {% if forloop.last %}
+        {{ dir }}
+    {% else %}
+        {% assign link=link | append: dir | append: '/' %}
+        <a href="{{ link }}">{{ dir }}</a> &gt;
+    {% endif %}
+{% endfor %}
diff --git a/_includes/head.html b/_includes/head.html
@@ -4,10 +4,12 @@
     <title>{{ page.title }}</title>
     <link rel="stylesheet" href="{{ site.github.url }}/stylesheets/styles.css">
     <link rel="stylesheet" href="{{ site.github.url }}/stylesheets/pygment_trac.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
+    <script src="{{ site.github.url }}/javascripts/jquery.loadTemplate-1.4.4.min.js"></script>
     <script src="{{ site.github.url }}/javascripts/respond.js"></script>
     <script src="{{ site.github.url }}/javascripts/cards.js"></script>
     <script src="{{ site.github.url }}/javascripts/menu.js"></script>
+    <script src="{{ site.github.url }}/javascripts/search.js"></script>
     <!--[if lt IE 9]>
       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
@@ -16,4 +18,12 @@
     <![endif]-->
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 
+    <script type="text/html" id="search-result-template">
+        <div class="search-result">
+            <a data-href="href"><h4 data-content="title"></h4></a>
+            <span data-content="breadcrumbs" class="search-result-breadcrumbs"></span>
+            <span data-content="author" class="search-result-author"></span>
+        </div>
+    </script>
+
 </head>
diff --git a/_includes/header.html b/_includes/header.html
@@ -17,6 +17,31 @@
             <a href="{{ site.github.url }}/contributing" title="How to contribute to ev3dev">Contributing</a>
         </li>
         <!-- items below float right, so appear in reverse order -->
+        <li class="right headerBox" id="search-li">
+            <input type="text" id="search-input" onfocus="searchFocus()" onkeyup="searchUpdate()" placeholder="Quick Nav" onkeypress="this.onkeyup();" onpaste="this.onkeyup();" oninput="this.onkeyup();" />
+            <div id="search-dropdown">
+                <div class="search-results-container" id="search-results-docs">
+                    <h2>In docs</h2>
+                    <div data-content="docs-results">
+                        <div class="no-results-note">No results</div>
+                    </div>
+                </div>
+
+                <div class="search-results-container" id="search-results-projects">
+                    <h2>In projects</h2>
+                    <div data-content="project-results">
+                        <div class="no-results-note">No results</div>
+                    </div>
+                </div>
+
+                <div class="search-results-container" id="search-results-misc">
+                    <h2>In other pages</h2>
+                    <div data-content="misc-results">
+                        <div class="no-results-note">No results</div>
+                    </div>
+                </div>
+            </div>
+        </li>
         <li class="right button">
             <a href="https://github.com/ev3dev/ev3dev/issues" title="Found a bug? Report it here.">Issues</a>
         </li>
diff --git a/_includes/title.html b/_includes/title.html
@@ -4,8 +4,8 @@
             <img id="logo" src="https://avatars3.githubusercontent.com/u/6878323?s=140" />
         </a>
         <div id="titleHeader" class="clear">
-            <h1>{{ page.title }}</h1>
-            <p>{{ page.subtitle }}</p>
+            <h1 id="pageTitle">{{ page.title }}</h1>
+            <p id="pageSubtitle">{{ page.subtitle }}</p>
         </div>
     </div>
     <hr class="clear">
diff --git a/_layouts/docs.html b/_layouts/docs.html
@@ -6,16 +6,7 @@
 <a href="{{ site.github.repository_url }}/edit/master/{{ page.path }}">Edit on Github</a>
 </div>
 <div class="breadcrumbs">
-{% assign parent_dirs=page.url | replace_first: '/', '' | split: '/' %}
-{% assign link='/' %}
-{% for dir in parent_dirs %}
-    {% if forloop.last %}
-        {{ dir }}
-    {% else %}
-        {% assign link=link | append: dir | append: '/' %}
-        <a href="{{ link }}">{{ dir }}</a> &gt;
-    {% endif %}
-{% endfor %}
+{% include breadcrumbs.html %}
 </div>
 <hr />
 
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -10,7 +10,9 @@
     <div class="wrapper">
         <section>
             {% include title.html %}
-            {{ content }}
+            <div id="mainContent">
+                {{ content }}
+            </div>
         </section>
         {% include footer.html %}
     </div>
diff --git a/_layouts/project.html b/_layouts/project.html
@@ -5,11 +5,11 @@
 <div class="breadcrumbs">
     <a href="{{ site.github.url }}/projects">&lt; Back to Projects Gallery</a>
 </div>
-<div class="project-content-wrapper">
+<div class="content-wrapper-for-sidebar">
     {% include youtube-embed.html %}
     {{ content }}
 </div>
-<div class="project-sidebar">
+<div class="page-sidebar">
     <h3>
         Project Info
     </h3>
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -1,5 +1,6 @@
 ---
 title: Getting Started with ev3dev
+categories: docs getting-started
 ---
 
 * Table of Contents
diff --git a/javascripts/jquery.loadTemplate-1.4.4.min.js b/javascripts/jquery.loadTemplate-1.4.4.min.js
diff --git a/javascripts/search.js b/javascripts/search.js
@@ -0,0 +1,183 @@
+---
+layout: 
+---
+
+var searchData;
+var dataLoading = false;
+var itemLoadTimer;
+
+var projectResultArea, docResultArea, miscResultArea;
+$(document).ready(function () {
+    docResultArea = $('#search-results-docs > div');
+    projectResultArea = $('#search-results-projects > div');
+    miscResultArea = $('#search-results-misc > div');
+    
+    var searchQuery = getQueryParam("search");
+    if (searchQuery != undefined && searchQuery != "") { //If a search query was provided in the query strings, execute the search
+        loadSearchData(function() {
+            searchUpdate();
+        });
+
+        $("#search-input").val(searchQuery);
+    }
+
+    //Close the search results if the input and results lose focus
+    $('body').click(function(event) {
+        //Check if the click registered on a non search-related element 
+        if(!($(event.target).parents('#search-li').length)) {
+            hideSearchDropdown();
+        }
+    });
+});
+
+Array.prototype.clean = function(deleteValue) {
+    if(deleteValue == undefined)
+    deleteValue = '';
+    for (var i = 0; i < this.length; i++) {
+        if (this[i] == deleteValue) {
+            this.splice(i, 1);
+            i--;
+        }
+    }
+    return this;
+};
+
+//Load the search data if the user seems like they intend to enter a query
+//If they have already entered text, open the suggestions
+function searchFocus() {
+    if (!searchData)
+        loadSearchData(function() {
+            searchUpdate();
+        });
+    else
+        searchUpdate();
+}
+
+//Loads the data from the JSON document
+function loadSearchData(callback) {
+    if (dataLoading)
+        return;
+
+    dataLoading = true;
+    $.getJSON("{{ site.github.url }}/search-index.json", function (e) {
+        dataLoading = false;
+        searchData = e.slice(0, -1);
+
+        if(callback != undefined)
+            callback();
+    });
+}
+
+//Function to actually execute the search (currently only searches title)
+function findResults(term) {
+    if (!searchData)
+        return undefined;
+
+    //Split by word
+    var terms = term.toLowerCase().split(/\W/g);
+    terms = terms.clean();
+	
+    var result = [];
+    if(terms.length <= 0)
+        return result;
+
+    //Iterate over the searchable data
+    for (var i in searchData) {
+        //Skip this item if there is no title
+        if(searchData[i].title == undefined)
+            continue;
+
+        var numMatches = 0;
+        var title = searchData[i].title.toLowerCase();
+        
+        //Count the number of terms (words) that are present in the title
+        for(var termIndex = 0; termIndex < terms.length; termIndex++) {
+            if (title.search(terms[termIndex]) != -1)
+                numMatches++; 
+        }
+
+        //If all terms match, this one is a hit
+        if(numMatches >= terms.length)
+            result.push(searchData[i]);
+    }
+
+    return result;
+}
+
+//Function to read query parameters
+function getQueryParam(name) {
+    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
+        results = regex.exec(location.search);
+    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+}
+
+//Updates the search function as a whole, and manages the visuals as necessary
+function searchUpdate() {
+    var searchString = $("#search-input").val();
+
+    if (searchString == undefined || searchString.length == 0) {
+        hideSearchDropdown();
+    }
+    else {
+        doSearch(searchString);
+    }
+}
+
+//Executes a search and displays the results
+function doSearch(query) {
+
+    //Stop all animations
+    if(itemLoadTimer)
+        clearTimeout(itemLoadTimer);
+    $( "#search-dropdown .search-result" ).stop(false, true);
+    $( "#search-dropdown .search-result" ).show();
+    
+    //Clear existing results
+    docResultArea.children('.search-result').remove();
+    projectResultArea.children('.search-result').remove();
+    miscResultArea.children('.search-result').remove();
+
+    //Start the dropdown box's 'open' animation
+    if (!$('#search-dropdown').is(":visible"))
+        $('#search-dropdown').slideDown(400, function() {
+        });
+
+    var results = findResults(query);
+
+    //Load and animate the search results (use good JavaScript practices and do it recursively using acync callbacks)
+    function loadItem(i) {
+        var resultArea = miscResultArea;
+
+        var categoryTags = results[i].category.split(' ');
+        if(categoryTags.indexOf('docs') != -1)
+            resultArea = docResultArea;
+        else if(categoryTags.indexOf('projects') != -1)
+            resultArea = projectResultArea;
+
+        resultArea.loadTemplate($('#search-result-template'), results[i], { append: true} );
+
+        resultArea.children().last().show(400);
+        if(i < results.length - 1)
+            itemLoadTimer = setTimeout(function() {
+                loadItem(i + 1)
+            }, 100);
+    }
+
+    if(results.length > 0)
+        loadItem(0);
+}
+
+
+//Hides the search dropdown and ties up any loose animations
+function hideSearchDropdown() {
+    if(itemLoadTimer)
+        clearTimeout(itemLoadTimer);
+    $("#search-dropdown .search-result").stop(false, true);
+    $("#search-dropdown .search-result").show();
+
+    if ($('#search-dropdown').is(":visible")) {
+        $('#search-dropdown').slideUp(400, function() {
+        });
+    }
+}
diff --git a/search-index.json b/search-index.json
@@ -0,0 +1,30 @@
+---
+layout:
+---
+[
+    {% for post in site.posts %}
+    {
+      "title"    : "{{ post.title }}",
+        "href": "{{ site.github.url }}{{ post.url }}",
+        "author":  "{{ post.author | join: ', ' }}",
+        "date": {
+            "day": "{{ post.date | date: "%d" }}",
+            "month": "{{ post.date | date: "%B" }}",
+            "year": "{{ post.date | date: "%Y" }}"
+        },
+        "loopid" : "post-{{ forloop.index }}",
+        "category": "{{ post.categories }}"
+    },
+    {% endfor %}    
+    {% for page in site.pages %}
+    {
+      "title"    : "{{ page.title }}",
+      "href"     : "{{ site.github.url }}{{ page.url }}",
+      "loopid": "page-{{ forloop.index }}",
+      "category": "{{ page.categories }}",
+      {% assign parent_dirs=page.url | replace_first: '/', '' | split: '/' %}
+      "breadcrumbs": "{{ parent_dirs | join: ' > ' }}"
+    },
+    {% endfor %}
+    false    
+]
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
