refactor array input
This commit is contained in:
parent
91d3f438b7
commit
ba3416784f
1 changed files with 30 additions and 19 deletions
|
@ -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,
|
||||
isEmpty: function(value) {
|
||||
return value === '';
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue