updating form elements
This commit is contained in:
parent
8550cc8442
commit
73f1105692
13 changed files with 305 additions and 140 deletions
|
|
@ -15,11 +15,8 @@ Ox.ObjectArrayInput = function(options, self) {
|
|||
.options(options || {})
|
||||
.addClass('OxObjectArrayInput');
|
||||
|
||||
if (self.options.value.length == 0) {
|
||||
self.options.value = [{}];
|
||||
self.options.inputs.forEach(function(input) {
|
||||
self.options.value[0][input.options.id] = '';
|
||||
});
|
||||
if (Ox.isEmpty(self.options.value)) {
|
||||
self.options.value = [getDefaultValue()];
|
||||
}
|
||||
|
||||
self.$element = [];
|
||||
|
|
@ -28,11 +25,10 @@ Ox.ObjectArrayInput = function(options, self) {
|
|||
self.$addButton = [];
|
||||
self.buttonWidth = self.options.width / 2 - 4;
|
||||
|
||||
self.options.value.forEach(function(value, i) {
|
||||
addInput(i, value);
|
||||
});
|
||||
setValue(self.options.value);
|
||||
|
||||
function addInput(index, value) {
|
||||
Ox.print('ADD INPUT', index, value)
|
||||
self.$element.splice(index, 0, Ox.Element()
|
||||
.css({
|
||||
width: self.options.width + 'px',
|
||||
|
|
@ -50,11 +46,16 @@ Ox.ObjectArrayInput = function(options, self) {
|
|||
.bindEvent(input.events || {});
|
||||
}),
|
||||
labelWidth: self.options.labelWidth,
|
||||
value: value,
|
||||
width: self.options.width
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
// ...
|
||||
var index = $(this).parent().data('index');
|
||||
self.options.value[index] = self.$input[index].value();
|
||||
that.triggerEvent('change', {
|
||||
value: self.options.value
|
||||
});
|
||||
}
|
||||
})
|
||||
.appendTo(self.$element[index])
|
||||
|
|
@ -70,6 +71,10 @@ Ox.ObjectArrayInput = function(options, self) {
|
|||
var index = $(this).parent().data('index');
|
||||
if (self.$input.length > 1) {
|
||||
removeInput(index);
|
||||
self.options.value = getValue();
|
||||
that.triggerEvent('change', {
|
||||
value: self.options.value
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -84,7 +89,11 @@ Ox.ObjectArrayInput = function(options, self) {
|
|||
.bind({
|
||||
click: function() {
|
||||
var index = $(this).parent().data('index');
|
||||
addInput(index + 1);
|
||||
addInput(index + 1, getDefaultValue());
|
||||
self.options.value = getValue();
|
||||
that.triggerEvent('change', {
|
||||
value: self.options.value
|
||||
});
|
||||
}
|
||||
})
|
||||
.appendTo(self.$element[index])
|
||||
|
|
@ -92,6 +101,20 @@ Ox.ObjectArrayInput = function(options, self) {
|
|||
updateInputs();
|
||||
}
|
||||
|
||||
function getDefaultValue() {
|
||||
var value = {};
|
||||
self.options.inputs.forEach(function(input) {
|
||||
value[input.options.id] = '';
|
||||
});
|
||||
return value;
|
||||
}
|
||||
|
||||
function getValue() {
|
||||
return self.$input.map(function($input) {
|
||||
return $input.value();
|
||||
});
|
||||
}
|
||||
|
||||
function removeInput(index) {
|
||||
[
|
||||
'input', 'removeButton', 'addButton', 'element'
|
||||
|
|
@ -103,6 +126,16 @@ Ox.ObjectArrayInput = function(options, self) {
|
|||
updateInputs();
|
||||
}
|
||||
|
||||
function setValue(value) {
|
||||
while (self.$element.length) {
|
||||
removeInput(0);
|
||||
}
|
||||
value.forEach(function(value, i) {
|
||||
addInput(i, value);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function updateInputs() {
|
||||
var length = self.$element.length;
|
||||
self.$element.forEach(function($element, i) {
|
||||
|
|
@ -121,17 +154,10 @@ Ox.ObjectArrayInput = function(options, self) {
|
|||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'value') {
|
||||
// ...
|
||||
setValue(value);
|
||||
}
|
||||
};
|
||||
|
||||
// FIXME: remove
|
||||
that.value = function() {
|
||||
return self.$input.map(function($input) {
|
||||
return $input.value();
|
||||
});
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue