add Ox.MenuButton

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

@@ -8,21 +8,27 @@ Ox.Select <f:Ox.Element> Select Object
     (options) ->       <f> Select Object
     (options, self) -> <f> Select Object
     options <o> Options object
-        id <s> element id
+        disabled <b|false> If true, select is disabled
-        items <a|[]> items
+        id <s> Element id
+        items <a|[]> Items
         label <s|''> Label
         labelWidth <n|64> Label width
-        max <n|1> minimum number of selected items
+        max <n|1> Maximum number of selected items
-        min <n|1> maximum number of selected items
+        maxWidth <n|0> Maximum menu width
-        overlap <s|'none'> can be none, left or right
+        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
+        size <s|'medium'> Size, can be small, medium, large
-        title <s|''> select title
+        style <s|'rounded'> Style ('rounded' or 'square')
-        type <s|'text'> can be 'text' or 'image'
+        title <s|''> Select title
-        width <s|n|'auto'> can be auto or width in pixels
+        tooltip <s|f|''> Tooltip title, or function that returns one
-    self    <o> shared private variable
+            (e) -> <string> Tooltip title
-    click <!> on click event
+            e <object> Mouse event
-    change <!> on change event
+        type <s|'text'> Type ('text' or 'image')
+        width <s|n|'auto'> Width in px, or 'auto'
+    self <o> Shared private variable
+    click <!> Click event
+    change <!> Change event
 @*/
 
 Ox.Select = function(options, self) {
@@ -65,26 +71,13 @@ Ox.Select = function(options, self) {
                 width: self.options.width - 2 + 'px'
             })
             .bindEvent({
+                click: showMenu,
                 key_escape: loseFocus,
                 key_down: showMenu
             });
 
     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',
