From cdb2b9fab93288251fa5f0455adcd7bc9ac9ac83 Mon Sep 17 00:00:00 2001 From: Jonathan Kolyer Date: Sat, 11 Jan 2014 20:18:20 -0600 Subject: [PATCH] vrfs988: sidebar/searchresults --- web/app/assets/javascripts/searchResults.js | 135 +++++++++++------- web/app/assets/javascripts/sidebar.js | 38 +++-- web/app/assets/javascripts/utils.js | 1 + .../stylesheets/client/searchResults.css.scss | 1 + web/app/views/api_search/index.rabl | 2 + web/app/views/clients/_searchResults.html.erb | 20 ++- 6 files changed, 128 insertions(+), 69 deletions(-) diff --git a/web/app/assets/javascripts/searchResults.js b/web/app/assets/javascripts/searchResults.js index 3d164fdce..32e335ab5 100644 --- a/web/app/assets/javascripts/searchResults.js +++ b/web/app/assets/javascripts/searchResults.js @@ -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(); }; }; diff --git a/web/app/assets/javascripts/sidebar.js b/web/app/assets/javascripts/sidebar.js index fe7976ecb..21ca0f8d2 100644 --- a/web/app/assets/javascripts/sidebar.js +++ b/web/app/assets/javascripts/sidebar.js @@ -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(); diff --git a/web/app/assets/javascripts/utils.js b/web/app/assets/javascripts/utils.js index 2d9ec36a1..030e94dfb 100644 --- a/web/app/assets/javascripts/utils.js +++ b/web/app/assets/javascripts/utils.js @@ -287,6 +287,7 @@ } context.JK.search = function(query, app, callback) { + logger.debug("search: "+query) $.ajax({ type: "GET", dataType: "json", diff --git a/web/app/assets/stylesheets/client/searchResults.css.scss b/web/app/assets/stylesheets/client/searchResults.css.scss index 6734ec71b..840666875 100644 --- a/web/app/assets/stylesheets/client/searchResults.css.scss +++ b/web/app/assets/stylesheets/client/searchResults.css.scss @@ -4,6 +4,7 @@ background-color:#4c4c4c; min-height:20px; overflow-x:hidden; + margin-top: 30px; } a.search-nav { diff --git a/web/app/views/api_search/index.rabl b/web/app/views/api_search/index.rabl index a2e6e218d..177cab95f 100644 --- a/web/app/views/api_search/index.rabl +++ b/web/app/views/api_search/index.rabl @@ -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 diff --git a/web/app/views/clients/_searchResults.html.erb b/web/app/views/clients/_searchResults.html.erb index 6377a26a5..cdb148294 100644 --- a/web/app/views/clients/_searchResults.html.erb +++ b/web/app/views/clients/_searchResults.html.erb @@ -12,10 +12,9 @@
- MUSICIANS - BANDS - FANS - RECORDINGS + MUSICIANS + BANDS + FANS
@@ -24,7 +23,7 @@
- + + +