From cf567e560812fa6b1f050aec470a6a730a97925d Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
Date: Tue, 20 Dec 2011 07:29:14 +0000
Subject: [PATCH] fix some Select/MenuButton bugs

---
 source/Ox.UI/js/Form/Ox.Select.js     | 50 ++++++++++++++++-----------
 source/Ox.UI/js/Menu/Ox.MenuButton.js |  4 +--
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js
index bea1a688..ee69751f 100644
--- a/source/Ox.UI/js/Form/Ox.Select.js
+++ b/source/Ox.UI/js/Form/Ox.Select.js
@@ -17,6 +17,7 @@ Ox.Select <f:Ox.Element> Select Object
         maxWidth <n|0> Maximum menu width
         min <n|1> Minimum number of selected items
         overlap <s|'none'> Can be 'none', 'left' or 'right'
+        selectable <b|true> is selectable
         size <s|'medium'> Size, can be small, medium, large
         style <s|'rounded'> Style ('rounded' or 'square')
         title <s|''> Select title
@@ -47,6 +48,7 @@ Ox.Select = function(options, self) {
                 maxWidth: 0,
                 min: 1,
                 overlap: 'none', // can be none, left or right
+                selectable: true,
                 size: 'medium',
                 style: 'rounded',
                 title: '',
@@ -69,20 +71,22 @@ Ox.Select = function(options, self) {
                 width: self.options.width - 2 + 'px'
             })
             .bindEvent({
-                click: showMenu,
+                anyclick: showMenu,
                 key_escape: loseFocus,
                 key_down: showMenu
             });
 
     Ox.Log('Form', 'Ox.Select', self.options);
 
-    self.optionGroup = new Ox.OptionGroup(
-        self.options.items,
-        self.options.min,
-        self.options.max
-    );
-    self.options.items = self.optionGroup.init();
-    self.checked = self.optionGroup.checked();
+    if (self.options.selectable) {
+        self.optionGroup = new Ox.OptionGroup(
+            self.options.items,
+            self.options.min,
+            self.options.max
+        );
+        self.options.items = self.optionGroup.init();
+        self.checked = self.optionGroup.checked();
+    }
 
     if (self.options.label) {
         self.$label = Ox.Label({
@@ -123,12 +127,12 @@ Ox.Select = function(options, self) {
     self.$menu = Ox.Menu({
             element: self.$title || self.$button,
             id: self.options.id + 'Menu',
-            items: [{
+            items: [self.options.selectable ? {
                 group: self.options.id + 'Group',
                 items: self.options.items,
                 max: self.options.max,
                 min: self.options.min
-            }],
+            } : self.options.items],
             maxWidth: self.options.maxWidth,
             side: 'bottom', // FIXME: should be edge
             size: self.options.size
@@ -147,15 +151,19 @@ Ox.Select = function(options, self) {
 
     function changeMenu(data) {
         //Ox.Log('Form', 'clickMenu: ', self.options.id, data)
-        self.checked = self.optionGroup.checked();
-        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
-        );
-        that.triggerEvent('change', {
-            selected: data.checked,
-            value: self.options.value
-        });
+        if (self.options.selectable) {
+            self.checked = self.optionGroup.checked();
+            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
+            );
+            that.triggerEvent('change', {
+                selected: data.checked,
+                value: self.options.value
+            });
+        } else {
+            that.triggerEvent('click', data);
+        }
     }
 
     function getTitleWidth() {
@@ -224,12 +232,12 @@ Ox.Select = function(options, self) {
         () -> <o> returns object of selected items with id, title
     @*/
     that.selected = function() {
-        return self.optionGroup.checked().map(function(v) {
+        return self.options.selectable ? self.optionGroup.checked().map(function(v) {
             return {
                 id: self.options.items[v].id,
                 title: self.options.items[v].title
             };
-        });
+        }) : [];
     };
 
     /*@
diff --git a/source/Ox.UI/js/Menu/Ox.MenuButton.js b/source/Ox.UI/js/Menu/Ox.MenuButton.js
index b1283470..7b1f51b1 100644
--- a/source/Ox.UI/js/Menu/Ox.MenuButton.js
+++ b/source/Ox.UI/js/Menu/Ox.MenuButton.js
@@ -39,13 +39,13 @@ Ox.MenuButton = function(options, self) {
         })
         .options(options || {})
         .addClass(
-            'OxMenuButton Ox' + Ox.toTitleCase(self.options.style)
+            'OxSelect Ox' + Ox.toTitleCase(self.options.style)
         )
         .css(self.options.width == 'auto' ? {} : {
             width: self.options.width - 2 + 'px'
         })
         .bindEvent({
-            click: showMenu
+            anyclick: showMenu
         });
 
     if (self.options.type == 'text') {