0x2620/oxjs
2
0
Fork 2
Code Issues 172 Pull requests Releases Wiki Activity

form elements rewrite, part 1

Browse source
This commit is contained in:
rlx 2011-12-21 13:42:47 +00:00
commit 7f83cd3141
30 changed files with 1061 additions and 958 deletions
Download patch file Download diff file Expand all files Collapse all files

77
source/Ox.UI/js/Form/Ox.InputGroup.js
View file

@ -18,16 +18,24 @@ Ox.InputGroup <f:Ox.Element> InputGroup Object
Ox.InputGroup = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
id: '',
inputs: [],
joinValues: null,
separators: [],
width: 0
})
.options(options || {})
.addClass('OxInputGroup')
.click(click);
.defaults({
id: '',
inputs: [],
join: null,
separators: [],
split: null,
value: options.split ? '' : [],
width: 0
})
.options(options || {})
.addClass('OxInputGroup')
.click(click);
if (Ox.isEmpty(self.options.value)) {
self.options.value = getValue();
} else {
setValue();
}
if (self.options.width) {
setWidths();
@ -41,7 +49,6 @@ Ox.InputGroup = function(options, self) {
self.$separator = [];
self.options.separators.forEach(function(v, i) {
self.options.id == 'debug' && Ox.Log('Form', 'separator #' + i + ' ' + self.options.inputs[i].options('id') + ' ' + self.options.inputs[i].options('width'))
self.$separator[i] = Ox.Label({
textAlign: 'center',
title: v.title,
@ -56,11 +63,10 @@ Ox.InputGroup = function(options, self) {
self.options.inputs.forEach(function($input, i) {
$input.options({
id: self.options.id + Ox.toTitleCase($input.options('id')),
parent: that
id: self.options.id + Ox.toTitleCase($input.options('id') || '')
})
.css({
marginLeft: -Ox.sum(self.options.inputs.map(function(v_, i_) {
marginLeft: -Ox.sum(self.options.inputs.map(function($input, i_) {
return i_ > i ? self.options.inputs[i_ - 1].options('width') +
self.options.separators[i_ - 1].width : (i_ == i ? 16 : 0);
})) + 'px'
@ -75,13 +81,9 @@ Ox.InputGroup = function(options, self) {
function change(data) {
//Ox.Log('Form', 'InputGroup change')
var values = self.options.inputs.map(function($input) {
return $input.value();
});
self.options.value = getValue();
that.triggerEvent('change', {
value: self.options.joinValues
? self.options.joinValues(values)
: values
value: self.options.value
});
}
@ -96,6 +98,13 @@ Ox.InputGroup = function(options, self) {
}
}
function getValue() {
var value = self.options.inputs.map(function($input) {
return $input.options('value');
});
return self.options.join ? self.options.join(value) : value;
}
function getWidth() {
return Ox.sum(self.options.inputs.map(function(v) {
return v.options('width');
@ -104,6 +113,15 @@ Ox.InputGroup = function(options, self) {
}));// + 2; // fixme: why + 2?
}
function setValue() {
var values = self.options.split
? self.options.split(self.options.value)
: self.options.value;
values.forEach(function(value, i) {
self.options.inputs[i].options({value: value});
});
}
function setWidths() {
var length = self.options.inputs.length,
inputWidths = Ox.divideInt(
@ -123,6 +141,12 @@ Ox.InputGroup = function(options, self) {
that.triggerEvent('validate', data);
}
self.setOption = function(key, value) {
if (key == 'value') {
setValue();
}
}
// fixme: is this used?
that.getInputById = function(id) {
var input = null;
@ -136,19 +160,6 @@ Ox.InputGroup = function(options, self) {
return input;
};
that.value = function() {
var values = self.options.inputs.map(function(input) {
var ret = null;
['checked', 'selected', 'value'].forEach(function(v) {
input[v] && (ret = input[v]());
});
return ret;
});
return self.options.joinValues
? self.options.joinValues(values)
: values;
};
return that;
};