VRFS-1562 make musician/band avatar and name clickable in hover bubbles

This commit is contained in:
Brian Smith 2014-05-07 00:16:20 -04:00
parent d72cdfda14
commit c549128c90
7 changed files with 38 additions and 23 deletions

View File

@ -32,8 +32,8 @@
$.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>';
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?
@ -75,6 +75,8 @@
});
$(hoverSelector).append('<h2>Band Detail</h2>' + bandHtml);
context.JK.bindProfileClickEvents(hoverSelector);
configureActionButtons(response);
})
.fail(function(xhr) {

View File

@ -36,19 +36,21 @@
followingHtml += '<tr>';
}
var avatarUrl, profilePath;
var avatarUrl, attrId, type;
if (val.type === "band") {
avatarUrl = context.JK.resolveBandAvatarUrl(val.photo_url);
profilePath = "bandProfile";
attrId = "band-id";
type = "band";
}
else {
avatarUrl = context.JK.resolveAvatarUrl(val.photo_url);
profilePath = "profile";
attrId = "user-id";
type = "musician";
}
followingHtml += '<td width="24"><a href="#" class="avatar-tiny"><img src="' + avatarUrl + '" /></a></td>';
followingHtml += '<td><a href="/client#/' + profilePath + '/' + val.id + '"><strong>' + val.name + '</strong></a></td>';
followingHtml += '<td width="24"><a ' + attrId + '="' + val.id + '" profileaction="' + type + '" class="avatar-tiny"><img src="' + avatarUrl + '" /></a></td>';
followingHtml += '<td><a ' + attrId + '="' + val.id + '" profileaction="' + type + '"><strong>' + val.name + '</strong></a></td>';
if (index % 2 > 0) {
followingHtml += '</tr>';
@ -76,6 +78,8 @@
});
$(hoverSelector).append('<h2>Fan Detail</h2>' + fanHtml);
context.JK.bindProfileClickEvents(hoverSelector);
configureActionButtons(response);
})
.fail(function(xhr) {

View File

@ -42,19 +42,21 @@
followingHtml += '<tr>';
}
var avatarUrl, profilePath;
var avatarUrl, attrId, type;
if (val.type === "band") {
avatarUrl = context.JK.resolveBandAvatarUrl(val.photo_url);
profilePath = "bandProfile";
attrId = "band-id";
type = "band";
}
else {
avatarUrl = context.JK.resolveAvatarUrl(val.photo_url);
profilePath = "profile";
attrId = "user-id";
type = "musician";
}
followingHtml += '<td width="24"><a href="#" class="avatar-tiny"><img src="' + avatarUrl + '" /></a></td>';
followingHtml += '<td><a href="/client#/' + profilePath + '/' + val.id + '"><strong>' + val.name + '</strong></a></td>';
followingHtml += '<td width="24"><a ' + attrId + '="' + val.id + '" profileaction="' + type + '" class="avatar-tiny"><img src="' + avatarUrl + '" /></a></td>';
followingHtml += '<td><a ' + attrId + '="' + val.id + '" profileaction="' + type + '"><strong>' + val.name + '</strong></a></td>';
if (index % 2 > 0) {
followingHtml += '</tr>';
@ -101,6 +103,8 @@
});
$(hoverSelector).append('<h2>Musician Detail</h2>' + musicianHtml);
context.JK.bindProfileClickEvents(hoverSelector);
configureActionButtons(response);
})
.fail(function(xhr) {

View File

@ -94,6 +94,7 @@
$(".landing-comment-scroller").prepend(commentHtml);
}
context.JK.bindProfileClickEvents();
context.JK.bindHoverEvents();
}

View File

@ -49,6 +49,7 @@
$(".landing-comment-scroller").prepend(commentHtml);
}
context.JK.bindProfileClickEvents();
context.JK.bindHoverEvents();
}
@ -129,7 +130,6 @@
$("#btnLike").click(like);
$playButton.trigger('click');
pollForUpdates(musicSessionId);
}

View File

@ -17,11 +17,13 @@
</div>
<script type="text/template" id="template-landing-comment">
<div user-id="{user_id}" hoveraction="{hoverAction}" class="avatar-small mr10">
<img src="{avatar_url}" alt="" />
<div class="avatar-small mr10">
<a user-id="{user_id}" profileaction="{hoverAction}" hoveraction="{hoverAction}">
<img src="{avatar_url}" alt="" />
</a>
</div>
<div class="w80 left p10 lightgrey mt10 comment-text">
<a user-id="{user_id}" hoveraction="{hoverAction}">{name}</a>&nbsp;{comment}
<a user-id="{user_id}" profileaction="{hoverAction}" hoveraction="{hoverAction}">{name}</a>&nbsp;{comment}
<br />
<div class="f12 grey mt5 comment-timestamp">{timeago}</div>
</div>

View File

@ -10,16 +10,18 @@
<% end %>
<td>
<div user-id="<%= track.musician.id %>" hoveraction="musician" class="avatar-small m0">
<% unless track.musician.photo_url.blank? %>
<%= image_tag "#{track.musician.photo_url}", {:alt => ""} %>
<% else %>
<%= image_tag "shared/avatar_generic.png", {:alt => ""} %>
<% end %>
<div class="avatar-small m0">
<a user-id="<%= track.musician.id %>" profileaction="musician" hoveraction="musician">
<% unless track.musician.photo_url.blank? %>
<%= image_tag "#{track.musician.photo_url}", {:alt => ""} %>
<% else %>
<%= image_tag "shared/avatar_generic.png", {:alt => ""} %>
<% end %>
</a>
</div>
</td>
<td>
<div user-id="<%= track.musician.id %>" hoveraction="musician" class="lightgrey f15 ml10"><%= track.musician.name %></div>
<div user-id="<%= track.musician.id %>" profileaction="musician" hoveraction="musician" class="lightgrey f15 ml10"><%= track.musician.name %></div>
</td>
<td class="p10">
<div class="ml10">