oxjs/source/UI/js/Menu/MenuItem.js

187 lines
5.9 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2012-05-21 10:38:18 +00:00
2011-05-16 08:24:46 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.MenuItem <f> MenuItem Object
2011-05-16 08:24:46 +00:00
options <o> Options object
2011-05-16 10:49:48 +00:00
bind <a|[]> fixme: what's this?
2012-06-27 09:49:47 +00:00
checked <f|null> If true, the item is checked
disabled <b|false> If true, the item is disabled
file <o|null> File selection options
2011-05-16 10:49:48 +00:00
group <s|''>
icon <s|''> icon
id <s|''> id
items <a|[]> items
keyboard <s|''> keyboard
menu <o|null> menu
position <n|0> position
title <a|[]> title
self <o> Shared private variable
([options[, self]]) -> <o:Ox.Element> MenuItem Object
2011-05-16 08:24:46 +00:00
@*/
2011-04-22 22:03:10 +00:00
Ox.MenuItem = function(options, self) {
self = self || {};
var that = Ox.Element('<tr>', self)
2011-04-22 22:03:10 +00:00
.defaults({
bind: [], // fixme: what's this?
checked: null,
disabled: false,
2012-06-17 17:10:41 +00:00
file: null,
2011-04-22 22:03:10 +00:00
group: '',
icon: '',
id: '',
items: [],
keyboard: '',
2011-11-02 18:21:49 +00:00
maxWidth: 0,
2011-04-22 22:03:10 +00:00
menu: null, // fixme: is passing the menu to 100s of menu items really memory-neutral?
position: 0,
title: [],
type: ''
2011-04-22 22:03:10 +00:00
})
.options(Ox.extend(Ox.clone(options), {
2011-04-22 22:03:10 +00:00
keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
title: Ox.makeArray(options.title || self.defaults.title)
2011-04-22 22:03:10 +00:00
}))
2012-05-28 19:35:41 +00:00
.update({
checked: function() {
2014-09-25 09:50:41 +00:00
that.$status.html(self.options.checked ? Ox.SYMBOLS.check : '')
2012-05-28 19:35:41 +00:00
},
disabled: function() {
that[
self.options.disabled ? 'addClass' : 'removeClass'
]('OxDisabled');
2012-06-27 10:54:46 +00:00
self.options.file && that.$button.options({
disabled: self.options.disabled
});
2012-05-28 19:35:41 +00:00
},
keyboard: function() {
self.options.keyboard = parseKeyboard(self.options.keyboard);
that.$modifiers.html(formatModifiers());
that.$key.html(formatKey());
},
2012-05-28 19:35:41 +00:00
title: function() {
self.options.title = Ox.makeArray(self.options.title);
that.$title.html(self.options.title[0]);
}
})
.addClass('OxItem' + (self.options.disabled ? ' OxDisabled' : ''))
2011-04-22 22:03:10 +00:00
/*
.attr({
id: Ox.toCamelCase(self.options.menu.options('id') + '/' + self.options.id)
})
*/
.data('group', self.options.group); // fixme: why?
if (self.options.group && self.options.checked === null) {
self.options.checked = false;
}
that.append(
2013-12-06 21:15:04 +00:00
that.$status = Ox.$('<td>')
2012-03-24 08:43:03 +00:00
.addClass('OxCell OxStatus')
2014-09-25 09:50:41 +00:00
.html(self.options.checked ? Ox.SYMBOLS.check : '')
2011-04-22 22:03:10 +00:00
)
.append(
2012-03-24 08:43:03 +00:00
that.$icon = $('<td>')
.addClass('OxCell OxIcon')
.append(
self.options.icon
2013-12-06 21:15:04 +00:00
? Ox.$('<img>').attr({src: self.options.icon})
2012-03-24 08:43:03 +00:00
: null
)
2011-04-22 22:03:10 +00:00
)
.append(
2014-01-16 05:15:01 +00:00
that.$title = $('<td>')
2012-03-24 08:43:03 +00:00
.addClass('OxCell OxTitle')
.css(
self.options.maxWidth
? {
maxWidth: self.options.maxWidth - 46,
textOverflow: 'ellipsis',
overflow: 'hidden'
}
2012-03-24 08:43:03 +00:00
: {}
)
.html(
self.options.file
2014-01-16 05:15:01 +00:00
? that.$button = Ox.FileButton(Ox.extend({
2012-06-27 10:54:46 +00:00
disabled: self.options.disabled,
2012-06-17 17:10:41 +00:00
title: self.options.title[0]
}, self.options.file)).bindEvent({
click: function(data) {
self.options.menu.clickItem(self.options.position, data.files);
}
})
: (
Ox.isString(self.options.title[0])
2012-06-17 17:10:41 +00:00
? self.options.title[0]
2013-12-06 21:15:04 +00:00
: Ox.$('<div>').html(self.options.title[0]).html()
)
2012-03-24 08:43:03 +00:00
)
2011-04-22 22:03:10 +00:00
)
.append(
2013-12-06 21:15:04 +00:00
that.$modifiers = Ox.$('<td>')
2012-03-24 08:43:03 +00:00
.addClass('OxCell OxModifiers')
.html(formatModifiers())
2011-04-22 22:03:10 +00:00
)
.append(
2013-12-06 21:15:04 +00:00
that.$key = Ox.$('<td>')
2012-03-24 08:43:03 +00:00
.addClass(
'OxCell Ox' + (self.options.items.length ? 'Submenu' : 'Key')
)
.html(
self.options.items.length
2014-09-25 09:50:41 +00:00
? Ox.SYMBOLS.triangle_right
: formatKey()
2012-03-24 08:43:03 +00:00
)
2011-04-22 22:03:10 +00:00
);
function formatKey() {
2014-09-25 09:50:41 +00:00
return Ox.SYMBOLS[self.options.keyboard.key]
|| self.options.keyboard.key.toUpperCase();
}
function formatModifiers() {
return self.options.keyboard.modifiers.map(function(modifier) {
2014-09-25 09:50:41 +00:00
return Ox.SYMBOLS[modifier];
}).join('');
}
2011-04-22 22:03:10 +00:00
function parseKeyboard(str) {
var modifiers = str.split(' '),
key = modifiers.pop();
return {
modifiers: modifiers,
key: key
};
}
that.toggle = function() {
// toggle id and title
};
2011-05-16 10:49:48 +00:00
/*@
toggleChecked <f> toggleChecked
2011-05-16 10:49:48 +00:00
@*/
2011-04-22 22:03:10 +00:00
that.toggleChecked = function() {
that.options({checked: !self.options.checked});
return that;
2011-04-22 22:03:10 +00:00
};
that.toggleDisabled = function() {
};
2011-05-16 10:49:48 +00:00
/*@
toggleTitle <f> toggleTitle
2011-05-16 10:49:48 +00:00
@*/
2011-04-22 22:03:10 +00:00
that.toggleTitle = function() {
2011-10-04 02:26:24 +00:00
that.options({title: Ox.clone(self.options.title).reverse()});
return that;
2011-04-22 22:03:10 +00:00
};
return that;
};