mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-14 10:52:41 +01:00
683647f1fb
Summary: Ref T12733. Ref M1476. This adds `PHUIXButtonView`, for client-side button rendering. It also adds a PHUIX example which renders the server and client versions of each component side-by-side so it's easier to see if they're messed up. Test Plan: {F4984128} Reviewers: chad Reviewed By: chad Maniphest Tasks: T12733 Differential Revision: https://secure.phabricator.com/D18051
109 lines
2.1 KiB
JavaScript
109 lines
2.1 KiB
JavaScript
/**
|
|
* @provides phuix-button-view
|
|
* @requires javelin-install
|
|
* javelin-dom
|
|
*/
|
|
JX.install('PHUIXButtonView', {
|
|
|
|
statics: {
|
|
BUTTONTYPE_DEFAULT: 'buttontype.default',
|
|
BUTTONTYPE_SIMPLE: 'buttontype.simple'
|
|
},
|
|
|
|
members: {
|
|
_node: null,
|
|
_textNode: null,
|
|
|
|
_iconView: null,
|
|
_color: null,
|
|
_buttonType: null,
|
|
|
|
setIcon: function(icon) {
|
|
this.getIconView().setIcon(icon);
|
|
return this;
|
|
},
|
|
|
|
getIconView: function() {
|
|
if (!this._iconView) {
|
|
this._iconView = new JX.PHUIXIconView();
|
|
this._redraw();
|
|
}
|
|
return this._iconView;
|
|
},
|
|
|
|
setColor: function(color) {
|
|
var node = this.getNode();
|
|
|
|
if (this._color) {
|
|
JX.DOM.alterClass(node, this._color, false);
|
|
}
|
|
this._color = color;
|
|
JX.DOM.alterClass(node, this._color, true);
|
|
|
|
return this;
|
|
},
|
|
|
|
setButtonType: function(button_type) {
|
|
var self = JX.PHUIXButtonView;
|
|
|
|
this._buttonType = button_type;
|
|
var node = this.getNode();
|
|
|
|
var is_simple = (this._buttonType == self.BUTTONTYPE_SIMPLE);
|
|
JX.DOM.alterClass(node, 'simple', is_simple);
|
|
|
|
return this;
|
|
},
|
|
|
|
setText: function(text) {
|
|
JX.DOM.setContent(this._getTextNode(), text);
|
|
return this;
|
|
},
|
|
|
|
getNode: function() {
|
|
if (!this._node) {
|
|
var attrs = {
|
|
className: 'button'
|
|
};
|
|
|
|
this._node = JX.$N('button', attrs);
|
|
|
|
this._redraw();
|
|
}
|
|
|
|
return this._node;
|
|
},
|
|
|
|
_getTextNode: function() {
|
|
if (!this._textNode) {
|
|
var attrs = {
|
|
className: 'phui-button-text'
|
|
};
|
|
|
|
this._textNode = JX.$N('div', attrs);
|
|
}
|
|
|
|
return this._textNode;
|
|
},
|
|
|
|
_redraw: function() {
|
|
var node = this.getNode();
|
|
|
|
var icon = this._iconView;
|
|
var text = this._textNode;
|
|
|
|
var content = [];
|
|
if (icon) {
|
|
content.push(icon.getNode());
|
|
}
|
|
|
|
if (text) {
|
|
content.push(text);
|
|
}
|
|
|
|
JX.DOM.alterClass(node, 'has-icon', !!icon);
|
|
JX.DOM.setContent(node, content);
|
|
}
|
|
}
|
|
|
|
});
|