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

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

@ -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) {
if (self.$input[0].focusInput) {
self.$input[0].focusInput(true); 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'});
if (self.options.setWidth) {
self.options.setWidth(self.options.width - 48);
} else {
self.$input[i].options({width: self.options.width - 48}); self.$input[i].options({width: self.options.width - 48});
}
}); });
} }