mirror of
https://github.com/nasa/openmct.git
synced 2025-02-21 09:52:04 +00:00
[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.
This commit is contained in:
Sarah Hale
parent
4840345524
commit
9ad1c25d53
@ -36,7 +36,7 @@
|
||||
{
|
||||
"key": "MenuArrowController",
|
||||
"implementation": "MenuArrowController",
|
||||
"depends": [ "$rootScope", "$scope" ]
|
||||
"depends": [ "$scope" ]
|
||||
}
|
||||
],
|
||||
"controls": [
|
||||
|
||||
@ -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>
|
||||
@ -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
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -49,6 +49,13 @@
|
||||
"implementation": "services/DndService.js",
|
||||
"depends": [ "$log" ]
|
||||
}
|
||||
],
|
||||
"actions": [
|
||||
{
|
||||
"key": "contextMenu",
|
||||
"implementation": "actions/ContextMenuAction.js",
|
||||
"depends": [ "$compile", "$document", "$window", "$rootScope" ]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
135
platform/representation/src/actions/ContextMenuAction.js
Normal file
135
platform/representation/src/actions/ContextMenuAction.js
Normal file
@ -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;
|
||||
}
|
||||
);
|
||||
@ -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 = "<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.
|
||||
* 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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user