ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-19 11:17:04 +00:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

[Mobile] Collapse tree on click

Browse Source 
Collapse tree any time a user does an action in the
tree that would select an object; don't only do this
on navigation changes, because this fails to detect
occasions where user clicks the already-navigated-to
object.
This commit is contained in:
Victor Woeltjen 2015-09-21 10:53:45 -07:00
parent ae4313253c
commit 0c1f77cfab
9 changed files with 75 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/browse/bundle.json
View File

@ -29,7 +29,7 @@
"key": "BrowseTreeController",
"implementation": "BrowseTreeController.js",
"priority": "preferred",
"depends": [ "$scope", "navigationService", "agentService" ]
"depends": [ "$scope", "agentService" ]
},
{
"key": "BrowseObjectController",

4
platform/commonUI/browse/res/templates/browse.html
View File

@ -41,6 +41,7 @@
ng-hide="treeModel.search">
<mct-representation key="'tree'"
mct-object="domainObject"
parameters="tree"
ng-model="treeModel">
</mct-representation>
</div>
@ -51,7 +52,8 @@
<div class='split-pane-component items pane right-repr'>
<div class='holder abs l-mobile' id='content-area'>
<mct-representation mct-object="navigatedObject" key="'browse-object'">
<mct-representation mct-object="navigatedObject"
key="'browse-object'">
</mct-representation>
</div>
<div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide"

39
platform/commonUI/browse/src/BrowseTreeController.js
View File

@ -33,28 +33,29 @@ define(
* @constructor
* @memberof platform/commonUI/browse
*/
function BrowseTreeController($scope, navigationService, agentService) {
var object = navigationService.getNavigation(),
self = this;
function BrowseTreeController($scope, agentService) {
var self = this;
this.agentService = agentService;
this.state = true;
// Collapse tree when navigation changes
function changeObject(newObject) {
if (newObject !== object && agentService.isPortrait()) {
object = newObject;
/**
* Callback to invoke when any selection occurs in the tree.
* This controller can be passed in as the `parameters` object
* to the tree representation.
*
* @property {Function} callback
* @memberof platform/commonUI/browse.BrowseTreeController#
*/
this.callback = function () {
// Note that, since this is a callback to pass, this is not
// declared as a method but as a property which happens to
// be a function.
if (agentService.isPhone() && agentService.isPortrait()) {
// On phones, trees should collapse in portrait mode
// when something is navigated-to.
self.state = false;
}
}
// On phones, trees should collapse in portrait mode
// when something is navigated-to.
if (agentService.isPhone()) {
navigationService.addListener(changeObject);
$scope.$on("$destroy", function () {
navigationService.removeListener(changeObject);
});
}
this.state = true;
};
}
/**

37
platform/commonUI/browse/test/BrowseTreeControllerSpec.js
View File

@ -28,7 +28,6 @@ define(
describe("The BrowseTreeController", function () {
var mockScope,
mockNavigationService,
mockAgentService,
mockDomainObjects,
controller;
@ -38,17 +37,12 @@ define(
function instantiateController() {
return new BrowseTreeController(
mockScope,
mockNavigationService,
mockAgentService
);
}
beforeEach(function () {
mockScope = jasmine.createSpyObj("$scope", [ "$on" ]);
mockNavigationService = jasmine.createSpyObj(
"navigationService",
[ "getNavigation", "addListener", "removeListener" ]
);
mockDomainObjects = ['a', 'b'].map(function (id) {
var mockDomainObject = jasmine.createSpyObj(
'domainObject-' + id,
@ -64,8 +58,6 @@ define(
"agentService",
[ "isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape" ]
);
mockNavigationService.getNavigation.andReturn(mockDomainObjects[0]);
});
it("is initially visible", function () {
@ -87,37 +79,12 @@ define(
controller = instantiateController();
expect(controller.visible()).toBeTruthy();
// Simulate a navigation change
mockNavigationService.getNavigation.andReturn(mockDomainObjects[1]);
mockNavigationService.addListener.calls.forEach(function (call) {
call.args[0](mockDomainObjects[1]);
});
// Simulate a change from the tree by invoking controller's
controller.callback();
// Tree should have collapsed
expect(controller.visible()).toBeFalsy();
});
it("detaches registered listeners when the scope is destroyed", function () {
mockAgentService.isMobile.andReturn(true);
mockAgentService.isPhone.andReturn(true);
mockAgentService.isPortrait.andReturn(true);
controller = instantiateController();
// Verify precondition
expect(mockNavigationService.removeListener)
.not.toHaveBeenCalled();
mockScope.$on.calls.forEach(function (call) {
if (call.args[0] === '$destroy') {
call.args[1]();
}
});
expect(mockNavigationService.removeListener)
.toHaveBeenCalledWith(
mockNavigationService.addListener.mostRecentCall.args[0]
);
});
});
}
);

1
platform/commonUI/general/res/templates/subtree.html
View File

@ -29,6 +29,7 @@
<li ng-repeat="child in composition">
<mct-representation key="'tree-node'"
mct-object="child"
parameters="parameters"
ng-model="ngModel">
</mct-representation>
</li>

12
platform/commonUI/general/res/templates/tree-node.html
View File

@ -39,7 +39,7 @@
class="mobile-hide"
key="'label'"
mct-object="domainObject"
ng-click="ngModel.selectedObject = domainObject"
ng-click="treeNode.select()"
>
</mct-representation>
<mct-representation
@ -47,12 +47,9 @@
class="desktop-hide"
key="'label'"
mct-object="domainObject"
ng-click="ngModel.selectedObject =
model.composition === undefined ?
domainObject : ngModel.selectedObject;
ng-click="(model.composition === undefined) && treeNode.select();
toggle.toggle();
treeNode.trackExpansion();
"
treeNode.trackExpansion();"
>
</mct-representation>
@ -60,7 +57,7 @@
mct-device="mobile"
class='ui-symbol view-control'
ng-model="ngModel"
ng-click="ngModel.selectedObject = domainObject"
ng-click="treeNode.select()"
>
}
</span>
@ -73,6 +70,7 @@
<mct-representation key="'subtree'"
ng-model="ngModel"
parameters="parameters"
mct-object="treeNode.hasBeenExpanded() && domainObject">
</mct-representation>

3
platform/commonUI/general/res/templates/tree.html
View File

@ -23,7 +23,8 @@
<li>
<mct-representation key="'tree-node'"
mct-object="domainObject"
ng-model="ngModel">
ng-model="ngModel"
parameters="parameters">
</mct-representation>
</li>
</ul>

25
platform/commonUI/general/src/controllers/TreeNodeController.js
View File

@ -48,6 +48,15 @@ define(
* node expansion when this tree node's _subtree_ will contain
* the navigated object (recursively, this becomes an
* expand-to-show-navigated-object behavior.)
*
* Finally, if a `callback` property is passed in through the
* `parameters` attribute of the `tree-node`, that callback
* will be invoked whenever a user clicks in a manner which
* would result in a selection. This callback is invoked
* even if the selection does not change (if you are only
* interested in changes, watch the `selectedObject` property
* of the object passed in `ng-model` instead.)
*
* @memberof platform/commonUI/general
* @constructor
*/
@ -140,6 +149,22 @@ define(
$scope.$watch("domainObject", checkSelection);
}
/**
* Select the domain object represented by this node in the tree.
* This will both update the `selectedObject` property in
* the object passed in via `ng-model`, and will fire any `callback`
* passed in via `parameters`.
*/
TreeNodeController.prototype.select = function () {
if (this.$scope.ngModel) {
this.$scope.ngModel.selectedObject =
this.$scope.domainObject;
}
if ((this.$scope.parameters || {}).callback) {
this.$scope.parameters.callback(this.$scope.domainObject);
}
};
/**
* This method should be called when a node is expanded
* to record that this has occurred, to support one-time

17
platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
View File

@ -47,7 +47,6 @@ define(
mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on", "$emit"]);
mockTimeout = jasmine.createSpy("$timeout");
mockAgentService = jasmine.createSpyObj("agentService", ["isMobile", "isPhone", "getOrientation"]);
mockNgModel = jasmine.createSpyObj("ngModel", ["selectedObject"]);
mockDomainObject = jasmine.createSpyObj(
"domainObject",
[ "getId", "getCapability", "getModel", "useCapability" ]
@ -196,6 +195,22 @@ define(
expect(controller.isSelected()).toBeFalsy();
});
it("exposes selected objects in scope", function () {
mockScope.domainObject = mockDomainObject;
mockScope.ngModel = {};
controller.select();
expect(mockScope.ngModel.selectedObject)
.toEqual(mockDomainObject);
});
it("invokes optional callbacks upon selection", function () {
mockScope.parameters =
{ callback: jasmine.createSpy('callback') };
controller.select();
expect(mockScope.parameters.callback).toHaveBeenCalled();
});
});
}
);