refactors out the usage of 'ui.stickyNavigation' to use appState

src/Umbraco.Web.UI.Client/src/common/directives/umbsections.directive.js

@@ -14,9 +14,9 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
 			scope.maxSections = 7;
 			scope.overflowingSections = 0;
             scope.sections = [];
-            scope.nav = navigationService;
             scope.currentSection = appState.getSectionState("currentSection");
             scope.showTray = appState.getGlobalState("showTray");
+            scope.stickyNavigation = appState.getGlobalState("stickyNavigation");
             scope.needTray = false;
 
 			function loadSections(){
@@ -42,11 +42,14 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
 				});
 			}
 
-            //Listen for showTray changes
+            //Listen for global state changes
 			scope.$on("appState.globalState.changed", function (e, args) {
 			    if (args.key === "showTray") {
 			        scope.showTray = args.value;
 			    }
+			    if (args.key === "stickyNavigation") {
+			        scope.stickyNavigation = args.value;
+			    }
 			});
 
 			//When the user logs in

src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js

@@ -14,7 +14,8 @@ function appState($rootScope) {
     var globalState = {
         showNavigation: null,
         touchDevice: null,
-        showTray: null
+        showTray: null,
+        stickyNavigation: null
     };
     
     var sectionState = {

src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js

@@ -19,10 +19,10 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
 
     var minScreenSize = 1100;
 
-    //Define all sub-properties for the UI object here
+    //TODO: Once most of the state vars have been refactored out to use appState, this UI object will be internal ONLY and will not be
+    // exposed from this service.
     var ui = {
-        tablet: false,
-        stickyNavigation: false,
+        tablet: false,        
         currentPath: undefined,
         currentTree: undefined,
         treeEventHandler: undefined,
@@ -34,10 +34,7 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
         //a string/name reference for the currently set ui mode
         currentMode: "default"
     };
-
-    $rootScope.$on("closeDialogs", function() {
-    });
-
+    
     function setTreeMode() {
         ui.tablet = ($(window).width() <= minScreenSize);
 
@@ -51,7 +48,7 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
             appState.setGlobalState("showNavigation", true);
             appState.setMenuState("showMenu", false);
             appState.setMenuState("showMenuDialog", false);
-            ui.stickyNavigation = false;
+            appState.setGlobalState("stickyNavigation", false);
             appState.setGlobalState("showTray", false);
             
             //$("#search-form input").focus();    
@@ -65,14 +62,14 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
             break;
         case 'dialog':
             ui.currentMode = "dialog";
-            ui.stickyNavigation = true;
+            appState.setGlobalState("stickyNavigation", true);
             appState.setGlobalState("showNavigation", true);
             appState.setMenuState("showMenu", false);
             appState.setMenuState("showMenuDialog", true);
             break;
         case 'search':
             ui.currentMode = "search";
-            ui.stickyNavigation = false;
+            appState.setGlobalState("stickyNavigation", false);
             appState.setGlobalState("showNavigation", true);
             appState.setMenuState("showMenu", false);
             appState.setSectionState("showSearchResults", true);
@@ -89,7 +86,7 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
             appState.setMenuState("showMenu", false);
             appState.setMenuState("showMenuDialog", false);
             appState.setSectionState("showSearchResults", false);
-            ui.stickyNavigation = false;
+            appState.setGlobalState("stickyNavigation", false);
             appState.setGlobalState("showTray", false);
 
             if (ui.tablet) {
@@ -403,7 +400,7 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
          */
         hideTree: function() {
 
-            if (this.ui.tablet && !this.ui.stickyNavigation) {
+            if (this.ui.tablet && !appState.getGlobalState("stickyNavigation")) {
                 //reset it to whatever is in the url
                 appState.setSectionState("currentSection", $routeParams.section);
                 setMode("default-hidesectiontree");

src/Umbraco.Web.UI.Client/src/views/common/navigation.controller.js

@@ -68,7 +68,7 @@ function NavigationController($scope, $rootScope, $location, $log, $routeParams,
 
     //This reacts to clicks passed to the body element which emits a global call to close all dialogs
     $rootScope.$on("closeDialogs", function (event) {
-        if (navigationService.ui.stickyNavigation) {
+        if (appState.getGlobalState("stickyNavigation")) {
             navigationService.hideNavigation();
             //TODO: don't know why we need this? - we are inside of an angular event listener.
             angularHelper.safeApply($scope);

src/Umbraco.Web.UI.Client/src/views/directives/umb-sections.html

@@ -1,5 +1,5 @@
 <div>
-    <div id="applications" ng-class="{faded:nav.ui.stickyNavigation}"> 
+    <div id="applications" ng-class="{faded:stickyNavigation}"> 
         <ul class="sections">
             <li class="avatar">
                 <a href="#" ng-click="avatarClick()" title="{{user.name}}" prevent-default>