jam-cloud/web/app/assets/javascripts/hoverFan.js

76 lines
2.6 KiB
JavaScript

(function(context,$) {
"use strict";
context.JK = context.JK || {};
context.JK.FanHoverBubble = function(userId, position) {
var logger = context.JK.logger;
var rest = context.JK.Rest();
var instrumentLogoMap = context.JK.getInstrumentIconMap24();
var hoverSelector = "#fan-hover";
this.showBubble = function() {
$(hoverSelector).css({left: position.left-100, top: position.top});
$(hoverSelector).fadeIn(500);
rest.getUserDetail({id: userId})
.done(function(response) {
$(hoverSelector).html('');
// followings
var followingHtml = '';
$.each(response.followings, function(index, val) {
if (index < 4) { // display max of 4 followings (NOTE: this only displays USER followings, not BAND followings)
if (index % 2 === 0) {
followingHtml += '<tr>';
}
followingHtml += '<td width="24"><a href="#" class="avatar-tiny"><img src="' + context.JK.resolveAvatarUrl(val.photo_url) + '" /></a></td>';
followingHtml += '<td><a href="/client#/profile/' + val.id + '"><strong>' + val.name + '</strong></a></td>';
if (index % 2 > 0) {
followingHtml += '</tr>';
}
}
});
var template = $('#template-hover-fan').html();
if (response.biography == null) {
response.biography = 'No Biography Available';
}
var fanHtml = context.JK.fillTemplate(template, {
avatar_url: context.JK.resolveAvatarUrl(response.photo_url),
name: response.name,
location: response.location,
friend_count: response.friend_count,
follower_count: response.follower_count,
biography: response.biography,
followings: response.followings && response.followings.length > 0 ? followingHtml : "<tr><td>N/A</td></tr>",
profile_url: "/client#/profile/" + response.id
});
$(hoverSelector).append('<h2>Fan Detail</h2>' + fanHtml);
})
.fail(function(xhr) {
if(xhr.status >= 500) {
context.JK.fetchUserNetworkOrServerFailure();
}
else if(xhr.status == 404) {
context.JK.entityNotFound("User");
}
else {
context.JK.app.ajaxError(arguments);
}
});
};
this.hideBubble = function() {
$(hoverSelector).hide();
};
this.id = function() {
return hoverSelector;
};
}
})(window,jQuery);