Differential D21160 Diff 50381 webroot/rsrc/js/phuix/PHUIXActionView.js

Changeset View

Standalone View

webroot/rsrc/js/phuix/PHUIXActionView.js

Show All 12 Lines	members: {
_name: null,		_name: null,
_icon: 'none',		_icon: 'none',
_iconColor: null,		_iconColor: null,
_disabled: false,		_disabled: false,
_label: false,		_label: false,
_handler: null,		_handler: null,
_selected: false,		_selected: false,
_divider: false,		_divider: false,
		_keyCommand: null,
		_unresponsive: null,

_iconNode: null,		_iconNode: null,
_nameNode: null,		_nameNode: null,

setDisabled: function(disabled) {		setDisabled: function(disabled) {
this._disabled = disabled;		this._disabled = disabled;
JX.DOM.alterClass(		JX.DOM.alterClass(
this.getNode(),		this.getNode(),
'phabricator-action-view-disabled',		'phabricator-action-view-disabled',
disabled);		disabled);

this._buildIconNode(true);		this._buildIconNode(true);

return this;		return this;
},		},

		setUnresponsive: function(unresponsive) {
		this._unresponsive = unresponsive;
		this._buildNameNode(true);
		return this;
		},

getDisabled: function() {		getDisabled: function() {
return this._disabled;		return this._disabled;
},		},

setLabel: function(label) {		setLabel: function(label) {
this._label = label;		this._label = label;
JX.DOM.alterClass(		JX.DOM.alterClass(
this.getNode(),		this.getNode(),
Show All 25 Lines	setName: function(name) {
this._name = name;		this._name = name;
this._buildNameNode(true);		this._buildNameNode(true);
return this;		return this;
},		},

setHandler: function(handler) {		setHandler: function(handler) {
this._handler = handler;		this._handler = handler;
this._buildNameNode(true);		this._buildNameNode(true);
		this._rebuildClasses();
return this;		return this;
},		},

setIcon: function(icon) {		setIcon: function(icon) {
this._icon = icon;		this._icon = icon;
this._buildIconNode(true);		this._buildIconNode(true);
return this;		return this;
},		},

setIconColor: function(color) {		setIconColor: function(color) {
this._iconColor = color;		this._iconColor = color;
this._buildIconNode(true);		this._buildIconNode(true);
return this;		return this;
},		},

setHref: function(href) {		setHref: function(href) {
this._href = href;		this._href = href;
this._buildNameNode(true);		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;		return this;
},		},

getNode: function() {		getNode: function() {
if (!this._node) {		if (!this._node) {
var classes = ['phabricator-action-view'];		var classes = ['phabricator-action-view'];

if (this._href \|\| this._handler) {
classes.push('phabricator-action-view-href');
}

if (this._icon) {		if (this._icon) {
classes.push('action-has-icon');		classes.push('action-has-icon');
}		}

var content = [		var content = [
this._buildIconNode(),		this._buildIconNode(),
this._buildNameNode()		this._buildNameNode(),
		this._buildKeyCommandNode(),
];		];

var attr = {		var attr = {
className: classes.join(' ')		className: classes.join(' ')
};		};
this._node = JX.$N('li', attr, content);		this._node = JX.$N('li', attr, content);

JX.Stratcom.addSigil(this._node, 'phuix-action-view');		JX.Stratcom.addSigil(this._node, 'phuix-action-view');

		this._rebuildClasses();
}		}

return this._node;		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) {		_buildIconNode: function(dirty) {
if (!this._iconNode \|\| dirty) {		if (!this._iconNode \|\| dirty) {
var attr = {		var attr = {
className: [		className: [
'phui-icon-view',		'phui-icon-view',
'phabricator-action-view-icon',		'phabricator-action-view-icon',
'phui-font-fa'		'phui-font-fa'
].join(' ')		].join(' ')
Show All 15 Lines	_buildIconNode: function(dirty) {
JX.DOM.replace(this._iconNode, node);		JX.DOM.replace(this._iconNode, node);
}		}
this._iconNode = node;		this._iconNode = node;
}		}

return this._iconNode;		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) {		_buildNameNode: function(dirty) {
if (!this._nameNode \|\| dirty) {		if (!this._nameNode \|\| dirty) {
var attr = {		var attr = {
className: 'phabricator-action-view-item'		className: 'phabricator-action-view-item'
};		};

var href = this._href;		var href = this._href;
if (!href && this._handler) {		if (!href && this._handler && !this._unresponsive) {
href = '#';		href = '#';
}		}
if (href) {		if (href) {
attr.href = href;		attr.href = href;

}		}

var tag = href ? 'a' : 'span';		var tag = href ? 'a' : 'span';

var node = JX.$N(tag, attr, this._name);		var node = JX.$N(tag, attr, this._name);
JX.DOM.listen(node, 'click', null, JX.bind(this, this._onclick));		JX.DOM.listen(node, 'click', null, JX.bind(this, this._onclick));

if (this._nameNode && this._nameNode.parentNode) {		if (this._nameNode && this._nameNode.parentNode) {
JX.DOM.replace(this._nameNode, node);		JX.DOM.replace(this._nameNode, node);
}		}
this._nameNode = node;		this._nameNode = node;
}		}

return this._nameNode;		return this._nameNode;
},		},

_onclick: function(e) {		_onclick: function(e) {
		if (this._unresponsive) {
		e.prevent();
		return;
		}

if (this._handler) {		if (this._handler) {
this._handler(e);		this._handler(e);
}		}
}		}

}		}

});		});