alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Context Menu] Use popupService to display menus

Browse Source
This commit is contained in:
Victor Woeltjen
2015-10-02 11:01:49 -07:00
parent 1ad0bf337c
commit 445f22ccb0
2 changed files with 37 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
platform/representation/bundle.json
View File

@@ -54,7 +54,13 @@
{ {
"key": "menu", "key": "menu",
"implementation": "actions/ContextMenuAction.js", "implementation": "actions/ContextMenuAction.js",
"depends": [ "$compile", "$document", "$window", "$rootScope", "agentService" ] "depends": [
"$compile",
"$document",
"$rootScope",
"popupService",
"agentService"
]
} }
] ]
} }

54
platform/representation/src/actions/ContextMenuAction.js
View File

@@ -43,40 +43,50 @@ define(
* @constructor * @constructor
* @param $compile Angular's $compile service * @param $compile Angular's $compile service
* @param $document the current document * @param $document the current document
* @param $window the active window
* @param $rootScope Angular's root scope * @param $rootScope Angular's root scope
* @param actionContexr the context in which the action * @param {platform/commonUI/general.PopupService} popupService
* @param actionContext the context in which the action
* should be performed * should be performed
* @implements {Action} * @implements {Action}
*/ */
function ContextMenuAction($compile, $document, $window, $rootScope, agentService, actionContext) { function ContextMenuAction(
$compile,
$document,
$rootScope,
popupService,
agentService,
actionContext
) {
this.$compile = $compile; this.$compile = $compile;
this.agentService = agentService; this.agentService = agentService;
this.actionContext = actionContext; this.actionContext = actionContext;
this.popupService = popupService;
this.getDocument = function () { return $document; }; this.getDocument = function () { return $document; };
this.getWindow = function () { return $window; };
this.getRootScope = function () { return $rootScope; }; this.getRootScope = function () { return $rootScope; };
} }
ContextMenuAction.prototype.perform = function () { ContextMenuAction.prototype.perform = function () {
var $compile = this.$compile, var $compile = this.$compile,
$document = this.getDocument(), $document = this.getDocument(),
$window = this.getWindow(),
$rootScope = this.getRootScope(), $rootScope = this.getRootScope(),
actionContext = this.actionContext, actionContext = this.actionContext,
winDim = [$window.innerWidth, $window.innerHeight], eventCoords = [
eventCoors = [actionContext.event.pageX, actionContext.event.pageY], actionContext.event.pageX,
actionContext.event.pageY
],
menuDim = GestureConstants.MCT_MENU_DIMENSIONS, menuDim = GestureConstants.MCT_MENU_DIMENSIONS,
body = $document.find('body'), body = $document.find('body'),
scope = $rootScope.$new(), scope = $rootScope.$new(),
goLeft = eventCoors[0] + menuDim[0] > winDim[0], initiatingEvent = this.agentService.isMobile() ?
goUp = eventCoors[1] + menuDim[1] > winDim[1], 'touchstart' : 'mousedown',
initiatingEvent = this.agentService.isMobile() ? 'touchstart' : 'mousedown', menu,
menu; popup;
// Remove the context menu // Remove the context menu
function dismiss() { function dismiss() {
menu.remove(); popup.dismiss();
popup = undefined;
scope.$destroy();
body.off("mousedown", dismiss); body.off("mousedown", dismiss);
dismissExistingMenu = undefined; dismissExistingMenu = undefined;
} }
@@ -91,21 +101,17 @@ define(
// Set up the scope, including menu positioning // Set up the scope, including menu positioning
scope.domainObject = actionContext.domainObject; scope.domainObject = actionContext.domainObject;
scope.menuStyle = {}; scope.menuClass = { "context-menu-holder": true };
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
};
// Create the context menu // Create the context menu
menu = $compile(MENU_TEMPLATE)(scope); menu = $compile(MENU_TEMPLATE)(scope);
// Add the menu to the body popup = this.popupService.display(menu, eventCoords, {
body.append(menu); marginX: -menuDim[0],
marginY: -menuDim[1]
});
scope.menuClass['go-left'] = popup.goesLeft();
scope.menuClass['go-up'] = popup.goesUp();
// Stop propagation so that clicks or touches on the menu do not close the menu // Stop propagation so that clicks or touches on the menu do not close the menu
menu.on(initiatingEvent, function (event) { menu.on(initiatingEvent, function (event) {