-        groupId: self.options.id + 'Group',
-        menuId: self.options.id + 'Menu'
-    });
-
     if (self.options.selectable) {
         self.optionGroup = new Ox.OptionGroup(
             self.options.items,
@@ -119,30 +112,29 @@ Ox.Select = function(options, self) {
                 self.options.title
                 || self.options.items[self.checked[0]].title
             )
-            .click(showMenu)
+            .appendTo(that);
-            .appendTo(that.$element);
     }
 
     self.$button = Ox.Button({
-            id: self.buttonId,
+            id: self.options.id + 'Button',
             style: 'symbol',
-            title: 'select',
+            title: self.options.type == 'text' || !self.options.title
+                ? 'select' : self.options.title,
             type: 'image'
         })
-        .bindEvent('click', showMenu)
         .appendTo(that);
 
     self.$menu = Ox.Menu({
             element: self.$title || self.$button,
-            id: self.menuId,
+            id: self.options.id + 'Menu',
             items: [self.options.selectable ? {
-                group: self.groupId,
+                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',
+            side: 'bottom', // FIXME: should be edge
             size: self.options.size
         })
         .bindEvent({
@@ -204,11 +196,15 @@ Ox.Select = function(options, self) {
             self.$label.options({width: value});
             self.$title.css({width: getTitleWidth() + 'px'});
         } else if (key == 'title') {
-            self.$title.html(value);
+            if (self.options.type == 'text') {
+                self.$title.html(value);
+            } else {
+                self.$button.options({title: value});
+            }
         } else if (key == 'width') {
             Ox.Log('Form', 'SETTING WIDTH OPTION', value)
-            self.$title.css({width: getTitleWidth() + 'px'});
             that.css({width: value - 2 + 'px'});
+            self.$title.css({width: getTitleWidth() + 'px'});
         } else if (key == 'value') {
             Ox.Log('Form', 'SETTING VALUE OPTION', value)
             that.selectItem(value);

source/Ox.UI/js/Menu/Ox.Menu.js

@@ -43,7 +43,7 @@ Ox.Menu = function(options, self) {
                 },
                 parent: null,
                 selected: -1,
-                side: 'bottom',
+                side: 'bottom', // FIXME: should be 'edge'
                 size: 'medium' // fixme: remove
             })
             .options(options || {})

source/Ox.UI/js/Menu/Ox.MenuButton.js

@@ -0,0 +1,136 @@
+// vim: et:ts=4:sw=4:sts=4:ft=javascript
+
+'use strict';
+
+/*@
+Ox.MenuButton <f> Menu Button
+    () -> <f> Menu Button
+    (options) -> Menu Button
+    (options, self) -> Menu Button
+    options <o> Options object
+        disabled <b|false> If true, button is disabled
+        id <s|''> Element id
+        items <a|[]> Menu items
+        maxWidth <n|0> Maximum menu width
+        style <s|'rounded'> Style ('rounded' or 'square')
+        title <s|''> Menu title
+        tooltip <s|f|''> Tooltip title, or function that returns one
+            (e) -> <string> Tooltip title
+            e <object> Mouse event
+        type <s|'text'> Type ('text' or 'image')
+        width <s|n|'auto'> Width in px, or 'auto'
+@*/
+
+Ox.MenuButton = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({
+            tooltip: options.tooltip || ''
+        }, self)
+        .defaults({
+            disabled: false,
+            id: '',
+            items: [],
+            maxWidth: 0,
+            style: 'rounded',
+            title: '',
+            type: 'text',
+            width: 'auto'
+        })
+        .options(options || {})
+        .addClass(
+            'OxMenuButton Ox' + Ox.toTitleCase(self.options.style)
+        )
+        .css(self.options.width == 'auto' ? {} : {
+            width: self.options.width - 2 + 'px'
+        })
+        .bindEvent({
+            click: showMenu
+        });
+
+    if (self.options.type == 'text') {
+        self.$title = $('<div>')
+            .addClass('OxTitle')
+            .css({width: self.options.width - 24 + 'px'})
+            .html(self.options.title)
+            .appendTo(that);
+    }
+
+    self.$button = Ox.Button({
+            id: self.options.id + 'Button',
+            style: 'symbol',
+            title: self.options.type == 'text' || !self.options.title
+                ? 'select' : self.options.title,
+            type: 'image'
+        })
+        .appendTo(that);
+
+    self.$menu = Ox.Menu({
+            element: self.$title || self.$button,
+            id: self.options.id + 'Menu',
+            items: self.options.items,
+            maxWidth: self.options.maxWidth,
+            side: 'bottom', // FIXME: should be edge
+        })
+        .bindEvent({
+            change: changeMenu,
+            click: clickMenu,
+            hide: hideMenu
+        });
+
+    self.options.type == 'image' && self.$menu.addClass('OxRight');
+
+    function clickMenu(data) {
+        that.triggerEvent('click', data);
+    }
+
+    function changeMenu(data) {
+        that.triggerEvent('click', data);
+    }
+
+    function hideMenu(data) {
+        that.loseFocus();
+        that.removeClass('OxSelected');
+    }
+
+    function showMenu() {
+        that.gainFocus();
+        that.addClass('OxSelected');
+        self.options.tooltip && that.$tooltip.hide();
+        self.$menu.showMenu();
+    }
+
+    self.setOption = function(key, value) {
+        if (key == 'title') {
+            if (self.options.type == 'text') {
+                self.$title.html(value);
+            } else {
+                self.$button.options({title: value});
+            }
+        } else if (key == 'width') {
+            that.css({width: value - 2 + 'px'});
+            self.$title.css({width: self.options.width - 24 + 'px'});
+        }
+    }
+
+    that.checkItem = function(id) {
+        self.$menu.checkItem(id);
+    };
+
+    that.disableItem = function(id) {
+        self.$menu.getItem(id).options({disabled: true});
+    };
+
+    that.enableItem = function(id) {
+        self.$menu.getItem(id).options({disabled: false});
+    };
+
+    self.superRemove = that.remove;
+    that.remove = function() {
+        self.$menu.remove();
+        self.superRemove();
+    };
+
+    return that;
+
+};

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

@@ -430,9 +430,6 @@ Ox.VideoEditor = function(options, self) {
             }
         })
         .appendTo(self.$videobar);
-    self.$videoMenuButton.find('input').attr({
-        src: Ox.UI.getImageURL('symbolSet')
-    });
 
     self.$selectButton = Ox.Button({
             style: 'symbol',