Skip to content

Commit fe51824

Browse files
johndmulhausenjohndmulhausen
committed
Added arrow-based navigation
1 parent ed538b4 commit fe51824

3 files changed

Lines changed: 134 additions & 76 deletions

File tree

‎_layouts/docs.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -243,8 +243,7 @@
243243
<div class="hidden-xs hidden-sm col-md-2 col-xl-1 tableofcontents_section">
244244
<section class="section" id="TableOfContentsSection">
245245
<span class="title_section">
246-
<form class="search-form form-inline ng-pristine ng-valid" action="/search/">
247-
<span class="algolia-autocomplete" style="position: relative; display: inline-block; direction: ltr;">
246+
<form class="search-form form-inline ng-pristine ng-valid" id="searchForm" action="/search/">
248247
<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;">
249248
<div id="autocompleteContainer">
250249
<div id="autocompleteResults"></div>

‎css/documentation.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
/* FIXUP allcss.css */
22
/* @media screen and (max-width: 1199px) */
33

4+
.autocompleteSelected {
5+
background-color: #f5f5f5;
6+
}
47
.autocompleteList
58
{
69
list-style-type: none;
710
width: 400px;
11+
padding:0px;
812
}
913
.autocompleteList li {
1014
width: 380px;
1115
border: 0px;
1216
padding-right: 20px;
1317
margin: 0px;
14-
1518
}
1619
.autocompleteTitle {
1720
/* font-weight: bold; */

‎js/menu.js‎

Lines changed: 129 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
11
var metadata;
22
var autoCompleteShowing = false;
33
var displayingAutcompleteResults = new Array();
4-
document.onkeydown = checkKey;
5-
function checkKey(e) {
6-
if (autoCompleteShowing) {
7-
e = e || window.event;
8-
if (e.keyCode == '38') {
9-
// up arrow
10-
}
11-
else if (e.keyCode == '40') {
12-
// down arrow
13-
}
14-
else if (e.keyCode == '37') {
15-
// left arrow
16-
}
17-
else if (e.keyCode == '39') {
18-
// right arrow
19-
}
20-
}
4+
var autoCompleteShowingID = 0;
5+
var lastSearch = "";
6+
var autoCompleteResultLimit = 3;
7+
function loadPage(url)
8+
{
9+
window.location.replace(url);
10+
window.location.href = url;
2111
}
12+
$(document).on("keypress", function(event) {
13+
if (event.keyCode == 13) {
14+
event.preventDefault();
15+
}
16+
});
2217
function highlightMe(inputTxt,keyword)
2318
{
2419
inputTxt = String(inputTxt);
@@ -45,70 +40,131 @@ function hookupTOCEvents()
4540
});
4641
$(".left-off-canvas-menu").css("display","block");
4742
// console.log(metadata);
48-
$("#st-search-input").on('keyup change', function() {
49-
var results = new Array();
50-
var searchVal = $("#st-search-input").val();
51-
var uppercaseSearchVal = searchVal.toUpperCase();
52-
//console.log("input changed: ",$("#st-search-input").val());
53-
if (searchVal.length > 2) {
54-
for (i=0;i<metadata.pages.length;i++) {
55-
// search url, description, title, and keywords for search input
56-
var thisPage = metadata.pages[i];
57-
if (String(thisPage.title).toUpperCase().indexOf(uppercaseSearchVal) > -1) results.push(i);
58-
if (thisPage.description != null) if (String(thisPage.description).toUpperCase().indexOf(uppercaseSearchVal) > -1) results.push(i);
59-
if (thisPage.url != null) if (String(thisPage.url).toUpperCase().indexOf(uppercaseSearchVal) > -1) results.push(i);
60-
if (thisPage.keywords != null) if (String(thisPage.keywords).toUpperCase().indexOf(uppercaseSearchVal) > -1) results.push(i);
61-
}
62-
}
63-
if (results.length > 0)
43+
$("#st-search-input").on('keyup change', function(e) {
44+
e = e || window.event;
45+
if (autoCompleteShowing)
6446
{
65-
var lastIndex = -1;
66-
var resultsOutput = new Array();
67-
var resultsShown = 0;
68-
resultsOutput.push("<ul class='autocompleteList'>")
69-
for (i=0; resultsShown < 3 && i < results.length; i++)
70-
{
71-
if (results[i] != lastIndex) {
72-
// show results
73-
//console.log("match:",metadata.pages[results[i]]);
74-
displayingAutcompleteResults.push(i);
75-
resultsOutput.push("<li id='autoTitle" + i + "' class='autocompleteTitle'>")
76-
resultsOutput.push("<a href=" + metadata.pages[results[i]].url + ">" + highlightMe(metadata.pages[results[i]].title,searchVal) + "</a>");
77-
resultsOutput.push("</li>");
78-
resultsOutput.push("<li id='autoUrl" + i + "' class='autocompleteUrl'>")
79-
resultsOutput.push(highlightMe(metadata.pages[results[i]].url,searchVal));
80-
resultsOutput.push("</li>");
81-
/*
82-
resultsOutput.push("<li id='autoBreadcrumb" + i + "' class='autocompleteBreadcrumb'>")
83-
resultsOutput.push("Breadcrumb: " + breadcrumbString(metadata.pages[results[i]].url));
84-
resultsOutput.push("</li>");
85-
*/
86-
if (metadata.pages[results[i]].keywords)
47+
if (e.keyCode == '38') {
48+
// up arrow
49+
if (autoCompleteShowingID > -1)
8750
{
88-
resultsOutput.push("<li id='autoKeywords" + i + "' class='autocompleteKeywords'>")
89-
resultsOutput.push("Keywords: <i>" + highlightMe(metadata.pages[results[i]].keywords,searchVal) + "</i>");
90-
resultsOutput.push("</li>");
51+
// go up a result
52+
$("#autoCompleteResult" + autoCompleteShowingID).removeClass("autocompleteSelected");
53+
autoCompleteShowingID = autoCompleteShowingID - 1;
54+
$("#autoCompleteResult" + autoCompleteShowingID).addClass("autocompleteSelected");
55+
$("#autoSeeAll").removeClass("autocompleteSelected");
56+
} else {
57+
// de-selection auto-complete; reverting to raw search
58+
$("#autoCompleteResult0").removeClass("autocompleteSelected");
59+
autoCompleteShowingID = -1;
9160
}
92-
if (metadata.pages[results[i]].description)
61+
} else if (e.keyCode == '40') {
62+
// down arrow
63+
if (autoCompleteShowingID < (displayingAutcompleteResults.length - 1))
9364
{
94-
resultsOutput.push("<li id='autoDescription" + i + "' class='autocompleteDescription'>")
95-
resultsOutput.push("Description: " + highlightMe(metadata.pages[results[i]].description,searchVal));
96-
resultsOutput.push("</li>");
65+
// go down to the next result
66+
$("#autoCompleteResult" + autoCompleteShowingID).removeClass("autocompleteSelected");
67+
autoCompleteShowingID = autoCompleteShowingID + 1;
68+
$("#autoCompleteResult" + autoCompleteShowingID).addClass("autocompleteSelected");
69+
} else {
70+
// select "See all results..." and go no further
71+
$("#autoCompleteResult" + autoCompleteShowingID).removeClass("autocompleteSelected");
72+
$("#autoSeeAll").addClass("autocompleteSelected");
73+
autoCompleteShowingID = autoCompleteResultLimit;
9774
}
98-
resultsShown++;
75+
} else if (e.keyCode == '13') {
76+
// return key
77+
e.preventDefault();
78+
if (autoCompleteShowingID==autoCompleteResultLimit || autoCompleteShowingID == -1 || autoCompleteShowing == false)
79+
{
80+
// "see all" is selected or they don't have an autocomplete result selected
81+
loadPage("/search/?q=" + $("#st-search-input").val());
82+
} else {
83+
// an autocomplete result is selected
84+
loadPage(metadata.pages[displayingAutcompleteResults[autoCompleteShowingID]].url);
9985
}
100-
lastIndex = results[i];
10186
}
102-
resultsOutput.push("<li class='autocompleteTitle'><a href='/search/?q=" + searchVal + "'><b>See all results...</b></a></li>")
103-
resultsOutput.push("</ul>");
104-
$("#autocompleteResults").css("display","block");
105-
$("#autocompleteResults").html(resultsOutput.join(""));
106-
autoCompleteShowing = true;
107-
} else {
108-
$("#autocompleteResults").css("display","none");
109-
$("#autocompleteResults").html("");
110-
autoCompleteShowing = false;
87+
//console.log('autoCompleteShowingID:',autoCompleteShowingID,'displayingAutcompleteResults[id]:',displayingAutcompleteResults[autoCompleteShowingID],'metadata.pages[id].url:',metadata.pages[displayingAutcompleteResults[autoCompleteShowingID]].url);
11188
}
89+
var searchVal = $("#st-search-input").val();
90+
if (lastSearch != searchVal)
91+
{
92+
displayingAutcompleteResults = [];
93+
var results = new Array();
94+
var uppercaseSearchVal = searchVal.toUpperCase();
95+
//console.log("input changed: ",$("#st-search-input").val());
96+
if (searchVal.length > 2) {
97+
for (i=0;i<metadata.pages.length;i++) {
98+
// search url, description, title, and keywords for search input
99+
var thisPage = metadata.pages[i];
100+
if (String(thisPage.title).toUpperCase().indexOf(uppercaseSearchVal) > -1) results.push(i);
101+
if (thisPage.description != null) if (String(thisPage.description).toUpperCase().indexOf(uppercaseSearchVal) > -1) results.push(i);
102+
if (thisPage.url != null) if (String(thisPage.url).toUpperCase().indexOf(uppercaseSearchVal) > -1) results.push(i);
103+
if (thisPage.keywords != null) if (String(thisPage.keywords).toUpperCase().indexOf(uppercaseSearchVal) > -1) results.push(i);
104+
}
105+
}
106+
if (results.length > 0)
107+
{
108+
var lastIndex = -1;
109+
var resultsOutput = new Array();
110+
var resultsShown = 0;
111+
var highlightHTML = "";
112+
resultsOutput.push("<div id='autoContainer'>")
113+
for (i=0; resultsShown < autoCompleteResultLimit && i < results.length; i++)
114+
{
115+
if (results[i] != lastIndex) {
116+
// show results
117+
//console.log("match:",metadata.pages[results[i]]);
118+
displayingAutcompleteResults.push(results[i]); //log results to global array
119+
if (lastIndex==-1) {
120+
//first result!
121+
autoCompleteShowingID = -1;
122+
} else {
123+
highlightHTML = "";
124+
}
125+
resultsOutput.push("<div id='autoCompleteResult" + resultsShown + "'" + highlightHTML + " onclick='loadPage(\"" + metadata.pages[results[i]].url + "\")'>");
126+
resultsOutput.push("<ul class='autocompleteList'>");
127+
resultsOutput.push("<li id='autoTitle" + resultsShown + "' class='autocompleteTitle'>")
128+
resultsOutput.push("<a href=" + metadata.pages[results[i]].url + ">" + highlightMe(metadata.pages[results[i]].title,searchVal) + "</a>");
129+
resultsOutput.push("</li>");
130+
resultsOutput.push("<li id='autoUrl" + resultsShown + "' class='autocompleteUrl'>")
131+
resultsOutput.push(highlightMe(metadata.pages[results[i]].url,searchVal));
132+
resultsOutput.push("</li>");
133+
/*
134+
resultsOutput.push("<li id='autoBreadcrumb" + i + "' class='autocompleteBreadcrumb'>")
135+
resultsOutput.push("Breadcrumb: " + breadcrumbString(metadata.pages[results[i]].url));
136+
resultsOutput.push("</li>");
137+
*/
138+
if (metadata.pages[results[i]].keywords)
139+
{
140+
resultsOutput.push("<li id='autoKeywords" + resultsShown + "' class='autocompleteKeywords'>")
141+
resultsOutput.push("Keywords: <i>" + highlightMe(metadata.pages[results[i]].keywords,searchVal) + "</i>");
142+
resultsOutput.push("</li>");
143+
}
144+
if (metadata.pages[results[i]].description)
145+
{
146+
resultsOutput.push("<li id='autoDescription" + resultsShown + "' class='autocompleteDescription'>")
147+
resultsOutput.push("Description: " + highlightMe(metadata.pages[results[i]].description,searchVal));
148+
resultsOutput.push("</li>");
149+
}
150+
resultsOutput.push("</ul>");
151+
resultsOutput.push("</div>")
152+
resultsShown++;
153+
}
154+
lastIndex = results[i];
155+
}
156+
resultsOutput.push("<ul class='autocompleteList'><li class='autocompleteTitle' id='autoSeeAll'><a href='/search/?q=" + searchVal + "'><b>See all results...</b></a></li></ul>")
157+
resultsOutput.push("</div>");
158+
$("#autocompleteResults").css("display","block");
159+
$("#autocompleteResults").html(resultsOutput.join(""));
160+
autoCompleteShowing = true;
161+
} else {
162+
$("#autocompleteResults").css("display","none");
163+
$("#autocompleteResults").html("");
164+
autoCompleteShowing = false;
165+
}
166+
lastSearch = searchVal;
167+
} // if searchVal != lastSearch
112168
});
113169
}
114170

0 commit comments

Comments
 (0)