Permalink
Browse files

fix: make fetching the navbar search results more generic

  • Loading branch information...
katrin-freihofner committed Jun 13, 2017
1 parent 8ab540e commit b4f14e59355ed36e38c20eb29a6e56646d4c86ae
Showing with 71 additions and 31 deletions.
  1. +51 −23 src/navbar/README.md
  2. +19 −7 src/navbar/navbar.js
  3. +1 −1 src/navbar/samples/01-primary-menu.html
View
@@ -21,33 +21,61 @@ The Groundhog navbar appears in a two versions:
## Including the navbar
1. To include a Groundhog navbar add an `<ul>` element with multiple `<li>` items, for the menu items. The `<ul>` with secondary menu items is optional. Add a wrapper `<div>`.
2. Update all menu items' references and classes
```html
<li class="nav__item">
<a class="nav__link" href="#">Services</a>
</li>
```
```html
<li class="nav__item">
<a class="nav__link nav__link--secondary" href="#">Company</a>
</li>
```
3. (Optional) Add the search functionality and update the link to the search page.
3. Update all menu items' references and classes.
```html
<li class="nav__item">
<a class="nav__link" href="#">Services</a>
</li>
```
```html
<li class="nav__item">
<a class="nav__link nav__link--secondary" href="#">Company</a>
</li>
```
4. Add the search functionality and update the link to the search page. (Optional)
```html
<form action="/assets/data/search_results.json">
<input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm"/>
</form>
```
```html
<a href="#" class="nav__search__icon"></a>
```
2. Update `<form>` action and attributes. (Optional)
```html
<form action="/assets/data/search_results.json">
<input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm"/>
</form>
<form action="/assets/data/search_results.json" data-titleprop="label"
data-urlprop="path" data-maxresults="5" data-resultskey="results">
```
```html
<a href="#" class="nav__search__icon"></a>
* `action="/assets/data/search_results.json"`
set the form's action.
* `data-resultskey="results"`
sets the key for the list of search results. (Optional, default: results)
* `data-maxresults="5"`
sets the number of search results shown. (Optional, default: 10)
* `data-titleprop="label"`
sets the key for the search results' title. (Optional, default: label)
* `data-urlprop="path"`
sets the key for the search results' path. (Optional, default: url)
Example results:
```json
{
"results": [
{
"label": "Test-Papaya",
"url": "/test/test-papaya"
}
]
}
```
4. Adjust the breakpoints
5. Adjust the breakpoints. (Optional)
The `$nav-breakpoint` sets the width where all menu items from the 'Menu' dropdown are shown in the navbar. The second breakpoint `$nav-search-to-icon-breakpoint` sets the width where the search link is replaced by a search input field, directly in the navbar.
View
@@ -1,6 +1,7 @@
import $ from '../js-common-components/dollar';
import { debounce } from '../js-common-components/utils';
function clearResults(select) {
const emptySearchResults = select;
emptySearchResults.classList.remove('is-expanded');
@@ -9,22 +10,27 @@ function clearResults(select) {
}
}
function createListElement(result) {
function createListElement(result, opts) {
console.log(result, opts);
const opt = document.createElement('li');
const link = document.createElement('a');
link.setAttribute('href', result.url);
link.textContent = result.label;
link.setAttribute('href', result[opts.url]);
link.textContent = result[opts.title];
opt.appendChild(link);
return opt;
}
function fetchResults(select, searchData, params) {
function fetchResults(select, searchData, params, opts) {
fetch(`${searchData}?${params}`)
.catch(() => '{ results: [] }')
.then(res => res.json())
.then((searchResults) => {
const results = searchResults.results;
const elements = results.map(createListElement);
const results = searchResults[opts.resultskey];
if (!results) {
return;
}
const trimmedresults = results.slice(0, opts.maxresults);
const elements = trimmedresults.map(el => createListElement(el, opts));
window.requestAnimationFrame(() => {
clearResults(select);
select.classList.add('expandable', 'is-expanded');
@@ -40,11 +46,17 @@ const initData = () => {
const ul = form.appendChild(document.createElement('ul'));
const searchData = form.action;
ul.classList.add('search__results', 'expandable');
const opts = {
title: form.dataset.titleprop || 'title',
url: form.dataset.urlprop || 'url',
maxresults: parseInt(form.dataset.maxresults) || 10,
resultskey: form.dataset.resultskey || 'results',
};
el.addEventListener('keyup', debounce(() => {
const params = $('input', form)
.map(input => `${input.name}=${input.value}`)
.join('&');
fetchResults(ul, searchData, params);
fetchResults(ul, searchData, params, opts);
}, 150));
el.addEventListener('blur', () => {
clearResults(ul);
@@ -3,7 +3,7 @@
<img class="nav__logo" src="http://assets.dynatrace.com/global/logos/dynatrace-logo.svg" alt="dynatrace logo"/>
</a>
<div class="nav__buttongroup">
<form action="/assets/data/search_results.json">
<form action="/assets/data/search_results.json" data-resultskey="results" data-maxresults="5" data-titleprop="title" data-urlprop="path" >
<input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm"/>
</form>
<a href="#" class="nav__search__icon"></a>

0 comments on commit b4f14e5

Please sign in to comment.