oxjs/source/UI/js/Menu/MainMenu.js

286 lines
7.5 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2011-05-16 08:24:46 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.MainMenu <f> MainMenu Object
2011-05-16 08:24:46 +00:00
options <o> Options object
2011-05-16 10:49:48 +00:00
extras <a|[]> extra menus
menus <a|[]> submenus
size <s|medium> can be small, medium, large
self <o> Shared private variable
([options[, self]]) -> <o:Ox.Bar> MainMenu Object
2011-05-16 08:24:46 +00:00
@*/
2011-04-22 22:03:10 +00:00
Ox.MainMenu = function(options, self) {
self = self || {};
var that = Ox.Bar({}, self)
2011-04-22 22:03:10 +00:00
.defaults({
extras: [],
menus: [],
size: 'medium'
})
.options(options || {})
.addClass('OxMainMenu Ox' + Ox.toTitleCase(self.options.size)) // fixme: bar should accept small/medium/large ... like toolbar
2013-12-06 20:43:00 +00:00
.on({
click: click,
mousemove: mousemove
});
2011-04-22 22:03:10 +00:00
self.focused = false;
self.selected = -1;
that.menus = [];
that.titles = [];
that.layer = $('<div>').addClass('OxLayer');
self.options.menus.forEach(function(menu, position) {
2011-09-17 20:47:16 +00:00
addMenu(menu, position);
2011-04-22 22:03:10 +00:00
});
if (self.options.extras.length) {
2013-12-23 08:00:54 +00:00
that.extras = $('<div>')
2011-04-22 22:03:10 +00:00
.addClass('OxExtras')
.appendTo(that);
2011-04-22 22:03:10 +00:00
self.options.extras.forEach(function(extra) {
2013-08-01 10:26:09 +00:00
extra.appendTo(that.extras);
2011-04-22 22:03:10 +00:00
});
}
2011-09-17 20:47:16 +00:00
function addMenu(menu, position) {
that.titles[position] = $('<div>')
.addClass('OxTitle')
.html(menu.title)
2013-12-06 21:15:04 +00:00
.data({position: position});
2011-09-17 20:47:16 +00:00
if (position == 0) {
if (that.titles.length == 1) {
that.titles[position].appendTo(that);
2011-09-17 20:47:16 +00:00
} else {
that.titles[position].insertBefore(that.titles[1]);
}
} else {
that.titles[position].insertAfter(that.titles[position - 1])
}
that.menus[position] = Ox.Menu(Ox.extend(menu, {
element: that.titles[position],
mainmenu: that,
size: self.options.size
}))
.bindEvent({
hide: onHideMenu
});
}
2011-04-22 22:03:10 +00:00
function click(event) {
var $element = getElement(event),
position = typeof $element.data('position') != 'undefined'
? $element.data('position') : -1;
2011-04-22 22:03:10 +00:00
clickTitle(position);
}
function clickTitle(position) {
var selected = self.selected;
if (self.selected > -1) {
that.menus[self.selected].hideMenu();
}
if (position > -1) {
if (position != selected) {
self.focused = true;
self.selected = position;
that.titles[self.selected].addClass('OxSelected');
that.menus[self.selected].showMenu();
}
}
}
function getElement(event) {
var $element = $(event.target);
return $element.is('img') ? $element.parent() : $element;
}
2011-04-22 22:03:10 +00:00
function mousemove(event) {
var $element = getElement(event),
2011-04-22 22:03:10 +00:00
focused,
position = typeof $element.data('position') != 'undefined'
? $element.data('position') : -1;
2011-04-22 22:03:10 +00:00
if (self.focused && position != self.selected) {
if (position > -1) {
clickTitle(position);
} else {
focused = self.focused;
that.menus[self.selected].hideMenu();
self.focused = focused;
}
}
}
function onHideMenu() {
if (self.selected > -1) {
that.titles[self.selected].removeClass('OxSelected');
self.selected = -1;
}
self.focused = false;
}
2011-09-17 20:47:16 +00:00
function removeMenu(position) {
that.titles[position].remove();
that.menus[position].remove();
2011-09-17 20:47:16 +00:00
}
2011-04-22 22:03:10 +00:00
that.addMenuAfter = function(id) {
};
that.addMenuBefore = function(id) {
};
2011-05-16 10:49:48 +00:00
/*@
checkItem <f> checkItem
@*/
2011-04-22 22:03:10 +00:00
that.checkItem = function(id) {
var ids = id.split('_'),
item = that.getItem(id);
if (item) {
if (item.options('group')) {
item.options('menu').checkItem(ids[ids.length - 1]);
} else {
item.options({checked: true});
}
}
return that;
2011-04-22 22:03:10 +00:00
};
2011-05-16 10:49:48 +00:00
/*@
disableItem <f> disableItem
@*/
2011-04-22 22:03:10 +00:00
that.disableItem = function(id) {
var item = that.getItem(id);
item && item.options({disabled: true});
return that;
2011-04-22 22:03:10 +00:00
};
2011-05-16 10:49:48 +00:00
/*@
enableItem <f> enableItem
@*/
2011-04-22 22:03:10 +00:00
that.enableItem = function(id) {
var item = that.getItem(id);
item && item.options({disabled: false});
return that;
2011-04-22 22:03:10 +00:00
};
2011-05-16 10:49:48 +00:00
/*@
getItem <f> getItem
@*/
2011-04-22 22:03:10 +00:00
that.getItem = function(id) {
var ids = id.split('_'),
item;
if (ids.length == 1) {
Ox.forEach(that.menus, function(menu) {
item = menu.getItem(id);
2012-07-05 08:58:08 +00:00
if (item) {
return false; // break
}
2011-04-22 22:03:10 +00:00
});
} else {
item = that.getMenu(ids.shift()).getItem(ids.join('_'));
}
2011-11-04 15:54:28 +00:00
Ox.Log('Menu', 'getItem', id, item);
2011-04-22 22:03:10 +00:00
return item;
};
2011-05-16 10:49:48 +00:00
/*@
getMenu <f> getMenu
@*/
2011-04-22 22:03:10 +00:00
that.getMenu = function(id) {
var ids = id.split('_'),
menu;
if (ids.length == 1) {
Ox.forEach(that.menus, function(v) {
if (v.options('id') == id) {
menu = v;
2012-07-05 08:58:08 +00:00
return false; // break
2011-04-22 22:03:10 +00:00
}
});
} else {
menu = that.getMenu(ids.shift()).getSubmenu(ids.join('_'));
}
return menu;
};
2013-07-13 21:04:17 +00:00
that.highlightMenu = function(id) {
var position = Ox.getIndexById(self.options.menus, id);
2013-07-14 22:26:40 +00:00
self.highlightTimeout && clearTimeout(self.highlightTimeout);
that.titles[position].addClass('OxHighlight');
2013-07-14 22:26:40 +00:00
self.highlightTimeout = setTimeout(function() {
that.titles[position].removeClass('OxHighlight');
2013-07-14 22:26:40 +00:00
delete self.highlightTimeout;
}, 500);
2013-07-13 21:04:17 +00:00
};
that.isSelected = function() {
return self.selected > -1;
};
2011-04-22 22:03:10 +00:00
that.removeMenu = function() {
};
2012-05-21 10:38:18 +00:00
/*@
replaceMenu <f> replace menu
(id, menu) -> <u> replace menu
@*/
2011-09-17 20:47:16 +00:00
that.replaceMenu = function(id, menu) {
var position = Ox.getIndexById(self.options.menus, id);
2011-09-17 20:47:16 +00:00
self.options.menus[position] = menu;
removeMenu(position);
addMenu(menu, position);
};
2011-05-16 10:49:48 +00:00
/*@
selectNextMenu <f> selectNextMenu
@*/
2011-04-22 22:03:10 +00:00
that.selectNextMenu = function() {
if (self.selected < self.options.menus.length - 1) {
clickTitle(self.selected + 1);
}
return that;
2011-04-22 22:03:10 +00:00
};
2011-05-16 10:49:48 +00:00
/*@
selectPreviousMenu <f> selectPreviousMenu
@*/
2011-04-22 22:03:10 +00:00
that.selectPreviousMenu = function() {
if (self.selected) {
clickTitle(self.selected - 1);
}
return that;
2011-04-22 22:03:10 +00:00
};
that.setItemKeyboard = function(id, keyboard) {
var item = that.getItem(id);
item && item.options({keyboard: keyboard});
return that;
};
2012-05-21 10:38:18 +00:00
/*@
setItemTitle <f> setItemTitle
(id, title) -> <o> set item title
@*/
that.setItemTitle = function(id, title) {
var item = that.getItem(id);
item && item.options({title: title});
return that;
};
2011-05-16 10:49:48 +00:00
/*@
uncheckItem <f> uncheckItem
@*/
2011-04-22 22:03:10 +00:00
that.uncheckItem = function(id) {
var item = that.getItem(id);
item && item.options({checked: false});
return that;
2011-04-22 22:03:10 +00:00
};
return that;
};