ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-01 08:48:28 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Mobile] Context Menu

Browse Source 
Context menu next to object header
now dismisses when touching away
from it. Also, when long touching
an object, the context menu appears.
Set on 500ms timeout.
This commit is contained in:
Shivam Dave 2015-07-28 17:09:15 -07:00
parent 356fa73c91
commit 84b9e4d781
4 changed files with 46 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
platform/commonUI/inspect/src/gestures/InfoGesture.js
View File

@ -42,22 +42,13 @@ define(
var dismissBubble,
pendingBubble,
mousePosition,
touchPosition,
scopeOff,
touchDELAY = 500;
scopeOff;
function trackPosition(event) {
// Record mouse position, so bubble can be shown at latest
// mouse position (not just where the mouse entered)
mousePosition = [ event.clientX, event.clientY ];
}
// function trackTouchPosition(event) {
// var tEvent = event.changedTouches[0];
// // Record mouse position, so bubble can be shown at latest
// // mouse position (not just where the mouse entered)
// touchPosition = [ tEvent.clientX + 44, tEvent.clientY ];
// }
function hideBubble() {
// If a bubble is showing, dismiss it
@ -76,7 +67,6 @@ define(
// Also clear mouse position so we don't have a ton of tiny
// arrays allocated while user mouses over things
mousePosition = undefined;
touchPosition = undefined;
}
function showBubble(event) {
@ -102,23 +92,6 @@ define(
element.on('mouseleave', hideBubble);
}
// function showTouchBubble(event) {
// // Makes sure user is only touching one place
// if (event.touches.length < 2) {
// trackTouchPosition(event);
// pendingBubble = $timeout(function () {
// dismissBubble = infoService.display(
// "info-table",
// domainObject.getModel().name,
// domainObject.useCapability('metadata'),
// touchPosition
// );
// }, touchDELAY);
//
// element.on('touchend', hideBubble);
// }
// }
// Checks if you are on a mobile device, if the device is
// not mobile (queryService.isMobile() = false), then
// the pendingBubble and therefore hovering is allowed

4
platform/representation/bundle.json
View File

@ -26,7 +26,7 @@
{
"key": "menu",
"implementation": "gestures/ContextMenuGesture.js",
"depends": ["queryService"]
"depends": ["$timeout", "queryService"]
}
],
"components": [
@ -54,7 +54,7 @@
{
"key": "menu",
"implementation": "actions/ContextMenuAction.js",
"depends": [ "$compile", "$document", "$window", "$rootScope" ]
"depends": [ "$compile", "$document", "$window", "$rootScope", "queryService" ]
}
]
}

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

@ -47,7 +47,7 @@ define(
* @param actionContexr the context in which the action
* should be performed
*/
function ContextMenuAction($compile, $document, $window, $rootScope, actionContext) {
function ContextMenuAction($compile, $document, $window, $rootScope, queryService, actionContext) {
function perform() {
var winDim = [$window.innerWidth, $window.innerHeight],
@ -94,13 +94,26 @@ define(
body.append(menu);
// Stop propagation so that clicks on the menu do not close the menu
menu.on('mousedown', function (event) {
event.stopPropagation();
});
// Stop propagation so that touches on the menu do not close the menu
if (!queryService.isMobile(navigator.userAgent)) {
menu.on('mousedown', function (event) {
event.stopPropagation();
});
} else if (queryService.isMobile(navigator.userAgent)) {
menu.on('touchstart', function (event) {
event.stopPropagation();
});
}
// Dismiss the menu when body is clicked elsewhere
// Dismiss the menu when body is clicked/touched elsewhere
// ('mousedown' because 'click' breaks left-click context menus)
body.on('mousedown', dismiss);
// ('touchstart' because 'touch' breaks context menus up)
if (!queryService.isMobile(navigator.userAgent)) {
body.on('mousedown', dismiss);
} else if (queryService.isMobile(navigator.userAgent)) {
body.on('touchstart', dismiss);
}
// Don't launch browser's context menu
actionContext.event.preventDefault();

26
platform/representation/src/gestures/ContextMenuGesture.js
View File

@ -39,9 +39,11 @@ define(
* @param {DomainObject} domainObject the object on which actions
* in the context menu will be performed
*/
function ContextMenuGesture(queryService, element, domainObject) {
function ContextMenuGesture($timeout, queryService, element, domainObject) {
var actionContext,
stop;
stop,
isPressing,
longTouchTime = 500;
// When context menu event occurs, show object actions instead
if (!queryService.isMobile(navigator.userAgent)) {
@ -49,6 +51,26 @@ define(
actionContext = {key: 'menu', domainObject: domainObject, event: event};
stop = domainObject.getCapability('action').perform(actionContext);
});
} else if (queryService.isMobile(navigator.userAgent)) {
// If on mobile device, then start timeout for the single touch event
// during the timeout 'isPressing' is true.
element.on('touchstart', function (event) {
if (event.touches.length < 2) {
isPressing = true;
// After the timeout, if 'isPressing' is
// true, display context menu for object
$timeout(function () {
if (isPressing) {
actionContext = {key: 'menu', domainObject: domainObject, event: event};
stop = domainObject.getCapability('action').perform(actionContext);
}
}, longTouchTime);
}
});
// Whenever the touch event ends, 'isPressing' is false.
element.on('touchend', function (event) {
isPressing = false;
});
}
return {