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

173 lines
5.1 KiB
JavaScript
Raw Normal View History

2011-11-30 14:51:06 +00:00
'use strict';
2012-05-21 10:38:18 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.ObjectArrayInput <f> Object Array Input
2012-05-21 10:38:18 +00:00
options <o> Options
buttonTitles
inputs
labelWidth
max
value
width
self <o> Shared private variable
([options[, self]]) -> <o:Ox.Element> Object Array Input
change <!> change
2012-05-21 10:38:18 +00:00
@*/
2011-11-30 14:51:06 +00:00
Ox.ObjectArrayInput = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
buttonTitles: {add: 'Add', remove: 'Remove'},
inputs: [],
labelWidth: 128,
max: 0,
value: [],
width: 256
})
.options(options || {})
2012-05-28 19:35:41 +00:00
.update({
value: function() {
setValue(self.options.value);
}
})
2011-11-30 14:51:06 +00:00
.addClass('OxObjectArrayInput');
2011-12-30 09:33:01 +00:00
if (Ox.isEmpty(self.options.value)) {
self.options.value = [getDefaultValue()];
2011-11-30 14:51:06 +00:00
}
self.$element = [];
self.$input = [];
self.$removeButton = [];
self.$addButton = [];
self.buttonWidth = self.options.width / 2 - 4;
2011-12-30 09:33:01 +00:00
setValue(self.options.value);
2011-11-30 14:51:06 +00:00
function addInput(index, value) {
self.$element.splice(index, 0, Ox.Element()
.css({
2011-12-01 10:52:23 +00:00
width: self.options.width + 'px',
2011-11-30 14:51:06 +00:00
})
);
if (index == 0) {
self.$element[index].appendTo(that);
} else {
self.$element[index].insertAfter(self.$element[index - 1]);
}
self.$input.splice(index, 0, Ox.ObjectInput({
elements: self.options.inputs.map(function(input) {
return Ox[input.element](input.options || {})
.bindEvent(input.events || {});
}),
labelWidth: self.options.labelWidth,
2011-12-30 09:33:01 +00:00
value: value,
2011-11-30 14:51:06 +00:00
width: self.options.width
})
2011-12-21 15:33:52 +00:00
.bindEvent({
change: function(data) {
2011-12-30 09:33:01 +00:00
var index = $(this).parent().data('index');
self.options.value[index] = self.$input[index].value();
that.triggerEvent('change', {
value: self.options.value
});
2011-12-21 15:33:52 +00:00
}
})
2011-11-30 14:51:06 +00:00
.appendTo(self.$element[index])
);
self.$removeButton.splice(index, 0, Ox.Button({
disabled: self.$input.length == 1,
title: self.options.buttonTitles.remove,
width: self.buttonWidth
})
.css({margin: '8px 4px 0 0'})
2012-05-28 14:06:22 +00:00
.on({
2011-11-30 14:51:06 +00:00
click: function() {
var index = $(this).parent().data('index');
if (self.$input.length > 1) {
removeInput(index);
2011-12-30 09:33:01 +00:00
self.options.value = getValue();
that.triggerEvent('change', {
value: self.options.value
});
2011-11-30 14:51:06 +00:00
}
}
})
.appendTo(self.$element[index])
);
self.$addButton.splice(index, 0, Ox.Button({
disabled: index == self.options.max - 1,
title: self.options.buttonTitles.add,
width: self.buttonWidth
})
.css({margin: '8px 0 0 4px'})
2012-05-28 14:06:22 +00:00
.on({
2011-11-30 14:51:06 +00:00
click: function() {
var index = $(this).parent().data('index');
2011-12-30 09:33:01 +00:00
addInput(index + 1, getDefaultValue());
self.options.value = getValue();
that.triggerEvent('change', {
value: self.options.value
});
2011-11-30 14:51:06 +00:00
}
})
.appendTo(self.$element[index])
);
updateInputs();
}
2011-12-30 09:33:01 +00:00
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();
});
}
2011-11-30 14:51:06 +00:00
function removeInput(index) {
[
'input', 'removeButton', 'addButton', 'element'
].forEach(function(element) {
var key = '$' + element;
self[key][index].remove();
self[key].splice(index, 1);
});
updateInputs();
}
2011-12-30 09:33:01 +00:00
function setValue(value) {
while (self.$element.length) {
removeInput(0);
}
value.forEach(function(value, i) {
addInput(i, value);
});
}
2011-11-30 14:51:06 +00:00
function updateInputs() {
2011-12-01 10:52:23 +00:00
var length = self.$element.length;
2011-11-30 14:51:06 +00:00
self.$element.forEach(function($element, i) {
2011-12-01 10:52:23 +00:00
$element
[i == 0 ? 'addClass' : 'removeClass']('OxFirst')
[i == length - 1 ? 'addClass' : 'removeClass']('OxLast')
.data({index: i});
2011-11-30 14:51:06 +00:00
self.$removeButton[i].options({
2012-05-26 15:48:19 +00:00
disabled: length == 1
2011-11-30 14:51:06 +00:00
});
self.$addButton[i].options({
2011-12-01 10:52:23 +00:00
disabled: length == self.options.max
2011-11-30 14:51:06 +00:00
});
});
}
return that;
2012-05-21 10:38:18 +00:00
};