0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

refactor array input

Browse source
This commit is contained in:
rolux 2015-02-14 19:52:13 +00:00
parent 91d3f438b7
commit ba3416784f
1 changed files with 30 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
source/UI/js/Form/ArrayInput.js
View file

@ -3,10 +3,9 @@
/*@
Ox.ArrayInput <f> Array input
options <o> Options object
getInput <f> Optional function that returns input element
input <o> Optional functions for complex input elements
label <s> string, ''
max <n> integer, maximum number of items, 0 for all
setWidth <f> Optional function to set input element width
sort <b> fixme: this should probably be removed
value <[]> value
width <n|256> width
@ -20,13 +19,20 @@ Ox.ArrayInput = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
getInput: Ox.Input,
input: {
get: Ox.Input,
getEmpty: function() {
return '';
},
isEmpty: function(value) {
return value === '';
},
setWidth: function($input, width) {
$input.options({width: width});
}
},
label: '',
max: 0,
setWidth: null,
sort: false, // fixme: this should probably be removed
value: [],
width: 256
@ -53,7 +59,9 @@ Ox.ArrayInput = function(options, self) {
self.$addButton = [];
(
self.options.value.length ? self.options.value : ['']
self.options.value.length
? self.options.value
: [self.options.input.getEmpty()]
).forEach(function(value, i) {
addInput(i, value);
});
@ -73,13 +81,18 @@ Ox.ArrayInput = function(options, self) {
self.$element[index].insertAfter(self.$element[index - 1]);
}
self.$input.splice(
index, 0, self.options.getInput({
index, 0, self.options.input.get({
width: self.options.width - 48
})
.css({float: 'left'})
.bindEvent({
change: function(data) {
self.options.sort && data.value !== '' && sortInputs();
if (
self.options.sort
&& !self.options.input.isEmpty(data.value)
) {
sortInputs();
}
self.options.value = getValue();
that.triggerEvent('change', {
value: self.options.value
@ -101,8 +114,8 @@ Ox.ArrayInput = function(options, self) {
.on({
click: function() {
var index = $(this).parent().data('index');
if (self.$input[index].value() !== '') {
self.$input[index].value('');
if (!self.options.input.isEmpty(self.$input[index])) {
self.$input[index].value(self.options.input.getEmpty());
self.options.value = getValue();
that.triggerEvent('change', {
value: self.options.value
@ -128,7 +141,7 @@ Ox.ArrayInput = function(options, self) {
.on({
click: function() {
var index = $(this).parent().data('index');
addInput(index + 1, '', true);
addInput(index + 1, self.options.input.getEmpty(), true);
that.triggerEvent('add');
}
})
@ -140,7 +153,7 @@ Ox.ArrayInput = function(options, self) {
return Ox.map(self.$input, function($input) {
return $input.value();
}).filter(function(value) {
return !self.options.isEmpty(value);
return !self.options.input.isEmpty(value);
});
};
@ -161,7 +174,9 @@ Ox.ArrayInput = function(options, self) {
removeInput(0);
}
(
self.options.value.length ? self.options.value : ['']
self.options.value.length
? self.options.value
: [self.options.input.getEmpty()]
).forEach(function(value, i) {
addInput(i, value);
});
@ -171,11 +186,7 @@ Ox.ArrayInput = function(options, self) {
self.$label && self.$label.options({width: self.options.width});
self.$element.forEach(function($element, i) {
$element.css({width: self.options.width + 'px'});
if (self.options.setWidth) {
self.options.setWidth(self.options.width - 48);
} else {
self.$input[i].options({width: self.options.width - 48});
}
self.options.input.setWidth(self.$input[i], self.options.width - 48);
});
}