117 lines
3.9 KiB
JavaScript
117 lines
3.9 KiB
JavaScript
(function(context,$) {
|
|
|
|
"use strict";
|
|
context.JK = context.JK || {};
|
|
context.JK.BandHoverBubble = function(bandId, x, y) {
|
|
var logger = context.JK.logger;
|
|
var rest = context.JK.Rest();
|
|
var hoverSelector = "#band-hover";
|
|
|
|
this.showBubble = function() {
|
|
var mouseLeft = x < (document.body.clientWidth / 2);
|
|
var mouseTop = y < (document.body.clientHeight / 2);
|
|
var css = {};
|
|
if (mouseLeft)
|
|
css.left = x + 20 + 'px';
|
|
else
|
|
css.left = x - (25 + $(hoverSelector).width()) + 'px';
|
|
if (mouseTop)
|
|
css.top = y + 10 + 'px';
|
|
else
|
|
css.top = y - (7 + $(hoverSelector).height()) + 'px';
|
|
|
|
$(hoverSelector).css(css);
|
|
$(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 user-id="' + val.id + '" profileaction="musician" class="avatar-tiny"><img src="' + context.JK.resolveAvatarUrl(val.photo_url) + '" /></a></td>';
|
|
musicianHtml += '<td width="75"><<a user-id="' + val.id + '" profileaction="musician">' + val.name + '</a></td>';
|
|
|
|
instrumentHtml = '<td><div class="nowrap">';
|
|
if (val.instruments) { // @FIXME: edge case for Test user that has no instruments?
|
|
$.each(val.instruments, function(index, instrument) {
|
|
instrumentHtml += '<img src="' + context.JK.getInstrumentIcon24(instrument.instrument_id) + '" width="24" height="24" /> ';
|
|
});
|
|
}
|
|
|
|
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, {
|
|
bandId: response.id,
|
|
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,
|
|
followAction: response.is_following ? "removeBandFollowing" : "addBandFollowing",
|
|
profile_url: "/client#/bandProfile/" + response.id
|
|
});
|
|
|
|
$(hoverSelector).append('<h2>Band Detail</h2>' + bandHtml);
|
|
|
|
context.JK.bindProfileClickEvents(hoverSelector);
|
|
configureActionButtons(response);
|
|
})
|
|
.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);
|
|
}
|
|
});
|
|
};
|
|
|
|
function configureActionButtons(band) {
|
|
var btnFollowSelector = "#btnFollow";
|
|
|
|
// if unauthenticated or authenticated user is viewing his own profile
|
|
if (!context.JK.currentUserId) {
|
|
$(btnFollowSelector, hoverSelector).hide();
|
|
}
|
|
else {
|
|
if (band.is_following) {
|
|
$(btnFollowSelector, hoverSelector).html('UNFOLLOW');
|
|
}
|
|
}
|
|
}
|
|
|
|
this.hideBubble = function() {
|
|
$(hoverSelector).hide();
|
|
};
|
|
|
|
this.id = function() {
|
|
return hoverSelector;
|
|
};
|
|
}
|
|
})(window,jQuery); |