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