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

update ArrayInput

Browse source
This commit is contained in:
rolux 2011-11-30 15:31:11 +01:00
parent fc74ba5027
commit 7633de3958
1 changed files with 46 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
source/Ox.UI/js/Form/Ox.ArrayInput.js
View file

@ -33,22 +33,25 @@ Ox.ArrayInput = function(options, self) {
self.$input = []; self.$input = [];
self.$removeButton = []; self.$removeButton = [];
self.$addButton = []; self.$addButton = [];
self.options.value.forEach(function(value, i) { self.options.value.forEach(function(value, i) {
addInput(i, value); addInput(i, value);
}); });
function addInput(i, value, focus) { function addInput(index, value, focus) {
Ox.Log('Form', 'add', i) Ox.Log('Form', 'add', index)
self.$element.splice(i, 0, Ox.Element() self.$element.splice(index, 0, Ox.Element()
.css({height: '16px', marginTop: self.options.label || i > 0 ? '8px' : 0}) .css({
.data({index: i})); height: '16px',
if (i == 0) { marginTop: self.options.label || index > 0 ? '8px' : 0
self.$element[i].appendTo(that); })
.data({index: index}));
if (index == 0) {
self.$element[index].appendTo(that);
} else { } else {
Ox.Log('Form', i, self.$element) self.$element[index].insertAfter(self.$element[index - 1]);
self.$element[i].insertAfter(self.$element[i - 1]);
} }
self.$input.splice(i, 0, Ox.Input({ self.$input.splice(index, 0, Ox.Input({
value: value, value: value,
width: self.options.width - 48 width: self.options.width - 48
}) })
@ -56,12 +59,15 @@ Ox.ArrayInput = function(options, self) {
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
self.options.sort && data.value !== '' && sortInputs(); self.options.sort && data.value !== '' && sortInputs();
that.triggerEvent('change', {value: that.value()}); self.options.value = that.value();
that.triggerEvent('change', {
value: self.options.value
});
} }
}) })
.appendTo(self.$element[i])); .appendTo(self.$element[index]));
focus && self.$input[i].focusInput(); focus && self.$input[index].focusInput();
self.$removeButton.splice(i, 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'
}) })
@ -71,7 +77,10 @@ Ox.ArrayInput = function(options, self) {
var index = $(this).parent().data('index'); var index = $(this).parent().data('index');
if (self.$input[index].value() !== '') { if (self.$input[index].value() !== '') {
self.$input[index].options({value: ''}); self.$input[index].options({value: ''});
that.triggerEvent('change', {value: that.value()}); self.options.value = that.value();
that.triggerEvent('change', {
value: self.options.value
});
} }
if (self.$input.length == 1) { if (self.$input.length == 1) {
self.$input[0].focusInput(); self.$input[0].focusInput();
@ -80,38 +89,33 @@ Ox.ArrayInput = function(options, self) {
} }
} }
}) })
.appendTo(self.$element[i])); .appendTo(self.$element[index]));
self.$addButton.splice(i, 0, Ox.Button({ self.$addButton.splice(index, 0, Ox.Button({
disabled: i == self.options.max - 1, disabled: index == self.options.max - 1,
title: 'add', title: 'add',
type: 'image' type: 'image'
}) })
.css({float: 'left', marginLeft: '8px'}) .css({float: 'left', marginLeft: '8px'})
.bind({ .bind({
click: function() { click: function() {
addInput($(this).parent().data('index') + 1, '', true); var index = $(this).parent().data('index');
addInput(index + 1, '', true);
} }
}) })
.appendTo(self.$element[i])); .appendTo(self.$element[index]));
self.$input.length > 1 && self.$removeButton[0].options({title: 'remove'}); updateInputs();
self.$input.length == self.options.max && self.$addButton.forEach(function($button) {
$button.options({disabled: true});
});
updateIndices();
} }
function removeInput(i) { function removeInput(index) {
Ox.Log('Form', 'remove', i); Ox.Log('Form', 'remove', index);
['input', 'removeButton', 'addButton', 'element'].forEach(function(element) { [
'input', 'removeButton', 'addButton', 'element'
].forEach(function(element) {
var key = '$' + element; var key = '$' + element;
self[key][i].remove(); self[key][index].remove();
self[key].splice(i, 1); self[key].splice(index, 1);
}); });
self.$input.length == 1 && self.$removeButton[0].options({title: 'close'}); updateInputs();
self.$input.length == self.options.max - 1 && self.$addButton.forEach(function($button) {
$button.options({disabled: false});
});
updateIndices();
} }
function setWidths() { function setWidths() {
@ -133,16 +137,16 @@ Ox.ArrayInput = function(options, self) {
}); });
} }
function updateIndices() { function updateInputs() {
self.$element.forEach(function($element, i) { self.$element.forEach(function($element, i) {
Ox.Log('Form', i, $element)
$element.data({index: i}); $element.data({index: i});
self.$removeButton[i].options({
title: self.$element.length == 1 ? 'close' : 'remove',
});
self.$addButton[i].options({
disabled: self.$element.length == self.options.max
}); });
/*
self.$input.forEach(function($input, i) {
$input.options({value: i});
}); });
*/
} }
self.setOption = function(key, value) { self.setOption = function(key, value) {