[Layout] Refactor view switcher

Refactor view switcher to simplify it; treat it
as a representation of a domain object that modifies
an ng-model. This simplifies reuse, e.g. in frames
within a layout. WTD-535.

platform/commonUI/browse/bundle.json

@@ -16,11 +16,6 @@
                 "implementation": "BrowseController.js",
                 "depends": [ "$scope", "objectService", "navigationService" ]
             },
-            {
-                "key": "ViewSwitcherController",
-                "implementation": "ViewSwitcherController.js",
-                "depends": [ "$scope" ]
-            },
             {
                 "key": "CreateMenuController",
                 "implementation": "creation/CreateMenuController",

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

@@ -1,4 +1,4 @@
-<span ng-controller="ViewSwitcherController">
+<span>
     <div class="object-browse-bar bar abs">
 
         <div class="items-select left abs">
@@ -13,14 +13,17 @@
                                 parameters="{ category: 'view-control' }">
             </mct-representation>
 
-            <mct-include key="'switcher'" ng-model="switcher" ng-if="switcher.options.length > 0">
+            <mct-representation key="'switcher'"
-            </mct-include>
+                                mct-object="domainObject"
+                                ng-model="representation">
+            </mct-representation>
         </div>
 
     </div>
 
     <div class='object-holder abs vscroll'>
-        <mct-representation key="switcher.selected.key" mct-object="domainObject">
+        <mct-representation key="representation.selected.key"
+                            mct-object="domainObject">
         </mct-representation>
     </div>
 </span>

platform/commonUI/general/bundle.json

@@ -8,10 +8,6 @@
                 "key": "bottombar",
                 "templateUrl": "templates/bottombar.html"
             },
-            {
-                "key": "switcher",
-                "templateUrl": "templates/controls/switcher.html"
-            },
             {
                 "key": "action-button",
                 "templateUrl": "templates/controls/action-button.html"
@@ -41,6 +37,11 @@
                 "key": "ClickAwayController",
                 "implementation": "ClickAwayController.js",
                 "depends": [ "$scope", "$document" ]
+            },
+            {
+                "key": "ViewSwitcherController",
+                "implementation": "ViewSwitcherController.js",
+                "depends": [ "$scope" ]
             }
         ],
         "directives": [
@@ -93,6 +94,11 @@
                 "key": "context-menu",
                 "templateUrl": "templates/menu/context-menu.html",
                 "uses": [ "action" ]
+            },
+            {
+                "key": "switcher",
+                "templateUrl": "templates/controls/switcher.html",
+                "uses": [ "view" ]
             }
         ]
     }

platform/commonUI/general/res/templates/controls/switcher.html

@@ -1,28 +1,33 @@
-<div class="menu-element btn icon-btn very-subtle btn-menu dropdown click-invoke"
+<span ng-controller="ViewSwitcherController">
-     ng-if="ngModel.options.length > 1">
 
-    <span ng-click="ngModel.expanded = !ngModel.expanded">
+    <div class="menu-element btn icon-btn very-subtle btn-menu dropdown click-invoke"
+         ng-if="view.length > 1"
+         ng-controller="ClickAwayController as toggle">
+
+        <span ng-click="toggle.toggle()">
+            <span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span>
+            <span>{{ngModel.selected.name}}</span>
+            <span class='ui-symbol icon invoke-menu'>v</span>
+        </span>
+
+        <div class="menu dropdown" ng-show="toggle.isActive()">
+            <ul>
+                <li ng-repeat="option in view">
+                    <a href="" ng-click="ngModel.selected = option; toggle.setState(false)">
+                        <span class="ui-symbol type-icon icon">
+                            {{option.glyph}}
+                        </span>
+                        {{option.name}}
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <span class="btn"
+          ng-if="view.length === 1">
         <span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span>
         <span>{{ngModel.selected.name}}</span>
-        <span class='ui-symbol icon invoke-menu'>v</span>
     </span>
 
-    <div class="menu dropdown" ng-show="ngModel.expanded">
-        <ul>
-            <li ng-repeat="option in ngModel.options">
-                <a href="" ng-click="ngModel.selected = option; ngModel.expanded = false;">
-                    <span class="ui-symbol type-icon icon">
-                        {{option.glyph}}
-                    </span>
-                    {{option.name}}
-                </a>
-            </li>
-        </ul>
-    </div>
-</div>
-
-<span class="btn"
-      ng-if="ngModel.options.length === 1">
-    <span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span>
-    <span>{{ngModel.selected.name}}</span>
 </span>

platform/commonUI/general/src/ViewSwitcherController.js

@@ -32,15 +32,10 @@ define(
 
             // Get list of views, read from capability
             function updateOptions(views) {
-                var options = views || [];
+                $scope.ngModel.selected = findMatchingOption(
-
+                    views || [],
-                $scope.switcher = {
+                    ($scope.ngModel || {}).selected
-                    options: options,
+                );
-                    selected: findMatchingOption(
-                        options,
-                        ($scope.switcher || {}).selected
-                    )
-                };
             }
 
             // Update view options when the in-scope results of using the