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

128 lines
3.3 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-05-16 10:49:48 +00:00
2011-11-05 16:46:53 +00:00
'use strict';
2011-05-16 10:49:48 +00:00
/*@
Ox.FormElementGroup <f:Ox.Element> FormElementGroup Element
() -> <f> FormElementGroup Element
(options) -> <f> FormElementGroup Element
(options, self) -> <f> FormElementGroup Element
options <o> Options object
id <s> element id
elements <a|[]> elements in group
float <s|left> alignment
separators <a|[]> separators (not implemented)
width <n|0> group width
self <o> Shared private variable
@*/
2011-04-22 22:03:10 +00:00
Ox.FormElementGroup = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
2011-04-22 22:03:10 +00:00
.defaults({
id: '',
elements: [],
float: 'left',
2011-12-21 13:42:47 +00:00
join: null,
2011-04-22 22:03:10 +00:00
separators: [],
2011-12-21 13:42:47 +00:00
split: null,
value: options.split ? '' : [],
2011-04-22 22:03:10 +00:00
width: 0
})
.options(options || {})
.addClass('OxInputGroup');
2011-12-21 13:42:47 +00:00
if (Ox.isEmpty(self.options.value)) {
self.options.value = getValue();
} else {
setValue();
}
2011-04-22 22:03:10 +00:00
(
self.options.float == 'left' ?
self.options.elements : Ox.clone(self.options.elements).reverse()
2011-12-21 13:42:47 +00:00
).forEach(function($element) {
2011-04-22 22:03:10 +00:00
$element.css({
float: self.options.float // fixme: make this a class
})
.bindEvent({
autovalidate: function(data) {
that.triggerEvent({autovalidate: data});
},
2011-12-21 13:42:47 +00:00
change: change,
submit: change,
validate: function(data) {
that.triggerEvent({validate: data});
2011-04-22 22:03:10 +00:00
}
})
.appendTo(that);
});
2011-12-21 13:42:47 +00:00
function change(data) {
self.options.value = getValue();
that.triggerEvent('change', {
value: self.options.value
});
}
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'
});
*/
2011-12-21 13:42:47 +00:00
function getValue() {
var value = self.options.elements.map(function($element) {
2011-12-21 15:33:52 +00:00
return $element.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() {
}
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.elements[i].value(value);
2011-12-21 13:42:47 +00:00
});
}
2011-04-22 22:03:10 +00:00
function setWidth() {
}
2011-04-29 12:40:51 +00:00
self.setOption = function(key, value) {
2011-12-21 13:42:47 +00:00
if (key == 'value') {
setValue();
}
2011-04-22 22:03:10 +00:00
};
that.replaceElement = function(pos, element) {
2011-11-04 15:54:28 +00:00
Ox.Log('Form', 'Ox.FormElementGroup replaceElement', pos, element)
2011-04-22 22:03:10 +00:00
self.options.elements[pos].replaceWith(element.$element);
self.options.elements[pos] = element;
};
that.value = function() {
var values = self.options.elements.map(function(element) {
2011-12-30 09:33:01 +00:00
return element.value();
2011-04-22 22:03:10 +00:00
});
return self.options.joinValues
? self.options.joinValues(values)
: values;
2011-04-22 22:03:10 +00:00
};
return that;
};