Initial pass of autocomplete; removal of detritus (docker#723)

* Initial pass of autocomplete; removal of detritus * Update menu.js * Added arrow-based navigation * CSS fixes * Add ranking to autocomplete result matching * Shorten 'see all' text * Filter for less-than-three
seanf · Dec 7, 2016 · 53ec54f · 53ec54f
1 parent 04f4cef
commit 53ec54f
Show file tree

Hide file tree

Showing 7 changed files with 259 additions and 145 deletions.
diff --git a/_layouts/docs.html b/_layouts/docs.html
@@ -255,8 +255,11 @@
 						<div class="hidden-xs hidden-sm col-md-2 col-xl-1 tableofcontents_section">
                 <section class="section" id="TableOfContentsSection">
 						    <span class="title_section">
-								  <form class="search-form form-inline ng-pristine ng-valid" action="/search/">
-								    <span class="algolia-autocomplete" style="position: relative; display: inline-block; direction: ltr;"><input class="search-field form-control ds-input" id="st-search-input" value="" name="q" placeholder="Search the docs" type="search" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: Geomanist, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre><span class="ds-dropdown-menu" style="position: absolute; top: 100%; z-index: 100; left: 0px; right: auto; display: none;"><div class="ds-dataset-0"></div></span></span>
+								  <form class="search-form form-inline ng-pristine ng-valid" id="searchForm" action="/search/">
+											<input class="search-field form-control ds-input" id="st-search-input" value="" name="q" placeholder="Search the docs" type="search" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;">
+											<div id="autocompleteContainer">
+			                	<div id="autocompleteResults"></div>
+			                </div>
 								    <button type="submit" class="search-submit btn btn-default">Search</button>
 								  </form>
 						    </span>

diff --git a/allpagelinks.md b/allpagelinks.md
@@ -1,5 +1,6 @@
 ---
 title: All Page Links
+hide_from_sitemap: true
 ---
 
 {% assign sorted_pages = site.pages | sort:"path" %}

diff --git a/css/documentation.css b/css/documentation.css
@@ -1,5 +1,64 @@
 /* FIXUP allcss.css */
 /* @media screen and (max-width: 1199px) */
+
+.autocompleteSelected {
+  background-color: #f5f5f5;
+}
+.autocompleteList
+{
+  list-style-type: none;
+  width: 400px;
+  padding:0px;
+  margin-bottom: 0px;
+}
+.autoCompleteResult {
+  border-bottom: 1px solid #6db9d1;
+  padding-bottom: 10px;
+}
+#autocompleteShowAll {
+  padding-bottom: 10px;
+}
+.autocompleteList li {
+  width: 380px;
+  border: 0px;
+  padding-right: 20px;
+  margin: 0px;
+}
+.autocompleteTitle  {
+  /* font-weight: bold; */
+  padding-top: 10px !important;
+}
+.autocompleteUrl  {
+  font-size: 9px;
+  color: green;
+  padding-left: 10px;
+}
+.autocompleteDescription  {
+  padding-left: 10px;
+  font-size: 12px;
+}
+.autocompleteKeywords, .autocompleteBreadcrumb  {
+  font-size: 9px;
+  padding-left: 10px;
+}
+
+#autocompleteContainer {
+  position: relative;
+}
+
+#autocompleteResults {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  background: #ffffff;
+  background-color: #FFFFFF;
+  width: 400px;
+  border-radius: 3px;
+  border: 1px solid #6db9d1;
+}
+
 .dockercon16 section.title_section, header.main-header::after {
     background-position: initial;
 }

diff --git a/js/analytics.js b/js/analytics.js
diff --git a/js/gtm.js b/js/gtm.js
diff --git a/js/menu.js b/js/menu.js
@@ -1,4 +1,46 @@
-var tocData;
+var metadata;
+var autoCompleteShowing = false;
+var displayingAutcompleteResults = new Array();
+var autoCompleteShowingID = 0;
+var lastSearch = "";
+var autoCompleteResultLimit = 3;
+var results = new Array();
+var scoreForTitleMatch = 10;
+var scoreForURLMatch = 5;
+var scoreForKeywordMatch = 3;
+var scoreForDescriptionMatch = 1
+function addResult(topic, matchesTitle, matchesDescription, matchesURL, matchesKeywords)
+{
+  var matchScore = (matchesTitle * scoreForTitleMatch) + (matchesDescription * scoreForDescriptionMatch) + (matchesURL * scoreForURLMatch) + (matchesKeywords * scoreForKeywordMatch);
+  if (matchScore > 0)
+  {
+    var resultIndex = results.length;
+    results[resultIndex] = new Array();
+    results[resultIndex].topic = topic;
+    results[resultIndex].score = matchScore;
+  }
+}
+function loadPage(url)
+{
+  window.location.replace(url);
+  window.location.href = url;
+}
+$(document).on("keypress", function(event) {
+    if (event.keyCode == 13) {
+        event.preventDefault();
+    }
+});
+function highlightMe(inputTxt,keyword)
+{
+  inputTxt = String(inputTxt);
+  simpletext = new RegExp("(" + keyword + ")","gi");
+  return inputTxt.replace(simpletext, "<span style='background-color:yellow'>$1</span>")
+}
+function matches(inputTxt,searchTxt)
+{
+  var subs = inputTxt.split(searchTxt);
+  return subs.length - 1;
+}
 function hookupTOCEvents()
 {
   // do after tree render
@@ -18,9 +60,145 @@ function hookupTOCEvents()
     $(this).parentsUntil($('.docsidebarnav_section')).addClass("active").removeClass("menu-closed").addClass("menu-open");
   });
   $(".left-off-canvas-menu").css("display","block");
