Keep hovercards mostly on screen

Summary: Ref T8980.

Test Plan: {F1043268}

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T8980

Differential Revision: https://secure.phabricator.com/D14879

resources/celerity/map.php

@@ -8,7 +8,7 @@
 return array(
   'names' => array(
     'core.pkg.css' => 'a419cf4b',
-    'core.pkg.js' => 'b826f522',
+    'core.pkg.js' => '3c8757c8',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
     'differential.pkg.js' => '64e69521',
@@ -452,7 +452,7 @@ return array(
     'rsrc/js/core/DragAndDropFileUpload.js' => 'ad10aeac',
     'rsrc/js/core/DraggableList.js' => 'a16ec1c6',
     'rsrc/js/core/FileUpload.js' => '477359c8',
-    'rsrc/js/core/Hovercard.js' => '6914d0dd',
+    'rsrc/js/core/Hovercard.js' => 'cb696bed',
     'rsrc/js/core/KeyboardShortcut.js' => '1ae869f2',
     'rsrc/js/core/KeyboardShortcutManager.js' => 'c1700f6f',
     'rsrc/js/core/MultirowRowManager.js' => 'b5d57730',
@@ -478,7 +478,7 @@ return array(
     'rsrc/js/core/behavior-global-drag-and-drop.js' => 'c8e57404',
     'rsrc/js/core/behavior-high-security-warning.js' => 'a464fe03',
     'rsrc/js/core/behavior-history-install.js' => '7ee2b591',
-    'rsrc/js/core/behavior-hovercard.js' => 'f36e01af',
+    'rsrc/js/core/behavior-hovercard.js' => '66dd6e9e',
     'rsrc/js/core/behavior-keyboard-pager.js' => 'a8da01f0',
     'rsrc/js/core/behavior-keyboard-shortcuts.js' => 'd75709e6',
     'rsrc/js/core/behavior-lightbox-attachments.js' => 'f8ba29d7',
@@ -632,7 +632,7 @@ return array(
     'javelin-behavior-phabricator-file-tree' => '88236f00',
     'javelin-behavior-phabricator-gesture' => '3ab51e2c',
     'javelin-behavior-phabricator-gesture-example' => '558829c2',
-    'javelin-behavior-phabricator-hovercards' => 'f36e01af',
+    'javelin-behavior-phabricator-hovercards' => '66dd6e9e',
     'javelin-behavior-phabricator-keyboard-pager' => 'a8da01f0',
     'javelin-behavior-phabricator-keyboard-shortcuts' => 'd75709e6',
     'javelin-behavior-phabricator-line-linker' => '1499a8cb',
@@ -747,7 +747,7 @@ return array(
     'phabricator-file-upload' => '477359c8',
     'phabricator-filetree-view-css' => 'fccf9f82',
     'phabricator-flag-css' => '5337623f',
-    'phabricator-hovercard' => '6914d0dd',
+    'phabricator-hovercard' => 'cb696bed',
     'phabricator-hovercard-view-css' => '1239cd52',
     'phabricator-keyboard-shortcut' => '1ae869f2',
     'phabricator-keyboard-shortcut-manager' => 'c1700f6f',
@@ -1301,16 +1301,16 @@ return array(
       'javelin-stratcom',
       'javelin-util',
     ),
+    '66dd6e9e' => array(
+      'javelin-behavior',
+      'javelin-behavior-device',
+      'javelin-stratcom',
+      'javelin-vector',
+      'phabricator-hovercard',
+    ),
     '6882e80a' => array(
       'javelin-dom',
     ),
-    '6914d0dd' => array(
-      'javelin-install',
-      'javelin-dom',
-      'javelin-vector',
-      'javelin-request',
-      'javelin-uri',
-    ),
     '69adf288' => array(
       'javelin-install',
     ),
@@ -1812,6 +1812,13 @@ return array(
       'javelin-stratcom',
       'phabricator-phtize',
     ),
+    'cb696bed' => array(
+      'javelin-install',
+      'javelin-dom',
+      'javelin-vector',
+      'javelin-request',
+      'javelin-uri',
+    ),
     'ccf1cbf8' => array(
       'javelin-install',
       'javelin-dom',
@@ -1984,13 +1991,6 @@ return array(
       'javelin-workflow',
       'javelin-json',
     ),
-    'f36e01af' => array(
-      'javelin-behavior',
-      'javelin-behavior-device',
-      'javelin-stratcom',
-      'javelin-vector',
-      'phabricator-hovercard',
-    ),
     'f411b6ae' => array(
       'javelin-behavior',
       'javelin-stratcom',

webroot/rsrc/js/core/Hovercard.js

@@ -14,6 +14,7 @@ JX.install('Hovercard', {
     _node : null,
     _activeRoot : null,
     _visiblePHID : null,
+    _alignment: null,
 
     fetchUrl : '/search/hovercard/',
 
@@ -31,6 +32,11 @@ JX.install('Hovercard', {
       return self._node;
     },
 
+    getAlignment: function() {
+      var self = JX.Hovercard;
+      return self._alignment;
+    },
+
     show : function(root, phid) {
       var self = JX.Hovercard;
       // Already displaying
@@ -81,30 +87,32 @@ JX.install('Hovercard', {
       var d = JX.Vector.getDim(root);
       var n = JX.Vector.getDim(child);
       var v = JX.Vector.getViewport();
+      var s = JX.Vector.getScroll();
 
       // Move the tip so it's nicely aligned.
-      // I'm just doing north/south alignment for now
-      // TODO: Fix southern graceful align
       var margin = 20;
-      // We can't shift left by ~$margin or more here due to Pholio, Phriction
-      var x = parseInt(p.x, 10) - margin / 2;
-      var y = parseInt(p.y - n.y, 10) - margin;
 
-      // If running off the edge of the viewport, make it margin / 2 away
-      // from the far right edge of the viewport instead
-      if ((x + n.x) > (v.x)) {
-        x = x - parseInt(x + n.x - v.x + margin / 2, 10);
-      // If more in the center, we can safely center
-      } else if (x > (n.x / 2) + margin) {
-        x = parseInt(p.x - (n.x / 2) + d.x, 10);
+
+      // Try to align the card directly above the link, with left borders
+      // touching.
+      var x = p.x;
+
+      // If this would push us off the right side of the viewport, push things
+      // back to the left.
+      if ((x + n.x + margin) > (s.x + v.x)) {
+        x = (s.x + v.x) - n.x - margin;
       }
 
-      // Temporarily disabled, since it gives weird results (you can only see
-      // a hovercard once, as soon as it's hidden, it cannot be shown again)
-      // if (y < n.y) {
-      //   // Place it southern, since northern is not enough space
-      //   y = p.y + d.y + margin;
-      // }
+      // Try to put the card above the link.
+      var y = p.y - n.y - margin;
+      self._alignment = 'north';
+
+      // If the card is near the top of the window, show it beneath the
+      // link we're hovering over instead.
+      if ((y + margin) < s.y) {
+        y = p.y + d.y + margin;
+        self._alignment = 'south';
+      }
 
       node.style.left = x + 'px';
       node.style.top  = y + 'px';

webroot/rsrc/js/core/behavior-hovercard.js

@@ -40,8 +40,8 @@ JX.behavior('phabricator-hovercards', function() {
 
       var root = JX.Hovercard.getAnchor();
       var node = JX.Hovercard.getCard();
+      var align = JX.Hovercard.getAlignment();
 
-      // TODO: Add southern cases here, too
       var mouse = JX.$V(e);
       var node_pos = JX.$V(node);
       var node_dim = JX.Vector.getDim(node);
@@ -50,14 +50,26 @@ JX.behavior('phabricator-hovercards', function() {
 
       var margin = 20;
 
-      // Cursor is above the node.
-      if (mouse.y < node_pos.y - margin) {
-        JX.Hovercard.hide();
-      }
+      if (align == 'south') {
+        // Cursor is below the node.
+        if (mouse.y > node_pos.y + node_dim.y + margin) {
+          JX.Hovercard.hide();
+        }
 
-      // Cursor is below the root.
-      if (mouse.y > root_pos.y + root_dim.y + margin) {
-        JX.Hovercard.hide();
+        // Cursor is above the root.
+        if (mouse.y < root_pos.y - margin) {
+          JX.Hovercard.hide();
+        }
+      } else {
+        // Cursor is above the node.
+        if (mouse.y < node_pos.y - margin) {
+          JX.Hovercard.hide();
+        }
+
+        // Cursor is below the root.
+        if (mouse.y > root_pos.y + root_dim.y + margin) {
+          JX.Hovercard.hide();
+        }
       }
 
       // Cursor is too far to the left.