vrfs988: sidebar/searchresults

This commit is contained in:
Jonathan Kolyer 2014-01-11 20:18:20 -06:00
parent 87ae9d97df
commit cdb2b9fab9
6 changed files with 128 additions and 69 deletions

View File

@ -8,6 +8,14 @@
var instrument_logo_map = context.JK.getInstrumentIconMap24();
function initializeSearchNavLinks() {
$('.search-nav').click(function() {
$('.search-nav.active').removeClass('active');
$(this).addClass('active');
setTimeout(search, 100);
});
}
function beforeShow(data) {
var query = data.query;
}
@ -15,20 +23,31 @@
function afterShow(data) {
}
function search(evt) {
evt.stopPropagation();
function selectedSearchType() {
var srchtype = $('.search-nav.active').data('search_text_type');
if (srchtype === undefined) {
srchtype = $('#search_text_type').val();
}
return srchtype;
}
function search(evt) {
if (evt) {
evt.stopPropagation();
}
$('#search-results').empty();
var query = $('#search-input').val();
context.location = '#/searchResults/:' + query;
if (query) {
context.location = '#/searchResults/:' + query;
} else {
query = $('#query').html();
}
logger.debug('query=' + query);
if (query !== '') {
$('#query').html(query + "\"");
$('#query').html(query);
query += '&search_text_type='+selectedSearchType();
context.JK.search(query, app, onSearchSuccess);
}
else {
} else {
$('#result-count').html('');
$('#query').html('');
}
@ -37,53 +56,70 @@
}
function onSearchSuccess(response) {
var resultCount=0;
if (response.search_type === 'musicians') {
resultCount = response.musicians.length;
// TODO: generalize this for each search result type (band, musician, et. al.)
$.each(response.musicians, function(index, val) {
// fill in template for Connect pre-click
var template = $('#template-search-musicians-result').html();
var searchResultHtml = context.JK.fillTemplate(template, {
userId: val.id,
avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
profile_url: "/#/profile/" + val.id,
userName: val.name,
location: val.location,
instruments: getInstrumentHtml(val.instruments)
});
// TODO: generalize this for each search result type (band, musician, recordings, et. al.)
$.each(response.musicians, function(index, val) {
// fill in template for Connect pre-click
var template = $('#template-search-result').html();
var searchResultHtml = context.JK.fillTemplate(template, {
userId: val.id,
avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
profile_url: "/#/profile/" + val.id,
userName: val.name,
location: val.location,
instruments: getInstrumentHtml(val.instruments)
});
$('#search-results').append(searchResultHtml);
$('#search-results').append(searchResultHtml);
// fill in template for Connect post-click
template = $('#template-invitation-sent').html();
var invitationSentHtml = context.JK.fillTemplate(template, {
userId: val.id,
first_name: val.first_name,
profile_url: "/#/profile/" + val.id
});
// fill in template for Connect post-click
template = $('#template-invitation-sent').html();
var invitationSentHtml = context.JK.fillTemplate(template, {
userId: val.id,
first_name: val.first_name,
profile_url: "/#/profile/" + val.id
});
$('#search-results').append(invitationSentHtml);
$('#search-results').append(invitationSentHtml);
// initialize visibility of the divs
$('div[user-id=' + val.id + '].search-connected').hide();
$('div[user-id=' + val.id + '].search-result').show();
// initialize visibility of the divs
$('div[user-id=' + val.id + '].search-connected').hide();
$('div[user-id=' + val.id + '].search-result').show();
// wire up button click handler if search result is not a friend or the current user
if (!val.is_friend && val.id !== context.JK.currentUserId) {
$('div[user-id=' + val.id + ']').find('.btn-connect-friend').click(sendFriendRequest);
}
else {
$('div[user-id=' + val.id + ']').find('.btn-connect-friend').hide();
}
});
var resultCount = response.musicians.length;
$('#result-count').html(resultCount);
if (resultCount === 1) {
$('#result-count').append(" Result for \"");
// wire up button click handler if search result is not a friend or the current user
if (!val.is_friend && val.id !== context.JK.currentUserId) {
$('div[user-id=' + val.id + ']').find('.btn-connect-friend').click(sendFriendRequest);
}
else {
$('div[user-id=' + val.id + ']').find('.btn-connect-friend').hide();
}
});
} else if (response.search_type === 'bands') {
} else if (response.search_type === 'fans') {
resultCount = response.fans.length;
$.each(response.fans, function(index, val) {
// fill in template for Connect pre-click
var template = $('#template-search-fans-result').html();
var searchResultHtml = context.JK.fillTemplate(template, {
userId: val.id,
avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
profile_url: "/#/profile/" + val.id,
userName: val.name,
location: val.location
});
$('#search-results').append(searchResultHtml);
// initialize visibility of the divs
$('div[user-id=' + val.id + '].search-result').show();
});
}
else {
$('#result-count').append(" Results for \"");
$('#result-count').html(resultCount);
if (resultCount === 1) {
$('#result-count').append(" Result for: ");
} else {
$('#result-count').append(" Results for: ");
}
}
@ -124,6 +160,7 @@
};
app.bindScreen('searchResults', screenBindings);
events();
initializeSearchNavLinks();
};
};

