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

update Select (add maxWidth and style options, make sure one can set width, labelWidth and title options)

Browse source
This commit is contained in:
rolux 2011-11-30 15:40:41 +01:00
parent d6adc59d88
commit aaded38a5f
1 changed files with 36 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
source/Ox.UI/js/Form/Ox.Select.js
View file

@ -39,10 +39,12 @@ Ox.Select = function(options, self) {
label: '',
labelWidth: 64,
max: 1,
maxWidth: 0,
min: 1,
overlap: 'none', // can be none, left or right
selectable: true,
size: 'medium',
style: 'rounded',
title: '',
type: 'text', // can be 'text' or 'image'
value: '',
@ -53,7 +55,8 @@ Ox.Select = function(options, self) {
// fixme: passing value has no effect
.options(options)
.addClass(
'OxSelect Ox' + Ox.toTitleCase(self.options.size) + (
'OxSelect Ox' + Ox.toTitleCase(self.options.size)
+ ' Ox' + Ox.toTitleCase(self.options.style) + (
self.options.overlap == 'none'
? '' : ' OxOverlap' + Ox.toTitleCase(self.options.overlap)
) + (self.options.label ? ' OxLabelSelect' : '')
@ -66,7 +69,15 @@ Ox.Select = function(options, self) {
key_down: showMenu
});
//Ox.Log('Form', 'Ox.Select', self.options);
Ox.Log('Form', 'Ox.Select', self.options);
/*
self.options.items.forEach(function(item, i) {
if (Ox.isUndefined(item.id)) {
self.options.items[i].id = item.title;
}
});
*/
Ox.extend(self, {
buttonId: self.options.id + 'Button',
@ -102,14 +113,11 @@ Ox.Select = function(options, self) {
self.$title = $('<div>')
.addClass('OxTitle')
.css({
// fixme: used to be 22. obscure
width: (self.options.width - 24 - (
self.options.label ? self.options.labelWidth : 0
)) + 'px'
width: getTitleWidth() + 'px'
})
.html(
self.options.title ? self.options.title
: self.options.items[self.checked[0]].title
self.options.title
|| self.options.items[self.checked[0]].title
)
.click(showMenu)
.appendTo(that.$element);
@ -133,6 +141,7 @@ Ox.Select = function(options, self) {
max: self.options.max,
min: self.options.min
} : self.options.items],
maxWidth: self.options.maxWidth,
side: 'bottom',
size: self.options.size
})
@ -152,7 +161,7 @@ Ox.Select = function(options, self) {
//Ox.Log('Form', 'clickMenu: ', self.options.id, data)
if (self.options.selectable) {
self.checked = self.optionGroup.checked();
self.options.value = data.checked[0].id;
self.options.value = data.checked.length ? data.checked[0].id : '';
self.$title && self.$title.html(
self.options.title ? self.options.title : data.checked[0].title
);
@ -165,6 +174,13 @@ Ox.Select = function(options, self) {
}
}
function getTitleWidth() {
// fixme: used to be 22. obscure
return self.options.width - 24 - (
self.options.label ? self.options.labelWidth : 0
);
}
function hideMenu() {
//Ox.Log('Form', '%% hideMenu that', that, 'self', self)
that.removeClass('OxSelected');
@ -184,7 +200,14 @@ Ox.Select = function(options, self) {
}
self.setOption = function(key, value) {
if (key == 'value') {
if (key == 'labelWidth') {
self.$label.options({width: value});
self.$title.css({width: getTitleWidth() + 'px'});
} else if (key == 'title') {
self.$title.html(value);
} else if (key == 'width') {
self.$title.css({width: getTitleWidth() + 'px'});
} else if (key == 'value') {
Ox.Log('Form', 'SETTING VALUE OPTION', value)
that.selectItem(value);
}
@ -244,9 +267,10 @@ Ox.Select = function(options, self) {
*/
that.value = function() {
var selected;
if (arguments.length == 0) {
//Ox.Log('Form', 'selected::', that.selected())
return that.selected()[0].id;
selected = that.selected();
return selected.length ? that.selected()[0].id : '';
} else {
that.selectItem(arguments[0]);
return that;