openstreetmap-website/app/assets/javascripts/menu.js
Tom MacWright c45dbdae36 Rework the edit tab and it's associated drop down menu
This changes the behavior of the editing tabs in three places. Instead
of the current hovering behavior, you can click on the arrow and get the
drop-down menu. Any click outside that on the page will deactivate the
menu, following the UI paradigm of most desktop environments.

This also simplifies the javascript code significantly.
2012-04-23 20:59:26 +01:00

47 lines
1 KiB
JavaScript

/*
* Open a menu.
*/
function openMenu(anchor, menu, align) {
var anchorPosition = anchor.offset();
var offset;
if (align == "left") {
offset = 0;
} else if (align == "right") {
offset = menu.outerWidth() - anchor.outerWidth();
}
menu.show();
menu.offset({
top: anchorPosition.top + anchor.outerHeight(),
left: anchorPosition.left - offset
});
}
/*
* Setup a menu, triggered by hovering over an anchor for a given time.
*/
function createMenu(anchorid, menuid, align) {
var $anchor = $("#" + anchorid),
$arrow = $("#" + anchorid + ' .arrow'),
$menu = $("#" + menuid),
$page = $(':not(#' + menuid + ', #' + anchorid + ')');
function hide() {
$menu.hide();
$page.unbind('click', hide);
}
$arrow.click(function(e) {
e.stopPropagation();
e.preventDefault();
if ($menu.is(':visible')) {
$menu.hide();
$page.unbind('click', hide);
} else {
openMenu($anchor, $menu.show(), 'left');
$page.bind('click', hide);
}
});
}