View File

@ -9,6 +9,12 @@
var rest = context.JK.Rest();
var invitationDialog = null;
function initializeSearchPanel() {
$('#search_text_type').change(function() {
searchForInput();
});
}
function initializeFriendsPanel() {
/////////////////////////////////////////////////////////////
@ -260,7 +266,7 @@
}
function onSearchSuccess(response) {
logger.debug(response);
// TODO: generalize this for each search result type (band, musician, recordings, et. al.)
$.each(response.musicians, function(index, val) {
// fill in template for Connect pre-click
@ -412,6 +418,19 @@
function inviteHoverOut() {
$('.invitation-button-holder').slideUp();
}
function searchForInput() {
var query = $('#search-input').val();
// logger.debug("query=" + query);
if (query === '') {
return hideSearchResults();
}
if (query.length > 2) {
query += '&search_text_type='+$('#search_text_type').val();
emptySearchResults();
search(query);
}
}
function events() {
$('#search-input').keyup(function(evt) {
@ -420,24 +439,12 @@
if (evt.which === 13) {
return hideSearchResults();
}
// ESCAPE KEY
if (evt.which === 27) {
return hideSearchResults();
}
var query = $('#search-input').val();
logger.debug("query=" + query);
if (query === '') {
return hideSearchResults();
}
if (query.length > 2) {
query += '&srch_t='+$('#search_text_type').val();
emptySearchResults();
search(query);
}
}, 1000);
searchForInput();
}, 500);
});
$('#sidebar-search-expand').click(function(evt) {
@ -923,6 +930,7 @@
this.initialize = function(invitationDialogInstance) {
events();
initializeSearchPanel();
initializeFriendsPanel();
initializeChatPanel();
initializeNotificationsPanel();

View File

@ -287,6 +287,7 @@
}
context.JK.search = function(query, app, callback) {
logger.debug("search: "+query)
$.ajax({
type: "GET",
dataType: "json",

View File

@ -4,6 +4,7 @@
background-color:#4c4c4c;
min-height:20px;
overflow-x:hidden;
margin-top: 30px;
}
a.search-nav {

View File

@ -1,5 +1,7 @@
object @search
node :search_type do |ss| ss.search_type end
if @search.bands_text_search?
child(:results => :bands) {
attributes :id, :name, :location, :photo_url, :logo_url

View File

@ -12,10 +12,9 @@
<span id="result-count"></span><span id="query"></span>
</div>
<div class="left ml35">
<a id="musician-search" href="#" class="search-nav active">MUSICIANS</a>
<a id="band-search" href="#" class="search-nav">BANDS</a>
<a id="fan-search" href="#" class="search-nav">FANS</a>
<a id="recording-search" href="#" class="search-nav">RECORDINGS</a>
<a data-search_text_type='musicians' id="musician-search-result" href="#" class="search-nav active">MUSICIANS</a>
<a data-search_text_type='bands' id="band-search-result" href="#" class="search-nav">BANDS</a>
<a data-search_text_type='fans' id="fan-search-result" href="#" class="search-nav">FANS</a>
</div>
</div>
<div class="content-scroller">
@ -24,7 +23,7 @@
</div>
</div>
<script type="text/template" id="template-search-result">
<script type="text/template" id="template-search-musicians-result">
<div user-id="{userId}" class="search-result">
<a href="#" class="avatar-small"><img src="{avatar_url}" /></a>
<div class="search-result-name"><a href="{profile_url}">{userName}</a><br />
@ -49,3 +48,14 @@
</div>
</div>
</script>
<script type="text/template" id="template-search-fans-result">
<div user-id="{userId}" class="search-result">
<a href="#" class="avatar-small"><img src="{avatar_url}" /></a>
<div class="search-result-name"><a href="{profile_url}">{userName}</a><br />
<span class="search-result-location">{location}</span>
</div>
<br clear="left" />
</div>
</script>