diff --git a/src/Umbraco.Web.UI.Client/lib/umbraco/LegacyUmbClientMgr.js b/src/Umbraco.Web.UI.Client/lib/umbraco/LegacyUmbClientMgr.js index 77f586e995..d9a832d055 100644 --- a/src/Umbraco.Web.UI.Client/lib/umbraco/LegacyUmbClientMgr.js +++ b/src/Umbraco.Web.UI.Client/lib/umbraco/LegacyUmbClientMgr.js @@ -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: { 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 96f5c1e8b0..f0563d5900 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 @@ -15,7 +15,8 @@ function appState($rootScope) { showNavigation: null, touchDevice: null, showTray: null, - stickyNavigation: null + stickyNavigation: null, + navMode: 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 f80f4ff777..19c69efaae 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 @@ -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, 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 1de7fbccbd..e0400a0981 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 @@ -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 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 31265341d9..2f896d3336 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 @@ -1,5 +1,5 @@
+ ng-mouseleave="leaveTree($event)" ng-mouseenter="enterTree($event)">