seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

VRFS-1028 band hover bubble

This commit is contained in:
Brian Smith 2014-02-12 03:12:30 -05:00
parent 4265ef50b7
commit aac29c3547
9 changed files with 578 additions and 519 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

419
web/app/assets/javascripts/findBand.js
View File

@ -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<ilen; jj++) {
aPlayer = bb['players'][jj];
var player_instrs = '';
var iter_pinstruments = aPlayer['instruments'].split(',');
for (var kk=0, klen=iter_pinstruments.length; kk<klen; kk++) {
var pinstr = iter_pinstruments[kk];
if (pinstr in instrument_logo_map) {
instr = instrument_logo_map[pinstr];
}
// 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);
player_instrs += '<img src="' + instr + '"/>';
}
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<ilen; jj++) {
bgenres += bb['genres'][jj]['description'] + '<br />';
}
function afterLoadBands(mList) {
// display the 'no bands' banner if appropriate
var $noBandsFound = $('#bands-none-found');
bandList = mList;
bgenres += '<br />';
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<ilen; jj++) {
aPlayer = bb['players'][jj];
var player_instrs = '';
var iter_pinstruments = aPlayer['instruments'].split(',');
for (var kk=0, klen=iter_pinstruments.length; kk<klen; kk++) {
var pinstr = iter_pinstruments[kk];
if (pinstr in instrument_logo_map) {
instr = instrument_logo_map[pinstr];
}
player_instrs += '<img src="' + instr + '"/>';
}
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<ilen; jj++) {
bgenres += bb['genres'][jj]['description'] + '<br />';
}
bgenres += '<br />';
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);

452
web/app/assets/javascripts/findMusician.js
View File

@ -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<ilen; jj++) {
if (mm['instruments'][jj].instrument_id in instrument_logo_map) {
instr = instrument_logo_map[mm['instruments'][jj].instrument_id];
}
instr_logos += '<img src="' + instr + '"/>';
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<ilen; jj++) {
if (mm['instruments'][jj].instrument_id in instrument_logo_map) {
instr = instrument_logo_map[mm['instruments'][jj].instrument_id];
}
follows = '';
followVals = {};
for (var jj=0, ilen=mm['followings'].length; jj<ilen; jj++) {
aFollow = mm['followings'][jj];
followVals = {
user_id: aFollow.user_id,
musician_name: aFollow.name,
profile_url: '/client#/profile/' + aFollow.user_id,
avatar_url: context.JK.resolveAvatarUrl(aFollow.photo_url),
};
follows += context.JK.fillTemplate(fTemplate, followVals);
if (2 == jj) break;
}
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'
instr_logos += '<img src="' + instr + '"/>';
}
follows = '';
followVals = {};
for (var jj=0, ilen=mm['followings'].length; jj<ilen; jj++) {
aFollow = mm['followings'][jj];
followVals = {
user_id: aFollow.user_id,
musician_name: aFollow.name,
profile_url: '/client#/profile/' + aFollow.user_id,
avatar_url: context.JK.resolveAvatarUrl(aFollow.photo_url),
};
var musician_actions = context.JK.fillTemplate(aTemplate, actionVals);
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;
follows += context.JK.fillTemplate(fTemplate, followVals);
if (2 == jj) break;
}
$('#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).click(function(ee) {ee.preventDefault();});
evt.stopPropagation();
var uid = $(this).parent().data('musician-id');
context.JK.sendFriendRequest(app, uid, friendRequestCallback);
}
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
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);

90
web/app/assets/javascripts/hoverBand.js
View File

@ -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 += '<tr><td width="50"><a href="#" class="avatar-tiny"><img src="' + context.JK.resolveAvatarUrl(val.photo_url) + '" /></a></td>';
musicianHtml += '<td width="75"><a href="#">' + val.name + '</a></td>';
instrumentHtml = '<td><div class="nowrap">';
$.each(val.instruments, function(index, instrument) {
instrumentHtml += '<img src="' + instrumentLogoMap[instrument.instrument_id] + '" width="24" height="24" />&nbsp;';
});
instrumentHtml += '</div></td>';
musicianHtml += instrumentHtml;
musicianHtml += '</tr>';
});
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('<h2>Band Detail</h2>' + 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);

20
web/app/assets/javascripts/hoverMusician.js
View File

@ -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('<h2>Musician Detail</h2>' + musicianHtml);
$(hoverSelector).append('<h2>Musician Detail</h2>' + 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);

22
web/app/assets/javascripts/utils.js
View File

@ -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(

6
web/app/views/api_bands/show.rabl
View File

@ -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)

12
web/app/views/clients/_bands.html.erb
View File

