Permalink
Browse files

feat(navbar): search field for nav

  • Loading branch information...
katrin-freihofner committed Mar 3, 2017
1 parent 8d2a33d commit 0e97b653d1220ec1624aaaab730529a4de1dfe15
Showing with 122 additions and 14 deletions.
  1. +6 −6 assets/data/search_results.json
  2. +1 −0 src/main.js
  3. +50 −0 src/navbar/navbar.js
  4. +62 −7 src/navbar/navbar.scss
  5. +3 −1 src/navbar/samples/01-primary-menu.html
@@ -1,22 +1,22 @@
{
"options": [
{
"value": "Papaya"
"value": "Test-Papaya"
},
{
"value": "Banana"
"value": "Test-Banana"
},
{
"value": "Ananas"
"value": "Test-Ananas"
},
{
"value": "Apple"
"value": "Test-Apple"
},
{
"value": "Kiwi"
"value": "Test-Kiwi"
},
{
"value": "Orange"
"value": "Test-Orange"
}
]
}
View
@@ -5,3 +5,4 @@ require('./expandable/expandable');
require('./tabs/tabs');
require('./slider/slider');
require('./table/table');
require('./navbar/navbar');
View
@@ -0,0 +1,50 @@
import $ from '../js-common-components/dollar';
// const toggleClass = 'is-expanded';
function fetchData(select) {
const rq = { url: '/assets/data/search_results.json',
onLoad: (e) => {
if (select.children.length <= 0) {
console.log('fetch data');
const options = (JSON.parse(e.target.responseText)).options;
for (let i = 0; i < options.length; i++) {
const opt = document.createElement('li');
opt.value = options[i].value;
opt.innerHTML = options[i].value;
console.log('append opt');
select.appendChild(opt);
}
select.classList.remove('expandable');
select.classList.add('is-expanded');
}
},
};
const xhr = new XMLHttpRequest();
xhr.addEventListener('load', rq.onLoad.bind(this));
xhr.open('GET', rq.url);
xhr.send();
}
const initData = () => {
$('input').forEach(el => {
const ul = el.parentNode.appendChild(document.createElement('ul'));
ul.classList.add('search__results');
ul.classList.add('expandable');
el.addEventListener('keyup', (ev) => {
console.log(ev);
fetchData(ul);
});
el.addEventListener('blur', (e) => {
console.log('test');
console.log(e);
// ul.innerHTML = '';
// ul.classList.remove('is-expanded');
});
});
};
initData();
View
@@ -11,6 +11,9 @@ $nav-height-secondary: 1.5rem;
// $nav-breakpoint: 760px;
$nav-breakpoint: 980px;
$nav-search-width: 200px;
$nav-search-results-width: 276px;
.nav {
display: block;
font-weight: 500;
@@ -22,10 +25,14 @@ $nav-breakpoint: 980px;
@media (min-width: $nav-breakpoint) {
.nav {
height: auto;
//height: auto;
}
}
.nav.has-no-secondary {
height: $nav-height;
}
/*
* nav bars
*/
@@ -221,25 +228,53 @@ $nav-breakpoint: 980px;
z-index: 12;
}
/*
* search
*/
.nav__buttongroup .nav__search {
display: inline-block;
position: relative;
vertical-align: middle;
background-color: transparent;
border: none;
height: $nav-height;
border-radius: 0;
color: #fff;
width: 200px;
width: $nav-search-width;
}
.nav__buttongroup .nav__search:hover {
background-color: $gray-700;
}
.nav__buttongroup .nav__search:focus {
background-color: $gray-700;
outline: none;
box-shadow: none;
}
.nav .search__results.is-expanded {
position: relative;
margin: 0;
padding: 12px 0 12px 0;
background-color: $gray-700;
color: #fff;
list-style: none;
line-height: 32px;
width: 100%;
li {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
}
.nav .search__results.is-expanded li:hover {
background-color: $gray-640;
}
.nav__cta {
height: $nav-height;
line-height: $nav-height;
@@ -252,14 +287,34 @@ $nav-breakpoint: 980px;
color: #fff;
}
.expandable__content {
color: #fff;
list-style: none;
line-height: 2rem;
white-space: nowrap;
overflow: hidden;
padding-left: 11px;
li:hover {
background-color: $gray-600;
}
}
.expandable__content.is-expanded {
z-index: 10;
max-width: $nav-search-results-width;
display: block;
position: absolute;
right: 0;
margin-top: 44px;
width: 100%;
background-color: $nav-primary-background;
}
@media (min-width: $nav-breakpoint) {
.nav__buttongroup {
margin-top: $nav-height-secondary;
.nav__search {
width: 200px;
}
}
}
@@ -3,7 +3,9 @@
<img class="nav__logo" src="http://assets.dynatrace.com/global/logos/dynatrace-logo.svg" alt="dynatrace logo"/>
</a>
<div class="nav__buttongroup">
<input type="search" class="inputfield inputfield--search nav__search" id="i0"/>
<form>
<input type="search" class="inputfield inputfield--search nav__search" id="i0"/>
</form>
<button data-target="#nav-bar-example1" id="menu-toggle" class="nav__btn nav__btn--menutoggle">Menu</button>
</div>
<nav id="nav-bar-example1" class="nav__bar js-nav-toggle">

0 comments on commit 0e97b65

Please sign in to comment.