From 9ad1c25d5366e870a0f5b95597c090d56a5755ba Mon Sep 17 00:00:00 2001 From: Sarah Hale Date: Tue, 30 Jun 2015 16:17:00 -0700 Subject: [PATCH] [Browse] Splitting up Menu Gesture Splitting up the context menu gesture's functionality into separate context menu gesture and context menu actions. The gesture watches for right-clicks, while the action displays the menu. #33. --- platform/commonUI/browse/bundle.json | 2 +- .../browse/res/templates/menu-arrow.html | 2 +- .../browse/src/MenuArrowController.js | 14 +- platform/representation/bundle.json | 7 + .../src/actions/ContextMenuAction.js | 135 ++++++++++++++++++ .../src/gestures/ContextMenuGesture.js | 106 ++------------ 6 files changed, 161 insertions(+), 105 deletions(-) create mode 100644 platform/representation/src/actions/ContextMenuAction.js diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json index d9a7b006c3..1869e0d8f9 100644 --- a/platform/commonUI/browse/bundle.json +++ b/platform/commonUI/browse/bundle.json @@ -36,7 +36,7 @@ { "key": "MenuArrowController", "implementation": "MenuArrowController", - "depends": [ "$rootScope", "$scope" ] + "depends": [ "$scope" ] } ], "controls": [ diff --git a/platform/commonUI/browse/res/templates/menu-arrow.html b/platform/commonUI/browse/res/templates/menu-arrow.html index dc92358e0c..e266d92d68 100644 --- a/platform/commonUI/browse/res/templates/menu-arrow.html +++ b/platform/commonUI/browse/res/templates/menu-arrow.html @@ -22,5 +22,5 @@ v + ng-click='menuArrow.showMenu($event)'>v \ No newline at end of file diff --git a/platform/commonUI/browse/src/MenuArrowController.js b/platform/commonUI/browse/src/MenuArrowController.js index 7ac009872c..5507cf67f6 100644 --- a/platform/commonUI/browse/src/MenuArrowController.js +++ b/platform/commonUI/browse/src/MenuArrowController.js @@ -35,20 +35,22 @@ define( * menu. * @constructor */ - function MenuArrowController($rootScope, $scope) { + function MenuArrowController($scope) { - function contextMenu() { + function showMenu(event) { console.log('contextMenu() called'); //console.log('editor? ', $scope.domainObject.hasCapability('editor')); - + /* if (true || $scope.domainObject.hasCapability('editor')) { - //$rootScope.$broadcast('contextmenu'); - $scope.$emit('contextmenu'); + $scope.$emit('contextmenu', event); } + */ + + $scope.domainObject.getCapability('action').perform({key: 'contextMenu', event: event}); } return { - contextMenu: contextMenu + showMenu: showMenu }; } diff --git a/platform/representation/bundle.json b/platform/representation/bundle.json index c9872367aa..b3d24a790d 100644 --- a/platform/representation/bundle.json +++ b/platform/representation/bundle.json @@ -49,6 +49,13 @@ "implementation": "services/DndService.js", "depends": [ "$log" ] } + ], + "actions": [ + { + "key": "contextMenu", + "implementation": "actions/ContextMenuAction.js", + "depends": [ "$compile", "$document", "$window", "$rootScope" ] + } ] } } diff --git a/platform/representation/src/actions/ContextMenuAction.js b/platform/representation/src/actions/ContextMenuAction.js new file mode 100644 index 0000000000..cc08936edd --- /dev/null +++ b/platform/representation/src/actions/ContextMenuAction.js @@ -0,0 +1,135 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/*global define,Promise*/ + +/** + * Module defining ContextMenuAction. Created by shale on 06/30/2015. + */ +define( + ["../gestures/GestureConstants"], + function (GestureConstants) { + "use strict"; + + var MENU_TEMPLATE = "" + + "", + dismissExistingMenu; + + /** + * Add listeners to a representation such that it launches a + * custom context menu for the domain object it contains. + * + * @constructor + * @param $compile Angular's $compile service + * @param $document the current document + * @param $window the active window + * @param $rootScope Angular's root scope + * @param element the jqLite-wrapped element which should exhibit + * the context mennu + * @param {DomainObject} domainObject the object on which actions + * in the context menu will be performed + */ + function ContextMenuAction($compile, $document, $window, $rootScope, element, domainObject) { + var turnOffMenu; + + function showMenu(event) { + var winDim = [$window.innerWidth, $window.innerHeight], + eventCoors = [event.pageX, event.pageY], + menuDim = GestureConstants.MCT_MENU_DIMENSIONS, + body = $document.find('body'), + scope = $rootScope.$new(), + goLeft = eventCoors[0] + menuDim[0] > winDim[0], + goUp = eventCoors[1] + menuDim[1] > winDim[1], + menu; + + console.log('in showMenu() in ContextMenuAction'); + + // Remove the context menu + function dismiss() { + menu.remove(); + body.off("click", dismiss); + dismissExistingMenu = undefined; + } + + // Dismiss any menu which was already showing + if (dismissExistingMenu) { + dismissExistingMenu(); + } + + // ...and record the presence of this menu. + dismissExistingMenu = dismiss; + + // Set up the scope, including menu positioning + scope.domainObject = domainObject; + scope.menuStyle = {}; + scope.menuStyle[goLeft ? "right" : "left"] = + (goLeft ? (winDim[0] - eventCoors[0]) : eventCoors[0]) + 'px'; + scope.menuStyle[goUp ? "bottom" : "top"] = + (goUp ? (winDim[1] - eventCoors[1]) : eventCoors[1]) + 'px'; + scope.menuClass = { + "go-left": goLeft, + "go-up": goUp, + "context-menu-holder": true + }; + + console.log("ContextMenuAction scope ", scope); + + // Create the context menu + menu = $compile(MENU_TEMPLATE)(scope); + + console.log("ContextMenuAction menu ", menu); + + // Add the menu to the body + body.append(menu); + + // Dismiss the menu when body is clicked elsewhere + body.on('click', dismiss); + + // Don't launch browser's context menu + event.preventDefault(); + } + + return { + /** + * Detach any event handlers associated with this gesture, + * and dismiss any visible menu. + * @method + * @memberof ContextMenuGesture + */ + destroy: function () { + // Scope has been destroyed, so remove all listeners. + if (dismissExistingMenu) { + dismissExistingMenu(); + } + element.off('contextmenu', showMenu); + if (turnOffMenu) { + turnOffMenu(); + } + } + }; + } + + return ContextMenuAction; + } +); \ No newline at end of file diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js index 70e518fddc..d390fdc386 100644 --- a/platform/representation/src/gestures/ContextMenuGesture.js +++ b/platform/representation/src/gestures/ContextMenuGesture.js @@ -22,117 +22,29 @@ /*global define,Promise*/ /** - * Module defining ContextMenuGesture. Created by vwoeltje on 11/17/14. + * Module defining ContextMenuGesture. + * Created by vwoeltje on 11/17/14. Modified by shale on 06/30/2015. */ define( - ["./GestureConstants"], - function (GestureConstants) { + function () { "use strict"; - var MENU_TEMPLATE = "" + - "", - dismissExistingMenu; - /** - * Add listeners to a representation such that it launches a - * custom context menu for the domain object it contains. + * Add listeners to a representation such that it calls the + * context menu action for the domain object it contains. * * @constructor - * @param $compile Angular's $compile service - * @param $document the current document - * @param $window the active window - * @param $rootScope Angular's root scope * @param element the jqLite-wrapped element which should exhibit * the context mennu * @param {DomainObject} domainObject the object on which actions * in the context menu will be performed */ - function ContextMenuGesture($compile, $document, $window, $rootScope, element, domainObject) { - var turnOffMenu; + function ContextMenuGesture(element, domainObject) { - function showMenu(event) { - var winDim = [$window.innerWidth, $window.innerHeight], - eventCoors = [event.pageX, event.pageY], - menuDim = GestureConstants.MCT_MENU_DIMENSIONS, - body = $document.find('body'), - scope = $rootScope.$new(), - goLeft = eventCoors[0] + menuDim[0] > winDim[0], - goUp = eventCoors[1] + menuDim[1] > winDim[1], - menu; - - console.log('in showMenu() in ContextMenuGesture'); - - // Remove the context menu - function dismiss() { - menu.remove(); - body.off("click", dismiss); - dismissExistingMenu = undefined; - } - - // Dismiss any menu which was already showing - if (dismissExistingMenu) { - dismissExistingMenu(); - } - - // ...and record the presence of this menu. - dismissExistingMenu = dismiss; - - // Set up the scope, including menu positioning - scope.domainObject = domainObject; - scope.menuStyle = {}; - scope.menuStyle[goLeft ? "right" : "left"] = - (goLeft ? (winDim[0] - eventCoors[0]) : eventCoors[0]) + 'px'; - scope.menuStyle[goUp ? "bottom" : "top"] = - (goUp ? (winDim[1] - eventCoors[1]) : eventCoors[1]) + 'px'; - scope.menuClass = { - "go-left": goLeft, - "go-up": goUp, - "context-menu-holder": true - }; - - console.log("scope ", scope); - - // Create the context menu - menu = $compile(MENU_TEMPLATE)(scope); - - console.log("menu ", menu); - - // Add the menu to the body - body.append(menu); - - // Dismiss the menu when body is clicked elsewhere - body.on('click', dismiss); - - // Don't launch browser's context menu - event.preventDefault(); - } - // When context menu event occurs, show object actions instead - element.on('contextmenu', showMenu); - - // This allows actions besides right-clicks to trigger a context menu - // Assigning turnOffMenu to stop multiple pickups of the broadcast - turnOffMenu = $rootScope.$on('contextmenu', showMenu); - - return { - /** - * Detach any event handlers associated with this gesture, - * and dismiss any visible menu. - * @method - * @memberof ContextMenuGesture - */ - destroy: function () { - // Scope has been destroyed, so remove all listeners. - if (dismissExistingMenu) { - dismissExistingMenu(); - } - element.off('contextmenu', showMenu); - turnOffMenu(); - } - }; + element.on('contextmenu', function () { + domainObject.getCapability('action').perform({key: "contextMenu", event: $event}); + }); } return ContextMenuGesture;