VRFS-2296 ensure hover bubble is displayed fully on screen

web/app/assets/javascripts/hoverBand.js

@@ -7,21 +7,7 @@
     var rest = context.JK.Rest();
     var hoverSelector = "#band-hover";
 
-    this.showBubble = function() {
+    this.showBubble = function($hoverElement) {
-      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.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) {

web/app/assets/javascripts/hoverFan.js

@@ -8,21 +8,7 @@
     var rest = context.JK.Rest();
     var hoverSelector = "#fan-hover";
 
-    this.showBubble = function() {
+    this.showBubble = function($hoverElement) {
-      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) {
@@ -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) {

web/app/assets/javascripts/hoverMusician.js

@@ -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) {

web/app/assets/javascripts/hoverRecording.js

@@ -37,21 +37,7 @@
       return tracks;
     }
 
-    this.showBubble = function() {
+    this.showBubble = function($hoverElement) {
-      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.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) {

web/app/assets/javascripts/hoverSession.js

@@ -8,21 +8,7 @@
     var rest = context.JK.Rest();
     var hoverSelector = "#session-hover";
 
-    this.showBubble = function() {
+    this.showBubble = function($hoverElement) {
-      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.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) {

web/app/assets/javascripts/utils.js

@@ -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));

web/app/views/users/_feed_music_session.html.haml

@@ -4,8 +4,8 @@
     = session_avatar(feed_item)
   / type and artist
   .left.ml20.w15
-    .title{hoveraction: 'session', :'session-id' => feed_item.id }
+    .title
-      %a{:href => "/sessions/#{feed_item.id}", :target => "_blank"} SESSION
+      %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')

web/app/views/users/_feed_music_session_ajax.html.haml

@@ -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}}' }
+      .title
-        %a{:href => "/sessions/{{data.feed_item.id}}", :rel => "external"} SESSION
+        %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}}'

web/app/views/users/_feed_recording.html.haml

@@ -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 }
+    .title
-      %a{:href => "/recordings/#{feed_item.candidate_claimed_recording.id}", :target => "_blank"} RECORDING
+      %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')

web/app/views/users/_feed_recording_ajax.html.haml

@@ -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}}' }
+      .title
-        %a{:href => "/recordings/{{data.candidate_claimed_recording.id}}", :rel => "external"} RECORDING
+        %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}}'}