+  // console.log(metadata);
+  $("#st-search-input").on('keyup change', function(e) {
+    e = e || window.event;
+    if (autoCompleteShowing)
+    {
+      if (e.keyCode == '38') {
+          // up arrow
+          if (autoCompleteShowingID > -1)
+          {
+            // go up a result
+            $("#autoCompleteResult" + autoCompleteShowingID).removeClass("autocompleteSelected");
+            autoCompleteShowingID = autoCompleteShowingID - 1;
+            $("#autoCompleteResult" + autoCompleteShowingID).addClass("autocompleteSelected");
+            $("#autocompleteShowAll").removeClass("autocompleteSelected");
+          } else {
+            // de-selection auto-complete; reverting to raw search
+            $("#autoCompleteResult0").removeClass("autocompleteSelected");
+            autoCompleteShowingID = -1;
+          }
+      } else if (e.keyCode == '40') {
+          // down arrow
+          if (autoCompleteShowingID < (displayingAutcompleteResults.length - 1))
+          {
+            // go down to the next result
+            $("#autoCompleteResult" + autoCompleteShowingID).removeClass("autocompleteSelected");
+            autoCompleteShowingID = autoCompleteShowingID + 1;
+            $("#autoCompleteResult" + autoCompleteShowingID).addClass("autocompleteSelected");
+          } else {
+            // select "See all results..." and go no further
+            $("#autoCompleteResult" + autoCompleteShowingID).removeClass("autocompleteSelected");
+            $("#autocompleteShowAll").addClass("autocompleteSelected");
+            autoCompleteShowingID = autoCompleteResultLimit;
+          }
+      } else if (e.keyCode == '13') {
+        // return key
+        e.preventDefault();
+        if (autoCompleteShowingID==autoCompleteResultLimit || autoCompleteShowingID == -1 || autoCompleteShowing == false)
+        {
+          // "see all" is selected or they don't have an autocomplete result selected
+          loadPage("/search/?q=" + $("#st-search-input").val());
+        } else {
+          // an autocomplete result is selected
+          loadPage(metadata.pages[displayingAutcompleteResults[autoCompleteShowingID]].url);
+        }
+      }
+      //console.log('autoCompleteShowingID:',autoCompleteShowingID,'displayingAutcompleteResults[id]:',displayingAutcompleteResults[autoCompleteShowingID],'metadata.pages[id].url:',metadata.pages[displayingAutcompleteResults[autoCompleteShowingID]].url);
+    }
+    var searchVal = $("#st-search-input").val();
+    if (lastSearch != searchVal)
+    {
+      displayingAutcompleteResults = [];
+      results = [];
+      var uppercaseSearchVal = searchVal.toUpperCase();
+      //console.log("input changed: ",$("#st-search-input").val());
+
+      if (searchVal.length > 2) {
+        for (i=0;i<metadata.pages.length;i++)
+        {
+          // search url, description, title, and keywords for search input
+          var thisPage = metadata.pages[i];
+          var matchesTitle=0, matchesDescription=0, matchesURL=0, matchesKeywords=0;
+          var matchesTitle = matches(String(thisPage.title).toUpperCase(),uppercaseSearchVal);
+          //if (titleMatches > 0) console.log(uppercaseSearchVal,'matches',thisPage.title,titleMatches,'times');
+          if (thisPage.description != null) {
+            matchesDescription = matches(String(thisPage.description).toUpperCase(),uppercaseSearchVal);
+          }
+          if (thisPage.url != null) {
+            matchesURL = matches(String(thisPage.url).toUpperCase(),uppercaseSearchVal);
+          }
+          if (thisPage.keywords != null) {
+            matchesKeywords = matches(String(thisPage.keywords).toUpperCase(),uppercaseSearchVal);
+          }
+          addResult(i, matchesTitle, matchesDescription, matchesURL, matchesKeywords);
+        }
+        results.sort(function(a,b) {
+          return b.score - a.score;
+        });
+      }
+      if (results.length > 0)
+      {
+        autoCompleteShowingID = -1;
+        var resultsShown = 0;
+        var resultsOutput = new Array();
+        resultsOutput.push("<div id='autoContainer'>")
+        //console.log(results);
+        for (i=0; i < autoCompleteResultLimit && i < results.length; i++)
+        {
+          //console.log(i, "of", autoCompleteResultLimit, "is underway");
+          displayingAutcompleteResults.push(results[i].topic); //log results to global array
+          resultsOutput.push("<div class='autoCompleteResult' id='autoCompleteResult" + i + "' onclick='loadPage(\"" + metadata.pages[results[i].topic].url + "\")'>");
+          resultsOutput.push("<ul class='autocompleteList'>");
+          resultsOutput.push("<li id='autoTitle" + i + "' class='autocompleteTitle'>")
+          resultsOutput.push("<a href=" + metadata.pages[results[i].topic].url + ">" + highlightMe(metadata.pages[results[i].topic].title,searchVal) + "</a>");
+          resultsOutput.push("</li>");
+          resultsOutput.push("<li id='autoUrl" + i + "' class='autocompleteUrl'>")
+          resultsOutput.push(highlightMe(metadata.pages[results[i].topic].url,searchVal));
+          resultsOutput.push("</li>");
+          /*
+          resultsOutput.push("<li id='autoBreadcrumb" + i + "' class='autocompleteBreadcrumb'>")
+          resultsOutput.push("Breadcrumb: " + breadcrumbString(metadata.pages[results[i]].url));
+          resultsOutput.push("</li>");
+          */
+          if (metadata.pages[results[i].topic].keywords)
+          {
+          resultsOutput.push("<li id='autoKeywords" + i + "' class='autocompleteKeywords'>")
+          resultsOutput.push("<b>Keywords</b>: <i>" + highlightMe(metadata.pages[results[i].topic].keywords,searchVal) + "</i>");
+          resultsOutput.push("</li>");
+          }
+          if (metadata.pages[results[i].topic].description)
+          {
+          resultsOutput.push("<li id='autoDescription" + i + "' class='autocompleteDescription'>")
+          resultsOutput.push("<b>Description</b>: " + highlightMe(metadata.pages[results[i].topic].description,searchVal));
+          resultsOutput.push("</li>");
+          }
+          resultsOutput.push("</ul>");
+          resultsOutput.push("</div>")
+          resultsShown++;
+        }
+        var resultsShownText = (resultsShown > 1) ? resultsShown + " of " + results.length + " docs" : "doc";
+        resultsOutput.push("<div id='autocompleteShowAll'><ul class='autocompleteList'><li class='autocompleteTitle' id='autoSeeAll'><a href='/search/?q=" + searchVal + "'><b>Showing top " + resultsShownText + ". See all results...</b></a></li></ul></div>")
+        resultsOutput.push("</div>");
+        $("#autocompleteResults").css("display","block");
+        $("#autocompleteResults").html(resultsOutput.join(""));
+        autoCompleteShowing = true;
+      } else {
+        $("#autocompleteResults").css("display","none");
+        $("#autocompleteResults").html("");
+        autoCompleteShowing = false;
+      }
+      lastSearch = searchVal;
+    } // if searchVal != lastSearch
+  });
 }
