@@ -1,39 +1,4 @@
1−//
2− // styling of input fields
3−//
4−
5−var inputElements = document.querySelectorAll('input.tlon-input');
6−for (var i = 0; i < inputElements.length; i++) {
7− //listen for changes in input
8− inputElements[i].addEventListener('input', function() {
9− // if input has a value do this
10− if (this.value) {
11− var inputContainer = this.parentNode;
12− var validInputs = inputContainer.querySelectorAll('input.tlon-input:valid');
13− var inputs = inputContainer.querySelectorAll('input.tlon-input');
14− if (validInputs.length !== 0) {
15− // has valid input
16− for (var i = 0; i < validInputs.length; i++) {
17− if (this.classList.contains('is-valid') == false ) {
18− validInputs[i].parentNode.classList.add('has-valid-input');
19− }
20− }
21− } else {
22− // doesn't have valid input
23− for (var i = 0; i < inputs.length; i++) {
24− inputs[i].parentNode.classList.remove('has-valid-input');
25− }
26− }
27− } else {
28− this.parentNode.classList.remove('has-valid-input');
29− }
30− });
31−}
32−
33−//
34− // toggling of navigation menus
35−//
36−
1+// toggling of navigation menus
372var toggleMainNav = document.getElementById('js-main-nav-toggle');
383if (toggleMainNav !== null) {
394 toggleMainNav.onclick = function() {
@@ -84,10 +49,8 @@ function initHotKeys() {
8449 });
8550};
8651
87−//
88− // search functionality
89−//
9052
53+// search functionality
9154function debounce(func, wait) {
9255 var timeout;
9356
@@ -122,6 +85,7 @@ function makeTeaser(body, terms) {
12285 var stemmedTerms = terms.map(function (w) {
12386 return elasticlunr.stemmer(w.toLowerCase());
12487 });
88+
12589 var termFound = false;
12690 var index = 0;
12791 var weighted = []; // contains elements of ["word", weight, index_in_document]
@@ -206,48 +170,49 @@ function makeTeaser(body, terms) {
206170 startIndex = word[2];
207171 }
208172
209− // add <em/> around search terms
210− if (word[1] === TERM_WEIGHT) {
211− teaser.push("<b>");
212− }
213173 startIndex = word[2] + word[0].length;
214174 teaser.push(body.substring(word[2], startIndex));
215175
216− if (word[1] === TERM_WEIGHT) {
217− teaser.push("</b>");
218− }
219176 }
220177 teaser.push("…");
221178 return teaser.join("");
222179}
223180
224−function formatSearchResultTitle(path) {
225− var pathArray = path.split( 'docs/' );
226− var slug = pathArray[1];
227− var slugArray = slug.split( '/' );
228− var lastPartTitle = slugArray.splice(slugArray.length - 2, slugArray.length).join('');
229− var firstPartTitle = slugArray.join(' / ');
181+function formatSearchResultTitle(item) {
182+ var pathArray = item.ref.split( '/' );
183+
184+ // first directory is in 4th element of split path array
185+ var firstPartTitle = pathArray[3];
186+
187+ // last directory is in 2nd to last element of array
188+ var lastPartTitle = item.doc.title;
230189
231− var fullTitle = firstPartTitle + ' / ' + '<span class="search-results__item__title__slug-end">' + lastPartTitle + '</span>';
190+ var fullTitle = firstPartTitle + '<span class="gray90 inline-block pl2">' + ' / ' + lastPartTitle + '</span>';
232191
233192 return fullTitle;
234193}
235194
236195function formatSearchResultItem(item, terms) {
196+ console.log(item);
237197 var li = document.createElement("li");
238198 var createA = document.createElement("a");
239199 li.appendChild(createA);
240− var teaserTitle = formatSearchResultTitle(item.ref);
200+ var teaserTitle = formatSearchResultTitle(item);
241201 li.classList.add("search-results__item");
202+ li.classList.add("ph3");
242203 var hrefA = item.ref;
243204 createA.setAttribute('href', hrefA);
244− createA.innerHTML = `<span class="search-results__item__title">${teaserTitle}</span>`;
245− createA.innerHTML += `<div class="search-results__teaser">${makeTeaser(item.doc.body, terms)}</div>`;
205+ createA.setAttribute('class','no-underline block pl6 pv3');
206+ createA.innerHTML = `<span class="fs45 capitalize">${teaserTitle}</span>`;
207+ createA.innerHTML += `<span class='pr7 fs5 none float-right'>→</span>`;
208+ createA.innerHTML += `<div class="fs35 truncate mr10">${makeTeaser(item.doc.body, terms)}</div>`;
246209 return li;
247210}
248211
249212function initSearch() {
250213 var searchInput = document.getElementById("search");
214+ var searchForm = document.getElementById("search-form");
215+ var inputReset = searchForm.nextElementSibling;
251216
252217 if (!searchInput) {
253218 return;
@@ -257,9 +222,9 @@ function initSearch() {
257222 var searchResultsHeader = document.querySelector(".search-results__header");
258223 var searchResultsItems = document.querySelector(".search-results__items");
259224 var MAX_ITEMS = 200;
260−
261225 var options = {
262226 bool: "AND",
227+ expand: true, // turn on partial word search
263228 fields: {
264229 title: {boost: 2},
265230 body: {boost: 1},
@@ -267,19 +232,22 @@ function initSearch() {
267232 };
268233 var currentTerm = "";
269234 var index = elasticlunr.Index.load(window.searchIndex);
270−
271235 // toggle search window
272236 var toggleSearchWindow = document.getElementById('js-search-window-toggle');
273237 var bodyEl = document.body;
274238 var searchOverlay = document.getElementById('search-overlay');
275239 var searchWindow = document.getElementById('search-window');
276240 var searchActive = bodyEl.classList.contains('has-active-search-window');
241+
277242 if (toggleSearchWindow !== null) {
278243 toggleSearchWindow.onclick = function() {
244+ inputReset.style.display="none";
245+
279246 //activate search
280247 bodyEl.classList.toggle('has-active-search-window');
281248 //put input in focus when activating search
282249 searchInput.focus();
250+
283251 searchInput.value = "";
284252 searchResultsHeader.value = "";
285253 searchResults.style.display = searchInput.value.trim() === "" ? "none" : "block";
@@ -291,12 +259,12 @@ function initSearch() {
291259 })
292260 }
293261
294− // when typing
262+
295263 searchInput.addEventListener("keyup", debounce(function() {
296− searchResultsHeader.value = "";
264+ inputReset.style.display="block";
297265
266+ searchResultsHeader.value = "";
298267 var term = searchInput.value.trim();
299−
300268 /*
301269 //removed to fix: a state where there’s a valid search term, but no results
302270
@@ -308,19 +276,21 @@ function initSearch() {
308276 searchResults.style.overflowY = term === "" ? "hidden" : "scroll";
309277 searchResultsItems.innerHTML = "";
310278 if (term === "") {
279+ inputReset.style.display="none";
311280 return;
312281 }
313282
314283 var results = index.search(term, options).filter(function (r) {
315284 return r.doc.body !== "";
316285 });
286+
317287 if (results.length === 0) {
318288 searchResultsHeader.innerText = `No search results for '${term}'.`;
319289 return;
320290 }
321291
322292 currentTerm = term;
323− searchResultsHeader.innerText = `${results.length} search results for '${term}':`;
293+ searchResultsHeader.innerText = `${results.length} search results for '${term}':`;
324294 for (var i = 0; i < Math.min(results.length, MAX_ITEMS); i++) {
325295 if (!results[i].doc.body) {
326296 continue;
@@ -328,6 +298,17 @@ function initSearch() {
328298 searchResultsItems.appendChild(formatSearchResultItem(results[i], term.split(" ")));
329299 }
330300 }, 150));
301+
302+ // reset input button
303+ inputReset.onclick=function(){
304+ document.getElementById('search-form').reset();
305+ }
306+ searchForm.addEventListener("reset", function(event){
307+ var e = document.createEvent('KeyboardEvent');
308+ e.initEvent("keyup", false, true);
309+ searchInput.dispatchEvent(e);
310+ });
311+
331312}
332313
333314if (document.readyState === "complete" ||