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.
47 lines
1 KiB
JavaScript
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);
|
|
}
|
|
});
|
|
}
|