[Summary view] [Print] [Text view]

   1  /**
   2   * @provides phuix-action-view
   3   * @requires javelin-install
   4   *           javelin-dom
   5   *           javelin-util
   6   * @javelin
   7   */
   8  
   9  JX.install('PHUIXActionView', {
  10  
  11    members: {
  12      _node: null,
  13      _name: null,
  14      _icon: 'none',
  15      _disabled: false,
  16      _handler: null,
  17      _selected: false,
  18  
  19      _iconNode: null,
  20      _nameNode: null,
  21  
  22      setDisabled: function(disabled) {
  23        this._disabled = disabled;
  24        JX.DOM.alterClass(
  25          this.getNode(),
  26          'phabricator-action-view-disabled',
  27          disabled);
  28  
  29        this._buildIconNode(true);
  30  
  31        return this;
  32      },
  33  
  34      setSelected: function(selected) {
  35        this._selected = selected;
  36        JX.DOM.alterClass(
  37          this.getNode(),
  38          'phabricator-action-view-selected',
  39          selected);
  40  
  41        return this;
  42      },
  43  
  44      setName: function(name) {
  45        this._name = name;
  46        this._buildNameNode(true);
  47        return this;
  48      },
  49  
  50      setHandler: function(handler) {
  51        this._handler = handler;
  52        this._buildNameNode(true);
  53        return this;
  54      },
  55  
  56      setIcon: function(icon) {
  57        this._icon = icon;
  58        this._buildIconNode(true);
  59        return this;
  60      },
  61  
  62      setHref: function(href) {
  63        this._href = href;
  64        this._buildNameNode(true);
  65        return this;
  66      },
  67  
  68      getNode: function() {
  69        if (!this._node) {
  70          var attr = {
  71            className: 'phabricator-action-view'
  72          };
  73  
  74          var content = [
  75            this._buildIconNode(),
  76            this._buildNameNode()
  77          ];
  78  
  79          this._node = JX.$N('li', attr, content);
  80        }
  81  
  82        return this._node;
  83      },
  84  
  85      _buildIconNode: function(dirty) {
  86        if (!this._iconNode || dirty) {
  87          var attr = {
  88            className: [
  89              'phui-icon-view',
  90              'phabricator-action-view-icon',
  91              'phui-font-fa'
  92            ].join(' ')
  93          };
  94          var node = JX.$N('span', attr);
  95  
  96          var icon_class = this._icon;
  97          if (this._disabled) {
  98            icon_class = icon_class + ' grey';
  99          }
 100  
 101          JX.DOM.alterClass(node, icon_class, true);
 102  
 103          if (this._iconNode && this._iconNode.parentNode) {
 104            JX.DOM.replace(this._iconNode, node);
 105          }
 106          this._iconNode = node;
 107        }
 108  
 109        return this._iconNode;
 110      },
 111  
 112      _buildNameNode: function(dirty) {
 113        if (!this._nameNode || dirty) {
 114          var attr = {
 115            className: 'phabricator-action-view-item'
 116          };
 117  
 118          var href = this._href;
 119          if (!href && this._handler) {
 120            href = '#';
 121          }
 122          if (href) {
 123            attr.href = href;
 124  
 125          }
 126  
 127          var tag = href ? 'a' : 'span';
 128  
 129          var node = JX.$N(tag, attr, this._name);
 130          JX.DOM.listen(node, 'click', null, JX.bind(this, this._onclick));
 131  
 132          if (this._nameNode && this._nameNode.parentNode) {
 133            JX.DOM.replace(this._nameNode, node);
 134          }
 135          this._nameNode = node;
 136        }
 137  
 138        return this._nameNode;
 139      },
 140  
 141      _onclick: function(e) {
 142        if (this._handler) {
 143          this._handler(e);
 144        }
 145      }
 146  
 147    }
 148  
 149  });