diff --git a/resources/celerity/map.php b/resources/celerity/map.php --- a/resources/celerity/map.php +++ b/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 @@ '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 @@ '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 @@ '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 @@ '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,15 +1301,15 @@ 'javelin-stratcom', 'javelin-util', ), - '6882e80a' => array( - 'javelin-dom', + '66dd6e9e' => array( + 'javelin-behavior', + 'javelin-behavior-device', + 'javelin-stratcom', + 'javelin-vector', + 'phabricator-hovercard', ), - '6914d0dd' => array( - 'javelin-install', + '6882e80a' => array( 'javelin-dom', - 'javelin-vector', - 'javelin-request', - 'javelin-uri', ), '69adf288' => array( 'javelin-install', @@ -1812,6 +1812,13 @@ '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 @@ 'javelin-workflow', 'javelin-json', ), - 'f36e01af' => array( - 'javelin-behavior', - 'javelin-behavior-device', - 'javelin-stratcom', - 'javelin-vector', - 'phabricator-hovercard', - ), 'f411b6ae' => array( 'javelin-behavior', 'javelin-stratcom', diff --git a/webroot/rsrc/js/core/Hovercard.js b/webroot/rsrc/js/core/Hovercard.js --- a/webroot/rsrc/js/core/Hovercard.js +++ b/webroot/rsrc/js/core/Hovercard.js @@ -14,6 +14,7 @@ _node : null, _activeRoot : null, _visiblePHID : null, + _alignment: null, fetchUrl : '/search/hovercard/', @@ -31,6 +32,11 @@ 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 @@ 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'; diff --git a/webroot/rsrc/js/core/behavior-hovercard.js b/webroot/rsrc/js/core/behavior-hovercard.js --- a/webroot/rsrc/js/core/behavior-hovercard.js +++ b/webroot/rsrc/js/core/behavior-hovercard.js @@ -40,8 +40,8 @@ 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 @@ 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.