From 84b9e4d781a8d7a6c89ede45bd9a57ebd33b390f Mon Sep 17 00:00:00 2001 From: Shivam Dave Date: Tue, 28 Jul 2015 17:09:15 -0700 Subject: [PATCH] [Mobile] Context Menu 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. --- .../inspect/src/gestures/InfoGesture.js | 29 +------------------ platform/representation/bundle.json | 4 +-- .../src/actions/ContextMenuAction.js | 25 ++++++++++++---- .../src/gestures/ContextMenuGesture.js | 26 +++++++++++++++-- 4 files changed, 46 insertions(+), 38 deletions(-) diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js index 3634042212..4792445f6b 100644 --- a/platform/commonUI/inspect/src/gestures/InfoGesture.js +++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js @@ -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 diff --git a/platform/representation/bundle.json b/platform/representation/bundle.json index b8370f1682..3eeaf2d258 100644 --- a/platform/representation/bundle.json +++ b/platform/representation/bundle.json @@ -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" ] } ] } diff --git a/platform/representation/src/actions/ContextMenuAction.js b/platform/representation/src/actions/ContextMenuAction.js index 390531053e..244d6a0b0d 100644 --- a/platform/representation/src/actions/ContextMenuAction.js +++ b/platform/representation/src/actions/ContextMenuAction.js @@ -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(); diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js index 34e11e039c..576c5eb66f 100644 --- a/platform/representation/src/gestures/ContextMenuGesture.js +++ b/platform/representation/src/gestures/ContextMenuGesture.js @@ -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 {