148 lines
3.7 KiB
JavaScript
148 lines
3.7 KiB
JavaScript
// 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(
|
|
'OxSelect Ox' + Ox.toTitleCase(self.options.style)
|
|
)
|
|
.css(self.options.width == 'auto' ? {} : {
|
|
width: self.options.width - 2 + 'px'
|
|
})
|
|
.bindEvent({
|
|
anyclick: 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('change', 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'});
|
|
}
|
|
}
|
|
|
|
/*@
|
|
checkItem <f>
|
|
@*/
|
|
that.checkItem = function(id) {
|
|
self.$menu.checkItem(id);
|
|
};
|
|
|
|
/*@
|
|
disableItem <f>
|
|
@*/
|
|
that.disableItem = function(id) {
|
|
self.$menu.getItem(id).options({disabled: true});
|
|
};
|
|
|
|
/*@
|
|
enableItem <f>
|
|
@*/
|
|
that.enableItem = function(id) {
|
|
self.$menu.getItem(id).options({disabled: false});
|
|
};
|
|
|
|
/*@
|
|
remove <f>
|
|
@*/
|
|
self.superRemove = that.remove;
|
|
that.remove = function() {
|
|
self.$menu.remove();
|
|
self.superRemove();
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|