From aac29c3547b6bd4c0f3f4acbd8f59e59a656d01f Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Wed, 12 Feb 2014 03:12:30 -0500 Subject: [PATCH] VRFS-1028 band hover bubble --- web/app/assets/javascripts/findBand.js | 419 ++++++++-------- web/app/assets/javascripts/findMusician.js | 452 +++++++++--------- web/app/assets/javascripts/hoverBand.js | 90 +++- web/app/assets/javascripts/hoverMusician.js | 20 +- web/app/assets/javascripts/utils.js | 22 +- web/app/views/api_bands/show.rabl | 6 +- web/app/views/clients/_bands.html.erb | 12 +- web/app/views/clients/_hoverBand.html.erb | 75 ++- web/app/views/clients/_hoverMusician.html.erb | 1 - 9 files changed, 578 insertions(+), 519 deletions(-) diff --git a/web/app/assets/javascripts/findBand.js b/web/app/assets/javascripts/findBand.js index 3209915e3..024d3fab8 100644 --- a/web/app/assets/javascripts/findBand.js +++ b/web/app/assets/javascripts/findBand.js @@ -1,229 +1,230 @@ (function(context,$) { - "use strict"; + "use strict"; - context.JK = context.JK || {}; - context.JK.FindBandScreen = function(app) { + context.JK = context.JK || {}; + context.JK.FindBandScreen = function(app) { - var logger = context.JK.logger; - var bands = {}; - var bandList; - var instrument_logo_map = context.JK.getInstrumentIconMap24(); - var did_show_band_page = false; - var page_num=1, page_count=0; + var logger = context.JK.logger; + var bands = {}; + var bandList; + var instrument_logo_map = context.JK.getInstrumentIconMap24(); + var did_show_band_page = false; + var page_num=1, page_count=0; - function loadBands(queryString) { - // squelch nulls and undefines - queryString = !!queryString ? queryString : ""; + function loadBands(queryString) { + // squelch nulls and undefines + queryString = !!queryString ? queryString : ""; - $.ajax({ - type: "GET", - url: "/api/search.json?" + queryString, - success: afterLoadBands, - error: app.ajaxError - }); + $.ajax({ + type: "GET", + url: "/api/search.json?" + queryString, + success: afterLoadBands, + error: app.ajaxError + }); + } + + function search() { + did_show_band_page = true; + var queryString = 'srch_b=1&page='+page_num+'&'; + + // order by + var orderby = $('#band_order_by').val(); + if (typeof orderby != 'undefined' && orderby.length > 0) { + queryString += "orderby=" + orderby + '&'; + } + // genre filter + var genre = $('#band_genre').val(); + if (typeof genre != 'undefined' && !(genre === '')) { + queryString += "genre=" + genre + '&'; + } + // distance filter + var query_param = $('#band_query_distance').val(); + if (query_param !== null && query_param.length > 0) { + var matches = query_param.match(/(\d+)/); + if (0 < matches.length) { + var distance = matches[0]; + queryString += "distance=" + distance + '&'; } + } + loadBands(queryString); + } - function search() { - did_show_band_page = true; - var queryString = 'srch_b=1&page='+page_num+'&'; + function refreshDisplay() { + clearResults(); + search(); + } - // order by - var orderby = $('#band_order_by').val(); - if (typeof orderby != 'undefined' && orderby.length > 0) { - queryString += "orderby=" + orderby + '&'; + function afterLoadBands(mList) { + // display the 'no bands' banner if appropriate + var $noBandsFound = $('#bands-none-found'); + bandList = mList; + + if(bandList.length == 0) { + $noBandsFound.show(); + bands = []; + } + else { + $noBandsFound.hide(); + bands = bandList['bands']; + if (!(typeof bands === 'undefined')) { + $('#band-filter-city').text(bandList['city']); + if (0 == page_count) { + page_count = bandList['page_count']; + } + renderBands(); + } + } + } + + function renderBands() { + var ii, len; + var mTemplate = $('#template-find-band-row').html(); + var pTemplate = $('#template-band-player-info').html(); + var aTemplate = $('#template-band-action-btns').html(); + var bVals, bb, renderings=''; + var instr_logos, instr; + var players, playerVals, aPlayer; + + for (ii=0, len=bands.length; ii < len; ii++) { + bb = bands[ii]; + instr_logos = ''; + players = ''; + playerVals = {}; + for (var jj=0, ilen=bb['players'].length; jj 0) { - var matches = query_param.match(/(\d+)/); - if (0 < matches.length) { - var distance = matches[0]; - queryString += "distance=" + distance + '&'; - } - } - loadBands(queryString); + player_instrs += ''; + } + + playerVals = { + user_id: aPlayer.user_id, + player_name: aPlayer.name, + profile_url: '/client#/profile/' + aPlayer.user_id, + avatar_url: context.JK.resolveAvatarUrl(aPlayer.photo_url), + player_instruments: player_instrs + }; + + players += context.JK.fillTemplate(pTemplate, playerVals); } - function refreshDisplay() { - clearResults(); - search(); + var actionVals = { + profile_url: "/client#/bandProfile/" + bb.id, + button_follow: bb['is_following'] ? '' : 'button-orange', + button_message: 'button-orange' + }; + var band_actions = context.JK.fillTemplate(aTemplate, actionVals); + var bgenres = ''; + + for (jj=0, ilen=bb['genres'].length; jj'; } - function afterLoadBands(mList) { - // display the 'no bands' banner if appropriate - var $noBandsFound = $('#bands-none-found'); - bandList = mList; + bgenres += '
'; - if(bandList.length == 0) { - $noBandsFound.show(); - bands = []; - } else { - $noBandsFound.hide(); - bands = bandList['bands']; - if (!(typeof bands === 'undefined')) { - $('#band-filter-city').text(bandList['city']); - if (0 == page_count) { - page_count = bandList['page_count']; - } - renderBands(); - } - } + bVals = { + avatar_url: context.JK.resolveBandAvatarUrl(bb.photo_url), + profile_url: "/client#/bandProfile/" + bb.id, + band_name: bb.name, + band_location: bb.city + ', ' + bb.state, + genres: bgenres, + instruments: instr_logos, + biography: bb['biography'], + follow_count: bb['follow_count'], + recording_count: bb['recording_count'], + session_count: bb['session_count'], + band_id: bb['id'], + band_player_template: players, + band_action_template: band_actions + }; + + var band_row = context.JK.fillTemplate(mTemplate, bVals); + renderings += band_row; + } + + $('#band-filter-results').append(renderings); + + $('.search-m-follow').on('click', followBand); + context.JK.bindHoverEvents(); + } + + function beforeShow(data) { + } + + function afterShow(data) { + if (!did_show_band_page) { + refreshDisplay(); + } + } + + function clearResults() { + bands = {}; + $('#band-filter-results').empty(); + page_num = 1; + page_count = 0; + } + + function followBand(evt) { + // if the band is already followed, remove the button-orange class, and prevent + // the link from working + if (0 == $(this).closest('.button-orange').size()) return false; + $(this).click(function(ee) {ee.preventDefault();}); + + evt.stopPropagation(); + var newFollowing = {}; + newFollowing.band_id = $(this).parent().data('band-id'); + var url = "/api/users/" + context.JK.currentUserId + "/followings"; + $.ajax({ + type: "POST", + dataType: "json", + contentType: 'application/json', + url: url, + data: JSON.stringify(newFollowing), + processData: false, + success: function(response) { + // remove the orange look to indicate it's not selectable + // @FIXME -- this will need to be tweaked when we allow unfollowing + $('div[data-band-id='+newFollowing.band_id+'] .search-m-follow').removeClass('button-orange').addClass('button-grey'); + }, + error: app.ajaxError + }); + } + + function events() { + $('#band_query_distance').change(refreshDisplay); + $('#band_genre').change(refreshDisplay); + $('#band_order_by').change(refreshDisplay); + + $('#band-filter-results').bind('scroll', function() { + if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { + if (page_num < page_count) { + page_num += 1; + search(); + } } + }); + } - /** - * Render a list of bands - */ - function renderBands() { - var ii, len; - var mTemplate = $('#template-find-band-row').html(); - var pTemplate = $('#template-band-player-info').html(); - var aTemplate = $('#template-band-action-btns').html(); - var bVals, bb, renderings=''; - var instr_logos, instr; - var players, playerVals, aPlayer; - - for (ii=0, len=bands.length; ii < len; ii++) { - bb = bands[ii]; - instr_logos = ''; - players = ''; - playerVals = {}; - for (var jj=0, ilen=bb['players'].length; jj'; - } + function initialize() { + var screenBindings = { + 'beforeShow': beforeShow, + 'afterShow': afterShow + }; + app.bindScreen('bands', screenBindings); - playerVals = { - player_name: aPlayer.name, - profile_url: '/client#/profile/' + aPlayer.user_id, - avatar_url: context.JK.resolveAvatarUrl(aPlayer.photo_url), - player_instruments: player_instrs - }; - players += context.JK.fillTemplate(pTemplate, playerVals); - } - var actionVals = { - profile_url: "/client#/bandProfile/" + bb.id, - button_follow: bb['is_following'] ? '' : 'button-orange', - button_message: 'button-orange' - }; - var band_actions = context.JK.fillTemplate(aTemplate, actionVals); - var bgenres = ''; - for (jj=0, ilen=bb['genres'].length; jj'; - } - bgenres += '
'; + events(); + } - bVals = { - avatar_url: context.JK.resolveAvatarUrl(bb.photo_url), - profile_url: "/client#/bandProfile/" + bb.id, - band_name: bb.name, - band_location: bb.city + ', ' + bb.state, - genres: bgenres, - instruments: instr_logos, - biography: bb['biography'], - follow_count: bb['follow_count'], - recording_count: bb['recording_count'], - session_count: bb['session_count'], - band_id: bb['id'], - band_player_template: players, - band_action_template: band_actions - }; - var band_row = context.JK.fillTemplate(mTemplate, bVals); - renderings += band_row; - } - $('#band-filter-results').append(renderings); - - $('.search-m-follow').on('click', followBand); - } - - function beforeShow(data) { - } - - function afterShow(data) { - if (!did_show_band_page) { - refreshDisplay(); - } - } - - function clearResults() { - bands = {}; - $('#band-filter-results').empty(); - page_num = 1; - page_count = 0; - } - - function followBand(evt) { - // if the band is already followed, remove the button-orange class, and prevent - // the link from working - if (0 == $(this).closest('.button-orange').size()) return false; - $(this).click(function(ee) {ee.preventDefault();}); - - evt.stopPropagation(); - var newFollowing = {}; - newFollowing.band_id = $(this).parent().data('band-id'); - var url = "/api/users/" + context.JK.currentUserId + "/followings"; - $.ajax({ - type: "POST", - dataType: "json", - contentType: 'application/json', - url: url, - data: JSON.stringify(newFollowing), - processData: false, - success: function(response) { - // remove the orange look to indicate it's not selectable -// @FIXME -- this will need to be tweaked when we allow unfollowing - $('div[data-band-id='+newFollowing.band_id+'] .search-m-follow').removeClass('button-orange').addClass('button-grey'); - }, - error: app.ajaxError - }); - } - - function events() { - $('#band_query_distance').change(refreshDisplay); - $('#band_genre').change(refreshDisplay); - $('#band_order_by').change(refreshDisplay); - - $('#band-filter-results').bind('scroll', function() { - if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { - if (page_num < page_count) { - page_num += 1; - search(); - } - } - }); - } - - /** - * Initialize, - */ - function initialize() { - var screenBindings = { - 'beforeShow': beforeShow, - 'afterShow': afterShow - }; - app.bindScreen('bands', screenBindings); - - events(); - } - - this.initialize = initialize; - this.renderBands = renderBands; - this.afterShow = afterShow; - - this.clearResults = clearResults; - - return this; - }; + this.initialize = initialize; + this.renderBands = renderBands; + this.afterShow = afterShow; + this.clearResults = clearResults; + return this; + } })(window,jQuery); \ No newline at end of file diff --git a/web/app/assets/javascripts/findMusician.js b/web/app/assets/javascripts/findMusician.js index bc0b4b2a8..10afec2f3 100644 --- a/web/app/assets/javascripts/findMusician.js +++ b/web/app/assets/javascripts/findMusician.js @@ -1,250 +1,250 @@ (function(context,$) { - "use strict"; + "use strict"; - context.JK = context.JK || {}; - context.JK.FindMusicianScreen = function(app) { + context.JK = context.JK || {}; + context.JK.FindMusicianScreen = function(app) { - var logger = context.JK.logger; - var musicians = {}; - var musicianList; - var instrument_logo_map = context.JK.getInstrumentIconMap24(); - var did_show_musician_page = false; - var page_num=1, page_count=0; + var logger = context.JK.logger; + var musicians = {}; + var musicianList; + var instrument_logo_map = context.JK.getInstrumentIconMap24(); + var did_show_musician_page = false; + var page_num=1, page_count=0; - function loadMusicians(queryString) { - // squelch nulls and undefines - queryString = !!queryString ? queryString : ""; + function loadMusicians(queryString) { + // squelch nulls and undefines + queryString = !!queryString ? queryString : ""; - $.ajax({ - type: "GET", - url: "/api/search.json?" + queryString, - success: afterLoadMusicians, - error: app.ajaxError - }); + $.ajax({ + type: "GET", + url: "/api/search.json?" + queryString, + success: afterLoadMusicians, + error: app.ajaxError + }); + } + + function search() { + did_show_musician_page = true; + var queryString = 'srch_m=1&page='+page_num+'&'; + + // order by + var orderby = $('#musician_order_by').val(); + if (typeof orderby != 'undefined' && orderby.length > 0) { + queryString += "orderby=" + orderby + '&'; } - function search() { - did_show_musician_page = true; - var queryString = 'srch_m=1&page='+page_num+'&'; - - // order by - var orderby = $('#musician_order_by').val(); - if (typeof orderby != 'undefined' && orderby.length > 0) { - queryString += "orderby=" + orderby + '&'; - } - - // instrument filter - var instrument = $('#musician_instrument').val(); - if (typeof instrument != 'undefined' && !(instrument === '')) { - queryString += "instrument=" + instrument + '&'; - } - - // distance filter - var query_param = $('#musician_query_distance').val(); - if (query_param !== null && query_param.length > 0) { - var matches = query_param.match(/(\d+)/); - if (0 < matches.length) { - var distance = matches[0]; - queryString += "distance=" + distance + '&'; - } - } - loadMusicians(queryString); + // instrument filter + var instrument = $('#musician_instrument').val(); + if (typeof instrument != 'undefined' && !(instrument === '')) { + queryString += "instrument=" + instrument + '&'; } - function refreshDisplay() { - clearResults(); - search(); - } - - function afterLoadMusicians(mList) { - // display the 'no musicians' banner if appropriate - var $noMusiciansFound = $('#musicians-none-found'); - musicianList = mList; - - if(musicianList.length == 0) { - $noMusiciansFound.show(); - musicians = []; - } - else { - $noMusiciansFound.hide(); - musicians = musicianList['musicians']; - if (!(typeof musicians === 'undefined')) { - $('#musician-filter-city').text(musicianList['city']); - if (0 == page_count) { - page_count = musicianList['page_count']; - } - renderMusicians(); - } + // distance filter + var query_param = $('#musician_query_distance').val(); + if (query_param !== null && query_param.length > 0) { + var matches = query_param.match(/(\d+)/); + if (0 < matches.length) { + var distance = matches[0]; + queryString += "distance=" + distance + '&'; } } + loadMusicians(queryString); + } - function renderMusicians() { - var ii, len; - var mTemplate = $('#template-find-musician-row').html(); - var fTemplate = $('#template-musician-follow-info').html(); - var aTemplate = $('#template-musician-action-btns').html(); - var mVals, mm, renderings=''; - var instr_logos, instr; - var follows, followVals, aFollow; + function refreshDisplay() { + clearResults(); + search(); + } - for (ii=0, len=musicians.length; ii < len; ii++) { - mm = musicians[ii]; - if (context.JK.currentUserId === mm.id) { - // VRFS-294.3 (David) => skip if current user is musician - continue; + function afterLoadMusicians(mList) { + // display the 'no musicians' banner if appropriate + var $noMusiciansFound = $('#musicians-none-found'); + musicianList = mList; + + if(musicianList.length == 0) { + $noMusiciansFound.show(); + musicians = []; + } + else { + $noMusiciansFound.hide(); + musicians = musicianList['musicians']; + if (!(typeof musicians === 'undefined')) { + $('#musician-filter-city').text(musicianList['city']); + if (0 == page_count) { + page_count = musicianList['page_count']; } - instr_logos = ''; - for (var jj=0, ilen=mm['instruments'].length; jj'; + renderMusicians(); + } + } + } + + function renderMusicians() { + var ii, len; + var mTemplate = $('#template-find-musician-row').html(); + var fTemplate = $('#template-musician-follow-info').html(); + var aTemplate = $('#template-musician-action-btns').html(); + var mVals, mm, renderings=''; + var instr_logos, instr; + var follows, followVals, aFollow; + + for (ii=0, len=musicians.length; ii < len; ii++) { + mm = musicians[ii]; + if (context.JK.currentUserId === mm.id) { + // VRFS-294.3 (David) => skip if current user is musician + continue; + } + instr_logos = ''; + for (var jj=0, ilen=mm['instruments'].length; jj'; + } + follows = ''; + followVals = {}; + for (var jj=0, ilen=mm['followings'].length; jj= $(this)[0].scrollHeight) { - if (page_num < page_count) { - page_num += 1; - search(); - } - } - }); - } - - function initialize() { - var screenBindings = { - 'beforeShow': beforeShow, - 'afterShow': afterShow + var actionVals = { + profile_url: "/client#/profile/" + mm.id, + friend_class: 'button-' + (mm['is_friend'] ? 'grey' : 'orange'), + friend_caption: (mm.is_friend ? 'DIS':'')+'CONNECT', + follow_class: 'button-' + (mm['is_following'] ? 'grey' : 'orange'), + follow_caption: (mm.is_following ? 'UN':'')+'FOLLOW', + button_message: 'button-orange' }; - app.bindScreen('musicians', screenBindings); + var musician_actions = context.JK.fillTemplate(aTemplate, actionVals); - events(); + mVals = { + avatar_url: context.JK.resolveAvatarUrl(mm.photo_url), + profile_url: "/client#/profile/" + mm.id, + musician_name: mm.name, + musician_location: mm.city + ', ' + mm.state, + instruments: instr_logos, + biography: mm['biography'], + follow_count: mm['follow_count'], + friend_count: mm['friend_count'], + recording_count: mm['recording_count'], + session_count: mm['session_count'], + musician_id: mm['id'], + musician_follow_template: follows, + musician_action_template: musician_actions + }; + var musician_row = context.JK.fillTemplate(mTemplate, mVals); + renderings += musician_row; + } + $('#musician-filter-results').append(renderings); + + $('.search-m-friend').on('click', friendMusician); + $('.search-m-follow').on('click', followMusician); + + context.JK.bindHoverEvents(); + } + + function beforeShow(data) { + } + + function afterShow(data) { + if (!did_show_musician_page) { + refreshDisplay(); + } + } + + function clearResults() { + musicians = {}; + $('#musician-filter-results').empty(); + page_num = 1; + page_count = 0; + } + + function friendMusician(evt) { + // if the musician is already a friend, remove the button-orange class, and prevent + // the link from working + if (0 === $(this).closest('.button-orange').size()) { + return false; } - this.initialize = initialize; - this.renderMusicians = renderMusicians; - this.afterShow = afterShow; + $(this).click(function(ee) {ee.preventDefault();}); - this.clearResults = clearResults; + evt.stopPropagation(); + var uid = $(this).parent().data('musician-id'); + context.JK.sendFriendRequest(app, uid, friendRequestCallback); + } - return this; - }; + function friendRequestCallback(user_id) { + // remove the orange look to indicate it's not selectable +// @FIXME -- this will need to be tweaked when we allow unfollowing + $('div[data-musician-id='+user_id+'] .search-m-friend').removeClass('button-orange').addClass('button-grey'); + } + + function followMusician(evt) { + // if the musician is already followed, remove the button-orange class, and prevent + // the link from working + if (0 === $(this).closest('.button-orange').size()) { + return false; + } + + $(this).click(function(ee) {ee.preventDefault();}); + + evt.stopPropagation(); + var newFollowing = {}; + newFollowing.user_id = $(this).parent().data('musician-id'); + var url = "/api/users/" + context.JK.currentUserId + "/followings"; + $.ajax({ + type: "POST", + dataType: "json", + contentType: 'application/json', + url: url, + data: JSON.stringify(newFollowing), + processData: false, + success: function(response) { + // remove the orange look to indicate it's not selectable + // @FIXME -- this will need to be tweaked when we allow unfollowing + $('div[data-musician-id='+newFollowing.user_id+'] .search-m-follow').removeClass('button-orange').addClass('button-grey'); + }, + error: app.ajaxError + }); + } + + function events() { + $('#musician_query_distance').change(refreshDisplay); + $('#musician_instrument').change(refreshDisplay); + $('#musician_order_by').change(refreshDisplay); + + $('#musician-filter-results').bind('scroll', function() { + if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { + if (page_num < page_count) { + page_num += 1; + search(); + } + } + }); + } + + function initialize() { + var screenBindings = { + 'beforeShow': beforeShow, + 'afterShow': afterShow + }; + app.bindScreen('musicians', screenBindings); + + events(); + } + + this.initialize = initialize; + this.renderMusicians = renderMusicians; + this.afterShow = afterShow; + + this.clearResults = clearResults; + + return this; + } })(window,jQuery); diff --git a/web/app/assets/javascripts/hoverBand.js b/web/app/assets/javascripts/hoverBand.js index 076c8f466..ea408da91 100644 --- a/web/app/assets/javascripts/hoverBand.js +++ b/web/app/assets/javascripts/hoverBand.js @@ -1,14 +1,86 @@ (function(context,$) { - "use strict"; - context.JK = context.JK || {}; - context.JK.BandHoverBubble = function(app) { + "use strict"; + context.JK = context.JK || {}; + context.JK.BandHoverBubble = function(bandId, position) { - function initialize() { + var logger = context.JK.logger; + var rest = context.JK.Rest(); + var instrumentLogoMap = context.JK.getInstrumentIconMap24(); + var hoverSelector = "#band-hover"; - } - - this.initialize = initialize; - this.showBubble = showBubble; - } + this.showBubble = function() { + $(hoverSelector).css({left: position.left, top: position.top+200}); + $(hoverSelector).fadeIn(500); + + rest.getBand(bandId) + .done(function(response) { + $(hoverSelector).html(''); + + // musicians + var musicianHtml = ''; + $.each(response.musicians, function(index, val) { + var instrumentHtml = ''; + + musicianHtml += ''; + musicianHtml += '' + val.name + ''; + + instrumentHtml = '
'; + $.each(val.instruments, function(index, instrument) { + instrumentHtml += ' '; + }); + + instrumentHtml += '
'; + + musicianHtml += instrumentHtml; + musicianHtml += ''; + }); + + var template = $('#template-hover-band').html(); + if (response.biography == null) { + response.biography = 'No Biography Available'; + } + + var genres = []; + genres = $.map(response.genres, function(n, i) { + return n.description; + }); + + var bandHtml = context.JK.fillTemplate(template, { + avatar_url: context.JK.resolveBandAvatarUrl(response.photo_url), + name: response.name, + location: response.location, + genres: genres.join(', '), + musicians: musicianHtml, + like_count: response.liker_count, + follower_count: response.follower_count, + recording_count: response.recording_count, + session_count: response.session_count, + biography: response.biography, + profile_url: "/client#/bandProfile/" + response.id + }); + + $(hoverSelector).append('

Band Detail

' + bandHtml); + }) + .fail(function(xhr) { + if(xhr.status >= 500) { + context.JK.fetchUserNetworkOrServerFailure(); + } + else if(xhr.status == 404) { + context.JK.entityNotFound("Band"); + } + else { + context.JK.app.ajaxError(arguments); + } + }); + }; + + this.hideBubble = function() { + $(hoverSelector).hide(); + }; + + this.id = function() { + return hoverSelector; + }; + } })(window,jQuery); \ No newline at end of file diff --git a/web/app/assets/javascripts/hoverMusician.js b/web/app/assets/javascripts/hoverMusician.js index cb66a2edd..26fe6b2a3 100644 --- a/web/app/assets/javascripts/hoverMusician.js +++ b/web/app/assets/javascripts/hoverMusician.js @@ -3,17 +3,19 @@ "use strict"; context.JK = context.JK || {}; context.JK.MusicianHoverBubble = function(userId, position) { + var logger = context.JK.logger; var rest = context.JK.Rest(); var instrumentLogoMap = context.JK.getInstrumentIconMap24(); + var hoverSelector = "#musician-hover"; this.showBubble = function() { - $("#musician-hover").css({left: position.left, top: position.top}); - $("#musician-hover").fadeIn(500); + $(hoverSelector).css({left: position.left, top: position.top+200}); + $(hoverSelector).fadeIn(500); rest.getUserDetail({id: userId}) .done(function(response) { - $("#musician-hover").html(''); + $(hoverSelector).html(''); // instruments var instrumentHtml = ''; @@ -66,27 +68,27 @@ profile_url: "/client#/profile/" + response.id }); - $("#musician-hover").append('

Musician Detail

' + musicianHtml); + $(hoverSelector).append('

Musician Detail

' + musicianHtml); }) .fail(function(xhr) { - if(jqXHR.status >= 500) { + if(xhr.status >= 500) { context.JK.fetchUserNetworkOrServerFailure(); } - else if(jqXHR.status == 404) { + else if(xhr.status == 404) { context.JK.entityNotFound("User"); } else { - app.ajaxError(arguments); + context.JK.app.ajaxError(arguments); } }); }; this.hideBubble = function() { - $("#musician-hover").hide(); + $(hoverSelector).hide(); }; this.id = function() { - return "#musician-hover"; + return hoverSelector; }; } })(window,jQuery); \ No newline at end of file diff --git a/web/app/assets/javascripts/utils.js b/web/app/assets/javascripts/utils.js index 9a9a6bd94..84dc04b0a 100644 --- a/web/app/assets/javascripts/utils.js +++ b/web/app/assets/javascripts/utils.js @@ -162,15 +162,16 @@ } // MUSICIAN - $("[hoveraction='musician']").hover( - function() { + $("[hoveraction='musician']").hoverIntent({ + over: function() { var bubble = new JK.MusicianHoverBubble($(this).attr('user-id'), $(this).position()); showBubble(bubble, $(this)); }, - function() { // this registers for leaving the hoverable element + out: function() { // this registers for leaving the hoverable element hideBubble($(this)); - } - ); + }, + sensitivity: 1 + }); // FAN $("[hoveraction='fan']").hover( @@ -184,15 +185,16 @@ ); // BAND - $("[hoveraction='band']").hover( - function() { + $("[hoveraction='band']").hoverIntent({ + over: function() { var bubble = new JK.BandHoverBubble($(this).attr('band-id'), $(this).position()); showBubble(bubble, $(this)); }, - function() { // this registers for leaving the hoverable element + out: function() { // this registers for leaving the hoverable element hideBubble($(this)); - } - ); + }, + sensitivity: 1 + }); // SESSION $("[hoveraction='session']").hover( diff --git a/web/app/views/api_bands/show.rabl b/web/app/views/api_bands/show.rabl index c893e696d..e064ec115 100644 --- a/web/app/views/api_bands/show.rabl +++ b/web/app/views/api_bands/show.rabl @@ -3,9 +3,9 @@ object @band attributes :id, :name, :city, :state, :country, :location, :website, :biography, :photo_url, :logo_url, :liker_count, :follower_count, :recording_count, :session_count, :original_fpfile_photo, :cropped_fpfile_photo, :crop_selection_photo -unless @band.users.nil? || @band.users.size == 0 +unless @band.users.blank? child :users => :musicians do - attributes :id, :first_name, :last_name, :photo_url + attributes :id, :first_name, :last_name, :name, :photo_url # TODO: figure out how to omit empty arrays node :instruments do |user| @@ -18,7 +18,7 @@ unless @band.users.nil? || @band.users.size == 0 end end -unless @band.genres.nil? || @band.genres.size == 0 +unless @band.genres.blank? child :genres => :genres do attributes :id, :description #partial('api_genres/index', :object => @band.genres) diff --git a/web/app/views/clients/_bands.html.erb b/web/app/views/clients/_bands.html.erb index d58c40430..9418ae00a 100644 --- a/web/app/views/clients/_bands.html.erb +++ b/web/app/views/clients/_bands.html.erb @@ -25,12 +25,12 @@
-
+
{band_player_template}
-
+
@@ -67,8 +67,12 @@ diff --git a/web/app/views/clients/_hoverBand.html.erb b/web/app/views/clients/_hoverBand.html.erb index 9a42e403a..834983d31 100644 --- a/web/app/views/clients/_hoverBand.html.erb +++ b/web/app/views/clients/_hoverBand.html.erb @@ -1,52 +1,31 @@ - -