yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Shannon
2013-11-13 13:50:36 +11:00
parent fd91340e75
commit 5889140386
4 changed files with 185 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js Normal file
View File

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

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

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

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

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

2
src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html
View File

@@ -79,7 +79,7 @@
<!-- Tree dialogs -->
<div id="dialog" class='umb-modalcolumn fill shadow'
ng-swipe-left="nav.hideDialog()"
ng-show="nav.ui.showContextMenuDialog" ng-animate="'slide'">
ng-show="showContextMenuDialog" ng-animate="'slide'">
<div class='umb-modalcolumn-header'>
<h1>{{nav.ui.dialogTitle}}</h1>
</div>