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

166 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-12-21 13:42:47 +00:00
.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();
}
2011-04-22 22:03:10 +00:00
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) {
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({
2011-12-21 13:42:47 +00:00
id: self.options.id + Ox.toTitleCase($input.options('id') || '')
2011-04-22 22:03:10 +00:00
})
.css({
2011-12-21 13:42:47 +00:00
marginLeft: -Ox.sum(self.options.inputs.map(function($input, 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-12-21 13:42:47 +00:00
self.options.value = getValue();
2011-06-02 03:44:11 +00:00
that.triggerEvent('change', {
2011-12-21 13:42:47 +00:00
value: self.options.value
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
}
}
2011-12-21 13:42:47 +00:00
function getValue() {
var value = self.options.inputs.map(function($input) {
2011-12-21 15:33:52 +00:00
return $input.value();
2011-12-21 13:42:47 +00:00
});
return self.options.join ? self.options.join(value) : value;
}
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
}
2011-12-21 13:42:47 +00:00
function setValue() {
var values = self.options.split
? self.options.split(self.options.value)
: self.options.value;
values.forEach(function(value, i) {
2011-12-21 15:33:52 +00:00
self.options.inputs[i].value(value);
2011-12-21 13:42:47 +00:00
});
}
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);
}
2011-12-21 13:42:47 +00:00
self.setOption = function(key, value) {
if (key == 'value') {
setValue();
}
}
2011-04-22 22:03:10 +00:00
// 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;
};
return that;
2011-04-22 22:54:53 +00:00
};