oxjs/source/Ox.UI/js/Form/Ox.ArrayInput.js

182 lines
5.7 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
/*@
Ox.ArrayInput <f> Array input
@*/
2011-05-21 17:56:15 +00:00
Ox.ArrayInput = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
label: '',
max: 0,
2011-05-30 08:46:12 +00:00
sort: false, // fixme: this should probably be removed
2011-05-21 17:56:15 +00:00
value: [],
width: 256
})
.options(options || {});
if (self.options.value.length == 0) {
self.options.value = [''];
}
if (self.options.label) {
self.$label = Ox.Label({
title: self.options.label,
width: self.options.width
})
.appendTo(that);
}
self.$element = [];
self.$input = [];
self.$removeButton = [];
self.$addButton = [];
self.options.value.forEach(function(value, i) {
addInput(i, value);
});
function addInput(i, value, focus) {
2011-11-04 15:54:28 +00:00
Ox.Log('Form', 'add', i)
2011-05-21 17:56:15 +00:00
self.$element.splice(i, 0, Ox.Element()
.css({height: '16px', marginTop: self.options.label || i > 0 ? '8px' : 0})
.data({index: i}));
if (i == 0) {
self.$element[i].appendTo(that);
} else {
2011-11-04 15:54:28 +00:00
Ox.Log('Form', i, self.$element)
2011-05-21 17:56:15 +00:00
self.$element[i].insertAfter(self.$element[i - 1]);
}
self.$input.splice(i, 0, Ox.Input({
value: value,
width: self.options.width - 48
})
.css({float: 'left'})
.bindEvent({
change: function(data) {
self.options.sort && data.value !== '' && sortInputs();
2011-05-30 08:46:12 +00:00
that.triggerEvent('change', {value: that.value()});
2011-05-21 17:56:15 +00:00
}
})
.appendTo(self.$element[i]));
focus && self.$input[i].focusInput();
self.$removeButton.splice(i, 0, Ox.Button({
2011-06-01 13:12:14 +00:00
title: self.$input.length == 1 ? 'close' : 'remove',
2011-05-21 17:56:15 +00:00
type: 'image'
})
.css({float: 'left', marginLeft: '8px'})
.bind({
click: function() {
2011-05-30 08:46:12 +00:00
var index = $(this).parent().data('index');
if (self.$input[index].value() !== '') {
self.$input[index].options({value: ''});
that.triggerEvent('change', {value: that.value()});
}
2011-06-01 13:12:14 +00:00
if (self.$input.length == 1) {
self.$input[0].focusInput();
} else {
removeInput(index);
}
2011-05-21 17:56:15 +00:00
}
})
.appendTo(self.$element[i]));
self.$addButton.splice(i, 0, Ox.Button({
disabled: i == self.options.max - 1,
title: 'add',
type: 'image'
})
.css({float: 'left', marginLeft: '8px'})
.bind({
click: function() {
addInput($(this).parent().data('index') + 1, '', true);
}
})
.appendTo(self.$element[i]));
2011-06-01 13:15:34 +00:00
self.$input.length > 1 && self.$removeButton[0].options({title: 'remove'});
2011-05-21 17:56:15 +00:00
self.$input.length == self.options.max && self.$addButton.forEach(function($button) {
$button.options({disabled: true});
});
updateIndices();
}
function removeInput(i) {
2011-11-04 15:54:28 +00:00
Ox.Log('Form', 'remove', i);
2011-05-21 17:56:15 +00:00
['input', 'removeButton', 'addButton', 'element'].forEach(function(element) {
var key = '$' + element;
self[key][i].remove();
2011-05-21 17:56:15 +00:00
self[key].splice(i, 1);
});
2011-06-01 13:15:34 +00:00
self.$input.length == 1 && self.$removeButton[0].options({title: 'close'});
2011-05-21 17:56:15 +00:00
self.$input.length == self.options.max - 1 && self.$addButton.forEach(function($button) {
$button.options({disabled: false});
});
updateIndices();
}
function setWidths() {
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});
});
}
function sortInputs() {
Ox.sort(self.$element, function($element) {
return self.$input[$element.data('index')].value();
}).forEach(function($element) {
$element.detach();
});
self.$element.forEach(function($element, i) {
$element.data({index: i}).appendTo(that);
});
}
function updateIndices() {
self.$element.forEach(function($element, i) {
2011-11-04 15:54:28 +00:00
Ox.Log('Form', i, $element)
2011-05-21 17:56:15 +00:00
$element.data({index: i});
});
/*
self.$input.forEach(function($input, i) {
$input.options({value: i});
});
*/
}
self.setOption = function(key, value) {
2011-05-22 12:39:57 +00:00
if (key == 'value') {
2011-05-24 10:44:34 +00:00
if (self.options.value.length == 0) {
self.options.value = [''];
}
2011-05-30 08:46:12 +00:00
while (self.$input.length) {
removeInput(0);
}
2011-05-24 10:44:34 +00:00
self.options.value.forEach(function(value, i) {
addInput(i, value);
2011-05-22 12:39:57 +00:00
});
} else if (key == 'width') {
2011-05-21 17:56:15 +00:00
setWidths();
}
}
that.setErrors = function(values) {
self.$input.forEach(function($input) {
values.indexOf($input.value()) > -1 && $input.addClass('OxError');
});
};
2011-05-21 17:56:15 +00:00
// fixme: can't we generally use options.value for this?
that.value = function() {
if (arguments.length == 0) {
return Ox.map(self.$input, function($input) {
var value = $input.value();
return value === '' ? null : value;
});
}
};
return that;
};