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

162 lines
4.3 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2011-05-16 08:24:46 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.InputGroup <f> InputGroup Object
2011-05-16 08:24:46 +00:00
options <o> Options object
id <s|''> id
inputs <a|[]> inputs
separators <a|[]> seperators
width <n|0> width
self <o> Shared private variable
([options[, self]]) -> <o:Ox.Element> InputGroup Object
change <!> change
validate <!> validate
2011-05-16 08:24:46 +00:00
@*/
2011-04-22 22:03:10 +00:00
2011-05-16 08:24:46 +00:00
Ox.InputGroup = function(options, self) {
2012-06-14 12:31:00 +00:00
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 || {})
2012-05-28 19:35:41 +00:00
.update({
value: setValue
})
2011-12-21 13:42:47 +00:00
.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_) {
2012-06-15 09:32:27 +00:00
return i_ > i
? self.options.inputs[i_ - 1].options('width')
+ self.options.separators[i_ - 1].width
: i_ == i ? 16
: 0;
2011-04-22 22:03:10 +00:00
})) + 'px'
})
.bindEvent({
change: change,
submit: change,
validate: validate
})
.appendTo(that);
});
function change(data) {
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);
2012-07-05 08:58:08 +00:00
return false; // break
}
});
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;
2012-06-14 12:31:00 +00:00
}));
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,
2012-06-25 14:43:03 +00:00
inputWidths = Ox.splitInt(
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-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) {
if (v.options('id') == self.options.id + Ox.toTitleCase(id)) {
input = v;
2012-07-05 08:58:08 +00:00
return false; // break
2011-04-22 22:03:10 +00:00
}
});
return input;
};
return that;
2011-04-22 22:54:53 +00:00
};