X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/8acdba8bdd2be14c2408518812660431fa9e59fb..e96a64ca9c2ea068dd9167e074ee26c8d28744b4:/app/assets/javascripts/menu.js diff --git a/app/assets/javascripts/menu.js b/app/assets/javascripts/menu.js index 261517756..a01fc39cc 100644 --- a/app/assets/javascripts/menu.js +++ b/app/assets/javascripts/menu.js @@ -2,81 +2,48 @@ * Open a menu. */ function openMenu(anchor, menu, align) { + var anchorPosition = anchor.offset(); var offset; if (align == "left") { offset = 0; } else if (align == "right") { - offset = anchor.getWidth() - menu.getWidth(); + offset = menu.outerWidth() - anchor.outerWidth(); } - menu.clonePosition(anchor, { - setLeft: true, setTop: true, setWidth: false, setHeight: false, - offsetLeft: offset, offsetTop: anchor.getHeight() - }); - - menu.style.display = "block"; -} - -/* - * Close a menu. - */ -function closeMenu(menu) { - clearTimeout(menu.timer); - menu.style.display = "none"; -} - -/* - * Callback called when the mouse enters a menu anchor. - */ -function enterMenuAnchor(event, anchor, menu, delay, align) { - if (!anchor.hasClassName("disabled")) { - clearTimeout(menu.timer); - - if (delay > 0) { - menu.timer = setTimeout(function () { openMenu(anchor, menu, align) }, delay); - } else { - openMenu(event, menu, align); - } - } -} - -/* - * Callback called when the mouse leaves a menu anchor. - */ -function leaveMenuAnchor(event, anchor, menu) { - var to = event.relatedTarget; - - if (to != menu && !to.descendantOf(menu)) { - menu.style.display = "none"; - } + menu.show(); - clearTimeout(menu.timer); -} - -/* - * Callback called when the mouse leaves a menu. - */ -function leaveMenu(event, anchor, menu) { - var to = event.relatedTarget; - - if (to != anchor && !to.descendantOf(menu)) { - menu.style.display = "none"; - } - - clearTimeout(menu.timer); + 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, delay, align) { - var anchor = $(anchorid); - var menu = $(menuid); +function createMenu(anchorid, menuid, align) { + var $anchor = $("#" + anchorid); + var $arrow = $("#" + anchorid + " .menuicon"); + var $menu = $("#" + menuid); + var $page = $(":not(#" + menuid + ", #" + anchorid + ")"); + + function hide() { + $menu.hide(); + $page.off("click", hide); + } - anchor.observe("mouseup", function (event) { closeMenu(menu) }); - anchor.observe("mouseover", function (event) { enterMenuAnchor(anchor, anchor, menu, delay, align) }); - anchor.observe("mouseout", function (event) { leaveMenuAnchor(event, anchor, menu) }); - menu.observe("mouseup", function (event) { closeMenu(menu) }); - menu.observe("mouseout", function (event) { leaveMenu(event, anchor, menu) }); + $arrow.click(function(e) { + if ($anchor.is(":not(.disabled)")) { + e.stopPropagation(); + e.preventDefault(); + if ($menu.is(":visible")) { + $menu.hide(); + $page.off("click", hide); + } else { + openMenu($anchor, $menu.show(), align); + $page.on("click", hide); + } + } + }); }