diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html index b4003a8a9b..c718bed951 100644 --- a/platform/commonUI/browse/res/templates/back-arrow.html +++ b/platform/commonUI/browse/res/templates/back-arrow.html @@ -22,6 +22,7 @@ + ng-click='backArrow()' + ng-class="checkRoot(); atRoot ? 'mobile-back-hide' : 'mobile-back-unhide'"> < diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html index 884f4fa888..84cc087bbc 100644 --- a/platform/commonUI/browse/res/templates/browse/object-header.html +++ b/platform/commonUI/browse/res/templates/browse/object-header.html @@ -21,10 +21,10 @@ -->
- + {{type.getGlyph()}} {{parameters.mode}} - {{type.getName()}} + {{type.getName()}} {{model.name}} diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js index cc4f06b243..c61260a400 100644 --- a/platform/commonUI/browse/src/BrowseController.js +++ b/platform/commonUI/browse/src/BrowseController.js @@ -132,9 +132,27 @@ define( // is not the root, then user is navigated to // parent function navigateToParent() { + var parent = navigationService.getNavigation().getCapability('context').getParent(), + grandparent; + if (parent.getId() !== ROOT_ID) { + grandparent = parent.getCapability('context').getParent().getId(); + navigateTo(parent); + if (grandparent && grandparent !== ROOT_ID) { + $scope.atRoot = false; + } else { + $scope.atRoot = true; + } + } else { + $scope.atRoot = true; + } + } + + function checkRoot() { var parent = navigationService.getNavigation().getCapability('context').getParent(); if (parent.getId() !== ROOT_ID) { - navigateTo(parent); + $scope.atRoot = false; + } else { + $scope.atRoot = true; } } @@ -170,6 +188,8 @@ define( }); $scope.backArrow = navigateToParent; + + $scope.checkRoot = checkRoot; } diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js index 181121574a..722b7b4132 100644 --- a/platform/commonUI/browse/test/BrowseControllerSpec.js +++ b/platform/commonUI/browse/test/BrowseControllerSpec.js @@ -39,6 +39,9 @@ define( mockUrlService, mockDomainObject, mockNextObject, + mockParentContext, + mockParent, + mockGrandparent, controller; function mockPromise(value) { @@ -88,6 +91,17 @@ define( "nextObject", [ "getId", "getCapability", "getModel", "useCapability" ] ); + + + mockParentContext = jasmine.createSpyObj('context', ['getParent']); + mockParent = jasmine.createSpyObj( + "domainObject", + [ "getId", "getCapability", "getModel", "useCapability" ] + ); + mockGrandparent = jasmine.createSpyObj( + "domainObject", + [ "getId", "getCapability", "getModel", "useCapability" ] + ); mockObjectService.getObjects.andReturn(mockPromise({ ROOT: mockRootObject @@ -245,24 +259,52 @@ define( ); }); + it("checks if the user is current navigated to the root", function () { + var mockContext = jasmine.createSpyObj('context', ['getParent']); + + mockRoute.current.params.ids = "ROOT/mine"; + mockParent.getId.andReturn("ROOT"); + + mockDomainObject.getCapability.andCallFake(function (c) { + return c === 'context' && mockContext; + }); + + mockNavigationService.getNavigation.andReturn(mockDomainObject); + mockContext.getParent.andReturn(mockParent); + mockParent.getCapability.andCallFake(function (c) { + return c === 'context' && mockParentContext; + }); + mockParentContext.getParent.andReturn(mockGrandparent); + + controller = new BrowseController( + mockScope, + mockRoute, + mockLocation, + mockObjectService, + mockNavigationService + ); + + mockScope.checkRoot(); + + mockRoute.current.params.ids = "mine/junk"; + mockParent.getId.andReturn("mine"); + + controller = new BrowseController( + mockScope, + mockRoute, + mockLocation, + mockObjectService, + mockNavigationService + ); + + mockScope.checkRoot(); + }); + // Mocks the back arrow call that // lets the html code know the back // arrow navigation needs to be done it("calls the backArrow function", function () { - var mockContext = jasmine.createSpyObj('context', ['getParent']), - mockParent = jasmine.createSpyObj( - "domainObject", - [ "getId", "getCapability", "getModel", "useCapability" ] - ); - mockNavigationService = jasmine.createSpyObj( - "navigationService", - [ - "getNavigation", - "setNavigation", - "addListener", - "removeListener" - ] - ); + var mockContext = jasmine.createSpyObj('context', ['getParent']); mockRoute.current.params.ids = "mine/junk"; mockParent.getId.andReturn("mine"); @@ -273,6 +315,36 @@ define( mockNavigationService.getNavigation.andReturn(mockDomainObject); mockContext.getParent.andReturn(mockParent); + mockParent.getCapability.andCallFake(function (c) { + return c === 'context' && mockParentContext; + }); + mockParentContext.getParent.andReturn(mockGrandparent); + + controller = new BrowseController( + mockScope, + mockRoute, + mockLocation, + mockObjectService, + mockNavigationService + ); + + mockScope.backArrow(); + + mockRoute.current.params.ids = "mine/lessjunk/morejunk"; + mockGrandparent.getId.andReturn("mine"); + + controller = new BrowseController( + mockScope, + mockRoute, + mockLocation, + mockObjectService, + mockNavigationService + ); + + mockScope.backArrow(); + + mockRoute.current.params.ids = "ROOT/mine"; + mockParent.getId.andReturn("ROOT"); controller = new BrowseController( mockScope, diff --git a/platform/commonUI/edit/bundle.json b/platform/commonUI/edit/bundle.json index 2aed41c2ee..c216a9d877 100644 --- a/platform/commonUI/edit/bundle.json +++ b/platform/commonUI/edit/bundle.json @@ -59,7 +59,7 @@ "glyph": "Z", "name": "Remove", "description": "Remove this object from its containing object.", - "depends": [ "$q" ] + "depends": [ "$q", "navigationService" ] }, { "key": "save", diff --git a/platform/commonUI/edit/src/actions/RemoveAction.js b/platform/commonUI/edit/src/actions/RemoveAction.js index fbf47d22d9..9e0e723200 100644 --- a/platform/commonUI/edit/src/actions/RemoveAction.js +++ b/platform/commonUI/edit/src/actions/RemoveAction.js @@ -40,7 +40,7 @@ define( * @constructor * @memberof module:editor/actions/remove-action */ - function RemoveAction($q, context) { + function RemoveAction($q, navigationService, context) { var object = (context || {}).domainObject; /** @@ -69,14 +69,25 @@ define( return persistence && persistence.persist(); } + // Checks current object with object being removed + function checkCurrentObjectNavigation(object, parent) { + var currentObj = navigationService.getNavigation(); + if (currentObj.getId() === object.getId()) { + navigationService.setNavigation(parent); + } + } + /** * Remove the object from its parent, as identified by its context * capability. - * @param {ContextCapability} contextCapability the "context" capability - * of the domain object being removed. + * @param {object} domain object being removed contextCapability + gotten from the "context" capability of this object */ - function removeFromContext(contextCapability) { - var parent = contextCapability.getParent(); + function removeFromContext(object) { + var contextCapability = object.getCapability('context'), + parent = contextCapability.getParent(); + // Navigates to parent if deleting current object + checkCurrentObjectNavigation(object, parent); $q.when( parent.useCapability('mutation', doMutate) ).then(function () { @@ -91,7 +102,7 @@ define( * fulfilled when the action has completed. */ perform: function () { - return $q.when(object.getCapability('context')) + return $q.when(object) .then(removeFromContext); } }; diff --git a/platform/commonUI/edit/test/actions/RemoveActionSpec.js b/platform/commonUI/edit/test/actions/RemoveActionSpec.js index d23542f0ee..e6b667d8b2 100644 --- a/platform/commonUI/edit/test/actions/RemoveActionSpec.js +++ b/platform/commonUI/edit/test/actions/RemoveActionSpec.js @@ -28,6 +28,7 @@ define( describe("The Remove action", function () { var mockQ, + mockNavigationService, mockDomainObject, mockParent, mockContext, @@ -64,19 +65,32 @@ define( }, useCapability: function (k, v) { return capabilities[k].invoke(v); + }, + getId: function () { + return "test"; } }; mockContext = jasmine.createSpyObj("context", [ "getParent" ]); mockMutation = jasmine.createSpyObj("mutation", [ "invoke" ]); mockPersistence = jasmine.createSpyObj("persistence", [ "persist" ]); mockType = jasmine.createSpyObj("type", [ "hasFeature" ]); - + mockNavigationService = jasmine.createSpyObj( + "navigationService", + [ + "getNavigation", + "setNavigation", + "addListener", + "removeListener" + ] + ); + mockNavigationService.getNavigation.andReturn(mockDomainObject); + + mockDomainObject.getId.andReturn("test"); mockDomainObject.getCapability.andReturn(mockContext); mockContext.getParent.andReturn(mockParent); mockType.hasFeature.andReturn(true); - capabilities = { mutation: mockMutation, persistence: mockPersistence, @@ -88,7 +102,7 @@ define( actionContext = { domainObject: mockDomainObject }; - action = new RemoveAction(mockQ, actionContext); + action = new RemoveAction(mockQ, mockNavigationService, actionContext); }); it("only applies to objects with parents", function () { diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index 4d69e7e790..ce8878b4c3 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -390,12 +390,13 @@ height: 50px; } /* line 61, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .item-main .item-type { - line-height: 40px; } - /* line 65, ../sass/mobile/_item.scss */ + line-height: 40px; + height: auto; } + /* line 66, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .title { margin-right: 10px; line-height: 25px; } - /* line 69, ../sass/mobile/_item.scss */ + /* line 70, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .details { margin-right: 10px; line-height: 0px; } } @@ -404,15 +405,15 @@ .items-holder .item.grid-item { width: 100%; height: 66.66667px; } - /* line 80, ../sass/mobile/_item.scss */ + /* line 81, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .item-main .item-type { font-size: 30px; line-height: 50px; } - /* line 85, ../sass/mobile/_item.scss */ + /* line 86, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .title { margin-right: 10px; line-height: 38px; } - /* line 89, ../sass/mobile/_item.scss */ + /* line 90, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .details { margin-right: 10px; line-height: 0px; } } diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 394e6ac721..e894e4d472 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -901,20 +901,64 @@ mct-container { display: none; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 184, ../sass/mobile/_layout.scss */ - .mobile-unhide { - display: inline-block; } } + /* line 183, ../sass/mobile/_layout.scss */ + .mobile-important-hide { + display: none !important; } } + +@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { + /* line 189, ../sass/mobile/_layout.scss */ + .mobile-back-hide { + pointer-events: none; + -moz-transition-property: opacity; + -o-transition-property: opacity; + -webkit-transition-property: opacity; + transition-property: opacity; + -moz-transition-duration: 0.4s; + -o-transition-duration: 0.4s; + -webkit-transition-duration: 0.4s; + transition-duration: 0.4s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + opacity: 0; } } + +@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { + /* line 198, ../sass/mobile/_layout.scss */ + .mobile-back-unhide { + pointer-events: all; + -moz-transition-property: opacity; + -o-transition-property: opacity; + -webkit-transition-property: opacity; + transition-property: opacity; + -moz-transition-duration: 0.4s; + -o-transition-duration: 0.4s; + -webkit-transition-duration: 0.4s; + transition-duration: 0.4s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + opacity: 1; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 191, ../sass/mobile/_layout.scss */ + /* line 207, ../sass/mobile/_layout.scss */ .phone-hide { display: none; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 197, ../sass/mobile/_layout.scss */ + /* line 213, ../sass/mobile/_layout.scss */ .tree-holder { overflow-x: hidden !important; } } +@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { + /* line 218, ../sass/mobile/_layout.scss */ + .mobile-disable-select { + -moz-user-select: -moz-none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; } } + /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 01c5a20921..a0b8f7286d 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -342,14 +342,16 @@ ul.tree { ul.tree li span.tree-item .view-control { position: absolute; right: 13px; - font-size: 1.8em; } - /* line 42, ../sass/mobile/_tree.scss */ + font-size: 1.8em; + right: 0px; + width: auto; } + /* line 44, ../sass/mobile/_tree.scss */ ul.tree li span.tree-item .label { left: 3px; font-size: 1.2em; } - /* line 49, ../sass/mobile/_tree.scss */ + /* line 51, ../sass/mobile/_tree.scss */ ul.tree li span.tree-item .label .title-label { right: 16.9px; } - /* line 58, ../sass/mobile/_tree.scss */ + /* line 60, ../sass/mobile/_tree.scss */ ul.tree ul.tree { margin-left: 7px; } } diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss index 22a641d174..9090f8604a 100644 --- a/platform/commonUI/general/res/sass/mobile/_item.scss +++ b/platform/commonUI/general/res/sass/mobile/_item.scss @@ -60,6 +60,7 @@ .item-main { .item-type { line-height: $phone-itemHeight * .8; + height: auto; } } .title { diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index 806c7547f3..3f4fc062d3 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -180,10 +180,26 @@ } } -// Hides objects on phone and tablet -.mobile-unhide { +.mobile-important-hide { @include phoneandtablet { - display: inline-block; + display: none !important; + } +} + +.mobile-back-hide { + @include phoneandtablet { + pointer-events: none; + @include trans-prop-nice(opacity, .4s); + opacity: 0; + } +} + +// Hides objects on phone and tablet +.mobile-back-unhide { + @include phoneandtablet { + pointer-events: all; + @include trans-prop-nice(opacity, .4s); + opacity: 1; } } @@ -199,3 +215,8 @@ overflow-x: hidden !important; } } +.mobile-disable-select { + @include phoneandtablet { + @include user-select(none); + } +} diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index 37c7ad6a70..fcdc70666e 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -37,6 +37,8 @@ ul.tree { position: absolute; right: $mobile-treeRight; font-size: 1.8em; + right: 0px; + width: auto; } .label { diff --git a/platform/commonUI/general/res/templates/bottombar.html b/platform/commonUI/general/res/templates/bottombar.html index fe275a49da..4da2686fa1 100644 --- a/platform/commonUI/general/res/templates/bottombar.html +++ b/platform/commonUI/general/res/templates/bottombar.html @@ -19,7 +19,7 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
+
-
+
    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 { diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js index 73b877ddc3..c1c6dc51ca 100644 --- a/platform/representation/test/actions/ContextMenuActionSpec.js +++ b/platform/representation/test/actions/ContextMenuActionSpec.js @@ -43,11 +43,14 @@ define( mockBody, mockWindow, mockRootScope, + mockQueryService, mockScope, mockElement, mockDomainObject, mockEvent, mockActionContext, + mockNavigator, + mockStopPropagation, action; beforeEach(function () { @@ -58,10 +61,11 @@ define( mockBody = jasmine.createSpyObj("body", JQLITE_FUNCTIONS); mockWindow = { innerWidth: MENU_DIMENSIONS[0] * 4, innerHeight: MENU_DIMENSIONS[1] * 4 }; mockRootScope = jasmine.createSpyObj("$rootScope", ["$new"]); + mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]); mockScope = {}; mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS); mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS); - mockEvent = jasmine.createSpyObj("event", ["preventDefault"]); + mockEvent = jasmine.createSpyObj("event", ["preventDefault", "stopPropagation"]); mockEvent.pageX = 0; mockEvent.pageY = 0; @@ -71,12 +75,13 @@ define( mockRootScope.$new.andReturn(mockScope); mockActionContext = {key: 'menu', domainObject: mockDomainObject, event: mockEvent}; - + action = new ContextMenuAction( mockCompile, mockDocument, mockWindow, mockRootScope, + mockQueryService, mockActionContext ); }); @@ -135,6 +140,43 @@ define( // Listener should have been detached from body expect(mockBody.off).toHaveBeenCalled(); }); + + it("keeps a menu when menu is clicked", function () { + // Show the menu + action.perform(); + + // Find and fire body's mousedown listener +// mockMenu.on.calls.forEach(function (call) { +// if (call.args[0] === 'mousedown') { +// call.args[1](); +// } +// }); + + // Menu should have been removed + expect(mockMenu.remove).not.toHaveBeenCalled(); + + // Listener should have been detached from body + expect(mockBody.off).not.toHaveBeenCalled(); + }); + + it("mobile", function () { + mockQueryService.isMobile.andReturn(true); + action = new ContextMenuAction( + mockCompile, + mockDocument, + mockWindow, + mockRootScope, + mockQueryService, + mockActionContext + ); + action.perform(); + +// mockMenu.on.calls.forEach(function (call) { +// if (call.args[0] === 'touchstart') { +// call.args[1](); +// } +// }); + }); }); } ); \ No newline at end of file diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js index 655e68ff2e..b3b7e8de8c 100644 --- a/platform/representation/test/gestures/ContextMenuGestureSpec.js +++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js @@ -35,7 +35,8 @@ define( describe("The 'context menu' gesture", function () { - var mockElement, + var mockTimeout, + mockElement, mockQueryService, mockDomainObject, mockEvent, @@ -44,11 +45,12 @@ define( beforeEach(function () { mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS); + mockTimeout = jasmine.createSpy("$timeout"); + mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]); mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS); mockEvent = jasmine.createSpyObj("event", ["preventDefault"]); - mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]); - gesture = new ContextMenuGesture(mockQueryService, mockElement, mockDomainObject); + gesture = new ContextMenuGesture(mockTimeout, mockQueryService, mockElement, mockDomainObject); // Capture the contextmenu callback fireGesture = mockElement.on.mostRecentCall.args[1]; @@ -72,6 +74,19 @@ define( mockDomainObject.calls ); }); + + it("mobile", function () { + mockQueryService.isMobile.andReturn(true); + gesture = new ContextMenuGesture(mockTimeout, mockQueryService, mockElement, mockDomainObject); + + // Capture the contextmenu callback + fireGesture = mockElement.on.mostRecentCall.args[1]; + + expect(mockElement.on).toHaveBeenCalledWith( + "touchstart", + jasmine.any(Function) + ); + }); }); } ); \ No newline at end of file