![David Huynh](/assets/img/avatar_default.png)
git-svn-id: http://google-refine.googlecode.com/svn/trunk@210 7d457c2a-affb-35e4-300a-418c747d4874
156 lines
5.0 KiB
JavaScript
156 lines
5.0 KiB
JavaScript
MenuSystem = {
|
|
_layers: [],
|
|
_overlay: null
|
|
};
|
|
|
|
MenuSystem.showMenu = function(elmt, onDismiss) {
|
|
if (MenuSystem._overlay == null) {
|
|
MenuSystem._overlay = $('<div> </div>')
|
|
.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 $('<div></div>').addClass("menu-container");
|
|
};
|
|
|
|
MenuSystem.createMenuItem = function() {
|
|
return $('<a href="javascript:{}"></a>').addClass("menu-item");
|
|
};
|
|
|
|
MenuSystem.positionMenuAboveBelow = function(menu, elmt) {
|
|
var offset = elmt.offset();
|
|
var windowWidth = $(document.body).innerWidth();
|
|
var windowHeight = $(document.body).innerHeight();
|
|
|
|
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 = $(document.body).innerWidth();
|
|
var windowHeight = $(document.body).innerHeight();
|
|
|
|
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", (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(
|
|
'<table width="100%" cellspacing="0" cellpadding="0" class="menu-item-layout"><tr>' +
|
|
'<td>' + item.label + '</td>' +
|
|
'<td width="1%"><img src="/images/right-arrow.png" /></td>' +
|
|
'</tr></table>'
|
|
);
|
|
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) {
|
|
$('<div></div>').addClass("menu-section").text(item.heading).appendTo(menu);
|
|
} else {
|
|
$('<hr />').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;
|
|
};
|