File Manager

Editing File: /home/ubuntu/code_review/phabricator/webroot/rsrc/js/phuix/PHUIXFormControl.js

/**
 * @provides phuix-form-control-view
 * @requires javelin-install
 *           javelin-dom
 */

JX.install('PHUIXFormControl', {

members: {
    _node: null,
    _labelNode: null,
    _errorNode: null,
    _inputNode: null,
    _className: null,
    _valueSetCallback: null,
    _valueGetCallback: null,
    _rawInputNode: null,
    _tokenizer: null,

setLabel: function(label) {
      JX.DOM.setContent(this._getLabelNode(), label);
      return this;
    },

setError: function(error) {
      JX.DOM.setContent(this._getErrorNode(), error);
      return this;
    },

setClass: function(className) {
      this._className = className;
      return this;
    },

setControl: function(type, spec) {
      var node = this._getInputNode();

var input;
      switch (type) {
        case 'tokenizer':
          input = this._newTokenizer(spec);
          break;
        case 'select':
          input = this._newSelect(spec);
          break;
        case 'points':
          input = this._newPoints(spec);
          break;
        case 'optgroups':
          input = this._newOptgroups(spec);
          break;
        case 'static':
          input = this._newStatic(spec);
          break;
        case 'checkboxes':
          input = this._newCheckboxes(spec);
          break;
        case 'text':
          input = this._newText(spec);
          break;
        case 'remarkup':
          input = this._newRemarkup(spec);
          break;
        default:
          // TODO: Default or better error?
          JX.$E('Bad Input Type');
          return;
      }

JX.DOM.setContent(node, input.node);
      this._valueGetCallback = input.get;
      this._valueSetCallback = input.set;
      this._rawInputNode = input.node;
      this._tokenizer = input.tokenizer || null;

return this;
    },

setValue: function(value) {
      this._valueSetCallback(value);
      return this;
    },

getValue: function() {
      return this._valueGetCallback();
    },

getRawInputNode: function() {
      return this._rawInputNode;
    },

getTokenizer: function() {
      return this._tokenizer;
    },

getNode: function() {
      if (!this._node) {

var attrs = {
          className: 'aphront-form-control ' + this._className + ' grouped'
        };

var content = [
          this._getLabelNode(),
          this._getErrorNode(),
          this._getInputNode()
        ];

this._node = JX.$N('div', attrs, content);
      }

return this._node;
    },

_getLabelNode: function() {
      if (!this._labelNode) {
        var attrs = {
          className: 'aphront-form-label'
        };

this._labelNode = JX.$N('label', attrs);
      }

return this._labelNode;
    },

_getErrorNode: function() {
      if (!this._errorNode) {
        var attrs = {
          className: 'aphront-form-error'
        };

this._errorNode = JX.$N('span', attrs);
      }

return this._errorNode;
    },

_getInputNode: function() {
      if (!this._inputNode) {
        var attrs = {
          className: 'aphront-form-input'
        };

this._inputNode = JX.$N('div', attrs);
      }

return this._inputNode;
    },

_newTokenizer: function(spec) {
      var build = JX.Prefab.newTokenizerFromTemplate(
        spec.markup,
        spec.config);
      build.tokenizer.start();

function get_value() {
        return JX.keys(build.tokenizer.getTokens());
      }

set_value(spec.value || {});

return {
        node: build.node,
        get: get_value,
        set: set_value,
        tokenizer: build.tokenizer
      };
    },

_newSelect: function(spec) {
      var node = JX.Prefab.renderSelect(
        spec.options,
        spec.value,
        {},
        spec.order);

return {
        node: node,
        get: function() {
          return node.value;
        },
        set: function(value) {
          node.value = value;
        }
      };
    },

_newStatic: function(spec) {
      var node = JX.$N(
        'div',
        {
          className: 'phui-form-static-action'
        },
        spec.description || '');

return {
        node: node,
        get: function() {
          return true;
        },
        set: function() {
          return;
        }
      };
    },

_newCheckboxes: function(spec) {
      var checkboxes = [];
      var checkbox_list = [];
      for (var ii = 0; ii < spec.keys.length; ii++) {
        var key = spec.keys[ii];
        var checkbox_id = 'checkbox-' + Math.floor(Math.random() * 1000000);

var checkbox = JX.$N(
          'input',
          {
            type: 'checkbox',
            value: key,
            id: checkbox_id
          });

checkboxes.push(checkbox);

var label = JX.$N(
          'label',
          {
            className: 'phuix-form-checkbox-label',
            htmlFor: checkbox_id
          },
          JX.$H(spec.labels[key] || ''));

var display = JX.$N(
          'div',
          {
            className: 'phuix-form-checkbox-item'
          },
          [checkbox, label]);

checkbox_list.push(display);
      }

var node = JX.$N(
        'div',
        {
          className: 'phuix-form-checkbox-action'
        },
        checkbox_list);

var set_value = function(value) {
        value = value || [];

if (!value.length) {
          value = [];
        }

var map = {};
        var ii;
        for (ii = 0; ii < value.length; ii++) {
          map[value[ii]] = true;
        }

for (ii = 0; ii < checkboxes.length; ii++) {
          if (map.hasOwnProperty(checkboxes[ii].value)) {
            checkboxes[ii].checked = 'checked';
          } else {
            checkboxes[ii].checked = false;
          }
        }
      };

set_value(spec.value);

return {
        node: node,
        get: get_value,
        set: set_value
      };
    },

_newPoints: function(spec) {
      return this._newText(spec);
    },

_newText: function(spec) {
      var attrs = {
        type: 'text',
        value: spec.value
      };

var node = JX.$N('input', attrs);

return {
        node: node,
        get: function() {
          return node.value;
        },
        set: function(value) {
          node.value = value;
        }
      };
    },

_newRemarkup: function(spec) {
      var attrs = {};

// We could imagine a world where this renders a full remarkup control
      // with all the hint buttons and client behaviors, but today much of that
      // behavior is defined server-side and thus this isn't a world we
      // currently live in.

var node = JX.$N('textarea', attrs);
      node.value = spec.value || '';

return {
        node: node,
        get: function() {
          return node.value;
        },
        set: function(value) {
          node.value = value;
        }
      };
    },

_newOptgroups: function(spec) {
      var value = spec.value || null;

var optgroups = [];
      for (var ii = 0; ii < spec.groups.length; ii++) {
        var group = spec.groups[ii];
        var options = [];
        for (var jj = 0; jj < group.options.length; jj++) {
          var option = group.options[jj];
          options.push(JX.$N('option', {value: option.key}, option.label));

if (option.selected && (value === null)) {
            value = option.key;
          }
        }
        optgroups.push(JX.$N('optgroup', {label: group.label}, options));
      }

var node = JX.$N('select', {}, optgroups);
      node.value = value;

return {
        node: node,
        get: function() {
          return node.value;
        },
        set: function(value) {
          node.value = value;
        }
      };
    }

}

});

Back to Directory File Manager