[Menus] Dismiss menu when clicked

Addresses WTD-1506 (context menu does not disappear after
action is chosen); listen for click events on the menu
itself and dismiss the menu when these occur.
This commit is contained in:
Victor Woeltjen
2015-08-07 14:34:27 -07:00
parent 7ded288154
commit 87aa0cfce2

View File

@ -31,7 +31,8 @@ define(
var MENU_TEMPLATE = "<mct-representation key=\"'context-menu'\" " + var MENU_TEMPLATE = "<mct-representation key=\"'context-menu'\" " +
"mct-object=\"domainObject\" " + "mct-object=\"domainObject\" " +
"ng-class=\"menuClass\"" + "ng-click=\"dismiss()\" " +
"ng-class=\"menuClass\" " +
"ng-style=\"menuStyle\">" + "ng-style=\"menuStyle\">" +
"</mct-representation>", "</mct-representation>",
dismissExistingMenu; dismissExistingMenu;
@ -48,7 +49,7 @@ define(
* should be performed * should be performed
*/ */
function ContextMenuAction($compile, $document, $window, $rootScope, actionContext) { function ContextMenuAction($compile, $document, $window, $rootScope, actionContext) {
function perform() { function perform() {
var winDim = [$window.innerWidth, $window.innerHeight], var winDim = [$window.innerWidth, $window.innerHeight],
eventCoors = [actionContext.event.pageX, actionContext.event.pageY], eventCoors = [actionContext.event.pageX, actionContext.event.pageY],
@ -62,7 +63,7 @@ define(
// Remove the context menu // Remove the context menu
function dismiss() { function dismiss() {
menu.remove(); menu.remove();
body.off("click", dismiss); body.off("mousedown", dismiss);
dismissExistingMenu = undefined; dismissExistingMenu = undefined;
} }
@ -86,18 +87,19 @@ define(
"go-up": goUp, "go-up": goUp,
"context-menu-holder": true "context-menu-holder": true
}; };
scope.dismiss = dismiss;
// Create the context menu // Create the context menu
menu = $compile(MENU_TEMPLATE)(scope); menu = $compile(MENU_TEMPLATE)(scope);
// Add the menu to the body // Add the menu to the body
body.append(menu); body.append(menu);
// Stop propagation so that clicks on the menu do not close the menu // Stop propagation so that clicks on the menu do not close the menu
menu.on('mousedown', function (event) { menu.on('mousedown', function (event) {
event.stopPropagation(); event.stopPropagation();
}); });
// Dismiss the menu when body is clicked elsewhere // Dismiss the menu when body is clicked elsewhere
// ('mousedown' because 'click' breaks left-click context menus) // ('mousedown' because 'click' breaks left-click context menus)
body.on('mousedown', dismiss); body.on('mousedown', dismiss);
@ -105,7 +107,7 @@ define(
// Don't launch browser's context menu // Don't launch browser's context menu
actionContext.event.preventDefault(); actionContext.event.preventDefault();
} }
return { return {
perform: perform perform: perform
}; };
@ -113,4 +115,4 @@ define(
return ContextMenuAction; return ContextMenuAction;
} }
); );