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