ArrayInput: support FormElementGroups as Inputs; fire 'add' and 'remove' events
This commit is contained in:
parent
600cbc877b
commit
50f41fe0c4
1 changed files with 20 additions and 5 deletions
|
@ -3,8 +3,10 @@
|
||||||
/*@
|
/*@
|
||||||
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
|
||||||
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
|
||||||
|
@ -18,8 +20,10 @@ Ox.ArrayInput = function(options, self) {
|
||||||
self = self || {};
|
self = self || {};
|
||||||
var that = Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
|
getInput: null,
|
||||||
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
|
||||||
|
@ -30,6 +34,7 @@ Ox.ArrayInput = function(options, self) {
|
||||||
width: setWidths
|
width: setWidths
|
||||||
});
|
});
|
||||||
|
|
||||||
|
self.options.getInput = self.options.getInput || Ox.Input;
|
||||||
self.options.value = self.options.value || [];
|
self.options.value = self.options.value || [];
|
||||||
|
|
||||||
if (self.options.label) {
|
if (self.options.label) {
|
||||||
|
@ -65,8 +70,8 @@ Ox.ArrayInput = function(options, self) {
|
||||||
} else {
|
} else {
|
||||||
self.$element[index].insertAfter(self.$element[index - 1]);
|
self.$element[index].insertAfter(self.$element[index - 1]);
|
||||||
}
|
}
|
||||||
self.$input.splice(index, 0, Ox.Input({
|
self.$input.splice(
|
||||||
value: value,
|
index, 0, self.options.getInput({
|
||||||
width: self.options.width - 48
|
width: self.options.width - 48
|
||||||
})
|
})
|
||||||
.css({float: 'left'})
|
.css({float: 'left'})
|
||||||
|
@ -80,7 +85,9 @@ Ox.ArrayInput = function(options, self) {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(self.$element[index]));
|
.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({
|
self.$removeButton.splice(index, 0, Ox.Button({
|
||||||
title: self.$input.length == 1 ? 'close' : 'remove',
|
title: self.$input.length == 1 ? 'close' : 'remove',
|
||||||
type: 'image'
|
type: 'image'
|
||||||
|
@ -97,9 +104,12 @@ Ox.ArrayInput = function(options, self) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (self.$input.length == 1) {
|
if (self.$input.length == 1) {
|
||||||
self.$input[0].focusInput(true);
|
if (self.$input[0].focusInput) {
|
||||||
|
self.$input[0].focusInput(true);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
removeInput(index);
|
removeInput(index);
|
||||||
|
that.triggerEvent('remove');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -114,6 +124,7 @@ Ox.ArrayInput = function(options, self) {
|
||||||
click: function() {
|
click: function() {
|
||||||
var index = $(this).parent().data('index');
|
var index = $(this).parent().data('index');
|
||||||
addInput(index + 1, '', true);
|
addInput(index + 1, '', true);
|
||||||
|
that.triggerEvent('add');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(self.$element[index]));
|
.appendTo(self.$element[index]));
|
||||||
|
@ -155,7 +166,11 @@ 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'});
|
||||||
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});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue