MenuSystem = {
_layers: [],
_overlay: null
};
MenuSystem.showMenu = function(elmt, onDismiss) {
if (!MenuSystem._overlay) {
MenuSystem._overlay = $('
')
.addClass("menu-overlay")
.appendTo(document.body)
.click(MenuSystem.dismissAll);
}
elmt.css("z-index", 1010 + MenuSystem._layers.length).appendTo(document.body);
var layer = {
elmt: elmt,
onDismiss: onDismiss
};
MenuSystem._layers.push(layer);
var level = MenuSystem._layers.length;
return level;
};
MenuSystem.dismissAll = function() {
MenuSystem.dismissUntil(0);
if (MenuSystem._overlay !== null) {
MenuSystem._overlay.remove();
MenuSystem._overlay = null;
}
};
MenuSystem.dismissUntil = function(level) {
for (var i = MenuSystem._layers.length - 1; i >= level; i--) {
var layer = MenuSystem._layers[i];
layer.elmt.remove();
layer["onDismiss"]();
}
MenuSystem._layers = MenuSystem._layers.slice(0, level);
};
MenuSystem.createMenu = function() {
return $('').addClass("menu-container");
};
MenuSystem.createMenuItem = function() {
return $('').addClass("menu-item");
};
MenuSystem.positionMenuAboveBelow = function(menu, elmt) {
var offset = elmt.offset();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
if (offset.top + elmt.outerHeight() - document.body.scrollTop + menu.outerHeight() > windowHeight - 10) {
menu.css("top", (offset.top - menu.outerHeight()) + "px");
} else {
menu.css("top", (offset.top + elmt.outerHeight()) + "px");
}
if (offset.left - document.body.scrollLeft + menu.outerWidth() > windowWidth - 10) {
menu.css("left", (offset.left + elmt.outerWidth() - menu.outerWidth()) + "px");
} else {
menu.css("left", offset.left + "px");
}
};
MenuSystem.positionMenuLeftRight = function(menu, elmt) {
var offset = elmt.offset();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
if (offset.top - document.body.scrollTop + menu.outerHeight() > windowHeight - 10) {
menu.css("top", (offset.top + elmt.outerHeight() - menu.outerHeight()) + "px");
} else {
menu.css("top", offset.top + "px");
}
if (offset.left + elmt.outerWidth() - document.body.scrollLeft + menu.outerWidth() > windowWidth - 10) {
menu.css("left", Math.max(10, offset.left - menu.outerWidth()) + "px");
} else {
menu.css("left", (offset.left + elmt.outerWidth()) + "px");
}
};
MenuSystem.createAndShowStandardMenu = function(items, elmt, options) {
options = options || {
horizontal: false
};
var menu = MenuSystem.createMenu();
if ("width" in options) {
menu.width(options.width);
}
var createMenuItem = function(item) {
if ("label" in item) {
var menuItem = MenuSystem.createMenuItem().appendTo(menu);
if ("submenu" in item) {
menuItem.html(
''
);
menuItem.mouseenter(function() {
MenuSystem.dismissUntil(level);
menuItem.addClass("menu-expanded");
MenuSystem.createAndShowStandardMenu(
item.submenu,
this,
{
horizontal: true,
onDismiss: function() {
menuItem.removeClass("menu-expanded");
}
}
);
});
} else {
menuItem.html(item.label).click(function(evt) {
item.click.call(this, evt);
MenuSystem.dismissAll();
});
if ("tooltip" in item) {
menuItem.attr("title", item.tooltip);
}
menuItem.mouseenter(function() {
MenuSystem.dismissUntil(level);
});
}
} else if ("heading" in item) {
$('').addClass("menu-section").text(item.heading).appendTo(menu);
} else {
$('
').appendTo(menu);
}
};
for (var i = 0; i < items.length; i++) {
createMenuItem(items[i]);
}
var level = MenuSystem.showMenu(menu, "onDismiss" in options ? options.onDismiss : function(){});
if (options.horizontal) {
MenuSystem.positionMenuLeftRight(menu, $(elmt));
} else {
MenuSystem.positionMenuAboveBelow(menu, $(elmt));
}
return level;
};