@ -25,12 +25,12 @@
<div class="f11">
<div class="left" style="width:63px;margin-top:-12px;">
<!-- avatar -->
<div class="avatar-small"><img src="{avatar_url}" /></div>
<div class="avatar-small" band-id="{band_id}" hoveraction="band"><img src="{avatar_url}" /></div>
</div>
<div class="right mband-players" style="width:250px;margin-top:-10px;">
<table class="musicians" cellpadding="0" cellspacing="5">{band_player_template}</table>
</div>
<div class="" style="margin-left: 63px; margin-right: 260px;margin-top: 12px;"">
<div class="" style="margin-left: 63px; margin-right: 260px;margin-top: 12px;">
<div class="first-row" data-hint="top-row">
<div class="lcol left">
<!-- name & location -->
@ -67,8 +67,12 @@
<script type="text/template" id="template-band-player-info">
<tr>
<td ><a href="{profile_url}" class="avatar-tiny"><img src="{avatar_url}" /></a></td>
<td style="padding: 0 4px;width:88px;"><a href="{profile_url}"><strong>{player_name}</strong></a></td>
<td>
<a href="{profile_url}" user-id="{user_id}" hoveraction="musician" class="avatar-tiny"><img src="{avatar_url}" /></a>
</td>
<td style="padding: 0 4px;width:88px;">
<a user-id="{user_id}" hoveraction="musician" href="{profile_url}"><strong>{player_name}</strong></a>
</td>
<td class="instruments">{player_instruments}</td>
</tr>
</script>

75
web/app/views/clients/_hoverBand.html.erb
View File

@ -1,52 +1,31 @@
<!-- band hover -->
<div id="band-detail-1" class="hidden bubble">
<h2>Band Detail</h2>
<div class="bubble-inner">
<a href="#" class="avatar_large left mr20"><img src="images/content/avatar_band3.jpg" /></a>
<div class="left"><h3>Fox Force Five</h3>
<small>Richmond, VA<br />
<strong>Jazz</strong></small><br />
12 <img src="images/content/icon_like.png" width="12" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_followers.png" width="22" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;17 <img src="images/content/icon_recordings.png" width="12" height="13" align="absmiddle" />&nbsp;&nbsp;&nbsp;64 <img src="images/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" />
</div>
<br clear="all" /><br />
<div class="f11">Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</div>
<table class="musicians" cellpadding="0" cellspacing="5">
<tr>
<td width="24"><a href="#" class="avatar-tiny" id="musician1"><img src="images/shared/avatar_david.jpg" /></a></td>
<td><a href="#">John Doe</a></td>
<td><div class="nowrap"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" />&nbsp;<img src="images/content/icon_instrument_vocal24.png" width="24" height="24" /></div></td>
</tr>
<tr>
<td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_creepyeye.jpg" /></a></td>
<td><a href="#">Cassandra Defrenza</a></td>
<td><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24" /></td>
</tr>
<tr>
<td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg" /></a></td>
<td><a href="#">Jimmy Stratham</a></td>
<td><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" /></td>
</tr>
</table><br />
<div align="center">
<div class="left"><a href="#" class="button-orange">PROFILE</a></div>
<div class="left"><a href="#" class="button-orange">LIKE</a></div>
<div class="left"><a href="#" class="button-orange">FOLLOW</a></div>
</div>
<br /><br />
<div id="band-hover" class="hidden bubble">
</div>
</div>
<script type="text/template" id="template-hover-bubble">
<div class="hover-bubble">
<script type="text/template" id="template-hover-band">
<div class="bubble-inner">
<a href="#" class="avatar_large left mr20"><img src="{avatar_url}" /></a>
<div class="left">
<h3>{name}</h3>
<small>{location}<br /><strong>{genres}</strong></small><br />
<br clear="all" />
{like_count} <img src="/assets/content/icon_like.png" align="absmiddle" />&nbsp;&nbsp;&nbsp;
{follower_count} <img src="/assets/content/icon_followers.png" width="22" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;
{recording_count} <img src="/assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" />&nbsp;&nbsp;&nbsp;
{session_count} <img src="/assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" />
</div>
<br clear="all" /><br />
<br />
<div class="f11">{biography}</div><br />
<table class="musicians" cellpadding="0" cellspacing="5">
{musicians}
</table>
<br />
<div align="center">
<div class="left"><a href="{profile_url}" class="button-orange">PROFILE</a></div>
<div class="left"><a class="button-orange">LIKE</a></div>
<div class="left"><a class="button-orange">FOLLOW</a></div>
</div>
<br /><br />
</div>
</script>

1
web/app/views/clients/_hoverMusician.html.erb
View File

@ -1,6 +1,5 @@
<div id="musician-hover" class="hidden bubble">
</div>
<script type="text/template" id="template-hover-musician">