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-2296 ensure hover bubble is displayed fully on screen

This commit is contained in:
Brian Smith 2014-11-02 21:18:30 -05:00
parent 0007930936
commit 2688bba63e
10 changed files with 66 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/app/assets/javascripts/hoverBand.js
View File

@ -7,21 +7,7 @@
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);
this.showBubble = function($hoverElement) {
rest.getBand(bandId)
.done(function(response) {
@ -78,6 +64,11 @@
context.JK.bindProfileClickEvents(hoverSelector);
configureActionButtons(response);
var css = context.JK.calculateHoverPosition(x, y, $(hoverSelector).width(), $(hoverSelector).height(), $hoverElement);
$(hoverSelector).css(css);
$(hoverSelector).fadeIn(500);
})
.fail(function(xhr) {
if(xhr.status >= 500) {

21
web/app/assets/javascripts/hoverFan.js
View File

@ -8,21 +8,7 @@
var rest = context.JK.Rest();
var hoverSelector = "#fan-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);
this.showBubble = function($hoverElement) {
rest.getUserDetail({id: userId})
.done(function(response) {
@ -81,6 +67,11 @@
context.JK.bindProfileClickEvents(hoverSelector);
configureActionButtons(response);
var css = context.JK.calculateHoverPosition(x, y, $(hoverSelector).width(), $(hoverSelector).height(), $hoverElement);
$(hoverSelector).css(css);
$(hoverSelector).fadeIn(500);
})
.fail(function(xhr) {
if(xhr.status >= 500) {

22
web/app/assets/javascripts/hoverMusician.js
View File

@ -7,26 +7,11 @@
var logger = context.JK.logger;
var rest = context.JK.Rest();
var hoverSelector = "#musician-hover";
var helpBubble = context.JK.HelpBubbleHelper;
var $templateLatency = null;
var sessionUtils = context.JK.SessionUtils;
this.showBubble = function() {
this.showBubble = function($hoverElement) {
$templateLatency = $("#template-account-session-latency");
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.getUserDetail({id: userId})
.done(function(response) {
@ -134,6 +119,11 @@
context.JK.bindProfileClickEvents(hoverSelector);
configureActionButtons(response);
var css = context.JK.calculateHoverPosition(x, y, $(hoverSelector).width(), $(hoverSelector).height(), $hoverElement);
$(hoverSelector).css(css);
$(hoverSelector).fadeIn(500);
})
.fail(function(xhr) {
if(xhr.status >= 500) {

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

@ -37,21 +37,7 @@
return tracks;
}
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);
this.showBubble = function($hoverElement) {
rest.getClaimedRecording(recordingId)
.done(function(response) {
@ -101,6 +87,11 @@
$(hoverSelector).append('<h2>Recording Detail</h2>' + recordingHtml);
toggleActionButtons();
var css = context.JK.calculateHoverPosition(x, y, $(hoverSelector).width(), $(hoverSelector).height(), $hoverElement);
$(hoverSelector).css(css);
$(hoverSelector).fadeIn(500);
})
.fail(function(xhr) {
if(xhr.status >= 500) {

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

@ -8,21 +8,7 @@
var rest = context.JK.Rest();
var hoverSelector = "#session-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);
this.showBubble = function($hoverElement) {
rest.getSessionHistory(sessionId)
.done(function(response) {
@ -76,6 +62,11 @@
$(hoverSelector).append('<h2>Session Detail</h2>' + sessionHtml);
toggleActionButtons();
var css = context.JK.calculateHoverPosition(x, y, $(hoverSelector).width(), $(hoverSelector).height(), $hoverElement);
$(hoverSelector).css(css);
$(hoverSelector).fadeIn(500);
})
.fail(function(xhr) {
if(xhr.status >= 500) {

29
web/app/assets/javascripts/utils.js
View File

@ -294,6 +294,32 @@
});
}
context.JK.calculateHoverPosition = function(mouseX, mouseY, hoverWidth, hoverHeight, $hoverElement) {
var mouseLeft = mouseX < (window.innerWidth / 2);
var mouseTop = mouseY < (window.innerHeight / 2);
var hoverElementX = $hoverElement.offset().left;
var hoverElementY = $hoverElement.offset().top;
var hoverElementWidth = $hoverElement.width();
var hoverElementHeight = $hoverElement.height();
var css = {};
if (mouseLeft) {
css.left = hoverElementX + hoverElementWidth + 5 + 'px';
}
else {
css.left = hoverElementX - hoverWidth - 5 + 'px';
}
if (mouseTop) {
css.top = hoverElementY + 'px';
}
else {
css.top = hoverElementY - hoverHeight + 'px';
}
return css;
}
context.JK.bindHoverEvents = function ($parent) {
var timeout = 300;
var fadeoutValue = 100;
@ -306,7 +332,7 @@
function showBubble(bubble, $hoverElement) {
$hoverElement.attr("bubble-id", bubble.id);
bubble.showBubble();
var html = bubble.showBubble($hoverElement);
}
function hideBubble($hoverElement) {
@ -333,6 +359,7 @@
over: function(e) {
var bubble = new JK.MusicianHoverBubble($(this).attr('user-id'), e.pageX, e.pageY);
showBubble(bubble, $(this));
},
out: function () { // this registers for leaving the hoverable element
hideBubble($(this));

4
web/app/views/users/_feed_music_session.html.haml
View File

@ -4,8 +4,8 @@
= session_avatar(feed_item)
/ type and artist
.left.ml20.w15
.title{hoveraction: 'session', :'session-id' => feed_item.id }
%a{:href => "/sessions/#{feed_item.id}", :target => "_blank"} SESSION
.title
%a{:href => "/sessions/#{feed_item.id}", :target => "_blank", :hoveraction => "session", :'session-id' => feed_item.id} SESSION
.artist
= session_artist_name(feed_item)
= timeago(feed_item.started_at, class: 'small created_at')

4
web/app/views/users/_feed_music_session_ajax.html.haml
View File

@ -6,8 +6,8 @@
%img{ src: '{{data.feed_item.helpers.avatar}}' }
/ type and artist
.left.ml20.w15
.title{hoveraction: 'session', :'session-id' => '{{data.feed_item.id}}' }
%a{:href => "/sessions/{{data.feed_item.id}}", :rel => "external"} SESSION
.title
%a{:href => "/sessions/{{data.feed_item.id}}", :rel => "external", :hoveraction => "session", :'session-id' => '{{data.feed_item.id}}'} SESSION
.artist
%a.artist{:hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :profileaction => "{{data.feed_item.helpers.artist_hoveraction}}", :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'}
= '{{data.feed_item.helpers.artist_name}}'

4
web/app/views/users/_feed_recording.html.haml
View File

@ -7,8 +7,8 @@
= recording_avatar(feed_item)
/ type and artist
.left.ml20.w15.feed-type-title
.title{hoveraction: 'recording', :'recording-id' => feed_item.candidate_claimed_recording.id }
%a{:href => "/recordings/#{feed_item.candidate_claimed_recording.id}", :target => "_blank"} RECORDING
.title
%a{:href => "/recordings/#{feed_item.candidate_claimed_recording.id}", :target => "_blank", :hoveraction => "recording", :'recording-id' => feed_item.candidate_claimed_recording.id} RECORDING
.artist
= recording_artist_name(feed_item)
= timeago(feed_item.created_at, class: 'small created_at')

4
web/app/views/users/_feed_recording_ajax.html.haml
View File

@ -6,8 +6,8 @@
%img{ src: '{{data.feed_item.helpers.avatar}}' }
/ type and artist
.left.ml20.w15
.title{hoveraction: 'recording', :'recording-id' => '{{data.candidate_claimed_recording.id}}' }
%a{:href => "/recordings/{{data.candidate_claimed_recording.id}}", :rel => "external"} RECORDING
.title
%a{:href => "/recordings/{{data.candidate_claimed_recording.id}}", :rel => "external", :hoveraction => "recording", :'recording-id' => '{{data.candidate_claimed_recording.id}}'} RECORDING
%a.edit-recording-dialog{href: "#"} (edit)
.artist
%a.artist{:hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :profileaction => "{{data.feed_item.helpers.artist_hoveraction}}", :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'}