oxjs/source/Ox.UI/js/Form/Ox.InputGroup.js

155 lines
4.5 KiB
JavaScript
Raw Normal View History

2011-07-29 18:48:43 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-04-22 22:03:10 +00:00
2011-11-05 16:46:53 +00:00
'use strict';
2011-05-16 08:24:46 +00:00
/*@
Ox.InputGroup <f:Ox.Element> InputGroup Object
() -> <f> InputGroup Object
(options) -> <f> InputGroup Object
(options, self) -> <f> InputGroup Object
options <o> Options object
id <s|''> id
inputs <a|[]> inputs
separators <a|[]> seperators
width <n|0> width
self <o> shared private variable
@*/
2011-04-22 22:03:10 +00:00
2011-05-16 08:24:46 +00:00
Ox.InputGroup = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
2011-04-22 22:03:10 +00:00
.defaults({
id: '',
inputs: [],
2011-11-10 13:55:33 +00:00
joinValues: null,
2011-04-22 22:03:10 +00:00
separators: [],
width: 0
})
.options(options || {})
.addClass('OxInputGroup')
.click(click);
if (self.options.width) {
setWidths();
} else {
self.options.width = getWidth();
}
that.css({
width: self.options.width + 'px'
});
self.$separator = [];
2011-04-22 22:03:10 +00:00
self.options.separators.forEach(function(v, i) {
2011-11-04 15:54:28 +00:00
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({
2011-04-22 22:03:10 +00:00
textAlign: 'center',
title: v.title,
width: v.width + 32
})
.addClass('OxSeparator')
.css({
marginLeft: (self.options.inputs[i].options('width') - (i == 0 ? 16 : 32)) + 'px'
})
.appendTo(that);
});
self.options.inputs.forEach(function($input, i) {
$input.options({
id: self.options.id + Ox.toTitleCase($input.options('id')),
parent: that
})
.css({
marginLeft: -Ox.sum(self.options.inputs.map(function(v_, i_) {
2011-04-22 22:03:10 +00:00
return i_ > i ? self.options.inputs[i_ - 1].options('width') +
self.options.separators[i_ - 1].width : (i_ == i ? 16 : 0);
})) + 'px'
})
.bindEvent({
change: change,
submit: change,
validate: validate
})
.appendTo(that);
});
function change(data) {
2011-11-04 15:54:28 +00:00
//Ox.Log('Form', 'InputGroup change')
2011-11-10 13:55:33 +00:00
var values = self.options.inputs.map(function($input) {
return $input.value();
});
2011-06-02 03:44:11 +00:00
that.triggerEvent('change', {
2011-11-10 13:55:33 +00:00
value: self.options.joinValues
? self.options.joinValues(values)
: values
2011-06-02 03:44:11 +00:00
});
2011-04-22 22:03:10 +00:00
}
function click(event) {
if ($(event.target).hasClass('OxSeparator')) {
Ox.forEach(self.options.inputs, function($input) {
if ($input.focusInput) {
2011-12-18 09:44:11 +00:00
$input.focusInput(true);
return false;
}
});
2011-04-22 22:03:10 +00:00
}
}
function getWidth() {
return Ox.sum(self.options.inputs.map(function(v) {
2011-04-22 22:03:10 +00:00
return v.options('width');
})) + Ox.sum(self.options.separators.map(function(v) {
2011-04-22 22:03:10 +00:00
return v.width;
}));// + 2; // fixme: why + 2?
2011-04-22 22:03:10 +00:00
}
function setWidths() {
var length = self.options.inputs.length,
inputWidths = Ox.divideInt(
self.options.width - Ox.sum(self.options.separators.map(function(v) {
2011-04-22 22:03:10 +00:00
return v.width;
})), length
);
self.options.inputs.forEach(function(v) {
v.options({
width: inputWidths[1] // fixme: 1?? i?
2011-04-22 22:03:10 +00:00
});
});
}
function validate(data) {
2011-11-04 15:54:28 +00:00
//Ox.Log('Form', 'INPUTGROUP TRIGGER VALIDATE')
2011-04-22 22:03:10 +00:00
that.triggerEvent('validate', data);
}
// fixme: is this used?
that.getInputById = function(id) {
var input = null;
Ox.forEach(self.options.inputs, function(v, i) {
2011-11-04 15:54:28 +00:00
//Ox.Log('Form', v, v.options('id'), id)
2011-04-22 22:03:10 +00:00
if (v.options('id') == self.options.id + Ox.toTitleCase(id)) {
input = v;
return false;
}
});
return input;
};
that.value = function() {
var values = self.options.inputs.map(function(input) {
2011-04-22 22:03:10 +00:00
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;
2011-04-22 22:03:10 +00:00
};
return that;
2011-04-22 22:54:53 +00:00
};