From 588914038670032fff766983b6b0edfcc73e62bb Mon Sep 17 00:00:00 2001 From: Shannon Date: Wed, 13 Nov 2013 13:50:36 +1100 Subject: [PATCH] Created the new appState service - this will be used to control all of the tracked back office state and used used explicitly by getting/setting values by key - cannot be mutable without defining properties first, then other controllers/services can listen for changes to state and act accordingly. Theoretically the navigationService 'should' be the only thing setting any of the state. Have started refactoring out the easy wins to move away from the dreaded ui object. --- .../src/common/services/appstate.service.js | 159 ++++++++++++++++++ .../src/common/services/navigation.service.js | 13 +- .../src/views/common/navigation.controller.js | 28 ++- .../src/views/directives/umb-navigation.html | 2 +- 4 files changed, 185 insertions(+), 17 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js 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 new file mode 100644 index 0000000000..d160e7ba53 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js @@ -0,0 +1,159 @@ +/** + * @ngdoc service + * @name umbraco.services.appState + * @function + * + * @description + * Tracks the various application state variables when working in the back office, raises events when state changes. + */ +function appState($rootScope) { + + //Define all variables here - we are never returning this objects so they cannot be publicly mutable + // changed, we only expose methods to interact with the values. + + //var dialogState = { + // //The current dialog + // currentDialog: null, + // //The dialog title + // dialogTitle: null + //}; + + var sectionState = { + //The currently active section + currentSection: null + }; + + var treeState = { + //The currently selected/edited entity + currentEntity: null + }; + + var menuState = { + //The basic entity that is having an action performed on it + currentEntity: null, + //Whether the menu is being shown or not + showMenu: null + }; + + return { + + /** + * @ngdoc function + * @name umbraco.services.angularHelper#getSectionState + * @methodOf umbraco.services.appState + * @function + * + * @description + * Returns the current section state value by key - we do not return a variable here - we do NOT want this + * to be publicly mutable and allow setting arbitrary values + * + */ + getSectionState: function (key) { + if (sectionState[key] === undefined) { + throw "The variable " + key + " does not exist in section state"; + } + return sectionState[key]; + }, + + /** + * @ngdoc function + * @name umbraco.services.angularHelper#setSectionState + * @methodOf umbraco.services.appState + * @function + * + * @description + * Sets a section state value by key + * + */ + setSectionState: function(key, value) { + if (sectionState[key] === undefined) { + throw "The variable " + key + " does not exist in section state"; + } + var changed = sectionState[key] !== value; + sectionState[key] = value; + if (changed) { + $rootScope.$broadcast("appState.sectionState.changed", { key: key, value: value }); + } + }, + + /** + * @ngdoc function + * @name umbraco.services.angularHelper#getTreeState + * @methodOf umbraco.services.appState + * @function + * + * @description + * Returns the current tree state value by key - we do not return a variable here - we do NOT want this + * to be publicly mutable and allow setting arbitrary values + * + */ + getTreeState: function (key) { + if (treeState[key] === undefined) { + throw "The variable " + key + " does not exist in tree state"; + } + return treeState[key]; + }, + + /** + * @ngdoc function + * @name umbraco.services.angularHelper#setTreeState + * @methodOf umbraco.services.appState + * @function + * + * @description + * Sets a section state value by key + * + */ + setTreeState: function (key, value) { + if (treeState[key] === undefined) { + throw "The variable " + key + " does not exist in tree state"; + } + var changed = treeState[key] !== value; + treeState[key] = value; + if (changed) { + $rootScope.$broadcast("appState.treeState.changed", { key: key, value: value }); + } + }, + + /** + * @ngdoc function + * @name umbraco.services.angularHelper#getMenuState + * @methodOf umbraco.services.appState + * @function + * + * @description + * Returns the current menu state value by key - we do not return a variable here - we do NOT want this + * to be publicly mutable and allow setting arbitrary values + * + */ + getMenuState: function (key) { + if (menuState[key] === undefined) { + throw "The variable " + key + " does not exist in menu state"; + } + return menuState[key]; + }, + + /** + * @ngdoc function + * @name umbraco.services.angularHelper#setMenuState + * @methodOf umbraco.services.appState + * @function + * + * @description + * Sets a section state value by key + * + */ + setMenuState: function (key, value) { + if (menuState[key] === undefined) { + throw "The variable " + key + " does not exist in menu state"; + } + var changed = treeState[key] !== value; + menuState[key] = value; + if (changed) { + $rootScope.$broadcast("appState.menuState.changed", { key: key, value: value }); + } + }, + + }; +} +angular.module('umbraco.services').factory('appState', appState); \ No newline at end of file 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 667ca52011..71da12ffca 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 @@ -15,7 +15,7 @@ * Section navigation and search, and maintain their state for the entire application lifetime * */ -function navigationService($rootScope, $routeParams, $log, $location, $q, $timeout, dialogService, treeService, notificationsService, historyService) { +function navigationService($rootScope, $routeParams, $log, $location, $q, $timeout, dialogService, treeService, notificationsService, historyService, appState) { var minScreenSize = 1100; @@ -24,7 +24,6 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo tablet: false, showNavigation: false, showContextMenu: false, - showContextMenuDialog: false, stickyNavigation: false, showTray: false, showSearchResults: false, @@ -55,7 +54,7 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo ui.currentMode = "tree"; ui.showNavigation = true; ui.showContextMenu = false; - ui.showContextMenuDialog = false; + appState.setMenuState("showMenu", false); ui.stickyNavigation = false; ui.showTray = false; @@ -65,7 +64,7 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo ui.currentMode = "menu"; ui.showNavigation = true; ui.showContextMenu = true; - ui.showContextMenuDialog = false; + appState.setMenuState("showMenu", false); ui.stickyNavigation = true; break; case 'dialog': @@ -73,7 +72,7 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo ui.stickyNavigation = true; ui.showNavigation = true; ui.showContextMenu = false; - ui.showContextMenuDialog = true; + appState.setMenuState("showMenu", true); break; case 'search': ui.currentMode = "search"; @@ -81,7 +80,7 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo ui.showNavigation = true; ui.showContextMenu = false; ui.showSearchResults = true; - ui.showContextMenuDialog = false; + appState.setMenuState("showMenu", false); $timeout(function() { $("#search-field").focus(); @@ -91,7 +90,7 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo default: ui.currentMode = "default"; ui.showContextMenu = false; - ui.showContextMenuDialog = false; + appState.setMenuState("showMenu", false); ui.showSearchResults = false; ui.stickyNavigation = false; ui.showTray = false; 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 8541291eda..44660c80ce 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 @@ -16,39 +16,49 @@ function NavigationController($scope,$rootScope, $location, $log, $routeParams, // when we create a dialog we pass in this scope to be used for the dialog's scope instead of creating a new one. $scope.nav = navigationService; + //set up our scope vars + $scope.showContextMenuDialog = false; + //wire up the screensize and tree mode detection - $scope.nav.init(); + navigationService.init(); //the tree event handler i used to subscribe to the main tree click events $scope.treeEventHandler = $({}); - $scope.nav.setupTreeEvents($scope.treeEventHandler, $scope); + navigationService.setupTreeEvents($scope.treeEventHandler, $scope); - //keep track of + //keep track of the current section $scope.$watch(function () { //watch the route parameters section return $routeParams.section; }, function(newVal, oldVal) { - $scope.nav.ui.currentSection = newVal; + navigationService.ui.currentSection = newVal; }); - - + //trigger search with a hotkey: keyboardService.bind("ctrl+shift+s", function(){ - $scope.nav.showSearch(); + navigationService.showSearch(); }); //trigger dialods with a hotkey: + //TODO: Unfortunately this will also close the login dialog. keyboardService.bind("esc", function(){ $rootScope.$emit("closeDialogs"); }); - - + $scope.selectedId = navigationService.currentId; + //Listen for menu state changes + $scope.$on("appState.menuState.changed", function(e, args) { + if (args.key === "showMenu") { + $scope.showContextMenuDialog = args.value; + } + }); + //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) { 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-navigation.html b/src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html index 0884150934..dcc0b05f0c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html +++ b/src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html @@ -79,7 +79,7 @@
+ ng-show="showContextMenuDialog" ng-animate="'slide'">

{{nav.ui.dialogTitle}}