Changeset View
Changeset View
Standalone 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); | ||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| }); | }); | ||||