Merge pull request #12 from joelpet/improve-search-view
Improve search view
This commit is contained in:
woutervanwijk
commit
23b563308c
@ -200,22 +200,47 @@
|
||||
<div id="searchresults">
|
||||
<div class="ui-grid-a srch-breakpoint">
|
||||
<div class="ui-block-a" id="searchartists">
|
||||
<h4>Artists</h4>
|
||||
<ul class="table" id="artistresulttable"></ul>
|
||||
<div data-role="listview" data-inset="true">
|
||||
<div data-role="header">
|
||||
<h4>Artists</h4>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<ul data-role="listview" id="artistresulttable"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-block-b" id="searchalbums">
|
||||
<h4>Albums</h4>
|
||||
<ul class="table" id="albumresulttable"></ul>
|
||||
<div data-role="listview" data-inset="true">
|
||||
<div data-role="header">
|
||||
<h4>Albums</h4>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<ul data-role="listview" id="albumresulttable"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- grid a -->
|
||||
|
||||
<!-- <div class="" style="text-align: center" id="expandsearch">
|
||||
<a href="#" onclick="toggleSearch(); return false;"><img src="images/icons/arrow_down_16x16.png"></a>
|
||||
</div>
|
||||
--> <div class="" id="searchtracks">
|
||||
<h4>Tracks</h4>
|
||||
<ul id="trackresulttable" class="table"></ul>
|
||||
<div class="" id="searchtracks">
|
||||
<div data-role="header">
|
||||
<h4>Tracks</h4>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<table data-role="table" data-mode="reflow" id="trackresulttable" class="ui-responsive table-stroke">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Track</th>
|
||||
<th data-priority="1">Artist</th>
|
||||
<th data-priority="2">Time</th>
|
||||
<th data-priority="3">Album</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -22,9 +22,6 @@ function initSearch() {
|
||||
document.activeElement.blur();
|
||||
$("input").blur();
|
||||
|
||||
$('#artistresulttable').empty();
|
||||
$('#albumresulttable').empty();
|
||||
$('#trackresulttable').empty();
|
||||
delete customTracklists['allresultscache'];
|
||||
delete customTracklists['artistresultscache'];
|
||||
delete customTracklists['albumresultscache'];
|
||||
@ -41,71 +38,128 @@ function initSearch() {
|
||||
* process results of a search
|
||||
*********************************************************/
|
||||
function processSearchResults(resultArr) {
|
||||
$(SEARCH_TRACK_TABLE).empty();
|
||||
$(SEARCH_ARTIST_TABLE).empty();
|
||||
$(SEARCH_ALBUM_TABLE).empty();
|
||||
//get the right result
|
||||
//depends on versioon of mopidy: 0 = 0.14+ 1 = 0.13-
|
||||
// var results = resultArr[0];
|
||||
//add complete array
|
||||
console.log(resultArr);
|
||||
//results = tracks from spotify
|
||||
var results = resultArr[0];
|
||||
//add tracks from local search
|
||||
if (resultArr[1].tracks) {
|
||||
results.tracks = resultArr[1].tracks.concat(results.tracks);
|
||||
}
|
||||
if (resultArr[1].artists) {
|
||||
results.artists = resultArr[1].artists.concat(results.artists);
|
||||
}
|
||||
if (resultArr[1].albums) {
|
||||
results.albums = resultArr[1].albums.concat(results.albums);
|
||||
// Merge results from different backends.
|
||||
var results = {'tracks': [], 'artists': [], 'albums': []};
|
||||
var emptyResult = true;
|
||||
|
||||
console.log(resultArr, 'resultArr');
|
||||
|
||||
for (var i = 0; i < resultArr.length; ++i) {
|
||||
for (var prop in results) {
|
||||
if (resultArr[i][prop] && resultArr[i][prop].length) {
|
||||
results[prop] = results[prop].concat(resultArr[i][prop]);
|
||||
emptyResult = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var tracks = (results.tracks) ? results.tracks : '';
|
||||
customTracklists['trackresultscache'] = tracks;
|
||||
var artists = (results.artists) ? results.artists : '';
|
||||
console.log(artists);
|
||||
var albums = (results.albums) ? results.albums : '';
|
||||
if ((tracks == '') && (artists == '') && (albums == '')) {
|
||||
customTracklists['trackresultscache'] = results.tracks;
|
||||
|
||||
if (emptyResult) {
|
||||
alert('No results');
|
||||
showLoading(false);
|
||||
return false;
|
||||
}
|
||||
|
||||
$("#searchresults").show();
|
||||
|
||||
// Returns a string where {x} in template is replaced by tokens[x].
|
||||
function theme(template, tokens) {
|
||||
return template.replace(/{[^}]+}/g, function(match) {
|
||||
return tokens[match.slice(1,-1)];
|
||||
});
|
||||
}
|
||||
|
||||
// 'Show more' pattern
|
||||
var showMorePattern = '<li onclick="$(this).hide().siblings().show(); return false;"><a>Show {count} more</a></li>';
|
||||
|
||||
// Artist results
|
||||
var child = '';
|
||||
for (var i = 0; i < artists.length; i++) {
|
||||
child += '<li class="resultrow';
|
||||
if (i > 9) {
|
||||
break;
|
||||
//child += " hidden";
|
||||
var pattern = '<li><a href="#" onclick="return showArtist(this.id)" id={id}><strong>{name}</strong></a></li>';
|
||||
var tokens;
|
||||
|
||||
for (var i = 0; i < results.artists.length; i++) {
|
||||
tokens = {
|
||||
'id': results.artists[i].uri,
|
||||
'name': results.artists[i].name
|
||||
};
|
||||
|
||||
// Add 'Show all' item after a certain number of hits.
|
||||
if (i == 4 && results.artists.length > 5) {
|
||||
child += theme(showMorePattern, {'count': results.artists.length - i});
|
||||
pattern = pattern.replace('<li>', '<li class="overflow">');
|
||||
}
|
||||
child += '"><a href="#" onclick="return showArtist(this.id)" id="' + artists[i].uri + '">' + artists[i].name + "</a></li>";
|
||||
|
||||
child += theme(pattern, tokens);
|
||||
}
|
||||
$(SEARCH_ARTIST_TABLE).html(child);
|
||||
// $(SEARCH_ARTIST_TABLE).listview('refresh');
|
||||
|
||||
// Inject list items, refresh listview and hide superfluous items.
|
||||
$(SEARCH_ARTIST_TABLE).html(child).listview('refresh').find('.overflow').hide();
|
||||
|
||||
// Album results
|
||||
child = '';
|
||||
pattern = '<li><a href="#" onclick="return showAlbum(this.id)" id="{albumId}">';
|
||||
pattern += '<h5 data-role="heading">{albumName}</h5>';
|
||||
pattern += '<p data-role="desc">{artistName} ({albumYear})</p>';
|
||||
pattern += '</a></li>';
|
||||
|
||||
for (var i = 0; i < albums.length; i++) {
|
||||
child += '<li class="resultrow';
|
||||
if (i > 9) {
|
||||
break;
|
||||
//child += " hidden";
|
||||
for (var i = 0; i < results.albums.length; i++) {
|
||||
tokens = {
|
||||
'albumId': results.albums[i].uri,
|
||||
'albumName': results.albums[i].name,
|
||||
'artistName': '',
|
||||
'albumYear': results.albums[i].date
|
||||
};
|
||||
|
||||
for (var j = 0; j < results.albums[i].artists.length; j++) {
|
||||
tokens.artistName += results.albums[i].artists[j].name + ' ';
|
||||
}
|
||||
child += '"><a href="#" onclick="return showAlbum(this.id)" id="' + albums[i].uri + '">';
|
||||
child += "<h1>" + albums[i].name + "</h1><p>";
|
||||
for (var j = 0; j < albums[i].artists.length; j++) {
|
||||
child += albums[i].artists[j].name + " ";
|
||||
|
||||
// Add 'Show all' item after a certain number of hits.
|
||||
if (i == 4 && results.albums.length > 5) {
|
||||
child += theme(showMorePattern, {'count': results.albums.length - i});
|
||||
pattern = pattern.replace('<li>', '<li class="overflow">');
|
||||
}
|
||||
child += '</p></a></li>';
|
||||
|
||||
child += theme(pattern, tokens);
|
||||
}
|
||||
$(SEARCH_ALBUM_TABLE).html(child);
|
||||
// $(SEARCH_ALBUM_TABLE).listview('refresh');
|
||||
|
||||
$('#expandsearch').show();
|
||||
// Inject list items, refresh listview and hide superfluous items.
|
||||
$(SEARCH_ALBUM_TABLE).html(child).listview('refresh').find('.overflow').hide();
|
||||
|
||||
// Track results
|
||||
child = '';
|
||||
pattern = '<tr><td>';
|
||||
pattern += '<a id="{domId}" onclick="return popupTracks(event, \'trackresultscache\', \'{trackuri}\')" data-role="button" data-icon="bars" data-iconpos="notext"></a>';
|
||||
pattern += '</td><td>{track}</td><td>{artist}</td><td>{time}</td><td>{album}</td></tr>';
|
||||
|
||||
//playlisttotable(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache');
|
||||
for (var i = 0; i < results.tracks.length; ++i) {
|
||||
popupData[results.tracks[i].uri] = results.tracks[i];
|
||||
|
||||
tokens = {
|
||||
'track': results.tracks[i].name,
|
||||
'artist': '',
|
||||
'time': timeFromSeconds(results.tracks[i].length / 1000),
|
||||
'album': results.tracks[i].album.name,
|
||||
'listuri': undefined,
|
||||
'trackuri': results.tracks[i].uri,
|
||||
'domId': SEARCH_TRACK_TABLE.substr(1) + '-' + results.tracks[i].uri,
|
||||
};
|
||||
|
||||
var as = [];
|
||||
for (var j = 0; j < results.tracks[i].artists.length; ++j) {
|
||||
as.push(results.tracks[i].artists[j].name);
|
||||
}
|
||||
tokens.artist = as.join(', ');
|
||||
|
||||
child += theme(pattern, tokens);
|
||||
}
|
||||
|
||||
$(SEARCH_TRACK_TABLE).children('tbody').html(child);
|
||||
$(SEARCH_TRACK_TABLE).find('tbody tr td a').button();
|
||||
$(SEARCH_TRACK_TABLE).table('refresh');
|
||||
|
||||
//console.log(results.tracks);
|
||||
playlisttotable(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache');
|
||||
setSongInfo();
|
||||
showLoading(false);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user