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 session/recording hover work

This commit is contained in:
Brian Smith 2014-02-13 14:55:55 -05:00
parent 0a94f73d08
commit eb15b1843b
5 changed files with 184 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
web/app/assets/javascripts/hoverRecording.js
View File

@ -1,14 +1,72 @@
(function(context,$) {
"use strict";
context.JK = context.JK || {};
context.JK.RecordingHoverBubble = function(app) {
"use strict";
context.JK = context.JK || {};
context.JK.RecordingHoverBubble = function(recordingId, position) {
function initialize() {
var logger = context.JK.logger;
var rest = context.JK.Rest();
var instrumentLogoMap = context.JK.getInstrumentIconMap24();
var hoverSelector = "#recording-hover";
}
this.initialize = initialize;
this.showBubble = showBubble;
}
this.showBubble = function() {
$(hoverSelector).css({left: position.left-100, top: position.top});
$(hoverSelector).fadeIn(500);
rest.getClaimedRecording(recordingId)
.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-recording').html();
var recordingHtml = 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
});
$(hoverSelector).append('<h2>Recording Detail</h2>' + recordingHtml);
})
.fail(function(xhr) {
if(xhr.status >= 500) {
context.JK.fetchUserNetworkOrServerFailure();
}
else if(xhr.status == 404) {
context.JK.entityNotFound("Recording");
}
else {
context.JK.app.ajaxError(arguments);
}
});
};
this.hideBubble = function() {
$(hoverSelector).hide();
};
this.id = function() {
return hoverSelector;
};
}
})(window,jQuery);

71
web/app/assets/javascripts/hoverSession.js
View File

@ -1,14 +1,67 @@
(function(context,$) {
"use strict";
context.JK = context.JK || {};
context.JK.SessionHoverBubble = function(app) {
"use strict";
context.JK = context.JK || {};
context.JK.SessionHoverBubble = function(sessionId, position) {
function initialize() {
var logger = context.JK.logger;
var rest = context.JK.Rest();
var instrumentLogoMap = context.JK.getInstrumentIconMap24();
var hoverSelector = "#session-hover";
}
this.initialize = initialize;
this.showBubble = showBubble;
}
this.showBubble = function() {
$(hoverSelector).css({left: position.left-100, top: position.top});
$(hoverSelector).fadeIn(500);
rest.getSessionHistory(sessionId)
.done(function(response) {
$(hoverSelector).html('');
// musicians
var musicianHtml = '';
$.each(response.users, 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-session').html();
var sessionHtml = context.JK.fillTemplate(template, {
});
$(hoverSelector).append('<h2>Session Detail</h2>' + sessionHtml);
})
.fail(function(xhr) {
if(xhr.status >= 500) {
context.JK.fetchUserNetworkOrServerFailure();
}
else if(xhr.status == 404) {
context.JK.entityNotFound("Session");
}
else {
context.JK.app.ajaxError(arguments);
}
});
};
this.hideBubble = function() {
$(hoverSelector).hide();
};
this.id = function() {
return hoverSelector;
};
}
})(window,jQuery);

2
web/app/views/api_music_sessions/history_show.rabl
View File

@ -1,6 +1,6 @@
object @history
attributes :music_session_id, :description, :genres
attributes :music_session_id, :description, :genres, :created_at
node :share_url do |history|
unless history.share_token.nil?

81
web/app/views/clients/_hoverRecording.html.erb
View File

@ -1,55 +1,36 @@
<!-- 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" />&nbsp;&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_comment.png" width="13" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;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" />&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 /><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 id="recording-hover" class="hidden bubble">
</div>
</div>
</div>
<script type="text/template" id="template-hover-bubble">
<div class="hover-bubble">
<script type="text/template" id="template-hover-recording">
<div class="bubble-inner">
<h3>{title}</h3>
<div class="small left">{genre}</div>
<div class="small right">{created_at}</div>
<br clear="all" />
<div class="f11 mt5 mb5">{description}</div>
<div class="small">
{play_count} <img src="/assets/content/icon_arrow.png" width="7" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;
{comment_count} <img src="/assets/content/icon_comment.png" width="13" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;
{like_count} <img src="/assets/content/icon_like.png" width="12" height="12" align="absmiddle" />
</div>
<br /><br />
<a href="#" class="avatar_large left mr20"><img src="{avatar_url}" /></a>
<div class="left">
<h3>{creator_title}</h3>
<small>{location}</small>
</div>
<br clear="all" /><br />
MUSICIANS:
<table class="musicians" cellpadding="0" cellspacing="5">
{musicians}
</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>
</script>

67
web/app/views/clients/_hoverSession.html.erb
View File

@ -1,49 +1,28 @@
<!-- 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" />&nbsp;&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_comment.png" width="13" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;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" />&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 /><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 id="session-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-session">
<div class="bubble-inner">
<div class="small left">{genre}</div>
<div class="small right">{created_at}</div>
<br clear="all" />
<div class="f11 mt5 mb5">{description}</div>
<div class="small">
{comment_count} <img src="/assets/content/icon_comment.png" width="13" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;
{like_count} <img src="/assets/content/icon_like.png" width="12" height="12" align="absmiddle" />
</div>
<br />
MUSICIANS:
<table class="musicians" cellpadding="0" cellspacing="5">
{musicians}
</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>
</script>