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

185 lines
4.9 KiB
JavaScript
Raw Normal View History

2011-12-20 07:07:57 +00:00
'use strict';
/*@
2012-05-31 10:32:54 +00:00
Ox.MenuButton <f> Menu Button
2011-12-20 07:07:57 +00:00
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'
2012-06-17 22:38:26 +00:00
click <!> click
change <!> change
hide <!> hide
show <!> show
self <o> Shared private variable
([options[, self]]) -> <o:Ox.Element> Menu Button
2011-12-20 07:07:57 +00:00
@*/
Ox.MenuButton = function(options, self) {
self = self || {};
var that = Ox.Element({
tooltip: options.tooltip || ''
}, self)
.defaults({
disabled: false,
id: '',
items: [],
maxWidth: 0,
2012-12-18 21:47:57 +00:00
overlap: 'none',
2011-12-20 07:07:57 +00:00
style: 'rounded',
title: '',
type: 'text',
width: 'auto'
})
.options(options || {})
2012-05-28 19:35:41 +00:00
.update({
title: function() {
if (self.options.type == 'text') {
self.$title.html(self.options.title);
} else {
self.$button.options({title: self.options.title});
}
},
width: function() {
that.css({width: self.options.width - 2 + 'px'});
self.$title.css({width: self.options.width - 24 + 'px'});
}
})
2011-12-20 07:07:57 +00:00
.addClass(
2011-12-20 07:29:14 +00:00
'OxSelect Ox' + Ox.toTitleCase(self.options.style)
2011-12-20 07:07:57 +00:00
)
.css(self.options.width == 'auto' ? {} : {
width: self.options.width - 2 + 'px'
})
.bindEvent({
anyclick: function(e) {
showMenu($(e.target).is('.OxButton') ? 'button' : null);
},
2011-12-20 07:07:57 +00:00
});
if (self.options.type == 'text') {
2013-12-06 21:15:04 +00:00
self.$title = Ox.$('<div>')
2011-12-20 07:07:57 +00:00
.addClass('OxTitle')
.css({width: self.options.width - 24 + 'px'})
.html(self.options.title)
.appendTo(that);
}
self.$button = Ox.Button({
id: self.options.id + 'Button',
selectable: true,
2012-12-18 21:47:57 +00:00
overlap: self.options.overlap,
2011-12-20 07:07:57 +00:00
style: 'symbol',
title: self.options.type == 'text' || !self.options.title
? 'select' : self.options.title,
type: 'image'
})
.appendTo(that);
self.$menu = Ox.Menu({
2014-01-16 07:07:21 +00:00
edge: 'bottom', // FIXME: should be edge
2011-12-20 07:07:57 +00:00
element: self.$title || self.$button,
id: self.options.id + 'Menu',
items: self.options.items,
2014-01-16 07:07:21 +00:00
maxWidth: self.options.maxWidth
2011-12-20 07:07:57 +00:00
})
.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('change', data);
2011-12-20 07:07:57 +00:00
}
function hideMenu(data) {
that.loseFocus();
that.removeClass('OxSelected');
self.$button.options({value: false});
that.triggerEvent('hide');
2011-12-20 07:07:57 +00:00
}
function showMenu(from) {
2011-12-20 07:07:57 +00:00
that.gainFocus();
that.addClass('OxSelected');
from != 'button' && self.$button.options({value: true});
2011-12-20 07:07:57 +00:00
self.options.tooltip && that.$tooltip.hide();
self.$menu.showMenu();
that.triggerEvent('show');
2011-12-20 07:07:57 +00:00
}
2011-12-20 13:45:24 +00:00
/*@
2012-05-21 10:38:18 +00:00
checkItem <f> checkItem
2012-05-22 13:14:40 +00:00
(id) -> <o> check item with id
2011-12-20 13:45:24 +00:00
@*/
2011-12-20 07:07:57 +00:00
that.checkItem = function(id) {
self.$menu.checkItem(id);
2012-05-22 13:14:40 +00:00
return that;
2011-12-20 07:07:57 +00:00
};
2011-12-20 13:45:24 +00:00
/*@
2012-05-21 10:38:18 +00:00
disableItem <f> disableItem
2012-05-22 13:14:40 +00:00
(id) -> <o> disable item with id
2011-12-20 13:45:24 +00:00
@*/
2011-12-20 07:07:57 +00:00
that.disableItem = function(id) {
self.$menu.getItem(id).options({disabled: true});
2012-05-22 13:14:40 +00:00
return that;
2011-12-20 07:07:57 +00:00
};
2011-12-20 13:45:24 +00:00
/*@
2012-05-21 10:38:18 +00:00
enableItem <f> enableItem
2012-05-22 13:14:40 +00:00
(id) -> <o> enable item
2011-12-20 13:45:24 +00:00
@*/
2011-12-20 07:07:57 +00:00
that.enableItem = function(id) {
self.$menu.getItem(id).options({disabled: false});
2012-05-22 13:14:40 +00:00
return that;
2011-12-20 07:07:57 +00:00
};
2011-12-20 13:45:24 +00:00
/*@
2012-05-21 10:38:18 +00:00
remove <f> remove
2012-05-22 13:14:40 +00:00
() -> <o> remove item
2011-12-20 13:45:24 +00:00
@*/
2011-12-20 07:07:57 +00:00
self.superRemove = that.remove;
that.remove = function() {
self.$menu.remove();
self.superRemove();
2012-05-22 13:14:40 +00:00
return that;
2011-12-20 07:07:57 +00:00
};
2012-05-21 10:38:18 +00:00
/*@
setItemTitle <f> setItemTitle
(id, title) -> <o> set item title
@*/
that.setItemTitle = function(id, title) {
self.$menu.setItemTitle(id, title);
return that;
};
2012-05-21 10:38:18 +00:00
/*@
uncheckItem <f> uncheck item
(id) -> <o> uncheck item with id
@*/
that.uncheckItem = function(id) {
self.$menu.uncheckItem(id);
2012-05-22 13:14:40 +00:00
return that;
};
2011-12-20 07:07:57 +00:00
return that;
2011-12-20 13:45:24 +00:00
};