+
 jQuery(document).ready(function(){
-    hookupTOCEvents();
+    $.getJSON( "/metadata.txt", function( data ) {
+      metadata = data;
+      hookupTOCEvents();
+    });
     $("#TableOfContents ul").empty();
 
     var prevH2Item = null;
@@ -41,14 +219,14 @@ jQuery(document).ready(function(){
           // h4
           currentHeader = 4;
         }
-        console.log("currentHeader ",currentHeader, "lastHeader ",lastHeader, "text ", $(this).text());
+        //console.log("currentHeader ",currentHeader, "lastHeader ",lastHeader, "text ", $(this).text());
         if (currentHeader > lastHeader) {
             // nest further
             output += "<ul>"
         }
         if (currentHeader < lastHeader && lastHeader > 0) {
             // close nesting
-            console.log("Closing nesting because ", lastHeader, "is <", currentHeader);
+            //console.log("Closing nesting because ", lastHeader, "is <", currentHeader);
             for (i=0; i < (lastHeader - currentHeader); i++)
             {
               output += "</ul>"

diff --git a/metadata.txt b/metadata.txt
@@ -0,0 +1,12 @@
+---
+layout: null
+---
+{% assign firstPage = "yes" %}{
+"pages":[{% for page in site.pages %}{% if page.title and page.hide_from_sitemap != true %}{% if firstPage == "no" %},{% else %}{% assign firstPage = "no" %}{% endif %}
+{
+"url":{{ page.url | jsonify }},
+"title":{{ page.title | jsonify }},
+"description":{{ page.description | jsonify }},
+"keywords":{{ page.keywords | jsonify }}
+}
+{% endif %}{% endfor %}]}