cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rework the edit tab and it's associated drop down menu

Browse source 
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.
This commit is contained in:
Tom MacWright 2012-04-11 13:18:39 -04:00 • committed by Tom Hughes
parent dd3b577bd5
commit c45dbdae36
6 changed files with 57 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

78
app/assets/javascripts/menu.js
View file

@ -19,65 +19,29 @@ function openMenu(anchor, menu, align) {
});
}
/*
* Close a menu.
*/
function closeMenu(menu) {
clearTimeout(menu.timer);
menu.hide();
}
/*
* Callback called when the mouse enters a menu anchor.
*/
function enterMenuAnchor(event, anchor, menu, delay, align) {
if (!anchor.hasClass("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 (!menu.is(to) && menu.has(to).length === 0) {
menu.hide();
}
clearTimeout(menu.timer);
}
/*
* Callback called when the mouse leaves a menu.
*/
function leaveMenu(event, anchor, menu) {
var to = event.relatedTarget;
if (!anchor.is(to) && menu.has(to).length === 0) {
menu.hide();
}
clearTimeout(menu.timer);
}
/*
* 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),
$arrow = $("#" + anchorid + ' .arrow'),
$menu = $("#" + menuid),
$page = $(':not(#' + menuid + ', #' + anchorid + ')');
anchor.mouseup(function (event) { closeMenu(menu); });
anchor.mouseover(function (event) { enterMenuAnchor(anchor, anchor, menu, delay, align); });
anchor.mouseout(function (event) { leaveMenuAnchor(event, anchor, menu); });
menu.mouseup(function (event) { closeMenu(menu); });
menu.mouseout(function (event) { leaveMenu(event, anchor, menu); });
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);
}
});
}