use MenuButton

source/Ox.UI/js/Form/Ox.Select.js

@@ -17,7 +17,6 @@ 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
@@ -48,7 +47,6 @@ Ox.Select = function(options, self) {
                 maxWidth: 0,
                 min: 1,
                 overlap: 'none', // can be none, left or right
-                selectable: true,
                 size: 'medium',
                 style: 'rounded',
                 title: '',
@@ -78,15 +76,13 @@ Ox.Select = function(options, self) {
 
     Ox.Log('Form', 'Ox.Select', self.options);
 
-    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();
-    }
+    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({
@@ -127,12 +123,12 @@ Ox.Select = function(options, self) {
     self.$menu = Ox.Menu({
             element: self.$title || self.$button,
             id: self.options.id + 'Menu',
-            items: [self.options.selectable ? {
+            items: [{
                 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
@@ -151,19 +147,15 @@ Ox.Select = function(options, self) {
 
     function changeMenu(data) {
         //Ox.Log('Form', 'clickMenu: ', self.options.id, data)
-        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);
-        }
+        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
+        });
     }
 
     function getTitleWidth() {
@@ -232,12 +224,12 @@ Ox.Select = function(options, self) {
         () -> <o> returns object of selected items with id, title
     @*/
     that.selected = function() {
-        return self.options.selectable ? self.optionGroup.checked().map(function(v) {
+        return self.optionGroup.checked().map(function(v) {
             return {
                 id: self.options.items[v].id,
                 title: self.options.items[v].title
             };
-        }) : [];
+        });
     };
 
     /*@

source/Ox.UI/js/Form/Ox.Spreadsheet.js

@@ -107,8 +107,7 @@ Ox.Spreadsheet = function(options, self) {
                             })
                             .appendTo(that);
                     } else {
-                        Ox.Select({
-                                selectable: false,
+                        Ox.MenuButton({
                                 style: 'square',
                                 type: 'image',
                                 items: [
@@ -146,8 +145,7 @@ Ox.Spreadsheet = function(options, self) {
                 } else {
                     if (c == -1) {
                         if (r < self.rows) {
-                            Ox.Select({
-                                    selectable: false,
+                            Ox.MenuButton({
                                     style: 'square',
                                     type: 'image',
                                     items: [

source/Ox.UI/js/Map/Ox.Map.js

@@ -213,7 +213,7 @@ Ox.Map = function(options, self) {
                 size: 24
             })
             .appendTo(that);
-        self.$select = Ox.Select({
+        self.$select = Ox.MenuButton({
                 items: Ox.merge(
                     self.options.editable
                         ? [{id: 'new Place', title: 'New Place...', keyboard: 'n'}, {}]
@@ -235,7 +235,6 @@ Ox.Map = function(options, self) {
                         }
                     ]
                 ),
-                selectable: false,
                 title: 'Options...',
                 width: 96
             })

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -384,7 +384,7 @@ Ox.VideoEditor = function(options, self) {
         );
     });
 
-    self.$videoMenuButton = Ox.Select({
+    self.$videoMenuButton = Ox.MenuButton({
             items: Ox.merge(
                 [
                     {id: 'toggleSize', title: 'Large Player', selected: self.options.playerSize == 'large', keyboard: 'shift +'},
@@ -403,7 +403,6 @@ Ox.VideoEditor = function(options, self) {
                     {id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'}
                 ]
             ),
-            selectable: false,
             title: 'set',
             tooltip: 'Actions and Settings',
             type: 'image'