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

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 = $('<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;