Homec4science
Diffusion Phabricator (feature/better-testing) Browse

phab/webroot/rsrc/js/phuix/PHUIXDropdownMenu.js
a4a948561283feature/better-testing

Last Change
Raw File

PHUIXDropdownMenu.js
View Options

/**
* @provides phuix-dropdown-menu
* @requires javelin-install
* javelin-util
* javelin-dom
* javelin-vector
* javelin-stratcom
* @javelin
*/
/**
* Basic interaction for a dropdown menu.
*
* The menu is unaware of the content inside it, so it can not close itself
* when an item is selected. Callers must make a call to @{method:close} after
* an item is chosen in order to close the menu.
*/
JX.install('PHUIXDropdownMenu', {
construct : function(node) {
this._node = node;
JX.DOM.listen(
this._node,
'click',
null,
JX.bind(this, this._onclick));
JX.Stratcom.listen(
'mousedown',
null,
JX.bind(this, this._onanyclick));
JX.Stratcom.listen(
'resize',
null,
JX.bind(this, this._adjustposition));
JX.Stratcom.listen('phuix.dropdown.open', null, JX.bind(this, this.close));
JX.Stratcom.listen('keydown', null, JX.bind(this, this._onkey));
},
events: ['open', 'close'],
properties: {
width: null,
align: 'right',
offsetX: 0,
offsetY: 0
},
members: {
_node: null,
_menu: null,
_open: false,
_content: null,
setContent: function(content) {
JX.DOM.setContent(this._getMenuNode(), content);
return this;
},
open: function() {
if (this._open) {
return;
}
this.invoke('open');
JX.Stratcom.invoke('phuix.dropdown.open');
this._open = true;
this._show();
return this;
},
close: function() {
if (!this._open) {
return;
}
this._open = false;
this._hide();
this.invoke('close');
return this;
},
_getMenuNode: function() {
if (!this._menu) {
var attrs = {
className: 'phuix-dropdown-menu',
role: 'button'
};
var menu = JX.$N('div', attrs);
this._menu = menu;
}
return this._menu;
},
_onclick : function(e) {
if (this._open) {
this.close();
} else {
this.open();
}
e.prevent();
},
_onanyclick : function(e) {
if (!this._open) {
return;
}
if (JX.Stratcom.pass(e)) {
return;
}
var t = e.getTarget();
while (t) {
if (t == this._menu || t == this._node) {
return;
}
t = t.parentNode;
}
this.close();
},
_show : function() {
document.body.appendChild(this._menu);
if (this.getWidth()) {
new JX.Vector(this.getWidth(), null).setDim(this._menu);
}
this._adjustposition();
JX.DOM.alterClass(this._node, 'phuix-dropdown-open', true);
this._node.setAttribute('aria-expanded', 'true');
// Try to highlight the first link in the menu for assistive technologies.
var links = JX.DOM.scry(this._menu, 'a');
if (links[0]) {
JX.DOM.focus(links[0]);
}
},
_hide : function() {
JX.DOM.remove(this._menu);
JX.DOM.alterClass(this._node, 'phuix-dropdown-open', false);
this._node.setAttribute('aria-expanded', 'false');
},
_adjustposition : function() {
if (!this._open) {
return;
}
var m = JX.Vector.getDim(this._menu);
var v = JX.$V(this._node);
var d = JX.Vector.getDim(this._node);
switch (this.getAlign()) {
case 'right':
v = v.add(d)
.add(JX.$V(-m.x, 0));
break;
default:
v = v.add(0, d.y);
break;
}
v = v.add(this.getOffsetX(), this.getOffsetY());
v.setPos(this._menu);
},
_onkey: function(e) {
// When the user presses escape with a menu open, close the menu and
// refocus the button which activates the menu. In particular, this makes
// popups more usable with assistive technologies.
if (!this._open) {
return;
}
if (e.getSpecialKey() != 'esc') {
return;
}
this.close();
JX.DOM.focus(this._node);
e.prevent();
}
}
});
c4science · Help