vrfs988: sidebar/searchresults
This commit is contained in:
parent
87ae9d97df
commit
cdb2b9fab9
|
|
@ -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();
|
||||
};
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -287,6 +287,7 @@
|
|||
}
|
||||
|
||||
context.JK.search = function(query, app, callback) {
|
||||
logger.debug("search: "+query)
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
background-color:#4c4c4c;
|
||||
min-height:20px;
|
||||
overflow-x:hidden;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
a.search-nav {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue