@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
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
+65
-45
+19
-19
resources/celerity/map.php
+19
-19
resources/celerity/map.php
···
8
8
return array(
9
9
'names' => array(
10
10
'core.pkg.css' => 'a419cf4b',
11
-
'core.pkg.js' => 'b826f522',
11
+
'core.pkg.js' => '3c8757c8',
12
12
'darkconsole.pkg.js' => 'e7393ebb',
13
13
'differential.pkg.css' => '2de124c9',
14
14
'differential.pkg.js' => '64e69521',
···
452
452
'rsrc/js/core/DragAndDropFileUpload.js' => 'ad10aeac',
453
453
'rsrc/js/core/DraggableList.js' => 'a16ec1c6',
454
454
'rsrc/js/core/FileUpload.js' => '477359c8',
455
-
'rsrc/js/core/Hovercard.js' => '6914d0dd',
455
+
'rsrc/js/core/Hovercard.js' => 'cb696bed',
456
456
'rsrc/js/core/KeyboardShortcut.js' => '1ae869f2',
457
457
'rsrc/js/core/KeyboardShortcutManager.js' => 'c1700f6f',
458
458
'rsrc/js/core/MultirowRowManager.js' => 'b5d57730',
···
478
478
'rsrc/js/core/behavior-global-drag-and-drop.js' => 'c8e57404',
479
479
'rsrc/js/core/behavior-high-security-warning.js' => 'a464fe03',
480
480
'rsrc/js/core/behavior-history-install.js' => '7ee2b591',
481
-
'rsrc/js/core/behavior-hovercard.js' => 'f36e01af',
481
+
'rsrc/js/core/behavior-hovercard.js' => '66dd6e9e',
482
482
'rsrc/js/core/behavior-keyboard-pager.js' => 'a8da01f0',
483
483
'rsrc/js/core/behavior-keyboard-shortcuts.js' => 'd75709e6',
484
484
'rsrc/js/core/behavior-lightbox-attachments.js' => 'f8ba29d7',
···
632
632
'javelin-behavior-phabricator-file-tree' => '88236f00',
633
633
'javelin-behavior-phabricator-gesture' => '3ab51e2c',
634
634
'javelin-behavior-phabricator-gesture-example' => '558829c2',
635
-
'javelin-behavior-phabricator-hovercards' => 'f36e01af',
635
+
'javelin-behavior-phabricator-hovercards' => '66dd6e9e',
636
636
'javelin-behavior-phabricator-keyboard-pager' => 'a8da01f0',
637
637
'javelin-behavior-phabricator-keyboard-shortcuts' => 'd75709e6',
638
638
'javelin-behavior-phabricator-line-linker' => '1499a8cb',
···
747
747
'phabricator-file-upload' => '477359c8',
748
748
'phabricator-filetree-view-css' => 'fccf9f82',
749
749
'phabricator-flag-css' => '5337623f',
750
-
'phabricator-hovercard' => '6914d0dd',
750
+
'phabricator-hovercard' => 'cb696bed',
751
751
'phabricator-hovercard-view-css' => '1239cd52',
752
752
'phabricator-keyboard-shortcut' => '1ae869f2',
753
753
'phabricator-keyboard-shortcut-manager' => 'c1700f6f',
···
1301
1301
'javelin-stratcom',
1302
1302
'javelin-util',
1303
1303
),
1304
-
'6882e80a' => array(
1305
-
'javelin-dom',
1304
+
'66dd6e9e' => array(
1305
+
'javelin-behavior',
1306
+
'javelin-behavior-device',
1307
+
'javelin-stratcom',
1308
+
'javelin-vector',
1309
+
'phabricator-hovercard',
1306
1310
),
1307
-
'6914d0dd' => array(
1308
-
'javelin-install',
1311
+
'6882e80a' => array(
1309
1312
'javelin-dom',
1310
-
'javelin-vector',
1311
-
'javelin-request',
1312
-
'javelin-uri',
1313
1313
),
1314
1314
'69adf288' => array(
1315
1315
'javelin-install',
···
1812
1812
'javelin-stratcom',
1813
1813
'phabricator-phtize',
1814
1814
),
1815
+
'cb696bed' => array(
1816
+
'javelin-install',
1817
+
'javelin-dom',
1818
+
'javelin-vector',
1819
+
'javelin-request',
1820
+
'javelin-uri',
1821
+
),
1815
1822
'ccf1cbf8' => array(
1816
1823
'javelin-install',
1817
1824
'javelin-dom',
···
1983
1990
'javelin-util',
1984
1991
'javelin-workflow',
1985
1992
'javelin-json',
1986
-
),
1987
-
'f36e01af' => array(
1988
-
'javelin-behavior',
1989
-
'javelin-behavior-device',
1990
-
'javelin-stratcom',
1991
-
'javelin-vector',
1992
-
'phabricator-hovercard',
1993
1993
),
1994
1994
'f411b6ae' => array(
1995
1995
'javelin-behavior',
+26
-18
webroot/rsrc/js/core/Hovercard.js
+26
-18
webroot/rsrc/js/core/Hovercard.js
···
14
14
_node : null,
15
15
_activeRoot : null,
16
16
_visiblePHID : null,
17
+
_alignment: null,
17
18
18
19
fetchUrl : '/search/hovercard/',
19
20
···
29
30
getCard : function() {
30
31
var self = JX.Hovercard;
31
32
return self._node;
33
+
},
34
+
35
+
getAlignment: function() {
36
+
var self = JX.Hovercard;
37
+
return self._alignment;
32
38
},
33
39
34
40
show : function(root, phid) {
···
81
87
var d = JX.Vector.getDim(root);
82
88
var n = JX.Vector.getDim(child);
83
89
var v = JX.Vector.getViewport();
90
+
var s = JX.Vector.getScroll();
84
91
85
92
// Move the tip so it's nicely aligned.
86
-
// I'm just doing north/south alignment for now
87
-
// TODO: Fix southern graceful align
88
93
var margin = 20;
89
-
// We can't shift left by ~$margin or more here due to Pholio, Phriction
90
-
var x = parseInt(p.x, 10) - margin / 2;
91
-
var y = parseInt(p.y - n.y, 10) - margin;
94
+
95
+
96
+
// Try to align the card directly above the link, with left borders
97
+
// touching.
98
+
var x = p.x;
92
99
93
-
// If running off the edge of the viewport, make it margin / 2 away
94
-
// from the far right edge of the viewport instead
95
-
if ((x + n.x) > (v.x)) {
96
-
x = x - parseInt(x + n.x - v.x + margin / 2, 10);
97
-
// If more in the center, we can safely center
98
-
} else if (x > (n.x / 2) + margin) {
99
-
x = parseInt(p.x - (n.x / 2) + d.x, 10);
100
+
// If this would push us off the right side of the viewport, push things
101
+
// back to the left.
102
+
if ((x + n.x + margin) > (s.x + v.x)) {
103
+
x = (s.x + v.x) - n.x - margin;
100
104
}
101
105
102
-
// Temporarily disabled, since it gives weird results (you can only see
103
-
// a hovercard once, as soon as it's hidden, it cannot be shown again)
104
-
// if (y < n.y) {
105
-
// // Place it southern, since northern is not enough space
106
-
// y = p.y + d.y + margin;
107
-
// }
106
+
// Try to put the card above the link.
107
+
var y = p.y - n.y - margin;
108
+
self._alignment = 'north';
109
+
110
+
// If the card is near the top of the window, show it beneath the
111
+
// link we're hovering over instead.
112
+
if ((y + margin) < s.y) {
113
+
y = p.y + d.y + margin;
114
+
self._alignment = 'south';
115
+
}
108
116
109
117
node.style.left = x + 'px';
110
118
node.style.top = y + 'px';
+20
-8
webroot/rsrc/js/core/behavior-hovercard.js
+20
-8
webroot/rsrc/js/core/behavior-hovercard.js
···
40
40
41
41
var root = JX.Hovercard.getAnchor();
42
42
var node = JX.Hovercard.getCard();
43
+
var align = JX.Hovercard.getAlignment();
43
44
44
-
// TODO: Add southern cases here, too
45
45
var mouse = JX.$V(e);
46
46
var node_pos = JX.$V(node);
47
47
var node_dim = JX.Vector.getDim(node);
···
50
50
51
51
var margin = 20;
52
52
53
-
// Cursor is above the node.
54
-
if (mouse.y < node_pos.y - margin) {
55
-
JX.Hovercard.hide();
56
-
}
53
+
if (align == 'south') {
54
+
// Cursor is below the node.
55
+
if (mouse.y > node_pos.y + node_dim.y + margin) {
56
+
JX.Hovercard.hide();
57
+
}
57
58
58
-
// Cursor is below the root.
59
-
if (mouse.y > root_pos.y + root_dim.y + margin) {
60
-
JX.Hovercard.hide();
59
+
// Cursor is above the root.
60
+
if (mouse.y < root_pos.y - margin) {
61
+
JX.Hovercard.hide();
62
+
}
63
+
} else {
64
+
// Cursor is above the node.
65
+
if (mouse.y < node_pos.y - margin) {
66
+
JX.Hovercard.hide();
67
+
}
68
+
69
+
// Cursor is below the root.
70
+
if (mouse.y > root_pos.y + root_dim.y + margin) {
71
+
JX.Hovercard.hide();
72
+
}
61
73
}
62
74
63
75
// Cursor is too far to the left.