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

no more nav.ui. removes exposing the userDialog, moves enter/leave tree to the navigation controller since it doesn't belong on the service, cleans up more of the nav ctrl and we have no more globals :) now to look at changing the object that is passed to dialogs (i.e. not the navigation controller scope)

Browse Source
This commit is contained in:
Shannon
2013-11-14 19:34:47 +11:00
parent 77cb86f74b
commit 47f7d0d8df
5 changed files with 66 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/lib/umbraco/LegacyUmbClientMgr.js
View File

@@ -292,8 +292,10 @@ Umbraco.Sys.registerNamespace("Umbraco.Application");
// will show up on the right hand side and a dialog will show up as if it is in the menu.
// with the legacy API we cannot know what is expected so we can only check if the menu is active, if it is
// we'll launch a dialog, otherwise a modal.
var appState = injector.get("appState");
var navMode = appState.getGlobalState("navMode");
var dialog;
if (navService.ui.currentMode === "menu") {
if (navMode === "menu") {
dialog = navService.showDialog({
//create a 'fake' action to passin with the specified actionUrl since it needs to load into an iframe
action: {

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

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

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

@@ -24,26 +24,18 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
var isTablet = false;
//the main tree event handler, which gets assigned via the setupTreeEvents method
var mainTreeEventHandler = null;
//tracks the user profile dialog
var userDialog = null;
//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 = {
currentNode: undefined,
//a string/name reference for the currently set ui mode
currentMode: "default"
};
function setTreeMode() {
isTablet = ($(window).width() <= minScreenSize);
appState.setGlobalState("showNavigation", !isTablet);
}
function setMode(mode) {
switch (mode) {
case 'tree':
ui.currentMode = "tree";
appState.setGlobalState("navMode", "tree");
appState.setGlobalState("showNavigation", true);
appState.setMenuState("showMenu", false);
appState.setMenuState("showMenuDialog", false);
@@ -53,21 +45,21 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
//$("#search-form input").focus();
break;
case 'menu':
ui.currentMode = "menu";
appState.setGlobalState("navMode", "menu");
appState.setGlobalState("showNavigation", true);
appState.setMenuState("showMenu", true);
appState.setMenuState("showMenuDialog", false);
appState.setGlobalState("stickyNavigation", true);
break;
case 'dialog':
ui.currentMode = "dialog";
appState.setGlobalState("navMode", "dialog");
appState.setGlobalState("stickyNavigation", true);
appState.setGlobalState("showNavigation", true);
appState.setMenuState("showMenu", false);
appState.setMenuState("showMenuDialog", true);
break;
case 'search':
ui.currentMode = "search";
appState.setGlobalState("navMode", "search");
appState.setGlobalState("stickyNavigation", false);
appState.setGlobalState("showNavigation", true);
appState.setMenuState("showMenu", false);
@@ -81,7 +73,7 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
break;
default:
ui.currentMode = "default";
appState.setGlobalState("navMode", "default");
appState.setMenuState("showMenu", false);
appState.setMenuState("showMenuDialog", false);
appState.setSectionState("showSearchResults", false);
@@ -97,9 +89,6 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
}
var service = {
active: false,
userDialog: undefined,
ui: ui,
/** initializes the navigation service */
init: function() {
@@ -368,46 +357,7 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
mainTreeEventHandler._setActiveTreeType(treeAlias, loadChildren);
}
},
/**
* @ngdoc method
* @name umbraco.services.navigationService#enterTree
* @methodOf umbraco.services.navigationService
*
* @description
* Sets a service variable as soon as the user hovers the navigation with the mouse
* used by the leaveTree method to delay hiding
*/
enterTree: function(event) {
service.active = true;
},
/**
* @ngdoc method
* @name umbraco.services.navigationService#leaveTree
* @methodOf umbraco.services.navigationService
*
* @description
* Hides navigation tree, with a short delay, is cancelled if the user moves the mouse over the tree again
*/
leaveTree: function(event) {
//this is a hack to handle IE touch events
//which freaks out due to no mouse events
//so the tree instantly shuts down
if (!event) {
return;
}
if (!appState.getGlobalState("touchDevice")) {
service.active = false;
$timeout(function() {
if (!service.active) {
service.hideTree();
}
}, 300);
}
},
/**
* @ngdoc method
* @name umbraco.services.navigationService#hideTree
@@ -518,12 +468,12 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
*/
showUserDialog: function() {
if(service.userDialog){
service.userDialog.close();
service.userDialog = undefined;
if(userDialog){
userDialog.close();
userDialog = null;
}
service.userDialog = dialogService.open(
userDialog = dialogService.open(
{
template: "views/common/dialogs/user.html",
modalClass: "umb-modal-left",
@@ -532,7 +482,7 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
return service.userDialog;
return userDialog;
},
/**
@@ -601,9 +551,9 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
setMode("dialog");
//set up the scope object and assign properties
var scope = args.scope || $rootScope.$new();
scope.currentNode = args.node;
scope.currentAction = args.action;
var dialogScope = args.scope || $rootScope.$new();
dialogScope.currentNode = args.node;
dialogScope.currentAction = args.action;
//the title might be in the meta data, check there first
if (args.action.metaData["dialogTitle"]) {
@@ -659,7 +609,7 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
var dialog = dialogService.open(
{
container: $("#dialog div.umb-modalcolumn-body"),
scope: scope,
scope: dialogScope,
currentNode: args.node,
currentAction: args.action,
inline: true,

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

@@ -19,6 +19,8 @@ function NavigationController($scope, $rootScope, $location, $log, $routeParams,
//Put the navigation service on this scope so we can use it's methods/properties in the view.
// IMPORTANT: all properties assigned to this scope are generally available on the scope object on dialogs since
// when we create a dialog we pass in this scope to be used for the dialog's scope instead of creating a new one.
// TODO: Lets fix this, it is less than ideal to be passing in the navigationController scope to something else to be used as it's scope,
// this is going to lead to problems/confusion. I really don't think passing scope's around is very good practice.
$scope.nav = navigationService;
//set up our scope vars
@@ -30,21 +32,20 @@ function NavigationController($scope, $rootScope, $location, $log, $routeParams,
$scope.menuNode = null;
$scope.currentSection = appState.getSectionState("currentSection");
$scope.showNavigation = appState.getGlobalState("showNavigation");
//trigger search with a hotkey:
keyboardService.bind("ctrl+shift+s", function(){
keyboardService.bind("ctrl+shift+s", function () {
navigationService.showSearch();
});
//trigger dialods with a hotkey:
//TODO: Unfortunately this will also close the login dialog.
keyboardService.bind("esc", function(){
keyboardService.bind("esc", function () {
$rootScope.$emit("closeDialogs");
});
$scope.selectedId = navigationService.currentId;
//Listen for global state changes
$scope.$on("appState.globalState.changed", function (e, args) {
if (args.key === "showNavigation") {
@@ -53,7 +54,7 @@ function NavigationController($scope, $rootScope, $location, $log, $routeParams,
});
//Listen for menu state changes
$scope.$on("appState.menuState.changed", function(e, args) {
$scope.$on("appState.menuState.changed", function (e, args) {
if (args.key === "showMenuDialog") {
$scope.showContextMenuDialog = args.value;
}
@@ -70,7 +71,7 @@ function NavigationController($scope, $rootScope, $location, $log, $routeParams,
$scope.menuNode = args.value;
}
});
//Listen for section state changes
$scope.$on("appState.sectionState.changed", function (e, args) {
//section changed
@@ -91,20 +92,20 @@ function NavigationController($scope, $rootScope, $location, $log, $routeParams,
angularHelper.safeApply($scope);
}
});
//when a user logs out or timesout
$scope.$on("notAuthenticated", function() {
$scope.authenticated = false;
$scope.$on("notAuthenticated", function () {
$scope.authenticated = false;
});
//when a user is authorized setup the data
$scope.$on("authenticated", function(evt, data) {
$scope.$on("authenticated", function (evt, data) {
$scope.authenticated = true;
});
//this reacts to the options item in the tree
//todo, migrate to nav service
$scope.searchShowMenu = function (ev, args) {
$scope.searchShowMenu = function (ev, args) {
$scope.currentNode = args.node;
args.scope = $scope;
@@ -114,12 +115,12 @@ function NavigationController($scope, $rootScope, $location, $log, $routeParams,
};
//todo, migrate to nav service
$scope.searchHide = function () {
$scope.searchHide = function () {
navigationService.hideSearch();
};
/** Opens a dialog but passes in this scope instance to be used for the dialog */
$scope.openDialog = function (currentNode, action, currentSection) {
$scope.openDialog = function (currentNode, action, currentSection) {
navigationService.showDialog({
scope: $scope,
node: currentNode,
@@ -127,6 +128,31 @@ function NavigationController($scope, $rootScope, $location, $log, $routeParams,
section: currentSection
});
};
//the below assists with hiding/showing the tree
var treeActive = false;
//Sets a service variable as soon as the user hovers the navigation with the mouse
//used by the leaveTree method to delay hiding
$scope.enterTree = function (event) {
treeActive = true;
};
// Hides navigation tree, with a short delay, is cancelled if the user moves the mouse over the tree again
$scope.leaveTree = function(event) {
//this is a hack to handle IE touch events which freaks out due to no mouse events so the tree instantly shuts down
if (!event) {
return;
}
if (!appState.getGlobalState("touchDevice")) {
treeActive = false;
$timeout(function() {
if (!treeActive) {
navigationService.hideTree();
}
}, 300);
}
};
}
//register it

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

@@ -1,5 +1,5 @@
<div id="leftcolumn" ng-controller="Umbraco.NavigationController"
ng-mouseleave="nav.leaveTree($event)" ng-mouseenter="nav.enterTree($event)">
ng-mouseleave="leaveTree($event)" ng-mouseenter="enterTree($event)">
<umb-sections sections="sections" ng-if="authenticated">
</umb-sections>