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

ArrayInput: support FormElementGroups as Inputs; fire 'add' and 'remove' events

Browse source
This commit is contained in:
rolux 2015-02-13 10:48:38 +00:00
parent 600cbc877b
commit 50f41fe0c4
1 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,8 +3,10 @@
/*@
Ox.ArrayInput <f> Array input
options <o> Options object
getInput <f> Optional function that returns input element
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
@ -18,8 +20,10 @@ Ox.ArrayInput = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
getInput: null,
label: '',
max: 0,
setWidth: null,
sort: false, // fixme: this should probably be removed
value: [],
width: 256
@ -30,6 +34,7 @@ Ox.ArrayInput = function(options, self) {
width: setWidths
});
self.options.getInput = self.options.getInput || Ox.Input;
self.options.value = self.options.value || [];
if (self.options.label) {
@ -65,8 +70,8 @@ Ox.ArrayInput = function(options, self) {
} else {
self.$element[index].insertAfter(self.$element[index - 1]);
}
self.$input.splice(index, 0, Ox.Input({
value: value,
self.$input.splice(
index, 0, self.options.getInput({
width: self.options.width - 48
})
.css({float: 'left'})
@ -80,7 +85,9 @@ Ox.ArrayInput = function(options, self) {
}
})
.appendTo(self.$element[index]));
focus && self.$input[index].focusInput(true);
if (focus && self.$input[index].focusInput) {
self.$input[index].focusInput(true);
}
self.$removeButton.splice(index, 0, Ox.Button({
title: self.$input.length == 1 ? 'close' : 'remove',
type: 'image'
@ -97,9 +104,12 @@ Ox.ArrayInput = function(options, self) {
});
}
if (self.$input.length == 1) {
self.$input[0].focusInput(true);
if (self.$input[0].focusInput) {
self.$input[0].focusInput(true);
}
} else {
removeInput(index);
that.triggerEvent('remove');
}
}
})
@ -114,6 +124,7 @@ Ox.ArrayInput = function(options, self) {
click: function() {
var index = $(this).parent().data('index');
addInput(index + 1, '', true);
that.triggerEvent('add');
}
})
.appendTo(self.$element[index]));
@ -155,7 +166,11 @@ 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'});
self.$input[i].options({width: self.options.width - 48});
if (self.options.setWidth) {
self.options.setWidth(self.options.width - 48);
} else {
self.$input[i].options({width: self.options.width - 48});
}
});
}