Homec4science
Diffusion Phabricator (production) Browse

phab/webroot/rsrc/js/phuix/PHUIXFormControl.js
1429226f6de2production

Last Change
Raw File

PHUIXFormControl.js
View Options

/**
* @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,
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;
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;
return this;
},
setValue: function(value) {
this._valueSetCallback(value);
return this;
},
getValue: function() {
return this._valueGetCallback();
},
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());
}
function set_value(map) {
var tokens = get_value();
for (var ii = 0; ii < tokens.length; ii++) {
build.tokenizer.removeToken(tokens[ii]);
}
for (var k in map) {
var v = JX.Prefab.transformDatasourceResults(map[k]);
build.tokenizer.addToken(k, v);
}
}
set_value(spec.value || {});
return {
node: build.node,
get: get_value,
set: set_value
};
},
_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 get_value = function() {
var list = [];
for (var ii = 0; ii < checkboxes.length; ii++) {
if (checkboxes[ii].checked) {
list.push(checkboxes[ii].value);
}
}
return 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) {
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;
}
};
},
_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;
}
};
}
}
});
c4science · Help