Permalink
Browse files

Merge pull request #176 from Dynatrace/keyboardsupport-search

feat(navbar): keyboard support for search results
  • Loading branch information...
katrin-freihofner committed Aug 1, 2017
2 parents 2cb4dd7 + 77e18c7 commit 59c40b852373c30d5e42b5510b6c2ee5a53c5d36
Showing with 52 additions and 7 deletions.
  1. +48 −4 src/navbar/navbar.js
  2. +4 −3 src/navbar/navbar.scss
View
@@ -3,6 +3,8 @@ import { debounce } from '../js-common-components/utils';
import Promise from 'promise-polyfill';
import 'whatwg-fetch';
const inputField = document.querySelector('.inputfield--search');
function clearResults(select) {
while (select.firstChild) {
select.removeChild(select.firstChild);
@@ -13,6 +15,7 @@ function createListElement(result, opts) {
const opt = document.createElement('li');
const link = document.createElement('a');
link.setAttribute('href', result[opts.url]);
link.classList.add('search__results__link');
link.textContent = result[opts.title];
opt.appendChild(link);
return opt;
@@ -41,29 +44,70 @@ function fetchResults(select, searchData, params, opts) {
});
}
const getfunc = (keyCode, indexOfSelected, length) => {
switch (keyCode) {
case 38:
return (((indexOfSelected - 1) % length) + length) % length;
default:
return (((indexOfSelected + 1) % length) + length) % length;
}
};
const getnumb = (keyCode, searchResultLinks) => {
switch (keyCode) {
case 38:
return searchResultLinks.length - 1;
default:
return 0;
}
};
const handleKeydown = (ev) => {
if (inputField.classList.contains('has-focus') && (ev.keyCode === 40 || ev.keyCode === 38)) {
ev.preventDefault();
ev.stopPropagation();
const searchResults = document.querySelector('.search__results');
const selectedLink = searchResults.querySelector('a:focus');
const searchResultLinks = searchResults.querySelectorAll('a');
searchResultLinks[(getnumb(ev.keyCode, searchResultLinks))].focus();
if (selectedLink) {
const indexOfSelected = Array.prototype.indexOf.call(searchResultLinks, selectedLink) || 0;
searchResultLinks[getfunc(ev.keyCode, indexOfSelected, searchResultLinks.length)].focus();
}
}
return false;
};
const initData = () => {
$('.js-search:not([action=""])').forEach(el => {
const form = el.parentNode;
const ul = form.appendChild(document.createElement('ul'));
ul.addEventListener('click', (e) => e.stopPropagation());
const searchData = form.dataset.results || form.action;
ul.classList.add('search__results');
const searchData = form.dataset.results || form.action;
const opts = {
title: form.dataset.titleprop || 'title',
url: form.dataset.urlprop || 'url',
maxresults: parseInt(form.dataset.maxresults, 10) || 10,
resultskey: form.dataset.resultskey || 'results',
};
el.addEventListener('keyup', debounce(() => {
ul.classList.add('has-focus');
inputField.addEventListener('keyup', debounce(() => {
const params = $('input', form)
.map(input => `${input.name}=${input.value}`)
.join('&');
fetchResults(ul, searchData, params, opts);
inputField.classList.add('has-focus');
}, 150));
document.body.addEventListener('click', () => {
ul.classList.remove('has-focus');
inputField.classList.remove('has-focus');
});
document.body.addEventListener('keydown', handleKeydown);
});
};
View
@@ -329,7 +329,8 @@
color: #fff;
}
.nav__buttongroup .nav__search:focus {
.nav__buttongroup .nav__search:focus,
.nav__buttongroup .nav__search.has-focus {
background-color: $nav-secondary-hover;
width: $nav-search-width;
color: #fff;
@@ -342,11 +343,11 @@
color: $gray-500;
}
.nav .search__results {
.nav__search:not(.has-focus) ~ ul {
display: none;
}
.nav .search__results.has-focus {
.nav__search ~ ul {
display: block;
position: relative;
margin: 0;

0 comments on commit 59c40b8

Please sign in to comment.