diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbsections.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbsections.directive.js index fff9a729be..21a8188f8d 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/umbsections.directive.js +++ b/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 diff --git a/src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js b/src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js index 4034aca99c..23df10cdfb 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js +++ b/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 = { diff --git a/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js b/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js index fac6659bc2..5d88fd8ef2 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js +++ b/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"); diff --git a/src/Umbraco.Web.UI.Client/src/views/common/navigation.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/navigation.controller.js index 0f31b0cea5..6780253907 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/navigation.controller.js +++ b/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); diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/umb-sections.html b/src/Umbraco.Web.UI.Client/src/views/directives/umb-sections.html index 425bfdf515..706c616b67 100644 --- a/src/Umbraco.Web.UI.Client/src/views/directives/umb-sections.html +++ b/src/Umbraco.Web.UI.Client/src/views/directives/umb-sections.html @@ -1,5 +1,5 @@
-
+