Merge pull request #5714 from delftswa2014/5631-broken-people-preview

Fix for issue #5631

Changelog.md

@@ -138,6 +138,7 @@ diaspora.yml file**. The existing settings from 0.4.x and before will not work a
 * Disable email notifications for closed user accounts [#5640](https://github.com/diaspora/diaspora/pull/5640)
 * Total user statistic no longer includes closed accounts [#5041](https://github.com/diaspora/diaspora/pull/5041)
 * Don't add a space when rendering a mention [#5711](https://github.com/diaspora/diaspora/pull/5711)
+* Fix flickering hovercards [#5714](https://github.com/diaspora/diaspora/pull/5714)
 
 ## Features
 * Don't pull jQuery from a CDN by default [#5105](https://github.com/diaspora/diaspora/pull/5105)
@@ -1202,7 +1203,7 @@ The new configuration system allows all possible settings to be overriden by env
 
 ### Environment variable changes:
 
-#### deprectated
+#### deprecated
 
 * REDISTOGO_URL in favour of REDIS_URL or ENVIRONMENT_REDIS
 

app/assets/javascripts/app/views/hovercard_view.js

@@ -16,7 +16,7 @@ app.views.Hovercard = app.views.Base.extend({
       .on('mouseleave', '.hovercardable', _.bind(this._mouseleaveHandler, this));
 
     this.show_me = false;
-    this.parent = null;  // current 'hovercarable' element that caused HC to appear
+    this.parent = null;  // current 'hovercardable' element that caused HC to appear
 
     // cache some element references
     this.avatar = this.$('.avatar');
@@ -61,7 +61,10 @@ app.views.Hovercard = app.views.Base.extend({
 
   _mouseleaveHandler: function(event) {
     if( this.active === false ||
-        $.contains(this.el, event.relatedTarget) ) { return false; }
+      $.contains(this.el, event.relatedTarget) ) { return false; }
+
+    if( this.mouseIsOverElement(this.parent, event) ||
+      this.mouseIsOverElement(this.$el, event) ) { return false; }
 
     this.show_me = false;
     if( this.$el.is(':visible') ) {
@@ -137,6 +140,14 @@ app.views.Hovercard = app.views.Base.extend({
       top: p_pos.top + p_height - 25,
       left: p_pos.left
     });
-  }
+  },
+  
+  mouseIsOverElement: function(element, event) {
+    var el_pos = element.offset();
+    return event.pageX >= el_pos.left && 
+      event.pageX <= el_pos.left + element.width() &&
+      event.pageY >= el_pos.top && 
+      event.pageY <= el_pos.top + element.height();
+  },
 });
 // @license-end