[Mobile] Collapse tree on click

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.

platform/commonUI/browse/bundle.json

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

platform/commonUI/browse/res/templates/browse.html

@@ -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"

platform/commonUI/browse/src/BrowseTreeController.js

@@ -33,28 +33,29 @@ define(
          * @constructor
          * @memberof platform/commonUI/browse
          */
-        function BrowseTreeController($scope, navigationService, agentService) {
+        function BrowseTreeController($scope, agentService) {
-            var object = navigationService.getNavigation(),
+            var self = this;
-                self = this;
+            this.agentService = agentService;
+            this.state = true;
 
-            // Collapse tree when navigation changes
+            /**
-            function changeObject(newObject) {
+             * Callback to invoke when any selection occurs in the tree.
-                if (newObject !== object && agentService.isPortrait()) {
+             * This controller can be passed in as the `parameters` object
-                    object = newObject;
+             * 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;
         }
 
         /**

platform/commonUI/browse/test/BrowseTreeControllerSpec.js

@@ -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
+                // Simulate a change from the tree by invoking controller's
-                mockNavigationService.getNavigation.andReturn(mockDomainObjects[1]);
+                controller.callback();
-                mockNavigationService.addListener.calls.forEach(function (call) {
-                    call.args[0](mockDomainObjects[1]);
-                });
 
                 // 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]
-                    );
-            });
         });
     }
 );

platform/commonUI/general/res/templates/subtree.html

@@ -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>

platform/commonUI/general/res/templates/tree-node.html

@@ -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 =
+                ng-click="(model.composition === undefined) && treeNode.select();
-                              model.composition === undefined ?
-                                  domainObject : ngModel.selectedObject;
                           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>
 

platform/commonUI/general/res/templates/tree.html

@@ -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>

platform/commonUI/general/src/controllers/TreeNodeController.js

@@ -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

platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js

@@ -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();
+            });
+
         });
     }
 );