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

201 lines
6 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
/*@
2012-05-31 10:32:54 +00:00
Ox.ArrayInput <f> Array input
options <o> Options object
label <s> string, ''
max <n> integer, maximum number of items, 0 for all
sort <b> fixme: this should probably be removed
value <[]> value
width <n|256> width
self <o> Shared private variable
([options[, self]]) -> <o:Ox.Element> Array input
change <!> change
@*/
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
})
2012-05-28 19:35:41 +00:00
.options(options || {})
.update({
value: setValue,
width: setWidths
});
2011-05-21 17:56:15 +00:00
self.options.value = self.options.value || [];
2011-05-21 17:56:15 +00:00
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 = [];
2011-11-30 14:31:11 +00:00
(
self.options.value.length ? self.options.value : ['']
).forEach(function(value, i) {
2011-05-21 17:56:15 +00:00
addInput(i, value);
});
2012-01-13 16:25:47 +00:00
self.options.value = getValue();
2011-11-30 14:31:11 +00:00
function addInput(index, value, focus) {
Ox.Log('Form', 'add', index)
self.$element.splice(index, 0, Ox.Element()
.css({
height: '16px',
marginTop: self.options.label || index > 0 ? '8px' : 0
})
.data({index: index}));
if (index == 0) {
self.$element[index].appendTo(that);
2011-05-21 17:56:15 +00:00
} else {
2011-11-30 14:31:11 +00:00
self.$element[index].insertAfter(self.$element[index - 1]);
2011-05-21 17:56:15 +00:00
}
2011-11-30 14:31:11 +00:00
self.$input.splice(index, 0, Ox.Input({
2011-05-21 17:56:15 +00:00
value: value,
width: self.options.width - 48
})
.css({float: 'left'})
.bindEvent({
change: function(data) {
self.options.sort && data.value !== '' && sortInputs();
2011-12-21 13:42:47 +00:00
self.options.value = getValue();
2011-11-30 14:31:11 +00:00
that.triggerEvent('change', {
value: self.options.value
});
2011-05-21 17:56:15 +00:00
}
})
2011-11-30 14:31:11 +00:00
.appendTo(self.$element[index]));
2011-12-18 09:44:11 +00:00
focus && self.$input[index].focusInput(true);
2011-11-30 14:31:11 +00:00
self.$removeButton.splice(index, 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'})
2012-05-28 14:06:22 +00:00
.on({
2011-05-21 17:56:15 +00:00
click: function() {
2011-05-30 08:46:12 +00:00
var index = $(this).parent().data('index');
if (self.$input[index].value() !== '') {
2011-12-21 15:33:52 +00:00
self.$input[index].value('');
2011-12-21 13:42:47 +00:00
self.options.value = getValue();
2011-11-30 14:31:11 +00:00
that.triggerEvent('change', {
value: self.options.value
});
2011-05-30 08:46:12 +00:00
}
2011-06-01 13:12:14 +00:00
if (self.$input.length == 1) {
2011-12-18 09:44:11 +00:00
self.$input[0].focusInput(true);
2011-06-01 13:12:14 +00:00
} else {
removeInput(index);
}
2011-05-21 17:56:15 +00:00
}
})
2011-11-30 14:31:11 +00:00
.appendTo(self.$element[index]));
self.$addButton.splice(index, 0, Ox.Button({
disabled: index == self.options.max - 1,
2011-05-21 17:56:15 +00:00
title: 'add',
type: 'image'
})
.css({float: 'left', marginLeft: '8px'})
2012-05-28 14:06:22 +00:00
.on({
2011-05-21 17:56:15 +00:00
click: function() {
2011-11-30 14:31:11 +00:00
var index = $(this).parent().data('index');
addInput(index + 1, '', true);
2011-05-21 17:56:15 +00:00
}
})
2011-11-30 14:31:11 +00:00
.appendTo(self.$element[index]));
updateInputs();
2011-05-21 17:56:15 +00:00
}
2011-12-21 13:42:47 +00:00
function getValue() {
return Ox.map(self.$input, function($input) {
2012-05-22 14:29:37 +00:00
return $input.value();
}).filter(function(value) {
return value !== '';
2011-12-21 13:42:47 +00:00
});
};
2011-11-30 14:31:11 +00:00
function removeInput(index) {
Ox.Log('Form', 'remove', index);
[
'input', 'removeButton', 'addButton', 'element'
].forEach(function(element) {
2011-05-21 17:56:15 +00:00
var key = '$' + element;
2011-11-30 14:31:11 +00:00
self[key][index].remove();
self[key].splice(index, 1);
2011-05-21 17:56:15 +00:00
});
2011-11-30 14:31:11 +00:00
updateInputs();
2011-05-21 17:56:15 +00:00
}
2011-12-21 13:42:47 +00:00
function setValue() {
while (self.$input.length) {
removeInput(0);
}
(
self.options.value.length ? self.options.value : ['']
).forEach(function(value, i) {
2011-12-21 13:42:47 +00:00
addInput(i, value);
});
}
2011-05-21 17:56:15 +00:00
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);
});
}
2011-11-30 14:31:11 +00:00
function updateInputs() {
2011-05-21 17:56:15 +00:00
self.$element.forEach(function($element, i) {
$element.data({index: i});
2011-11-30 14:31:11 +00:00
self.$removeButton[i].options({
2012-05-26 15:48:19 +00:00
title: self.$element.length == 1 ? 'close' : 'remove'
2011-11-30 14:31:11 +00:00
});
self.$addButton[i].options({
disabled: self.$element.length == self.options.max
});
2011-05-21 17:56:15 +00:00
});
}
2012-05-21 10:38:18 +00:00
/*@
setErrors <f> setErrors
2012-06-02 09:52:36 +00:00
(values) -> <u> set errors
2012-05-21 10:38:18 +00:00
@*/
that.setErrors = function(values) {
self.$input.forEach(function($input) {
$input[
values.indexOf($input.value()) > -1 ? 'addClass' : 'removeClass'
]('OxError');
});
};
2011-05-21 17:56:15 +00:00
return that;
2012-05-21 10:38:18 +00:00
};