@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
Begin rebuilding dropdown menus on ActionList
Summary:
Dropdown menus are entirely dynamic right now and use custom CSS. Begin rebuilding them to use ActionList CSS.
This introduces PHUIX components which are basically JS copy/pastes of the PHP PHUI components, just implemented in JS.
We have two other dropdowns: policy controls and one in Conpherence. I'll convert those, then implement D8966.
Test Plan: {F150418}
Reviewers: chad, btrahan
Reviewed By: btrahan
Subscribers: epriestley
Differential Revision: https://secure.phabricator.com/D8973
+472
-101
+2
-1
webroot/rsrc/css/core/z-index.css
+2
-1
webroot/rsrc/css/core/z-index.css
+1
webroot/rsrc/externals/javelin/lib/DOM.js
+1
webroot/rsrc/externals/javelin/lib/DOM.js
+36
webroot/rsrc/js/phuix/PHUIXActionListView.js
+36
webroot/rsrc/js/phuix/PHUIXActionListView.js
···
1
+
/**
2
+
* @provides phuix-action-list-view
3
+
* @requires javelin-install
4
+
* javelin-dom
5
+
*/
6
+
7
+
JX.install('PHUIXActionListView', {
8
+
9
+
construct: function() {
10
+
this._items = [];
11
+
},
12
+
13
+
members: {
14
+
_items: null,
15
+
_node: null,
16
+
17
+
addItem: function(item) {
18
+
this._items.push(item);
19
+
this.getNode().appendChild(item.getNode());
20
+
return this;
21
+
},
22
+
23
+
getNode: function() {
24
+
if (!this._node) {
25
+
var attrs = {
26
+
className: 'phabricator-action-list-view'
27
+
};
28
+
29
+
this._node = JX.$N('ul', attrs);
30
+
}
31
+
32
+
return this._node;
33
+
}
34
+
}
35
+
36
+
});
+138
webroot/rsrc/js/phuix/PHUIXActionView.js
+138
webroot/rsrc/js/phuix/PHUIXActionView.js
···
1
+
/**
2
+
* @provides phuix-action-view
3
+
* @requires javelin-install
4
+
* javelin-dom
5
+
* javelin-util
6
+
* @javelin
7
+
*/
8
+
9
+
JX.install('PHUIXActionView', {
10
+
11
+
members: {
12
+
_node: null,
13
+
_name: null,
14
+
_icon: 'none',
15
+
_disabled: false,
16
+
_handler: null,
17
+
18
+
_iconNode: null,
19
+
_nameNode: null,
20
+
21
+
setDisabled: function(disabled) {
22
+
this._disabled = disabled;
23
+
JX.DOM.alterClass(
24
+
this.getNode(),
25
+
'phabricator-action-view-disabled',
26
+
disabled);
27
+
28
+
this._buildIconNode(true);
29
+
30
+
return this;
31
+
},
32
+
33
+
getDisabled: function() {
34
+
return this._disabled;
35
+
},
36
+
37
+
setName: function(name) {
38
+
this._name = name;
39
+
this._buildNameNode(true);
40
+
return this;
41
+
},
42
+
43
+
setHandler: function(handler) {
44
+
this._handler = handler;
45
+
this._buildNameNode(true);
46
+
return this;
47
+
},
48
+
49
+
setIcon: function(icon) {
50
+
this._icon = icon;
51
+
this._buildIconNode(true);
52
+
return this;
53
+
},
54
+
55
+
setHref: function(href) {
56
+
this._href = href;
57
+
this._buildNameNode(true);
58
+
return this;
59
+
},
60
+
61
+
getNode: function() {
62
+
if (!this._node) {
63
+
var attr = {
64
+
className: 'phabricator-action-view'
65
+
};
66
+
67
+
var content = [
68
+
this._buildIconNode(),
69
+
this._buildNameNode()
70
+
];
71
+
72
+
this._node = JX.$N('li', attr, content);
73
+
}
74
+
75
+
return this._node;
76
+
},
77
+
78
+
_buildIconNode: function(dirty) {
79
+
if (!this._iconNode || dirty) {
80
+
var attr = {
81
+
className: 'phui-icon-view sprite-icons phabricator-action-view-icon'
82
+
};
83
+
var node = JX.$N('span', attr);
84
+
85
+
var icon_class = 'icons-' + this._icon;
86
+
if (this._disabled) {
87
+
icon_class = icon_class + '-grey';
88
+
}
89
+
90
+
JX.DOM.alterClass(node, icon_class, true);
91
+
92
+
if (this._iconNode && this._iconNode.parentNode) {
93
+
JX.DOM.replace(this._iconNode, node);
94
+
}
95
+
this._iconNode = node;
96
+
}
97
+
98
+
return this._iconNode;
99
+
},
100
+
101
+
_buildNameNode: function(dirty) {
102
+
if (!this._nameNode || dirty) {
103
+
var attr = {
104
+
className: 'phabricator-action-view-item'
105
+
};
106
+
107
+
var href = this._href;
108
+
if (!href && this._handler) {
109
+
href = '#';
110
+
}
111
+
if (href) {
112
+
attr.href = href;
113
+
114
+
}
115
+
116
+
var tag = href ? 'a' : 'span';
117
+
118
+
var node = JX.$N(tag, attr, this._name);
119
+
JX.DOM.listen(node, 'click', null, JX.bind(this, this._onclick));
120
+
121
+
if (this._nameNode && this._nameNode.parentNode) {
122
+
JX.DOM.replace(this._nameNode, node);
123
+
}
124
+
this._nameNode = node;
125
+
}
126
+
127
+
return this._nameNode;
128
+
},
129
+
130
+
_onclick: function(e) {
131
+
if (this._handler) {
132
+
this._handler(e);
133
+
}
134
+
}
135
+
136
+
}
137
+
138
+
});
+177
webroot/rsrc/js/phuix/PHUIXDropdownMenu.js
+177
webroot/rsrc/js/phuix/PHUIXDropdownMenu.js
···
1
+
/**
2
+
* @provides phuix-dropdown-menu
3
+
* @requires javelin-install
4
+
* javelin-util
5
+
* javelin-dom
6
+
* javelin-vector
7
+
* javelin-stratcom
8
+
* @javelin
9
+
*/
10
+
11
+
12
+
/**
13
+
* Basic interaction for a dropdown menu.
14
+
*
15
+
* The menu is unaware of the content inside it, so it can not close itself
16
+
* when an item is selected. Callers must make a call to @{method:close} after
17
+
* an item is chosen in order to close the menu.
18
+
*/
19
+
JX.install('PHUIXDropdownMenu', {
20
+
21
+
construct : function(node) {
22
+
this._node = node;
23
+
24
+
JX.DOM.listen(
25
+
this._node,
26
+
'click',
27
+
null,
28
+
JX.bind(this, this._onclick));
29
+
30
+
JX.Stratcom.listen(
31
+
'mousedown',
32
+
null,
33
+
JX.bind(this, this._onanyclick));
34
+
35
+
JX.Stratcom.listen(
36
+
'resize',
37
+
null,
38
+
JX.bind(this, this._adjustposition));
39
+
40
+
JX.Stratcom.listen('phuix.dropdown.open', null, JX.bind(this, this.close));
41
+
},
42
+
43
+
events: ['open'],
44
+
45
+
properties: {
46
+
width: null,
47
+
align: 'right'
48
+
},
49
+
50
+
members: {
51
+
_node: null,
52
+
_menu: null,
53
+
_open: false,
54
+
_content: null,
55
+
56
+
setContent: function(content) {
57
+
JX.DOM.setContent(this._getMenuNode(), content);
58
+
return this;
59
+
},
60
+
61
+
open: function() {
62
+
if (this._open) {
63
+
return;
64
+
}
65
+
66
+
this.invoke('open');
67
+
JX.Stratcom.invoke('phuix.dropdown.open');
68
+
69
+
this._open = true;
70
+
this._show();
71
+
72
+
return this;
73
+
},
74
+
75
+
close: function() {
76
+
if (!this._open) {
77
+
return;
78
+
}
79
+
this._open = false;
80
+
this._hide();
81
+
82
+
return this;
83
+
},
84
+
85
+
_getMenuNode: function() {
86
+
if (!this._menu) {
87
+
var attrs = {
88
+
className: 'phuix-dropdown-menu',
89
+
role: 'button'
90
+
};
91
+
92
+
var menu = JX.$N('div', attrs);
93
+
94
+
this._node.setAttribute('aria-haspopup', 'true');
95
+
this._node.setAttribute('aria-expanded', 'false');
96
+
97
+
this._menu = menu;
98
+
}
99
+
100
+
return this._menu;
101
+
},
102
+
103
+
_onclick : function(e) {
104
+
if (this._open) {
105
+
this.close();
106
+
} else {
107
+
this.open();
108
+
}
109
+
e.prevent();
110
+
},
111
+
112
+
_onanyclick : function(e) {
113
+
if (!this._open) {
114
+
return;
115
+
}
116
+
117
+
if (JX.Stratcom.pass(e)) {
118
+
return;
119
+
}
120
+
121
+
var t = e.getTarget();
122
+
while (t) {
123
+
if (t == this._menu || t == this._node) {
124
+
return;
125
+
}
126
+
t = t.parentNode;
127
+
}
128
+
129
+
this.close();
130
+
},
131
+
132
+
_show : function() {
133
+
document.body.appendChild(this._menu);
134
+
135
+
if (this.getWidth()) {
136
+
new JX.Vector(this.getWidth(), null).setDim(this._menu);
137
+
}
138
+
139
+
this._adjustposition();
140
+
141
+
JX.DOM.alterClass(this._node, 'phuix-dropdown-open', true);
142
+
143
+
this._node.setAttribute('aria-expanded', 'true');
144
+
},
145
+
146
+
_hide : function() {
147
+
JX.DOM.remove(this._menu);
148
+
149
+
JX.DOM.alterClass(this._node, 'phuix-dropdown-open', false);
150
+
151
+
this._node.setAttribute('aria-expanded', 'false');
152
+
},
153
+
154
+
_adjustposition : function() {
155
+
if (!this._open) {
156
+
return;
157
+
}
158
+
159
+
var m = JX.Vector.getDim(this._menu);
160
+
161
+
var v = JX.$V(this._node);
162
+
var d = JX.Vector.getDim(this._node);
163
+
164
+
switch (this.getAlign()) {
165
+
case 'right':
166
+
v = v.add(d)
167
+
.add(JX.$V(-m.x, 0));
168
+
break;
169
+
default:
170
+
v = v.add(0, d.y);
171
+
break;
172
+
}
173
+
174
+
v.setPos(this._menu);
175
+
}
176
+
}
177
+
});