[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

@@ -36,7 +36,7 @@
             {
                 "key": "MenuArrowController",
                 "implementation": "MenuArrowController",
-                "depends": [ "$rootScope", "$scope" ]
+                "depends": [ "$scope" ]
             }
         ],
         "controls": [

platform/commonUI/browse/res/templates/menu-arrow.html

@@ -22,5 +22,5 @@
 
 <span ng-controller="MenuArrowController as menuArrow">
     <a class='ui-symbol context-available'
-       ng-click='menuArrow.contextMenu()'>v</a>
+       ng-click='menuArrow.showMenu($event)'>v</a>
 </span>

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', event);
-                    $scope.$emit('contextmenu');
                 }
+                */
+                
+                $scope.domainObject.getCapability('action').perform({key: 'contextMenu', event: event});
             }
             
             return {
-                contextMenu: contextMenu
+                showMenu: showMenu
             };
         }
 

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" ]
+            }
         ]
     }
 }

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 = "<mct-representation key=\"'context-menu'\" " +
+                "mct-object=\"domainObject\" " +
+                "ng-class=\"menuClass\"" +
+                "ng-style=\"menuStyle\">" +
+                "</mct-representation>",
+            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;
+    }
+);

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 () {
-    function (GestureConstants) {
         "use strict";
 
-        var MENU_TEMPLATE = "<mct-representation key=\"'context-menu'\" " +
-                "mct-object=\"domainObject\" " +
-                "ng-class=\"menuClass\"" +
-                "ng-style=\"menuStyle\">" +
-                "</mct-representation>",
-            dismissExistingMenu;
-
         /**
-         * Add listeners to a representation such that it launches a
+         * Add listeners to a representation such that it calls the
-         * custom context menu for the domain object it contains.
+         * 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) {
+        function ContextMenuGesture(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 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);
+            element.on('contextmenu', function () {
-            
+                domainObject.getCapability('action').perform({key: "contextMenu", event: $event});
-            // 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();
-                }
-            };
         }
 
         return ContextMenuGesture;