Skip to content

Commit 14ee23c

Browse files
devfacetdevfacet
committed
Add tab based navigation
1 parent 1db0cab commit 14ee23c

File tree

3 files changed

+41
-33
lines changed

3 files changed

+41
-33
lines changed

‎assets/public/css/app.css

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
body {
2-
margin-top: 100px;
2+
margin-top: 60px;
33
padding-bottom: 20px;
44
}
55

@@ -20,16 +20,12 @@ body {
2020
height: 20px;
2121
}
2222

23-
.search-navbar-hide {
24-
display: none;
25-
}
26-
2723
.search-navbar-holder {
2824
padding: 10px 15px;
2925
}
3026

31-
.search-navbar-tabs {
32-
padding-left: 10px;
27+
.search-result-navs-hide {
28+
display: none;
3329
}
3430

3531
.input-group-search {
@@ -45,6 +41,10 @@ body {
4541
display: inline;
4642
}
4743

44+
.search-results-tabs {
45+
padding-top: 20px;
46+
}
47+
4848
.search-results-li {
4949
list-style-type: none;
5050
}

‎assets/public/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,13 @@
1414
</head>
1515
<body>
1616

17-
<nav id="searchNavbar" class="navbar navbar-default navbar-fixed-top search-navbar-hide">
17+
<nav id="searchNavbar" class="navbar navbar-default navbar-fixed-top">
1818
<div class="container-fluid">
1919
<div class="navbar-header">
2020
<a id="logoNavbarHolder" class="navbar-brand" href="/"></a>
2121
<div id="searchNavbarHolder" class="search-navbar-holder"></div>
2222
</div>
2323
</div>
24-
<ul id="searchNavbarTabs" class="nav nav-pills search-navbar-tabs search-navbar-tabs-hide"></ul>
2524
</nav>
2625

2726
<div class="container">
@@ -47,7 +46,8 @@
4746
<div id="searchAlerts"></div>
4847
</div>
4948
<div class="col-xs-12 col-md-8 col-md-offset-0">
50-
<div id="searchResults"></div>
49+
<ul id="searchResultsNavs" class="nav nav-tabs search-result-navs-hide" role="tablist"></ul>
50+
<div id="searchResultsTabs" class="tab-content search-results-tabs"></div>
5151
</div>
5252
</div><!-- /.row -->
5353

‎assets/public/js/app.js

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ var app = function app() {
4040
critical('There is no any available provider to search');
4141
return;
4242
}
43-
4443
providersPrepare();
4544
listen();
4645
urlQueryHandler();
@@ -108,16 +107,18 @@ var app = function app() {
108107

109108
// providersPrepare prepares UI for providers
110109
function providersPrepare() {
111-
// Iterate providers
110+
// Iterate providers and prepare DOM elements
112111
providerList.forEach(function(provider) {
113-
// Prepare navigation bar tabs
114-
var content = '<li id="searchNavbarTabs-' + provider.name + '" role="presentation">';
115-
content += '<a href="javascript:void(0)" onclick="$.scrollTo(\'#' + provider.name + '\', 500, {offset: {top: -110}})">' + provider.title + '</a>';
116-
content += '</li>';
117-
$('#searchNavbarTabs').append(content);
118-
119-
// Prepare search result divs
120-
$('#searchResults').append('<div id="searchResults-' + provider.name + '">');
112+
// Navigations
113+
$('#searchResultsNavs').append('<li id="searchResultsNavs-' + provider.name + '" class="disabled" role="presentation"><a href="#' + provider.name + '" aria-controls="' + provider.name + '" role="tab" data-toggle="tab">' + provider.title + '</a></li>');
114+
// Tabs
115+
$('#searchResultsTabs').append('<div id="' + provider.name + '" role="tabpanel" class="tab-pane">');
116+
});
117+
118+
// Initialize navigation clicks
119+
$('#searchResultsNavs a').click(function (e) {
120+
e.preventDefault();
121+
$(this).tab('show');
121122
});
122123
}
123124

@@ -138,20 +139,22 @@ var app = function app() {
138139

139140
// searchReset resets UI for search
140141
function searchReset() {
142+
providerList.forEach(function(provider) { $('#' + provider.name).empty(); });
143+
141144
$('#searchInput').val('');
142-
$('div[id^=searchResults-]').empty();
143-
$('#searchNavbar').addClass('search-navbar-hide');
145+
$('#searchResultsNavs').addClass('search-result-navs-hide');
144146
$('#logoMain').detach().appendTo($('#logoMiddleHolder')).removeClass('logo-navbar');
145147
$('#searchMain').detach().appendTo($("#searchMiddleHolder")).removeClass('input-group-search-navbar');
146148
$('#searchInput').focus();
147149
}
148150

149151
// searchPrepare prepares UI for search
150152
function searchPrepare() {
153+
providerList.forEach(function(provider) { $('#' + provider.name).empty(); });
154+
151155
$('#logoMain').detach().appendTo($('#logoNavbarHolder')).addClass('logo-navbar');
152156
$('#searchMain').detach().appendTo($("#searchNavbarHolder")).addClass('input-group-search-navbar');
153-
$('#searchNavbar').removeClass('search-navbar-hide');
154-
$('div[id^=searchResults-]').empty();
157+
$('#searchResultsNavs').removeClass('search-result-navs-hide');
155158

156159
// If the current search input value is different than previous value then
157160
var sivc = $('#searchInput').val();
@@ -163,7 +166,6 @@ var app = function app() {
163166
$(document).prop('title', 'Ferret - ' + sivc);
164167
}
165168
$('#searchInput').attr('data-prev-value', sivc);
166-
$('#searchInput').focus();
167169
}
168170

169171
// searchResults renders search results
@@ -172,8 +174,6 @@ var app = function app() {
172174
// Prepare result content
173175
var content = '';
174176
if(provider && typeof provider === 'object') {
175-
content += '<h3 id="' + provider.name + '">' + provider.title + '</h3>';
176-
177177
// Iterate results
178178
$.map(data, function (v) {
179179
content += '<li class="search-results-li">';
@@ -184,22 +184,30 @@ var app = function app() {
184184
content += '</p>';
185185
content += '</li>';
186186
});
187-
content += '<hr>';
188187
}
189-
$("#searchResults-" + provider.name).html(content);
190-
$("#searchNavbarTabs-" + provider.name).removeClass("disabled");
188+
$('#' + provider.name).html(content);
189+
$('#' + provider.name).attr('data-result', true);
190+
$('#searchResultsNavs-' + provider.name).removeClass("disabled");
191191
} else {
192-
$("#searchNavbarTabs-" + provider.name).addClass("disabled");
192+
$('#' + provider.name).html('No results');
193+
$('#' + provider.name).attr('data-result', false);
194+
$('#searchResultsNavs-' + provider.name).addClass("disabled");
195+
}
196+
197+
var tId = $('#searchResultsTabs [data-result=true]:first').attr("id");
198+
if(tId) {
199+
$('a[role=tab][aria-controls=' + tId + ']').tab('show');
193200
}
194201
}
195202

196203
// searchError shows a search error
197204
function searchError(err, provider) {
198205
var e = parseError(err);
199206
if(provider && typeof provider === 'object') {
200-
$('#searchResults').append($('<h3 id="' + provider.name + '">').text(provider.title));
207+
$('#' + provider.name).append($('<div class="alert alert-danger" role="alert">').text(e.message));
208+
} else {
209+
$('#searchResultsTabs').append($('<div class="alert alert-danger" role="alert">').text(e.message));
201210
}
202-
$('#searchResults').append($('<div class="alert alert-danger" role="alert">').text(e.message));
203211
}
204212

205213
// warning shows a warning message

0 commit comments

Comments
 (0)