diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js index 24c8342a..d6467915 100644 --- a/source/Ox.UI/js/Form/Ox.Select.js +++ b/source/Ox.UI/js/Form/Ox.Select.js @@ -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 = $('
') .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;