VRFS-1028 hover bubble work
This commit is contained in:
Brian Smith
parent
c1dd3eea75
commit
bca7f33400
|
|
@ -105,6 +105,7 @@
|
|||
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),
|
||||
|
|
@ -144,6 +145,8 @@
|
|||
|
||||
$('.search-m-friend').on('click', friendMusician);
|
||||
$('.search-m-follow').on('click', followMusician);
|
||||
|
||||
context.JK.bindHoverEvents();
|
||||
}
|
||||
|
||||
function beforeShow(data) {
|
||||
|
|
|
|||
|
|
@ -2,15 +2,21 @@
|
|||
|
||||
"use strict";
|
||||
context.JK = context.JK || {};
|
||||
context.JK.MusicianHoverBubble = function(app, user, position) {
|
||||
context.JK.MusicianHoverBubble = function(userId, position) {
|
||||
var logger = context.JK.logger;
|
||||
var rest = context.JK.Rest();
|
||||
|
||||
function showBubble() {
|
||||
$("#musician-hover").css({left: position.left; top: position.top});
|
||||
}
|
||||
this.showBubble = function() {
|
||||
$("#musician-hover").css({left: position.left, top: position.top});
|
||||
$("#musician-hover").fadeIn(500);
|
||||
};
|
||||
|
||||
this.initialize = initialize;
|
||||
this.showBubble = showBubble;
|
||||
this.hideBubble = function() {
|
||||
$("#musician-hover").hide();
|
||||
};
|
||||
|
||||
this.id = function() {
|
||||
return "#musician-hover";
|
||||
};
|
||||
}
|
||||
})(window,jQuery);
|
||||
|
|
@ -142,6 +142,81 @@
|
|||
$element.bt(text, options);
|
||||
}
|
||||
|
||||
context.JK.bindHoverEvents = function() {
|
||||
|
||||
function showBubble(bubble, $hoverElement) {
|
||||
$hoverElement.attr("bubble-id", bubble.id);
|
||||
bubble.showBubble();
|
||||
}
|
||||
|
||||
function hideBubble($hoverElement) {
|
||||
var bubbleSelector = $hoverElement.attr("bubble-id");
|
||||
$(bubbleSelector).hover(
|
||||
function() {
|
||||
// do nothing when entering the bubble (this should never happen)
|
||||
},
|
||||
function() {
|
||||
$(this).fadeOut(500);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// MUSICIAN
|
||||
$("[hoveraction='musician']").hover(
|
||||
function() {
|
||||
var bubble = new JK.MusicianHoverBubble($(this).attr('user-id'), $(this).position());
|
||||
showBubble(bubble, $(this));
|
||||
},
|
||||
function() { // this registers for leaving the hoverable element
|
||||
hideBubble($(this));
|
||||
}
|
||||
);
|
||||
|
||||
// FAN
|
||||
$("[hoveraction='fan']").hover(
|
||||
function() {
|
||||
var bubble = new JK.FanHoverBubble($(this).attr('user-id'), $(this).position());
|
||||
showBubble(bubble, $(this));
|
||||
},
|
||||
function() { // this registers for leaving the hoverable element
|
||||
hideBubble($(this));
|
||||
}
|
||||
);
|
||||
|
||||
// BAND
|
||||
$("[hoveraction='band']").hover(
|
||||
function() {
|
||||
var bubble = new JK.BandHoverBubble($(this).attr('band-id'), $(this).position());
|
||||
showBubble(bubble, $(this));
|
||||
},
|
||||
function() { // this registers for leaving the hoverable element
|
||||
hideBubble($(this));
|
||||
}
|
||||
);
|
||||
|
||||
// SESSION
|
||||
$("[hoveraction='session']").hover(
|
||||
function() {
|
||||
var bubble = new JK.BandHoverBubble($(this).attr('session-id'), $(this).position());
|
||||
showBubble(bubble, $(this));
|
||||
},
|
||||
function() { // this registers for leaving the hoverable element
|
||||
hideBubble($(this));
|
||||
}
|
||||
);
|
||||
|
||||
// RECORDING
|
||||
$("[hoveraction='recording']").hover(
|
||||
function() {
|
||||
var bubble = new JK.BandHoverBubble($(this).attr('recording-id'), $(this).position());
|
||||
showBubble(bubble, $(this));
|
||||
},
|
||||
function() { // this registers for leaving the hoverable element
|
||||
hideBubble($(this));
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Uber-simple templating
|
||||
// var template = "Hey {name}";
|
||||
// var vals = { name: "Jon" };
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!-- Profile -->
|
||||
<!-- Band Profile -->
|
||||
<div layout="screen" layout-id="bandProfile" layout-arg="id" class="screen secondary">
|
||||
<div class="content-head">
|
||||
<div class="content-icon">
|
||||
|
|
|
|||
|
|
@ -1,232 +1,3 @@
|
|||
<!-- 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" /> 4 <img src="images/content/icon_followers.png" width="22" height="12" align="absmiddle" /> 17 <img src="images/content/icon_recordings.png" width="12" height="13" align="absmiddle" /> 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" /> <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>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- musician hover -->
|
||||
<div id="musician-detail-1" class="hidden bubble">
|
||||
<h2>Musician Detail</h2>
|
||||
<div class="bubble-inner">
|
||||
<a href="#" class="avatar_large left mr20"><img src="images/shared/avatar_david.jpg" /></a>
|
||||
<div class="left ib"><h3>John Doe</h3>
|
||||
<small>Austin, TX</small><br /><br />
|
||||
|
||||
<div class="left mr10 mb"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" /></div>
|
||||
<div class="left mr10"><img src="images/content/icon_instrument_vocal24.png" width="24" height="24" /></div>
|
||||
<div class="left mr10"><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24" /></div>
|
||||
<br clear="all" />
|
||||
|
||||
122 <img src="images/content/icon_friend.png" align="absmiddle" /> 4 <img src="images/content/icon_followers.png" width="22" height="12" align="absmiddle" /> 17 <img src="images/content/icon_recordings.png" width="12" height="13" align="absmiddle" /> 64 <img src="images/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" /></div><br clear="all" /><br />
|
||||
<div class="f12"><strong>IN SESSION — <a href="#">Click to Join</a></strong></div>
|
||||
|
||||
|
||||
<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><br />
|
||||
|
||||
<small><strong>FOLLOWING:</strong></small>
|
||||
<table class="musicians" cellpadding="0" cellspacing="5">
|
||||
<tr>
|
||||
<td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band3.jpg" /></a></td>
|
||||
<td><a href="#"><strong>Fox Force Five</strong></a></td>
|
||||
<td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band1.jpg" /></a></td>
|
||||
<td><a href="#"><strong>Tammany Hall</strong></a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band2.jpg" /></a></td>
|
||||
<td><a href="#"><strong>Bethany Grey</strong></a></td>
|
||||
<td></td>
|
||||
<td></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">FRIEND</a></div>
|
||||
<div class="left"><a href="#" class="button-orange">FOLLOW</a></div>
|
||||
</div>
|
||||
<br /><br />
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- fan hover -->
|
||||
<div id="fan-detail-1" class="hidden bubble">
|
||||
<h2>Fan Detail</h2>
|
||||
<div class="bubble-inner">
|
||||
<a href="#" class="avatar_large left mr20"><img src="images/shared/avatar_creepyeye.jpg" /></a>
|
||||
<div class="left ib"><h3>Tomas Jones</h3>
|
||||
<small>Austin, TX</small><br /><br />
|
||||
|
||||
122 <img src="images/content/icon_friend.png" align="absmiddle" /> 4 <img src="images/content/icon_followers.png" width="22" height="12" align="absmiddle" /></div><br clear="all" /><br />
|
||||
<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><br />
|
||||
|
||||
<small><strong>FOLLOWING:</strong></small>
|
||||
<table class="musicians" cellpadding="0" cellspacing="5">
|
||||
<tr>
|
||||
<td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band3.jpg" /></a></td>
|
||||
<td><a href="#"><strong>Fox Force Five</strong></a></td>
|
||||
<td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg" /></a></td>
|
||||
<td><a href="#"><strong>Bob Scrothers</strong></a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band2.jpg" /></a></td>
|
||||
<td><a href="#"><strong>Bethany Grey</strong></a></td>
|
||||
<td></td>
|
||||
<td></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">FOLLOW</a></div>
|
||||
</div>
|
||||
<br /><br />
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- session hover -->
|
||||
<div id="session-detail-1" class="hidden bubble">
|
||||
<h2>Session Detail</h2>
|
||||
<div class="bubble-inner">
|
||||
<div class="small left">JAZZ</div>
|
||||
<div class="small right">01/25/14 - 11:23 pm</div>
|
||||
<br clear="all" />
|
||||
<div class="f11 mt5 mb5">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>
|
||||
<div class="small">12 <img src="images/content/icon_arrow.png" width="7" height="12" align="absmiddle" /> 4 <img src="images/content/icon_comment.png" width="13" height="12" align="absmiddle" /> 17 <img src="images/content/icon_like.png" width="12" height="12" align="absmiddle" /></div><br />
|
||||
|
||||
MUSICIANS:
|
||||
<!-- sub-table of musicians -->
|
||||
<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" /> <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 /><br />
|
||||
|
||||
<div align="center">
|
||||
<div class="left"><a href="#" class="button-orange">LIKE</a></div>
|
||||
<div class="left"><a href="#" class="button-orange">COMMENT</a></div>
|
||||
<div class="left"><a href="#" class="button-orange">SHARE</a></div>
|
||||
</div>
|
||||
<br /><br />
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- recording hover -->
|
||||
<div id="recording-detail-1" class="hidden bubble">
|
||||
<h2>Recording Detail</h2>
|
||||
<div class="bubble-inner">
|
||||
<h3>Twelve Weeks</h3>
|
||||
<div class="small left">JAZZ</div>
|
||||
<div class="small right">01/25/14 - 11:23 pm</div>
|
||||
<br clear="all" />
|
||||
<div class="f11 mt5 mb5">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>
|
||||
<div class="small">12 <img src="images/content/icon_arrow.png" width="7" height="12" align="absmiddle" /> 4 <img src="images/content/icon_comment.png" width="13" height="12" align="absmiddle" /> 17 <img src="images/content/icon_like.png" width="12" height="12" align="absmiddle" /><br />
|
||||
<br />
|
||||
<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</small></div>
|
||||
<br clear="all" /><br />
|
||||
MUSICIANS:
|
||||
<!-- sub-table of musicians -->
|
||||
<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" /> <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 /><br />
|
||||
|
||||
<div align="center">
|
||||
<div class="left"><a href="#" class="button-orange">LIKE</a></div>
|
||||
<div class="left"><a href="#" class="button-orange">COMMENT</a></div>
|
||||
<div class="left"><a href="#" class="button-orange">SHARE</a></div>
|
||||
</div>
|
||||
<br /><br />
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/template" id="template-hover-bubble">
|
||||
<div class="hover-bubble">
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<% end -%>
|
||||
|
||||
<!-- Session Row Template -->
|
||||
<script type="text/template" id="template-find-musician-row"><!-- -->
|
||||
<script type="text/template" id="template-find-musician-row">
|
||||
<div class="profile-band-list-result musician-list-result">
|
||||
<div class="f11" data-hint="container">
|
||||
<div class="left" style="width:63px;margin-top:-12px;">
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<div class="bold">FOLLOWING:</div>
|
||||
<table class="musicians" cellpadding="0" cellspacing="5">{musician_follow_template}</table>
|
||||
</div>
|
||||
<div class="" style="margin-left: 63px; margin-right: 130px;margin-top: 12px;"">
|
||||
<div class="" style="margin-left: 63px; margin-right: 130px;margin-top: 12px;">
|
||||
<div class="first-row" data-hint="top-row">
|
||||
<div class="lcol left">
|
||||
<!-- name & location -->
|
||||
|
|
@ -74,10 +74,10 @@
|
|||
<script type="text/template" id="template-musician-follow-info">
|
||||
<tr>
|
||||
<td width="32">
|
||||
<a href="{profile_url}" class="avatar-tiny"><img src="{avatar_url}" /></a>
|
||||
<a user-id="{user_id}" hoveraction="musician" href="{profile_url}" class="avatar-tiny"><img src="{avatar_url}" /></a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="{profile_url}"><strong>{musician_name}</strong></a>
|
||||
<a user-id="{user_id}" hoveraction="musician" href="{profile_url}"><strong>{musician_name}</strong></a>
|
||||
</td>
|
||||
</tr>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,11 @@
|
|||
<%= render "account_audio_profile" %>
|
||||
<%= render "invitationDialog" %>
|
||||
<%= render "inviteMusicians" %>
|
||||
<%= render "hoverBand" %>
|
||||
<%= render "hoverFan" %>
|
||||
<%= render "hoverMusician" %>
|
||||
<%= render "hoverRecording" %>
|
||||
<%= render "hoverSession" %>
|
||||
<%= render "whatsNextDialog" %>
|
||||
<%= render "recordingFinishedDialog" %>
|
||||
<%= render "localRecordingsDialog" %>
|
||||
|
|
@ -242,6 +247,8 @@
|
|||
}
|
||||
testConnected();
|
||||
}
|
||||
|
||||
JK.bindHoverEvents();
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue