GUACAMOLE-723: Automatically close menus upon click unless explicitly marked as interactive.

This commit is contained in:
Michael Jumper
2019-06-22 18:31:09 -07:00
parent 8ec139098a
commit 93dbf85a14
2 changed files with 19 additions and 12 deletions

View File

@@ -54,7 +54,7 @@
<div class="header">
<h2 ng-hide="rootConnectionGroups">{{client.name}}</h2>
<h2 class="connection-select-menu" ng-show="rootConnectionGroups">
<guac-menu menu-title="client.name">
<guac-menu menu-title="client.name" interactive="true">
<div class="all-connections">
<guac-group-list-filter connection-groups="rootConnectionGroups"
filtered-connection-groups="filteredRootConnectionGroups"

View File

@@ -34,7 +34,16 @@ angular.module('navigation').directive('guacMenu', [function guacMenu() {
*
* @type String
*/
menuTitle : '='
menuTitle : '=',
/**
* Whether the menu should remain open while the user interacts
* with the contents of the menu. By default, the menu will close
* if the user clicks within the menu contents.
*
* @type Boolean
*/
interactive : '='
},
@@ -81,21 +90,19 @@ angular.module('navigation').directive('guacMenu', [function guacMenu() {
$scope.menuShown = !$scope.menuShown;
};
// Close menu when use clicks anywhere else
document.body.addEventListener('click', function clickOutsideMenu() {
// Close menu when user clicks anywhere outside this specific menu
document.body.addEventListener('click', function clickOutsideMenu(e) {
$scope.$apply(function closeMenu() {
$scope.menuShown = false;
if (e.target !== element && !element.contains(e.target))
$scope.menuShown = false;
});
}, false);
// Prevent click within menu from triggering the outside-menu handler
element.addEventListener('click', function clickInsideMenu(e) {
e.stopPropagation();
}, false);
// Prevent click within menu contents from toggling menu visibility
// Prevent clicks within menu contents from toggling menu visibility
// if the menu contents are intended to be interactive
contents.addEventListener('click', function clickInsideMenuContents(e) {
e.stopPropagation();
if ($scope.interactive)
e.stopPropagation();
}, false);
}] // end controller