From 9f151e2e608af2ab2bc82610fd42e9e01ee3fb96 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Tue, 20 Dec 2011 07:07:57 +0000 Subject: [PATCH] add Ox.MenuButton --- source/Ox.UI/js/Form/Ox.Select.js | 68 ++++++------ source/Ox.UI/js/Menu/Ox.Menu.js | 2 +- source/Ox.UI/js/Menu/Ox.MenuButton.js | 136 ++++++++++++++++++++++++ source/Ox.UI/js/Video/Ox.VideoEditor.js | 3 - 4 files changed, 169 insertions(+), 40 deletions(-) create mode 100644 source/Ox.UI/js/Menu/Ox.MenuButton.js diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js index 3a2b0147..e931202e 100644 --- a/source/Ox.UI/js/Form/Ox.Select.js +++ b/source/Ox.UI/js/Form/Ox.Select.js @@ -8,21 +8,27 @@ Ox.Select Select Object (options) -> Select Object (options, self) -> Select Object options Options object - id element id - items items + disabled If true, select is disabled + id Element id + items Items label Label labelWidth Label width - max minimum number of selected items - min maximum number of selected items - overlap can be none, left or right + max Maximum number of selected items + maxWidth Maximum menu width + min Minimum number of selected items + overlap Can be 'none', 'left' or 'right' selectable is selectable - size size, can be small, medium, large - title select title - type can be 'text' or 'image' - width can be auto or width in pixels - self shared private variable - click on click event - change on change event + size Size, can be small, medium, large + style Style ('rounded' or 'square') + title Select title + tooltip Tooltip title, or function that returns one + (e) -> Tooltip title + e Mouse event + type Type ('text' or 'image') + width Width in px, or 'auto' + self 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.$element); + .appendTo(that); } 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); diff --git a/source/Ox.UI/js/Menu/Ox.Menu.js b/source/Ox.UI/js/Menu/Ox.Menu.js index 078a4cf3..53a99e0a 100644 --- a/source/Ox.UI/js/Menu/Ox.Menu.js +++ b/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 || {}) diff --git a/source/Ox.UI/js/Menu/Ox.MenuButton.js b/source/Ox.UI/js/Menu/Ox.MenuButton.js new file mode 100644 index 00000000..b1283470 --- /dev/null +++ b/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 Menu Button + () -> Menu Button + (options) -> Menu Button + (options, self) -> Menu Button + options Options object + disabled If true, button is disabled + id Element id + items Menu items + maxWidth Maximum menu width + style Style ('rounded' or 'square') + title Menu title + tooltip Tooltip title, or function that returns one + (e) -> Tooltip title + e Mouse event + type Type ('text' or 'image') + width 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 = $('
') + .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; + +}; \ No newline at end of file diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index 0e6b938c..4b034845 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/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',