Improve search logic (#316)

WasabiFan · web-flow · commit 6b8368b689eb · 2016-12-22T02:52:21.000-05:00
- Display warning when search data is unavailable - Retry downloading search index - Auto-select first option on "enter" press - Remove needless animations Fixes #259
diff --git a/_includes/page-core/page-header.html b/_includes/page-core/page-header.html
@@ -72,6 +72,13 @@
                     <form class="navbar-form navbar-right dropdown" onsubmit="return false;">
                         <input type="text" id="search-input" class="form-control" placeholder="Quick nav" autocomplete="off" />
                         <div class="dropdown-menu" id="search-dropdown">
+                            <div class="search-results-container" id="search-no-data-warning">
+                                {% include /style/icon.html type="warning" class="heading-icon" %}
+                                We were unable to retrieve search data from the
+                                server. Make sure that JavaScript is enabled and
+                                that nothing is blocking network access.
+                            </div>
+
                             <div class="search-results-container" id="search-results-docs">
                                 <h2>In docs</h2>
                                 <div data-content="docs-results">
diff --git a/_includes/style/icon.html b/_includes/style/icon.html
@@ -5,5 +5,6 @@
 Parameters:
 
 type: A name that matches an alert. Valid values are "success", info", "warning" and "danger".
+class: A string to be used for additional "class" values (optional)
 
-{% endcomment %}{% assign name = include.type %}{% if name == "success" %}{% assign name = "ok" %}{% elsif name == "info" %}{% assign name = "info-sign" %}{% elsif name == "warning" %}{% assign name = "alert" %}{% elsif name == "danger" %}{% assign name = "exclamation-sign" %}{% endif %}<span class="glyphicon glyphicon-{{ name }}" aria-hidden="true"></span>
+{% endcomment %}{% assign name = include.type %}{% if name == "success" %}{% assign name = "ok" %}{% elsif name == "info" %}{% assign name = "info-sign" %}{% elsif name == "warning" %}{% assign name = "alert" %}{% elsif name == "danger" %}{% assign name = "exclamation-sign" %}{% endif %}<span class="glyphicon glyphicon-{{ name }} {{ include.class }}" aria-hidden="true"></span>
diff --git a/javascripts/search.js b/javascripts/search.js
@@ -1,7 +1,7 @@
 var searchData;
-var searchData;
 var dataLoading = false;
 var itemLoadTimer, searchKeystrokeEventTimer;
+var autoselectedSearchResult = null;
 
 var projectResultArea, docResultArea, newsResultArea, miscResultArea;
 $(document).ready(function () {
@@ -11,7 +11,7 @@ $(document).ready(function () {
     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
+    if (searchQuery) { //If a search query was provided in the query strings, execute the search
         loadSearchData(function () {
             searchUpdate();
         });
@@ -29,9 +29,17 @@ $(document).ready(function () {
 
     $('#search-input')
         .focus(searchFocus)
-        .keyup(searchTextChanged);
-
+        .keyup(function(event) {
+            if(event.which == 13) {
+                if(searchKeystrokeEventTimer == undefined && autoselectedSearchResult)
+                    window.location = autoselectedSearchResult;
+                return;
+            }
+            
+            searchTextChanged()
+        });
 
+    $('#search-no-data-warning').hide();
 });
 
 Array.prototype.clean = function (deleteValue) {
@@ -68,24 +76,34 @@ function searchTextChanged() {
 }
 
 //Loads the data from the JSON document
-function loadSearchData(callback) {
+function loadSearchData(callback, numRetries) {
     if (dataLoading)
         return;
 
     dataLoading = true;
-    $.getJSON("/search-index.json", function (e) {
+    $.getJSON("/search-index.json")
+    .done(function(loadedData) {
         dataLoading = false;
-        searchData = e.slice(0, -1);
+        searchData = loadedData.slice(0, -1);
+        for(var dataIndex = 0; dataIndex < searchData.length; dataIndex++) {
+            searchData[dataIndex].category = searchData[dataIndex].category.split(' ');
+        }
 
         if (callback != undefined)
             callback();
+    })
+    .fail(function(error) {
+        dataLoading = false;
+
+        if(numRetries == undefined || numRetries > 0)
+            loadSearchData(callback, (Number(numRetries) || 3) - 1)
     });
 }
 
 //Function to actually execute the search (currently only searches title)
 function findResults(term) {
     if (!searchData)
-        return undefined;
+        return null;
 
     //Split by word
     var terms = term.toLowerCase().split(/\W/g);
@@ -153,38 +171,45 @@ function doSearch(query) {
     newsResultArea.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);
+    $('#search-no-data-warning').toggle(!results);
+    
+    docResultArea.parent().toggle(!!results);
+    projectResultArea.parent().toggle(!!results);
+    newsResultArea.parent().toggle(!!results);
+    miscResultArea.parent().toggle(!!results);
+    $('#search-dropdown').css('height', results ? '' : 'auto' );
 
-    //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;
-        else if (categoryTags.indexOf('news') != -1)
-            resultArea = newsResultArea;
-
-        resultArea.loadTemplate($('#search-result-template'), results[i], { append: true });
-
-        resultArea.children().last().show(20);
-
-        if (i < results.length - 1) {
-            itemLoadTimer = setTimeout(function () {
-                loadItem(i + 1)
-            }, 5);
-        }
+    //Start the dropdown box's 'open' animation
+    if (!$('#search-dropdown').is(":visible"))
+        $('#search-dropdown').slideDown(400);
+
+    if(results && results.length > 0) {
+        autoselectedSearchResult = null;
+
+        (function loadItem(startIndex) {
+            var resultArea = miscResultArea;
+
+            var categoryTags = results[startIndex].category;
+            if (categoryTags.indexOf('docs') != -1)
+                resultArea = docResultArea;
+            else if (categoryTags.indexOf('projects') != -1)
+                resultArea = projectResultArea;
+            else if (categoryTags.indexOf('news') != -1)
+                resultArea = newsResultArea;
+
+            resultArea.loadTemplate($('#search-result-template'), results[startIndex], { append: true });
+
+            if (startIndex < results.length - 1) {
+                itemLoadTimer = setTimeout(function () {
+                    loadItem(startIndex + 1)
+                }, 0);
+            }
+            else {
+                autoselectedSearchResult = $('.search-result a').first().attr('href');
+            }
+        })(0)
     }
-
-    if (results.length > 0)
-        loadItem(0);
 }
 
 
diff --git a/stylesheets/search.scss b/stylesheets/search.scss
@@ -26,13 +26,9 @@
     margin-left: 20px;
 }
 
-.search-result {
-    display: none;
-    
-    h4 {
-        font-size: large;
-        margin-bottom: 0;
-    }
+.search-result h4 {
+    font-size: large;
+    margin-bottom: 0;
 }
 
 .search-result > div:empty {
