1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-24 22:40:55 +01:00
phorge-phorge/webroot/rsrc/js/phuix/PHUIXActionView.js
epriestley 0ede616f31 Update the "View Options" menu for recent filetree changes
Summary:
Ref T13516. Minor improvements here:

  - Show key commands in the "View Options" dropdown.
  - Organize it slightly better.
  - Improve disabled item behaviors a little bit.
  - Add a "Browse Directory" action.
  - Rename "...in Diffusion" to "...in Repository".
  - Make "d", "D", and "h" use the same targeting rules as "\".
  - When you hide a file with the "h" menu item, select it.

Test Plan: Poked at the menu a lot, ran into less questionable behavior.

Maniphest Tasks: T13516

Differential Revision: https://secure.phabricator.com/D21160
2020-04-23 08:23:12 -07:00

238 lines
5.1 KiB
JavaScript

/**
* @provides phuix-action-view
* @requires javelin-install
* javelin-dom
* javelin-util
* @javelin
*/
JX.install('PHUIXActionView', {
members: {
_node: null,
_name: null,
_icon: 'none',
_iconColor: null,
_disabled: false,
_label: false,
_handler: null,
_selected: false,
_divider: false,
_keyCommand: null,
_unresponsive: null,
_iconNode: null,
_nameNode: null,
setDisabled: function(disabled) {
this._disabled = disabled;
JX.DOM.alterClass(
this.getNode(),
'phabricator-action-view-disabled',
disabled);
this._buildIconNode(true);
return this;
},
setUnresponsive: function(unresponsive) {
this._unresponsive = unresponsive;
this._buildNameNode(true);
return this;
},
getDisabled: function() {
return this._disabled;
},
setLabel: function(label) {
this._label = label;
JX.DOM.alterClass(
this.getNode(),
'phabricator-action-view-label',
label);
return this;
},
setDivider: function(divider) {
this._divider = divider;
JX.DOM.alterClass(
this.getNode(),
'phabricator-action-view-type-divider',
divider);
return this;
},
setSelected: function(selected) {
this._selected = selected;
JX.DOM.alterClass(
this.getNode(),
'phabricator-action-view-selected',
selected);
return this;
},
setName: function(name) {
this._name = name;
this._buildNameNode(true);
return this;
},
setHandler: function(handler) {
this._handler = handler;
this._buildNameNode(true);
this._rebuildClasses();
return this;
},
setIcon: function(icon) {
this._icon = icon;
this._buildIconNode(true);
return this;
},
setIconColor: function(color) {
this._iconColor = color;
this._buildIconNode(true);
return this;
},
setHref: function(href) {
this._href = href;
this._buildNameNode(true);
this._rebuildClasses();
return this;
},
setKeyCommand: function(command) {
this._keyCommand = command;
var key_node = this._buildKeyCommandNode();
JX.DOM.setContent(key_node, this._keyCommand);
var node = this.getNode();
JX.DOM.alterClass(node, 'has-key-command', !!this._keyCommand);
return this;
},
getNode: function() {
if (!this._node) {
var classes = ['phabricator-action-view'];
if (this._icon) {
classes.push('action-has-icon');
}
var content = [
this._buildIconNode(),
this._buildNameNode(),
this._buildKeyCommandNode(),
];
var attr = {
className: classes.join(' ')
};
this._node = JX.$N('li', attr, content);
JX.Stratcom.addSigil(this._node, 'phuix-action-view');
this._rebuildClasses();
}
return this._node;
},
_rebuildClasses: function() {
var node = this.getNode();
var is_href = !!(this._href || this._handler);
JX.DOM.alterClass(node, 'phabricator-action-view-href', is_href);
},
_buildIconNode: function(dirty) {
if (!this._iconNode || dirty) {
var attr = {
className: [
'phui-icon-view',
'phabricator-action-view-icon',
'phui-font-fa'
].join(' ')
};
var node = JX.$N('span', attr);
var icon_class = this._icon;
if (this._disabled) {
icon_class = icon_class + ' grey';
}
if (this._iconColor) {
icon_class = icon_class + ' ' + this._iconColor;
}
JX.DOM.alterClass(node, icon_class, true);
if (this._iconNode && this._iconNode.parentNode) {
JX.DOM.replace(this._iconNode, node);
}
this._iconNode = node;
}
return this._iconNode;
},
_buildKeyCommandNode: function() {
if (!this._keyCommandNode) {
var attrs = {
className: 'keyboard-shortcut-key'
};
this._keyCommandNode = JX.$N('div', attrs);
}
return this._keyCommandNode;
},
_buildNameNode: function(dirty) {
if (!this._nameNode || dirty) {
var attr = {
className: 'phabricator-action-view-item'
};
var href = this._href;
if (!href && this._handler && !this._unresponsive) {
href = '#';
}
if (href) {
attr.href = href;
}
var tag = href ? 'a' : 'span';
var node = JX.$N(tag, attr, this._name);
JX.DOM.listen(node, 'click', null, JX.bind(this, this._onclick));
if (this._nameNode && this._nameNode.parentNode) {
JX.DOM.replace(this._nameNode, node);
}
this._nameNode = node;
}
return this._nameNode;
},
_onclick: function(e) {
if (this._unresponsive) {
e.prevent();
return;
}
if (this._handler) {
this._handler(e);
}
}
}
});