oxjs/source/UI/js/Form/SelectInput.js

153 lines
4.5 KiB
JavaScript
Raw Normal View History

2011-12-16 23:03:43 +00:00
'use strict';
2012-05-28 19:35:41 +00:00
//FIXME: does not work without options
2012-05-21 10:38:18 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.SelectInput <f> Select Input
2012-05-21 10:38:18 +00:00
options <o> Options
self <o> Shared private variable
([options[, self]]) -> <o:Ox.FormElementGroup> Select Input
2012-05-21 10:38:18 +00:00
@*/
2011-12-01 10:52:23 +00:00
Ox.SelectInput = function(options, self) {
var that;
self = Ox.extend(self || {}, {
options: Ox.extend({
inputValue: '',
2011-12-01 10:52:23 +00:00
inputWidth: 128,
items: [],
label: '',
labelWidth: 128,
2011-12-21 13:42:47 +00:00
max: 1,
2011-12-30 09:33:01 +00:00
min: 0,
2011-12-01 10:52:23 +00:00
placeholder: '',
2016-01-30 17:09:45 +00:00
style: 'rounded',
2011-12-01 10:52:23 +00:00
title: '',
2012-06-13 13:53:50 +00:00
value: options.max == 1 || options.max == void 0 ? '' : [],
2011-12-01 10:52:23 +00:00
width: 384
2012-05-28 19:35:41 +00:00
}, options || {})
2011-12-01 10:52:23 +00:00
});
self.other = self.options.items[self.options.items.length - 1].id;
self.otherWidth = self.options.width - self.options.inputWidth;
2011-12-01 10:52:23 +00:00
self.$select = Ox.Select({
items: self.options.items,
label: self.options.label,
labelWidth: self.options.labelWidth,
max: self.options.max,
min: self.options.min,
2016-01-13 08:47:31 +00:00
style: self.options.style,
2011-12-30 09:33:01 +00:00
title: getTitle(),
2011-12-21 13:42:47 +00:00
value: self.options.value,
2011-12-01 10:52:23 +00:00
width: self.options.width
})
.bindEvent({
change: function(data) {
2011-12-30 09:33:01 +00:00
self.options.value = getValue();
setValue(self.isOther);
2011-12-01 10:52:23 +00:00
}
});
self.$input = Ox.Input({
placeholder: self.options.placeholder,
2016-01-13 08:47:31 +00:00
style: self.options.style,
width: self.options.inputWidth,
value: self.options.inputValue
2011-12-01 10:52:23 +00:00
})
2011-12-21 13:42:47 +00:00
.bindEvent({
change: function(data) {
self.options.value = data.value;
}
})
2011-12-01 10:52:23 +00:00
.hide();
2011-12-30 09:33:01 +00:00
setValue();
2011-12-01 10:52:23 +00:00
that = Ox.FormElementGroup({
2012-05-28 19:35:41 +00:00
elements: [
self.$select,
self.$input
],
id: self.options.id,
join: function(value) {
return value[value[0] == self.other ? 1 : 0]
},
split: function(value) {
return Ox.filter(self.options.items, function(item, i) {
return i < item.length - 1;
}).map(function(item) {
return item.id;
}).indexOf(value) > -1 ? [value, ''] : [self.other, value];
},
width: self.options.width
})
.update({
2014-02-16 07:06:48 +00:00
label: function() {
self.$select.options({label: self.options.label});
},
value: function() {
self.options.value = that.options('value');
setValue();
}
});
2011-12-01 10:52:23 +00:00
2011-12-30 09:33:01 +00:00
function getTitle() {
var value = self.$select ? self.$select.value() : self.options.value;
return Ox.isEmpty(value)
? self.options.title
: Ox.getObjectById(self.options.items, value).title;
}
function getValue() {
self.isOther = self.$select.value() == self.other;
return !self.isOther ? self.$select.value() : self.$input.value();
}
function setValue(isOther) {
if (
(!self.options.value && isOther !== true)
2012-05-22 14:29:37 +00:00
|| Ox.filter(self.options.items, function(item) {
return item.id != self.other;
}).map(function(item) {
return item.id;
2011-12-30 09:33:01 +00:00
}).indexOf(self.options.value) > -1
) {
self.$select.options({
title: !self.options.value
? self.options.title
: Ox.getObjectById(self.options.items, self.options.value).title,
value: self.options.value,
width: self.options.width
})
.removeClass('OxOverlapRight');
self.$input.hide();
2011-12-30 09:33:01 +00:00
} else {
self.$select.options({
title: Ox.getObjectById(self.options.items, self.other).title,
value: self.other,
width: self.otherWidth
})
.addClass('OxOverlapRight');
self.$input.show().focusInput(true);
2011-12-30 09:33:01 +00:00
}
self.$select.options({title: getTitle()});
}
2012-05-21 10:38:18 +00:00
/*@
value <f> get/set value
() -> value get value
(value) -> <o> set value
@*/
2011-12-30 09:33:01 +00:00
that.value = function() {
if (arguments.length == 0) {
return getValue();
} else {
self.options.value = arguments[0];
setValue();
return that;
}
2011-12-01 10:52:23 +00:00
};
return that;
2012-05-21 10:38:18 +00:00
};