diff --git a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj index 3253c3fa0f..a6132f9af4 100644 --- a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj +++ b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj @@ -2172,7 +2172,7 @@ - + diff --git a/src/Umbraco.Web.UI/umbraco/Views/content/create.html b/src/Umbraco.Web.UI/umbraco/Views/content/create.html new file mode 100644 index 0000000000..432859e3a3 --- /dev/null +++ b/src/Umbraco.Web.UI/umbraco/Views/content/create.html @@ -0,0 +1,38 @@ +
+
+

Create a page under {{currentNode.name}}

+ + +
+ +
+ +
+
diff --git a/src/Umbraco.Web.UI/umbraco/Views/directives/umb-leftcolumn.html b/src/Umbraco.Web.UI/umbraco/Views/directives/umb-leftcolumn.html index 798acef770..5325049e65 100644 --- a/src/Umbraco.Web.UI/umbraco/Views/directives/umb-leftcolumn.html +++ b/src/Umbraco.Web.UI/umbraco/Views/directives/umb-leftcolumn.html @@ -1,4 +1,4 @@ -
+
@@ -47,7 +47,7 @@
-
{{localization.app.search.searchResult}}
+
Search results
  • @@ -62,7 +62,7 @@
    - +
    @@ -75,9 +75,9 @@
      -
    • +
    • + ng-click="showDialog(currentNode,action,currentSection)"> {{action.name}} diff --git a/src/Umbraco.Web.UI/umbraco/js/app.js b/src/Umbraco.Web.UI/umbraco/js/app.js index db113732a5..7142f5ba14 100644 --- a/src/Umbraco.Web.UI/umbraco/js/app.js +++ b/src/Umbraco.Web.UI/umbraco/js/app.js @@ -1,4 +1,4 @@ -/*! umbraco - v0.0.1-SNAPSHOT - 2013-06-03 +/*! umbraco - v0.0.1-SNAPSHOT - 2013-06-04 * http://umbraco.github.io/Belle * Copyright (c) 2013 Per Ploug, Anders Stenteberg & Shannon Deminick; * Licensed MIT @@ -16,8 +16,8 @@ var app = angular.module('umbraco', [ 'umbraco.resources.user', 'umbraco.resources.localization', 'umbraco.resources.tags', - 'umbraco.services.section', 'umbraco.services.notifications', + 'umbraco.services.navigation', 'umbraco.services.tree', 'umbraco.services.dialog', 'umbraco.services.search' diff --git a/src/Umbraco.Web.UI/umbraco/js/umbraco.controllers.js b/src/Umbraco.Web.UI/umbraco/js/umbraco.controllers.js index df4d30d1fc..3b3bc93521 100644 --- a/src/Umbraco.Web.UI/umbraco/js/umbraco.controllers.js +++ b/src/Umbraco.Web.UI/umbraco/js/umbraco.controllers.js @@ -1,5 +1,5 @@ 'use strict'; -/*! umbraco - v0.0.1-SNAPSHOT - 2013-06-03 +/*! umbraco - v0.0.1-SNAPSHOT - 2013-06-04 * http://umbraco.github.io/Belle * Copyright (c) 2013 Per Ploug, Anders Stenteberg & Shannon Deminick; * Licensed MIT @@ -7,137 +7,40 @@ define(['app', 'angular'], function (app, angular) { //Handles the section area of the app -angular.module('umbraco').controller("NavigationController", - function ($scope, $window, $log, tree, section, $rootScope, $routeParams, dialog) { +angular.module('umbraco').controller("NavigationController", + function ($scope, navigationService) { - $scope.currentSection = $routeParams.section; - $scope.selectedId = $routeParams.id; - $scope.sections = section.all(); + //load navigation service handlers + $scope.changeSection = navigationService.changeSection; + $scope.showTree = navigationService.showTree; + $scope.hideTree = navigationService.hideTree; + $scope.hideMenu = navigationService.hideMenu; + $scope.showMenu = navigationService.showMenu; + $scope.hideDialog = navigationService.hideDialog; + $scope.hideNavigation = navigationService.hideNavigation; + $scope.ui = navigationService.ui; - $scope.ui.mode = setMode; - $scope.ui.mode("default-onload"); - - $scope.$on("treeOptionsClick", function(ev, node){ - $scope.showMenu(node, ev); + $scope.selectedId = navigationService.currentId; + $scope.sections = navigationService.sections(); + + //events + $scope.$on("treeOptionsClick", function(ev, args){ + $scope.currentNode = args.node; + args.scope = $scope; + navigationService.showMenu(ev, args); }); - $scope.openSection = function (selectedSection) { - //reset everything - if($scope.ui.stickyNavigation){ - $scope.ui.mode("default-opensection"); - section.setCurrent(selectedSection.alias); - $scope.currentSection = selectedSection.alias; - $scope.showSectionTree(selectedSection); - } + $scope.openDialog = function(currentNode,action,currentSection){ + navigationService.showDialog({ + scope: $scope, + node: currentNode, + action: action, + section: currentSection}); }; - - $scope.showSectionTree = function (section) { - if(!$scope.ui.stickyNavigation){ - $("#search-form input").focus(); - $scope.currentSection = section.alias; - $scope.ui.mode("tree"); - } - }; - - $scope.hideSectionTree = function () { - if(!$scope.ui.stickyNavigation){ - $scope.ui.mode("default-hidesectiontree"); - } - }; - - $scope.showMenu = function (node, event) { - $log.log("testing the show meny"); - - if(event != undefined && node.defaultAction && !event.altKey){ - //hack for now, it needs the complete action object to, so either include in tree item json - //or lookup in service... - var act = { - alias: node.defaultAction, - name: node.defaultAction - }; - $scope.showContextDialog(node, act); - }else{ - $scope.contextMenu = tree.getActions({node: node, section: $scope.section}); - $scope.currentNode = node; - $scope.menuTitle = node.name; - $scope.selectedId = node.id; - $scope.ui.mode("menu"); - } - }; - - $scope.hideContextMenu = function () { - $scope.selectedId = $routeParams.id; - $scope.contextMenu = []; - $scope.ui.mode("tree"); - }; - - $scope.showContextDialog = function (item, action) { - $scope.ui.mode("dialog"); - - $scope.currentNode = item; - $scope.dialogTitle = action.name; - - var templateUrl = "views/" + $scope.currentSection + "/" + action.alias + ".html"; - var d = dialog.append({container: $("#dialog div.umb-panel-body"), scope: $scope, template: templateUrl }); - }; - - $scope.hideContextDialog = function () { - $scope.showContextMenu($scope.currentNode, undefined); - }; - - $scope.hideNavigation = function () { - $scope.ui.mode("default-hidenav"); - }; - - //SD: Pretty sure this is not used ?! - function loadTree(section) { - $scope.currentSection = section; - - } - - //function to turn navigation areas on/off - function setMode(mode){ - - switch(mode) - { - case 'tree': - $scope.ui.showNavigation = true; - $scope.ui.showContextMenu = false; - $scope.ui.showContextMenuDialog = false; - $scope.ui.stickyNavigation = false; - break; - case 'menu': - $scope.ui.showNavigation = true; - $scope.ui.showContextMenu = true; - $scope.ui.showContextMenuDialog = false; - $scope.ui.stickyNavigation = true; - break; - case 'dialog': - $scope.ui.stickyNavigation = true; - $scope.ui.showNavigation = true; - $scope.ui.showContextMenu = false; - $scope.ui.showContextMenuDialog = true; - break; - case 'search': - $scope.ui.stickyNavigation = false; - $scope.ui.showNavigation = true; - $scope.ui.showContextMenu = false; - $scope.ui.showSearchResults = true; - $scope.ui.showContextMenuDialog = false; - break; - default: - $scope.ui.showNavigation = false; - $scope.ui.showContextMenu = false; - $scope.ui.showContextMenuDialog = false; - $scope.ui.showSearchResults = false; - $scope.ui.stickyNavigation = false; - break; - } - } }); -angular.module('umbraco').controller("SearchController", function ($scope, search, $log) { +angular.module('umbraco').controller("SearchController", function ($scope, search, $log, navigationService) { var currentTerm = ""; $scope.deActivateSearch = function(){ @@ -148,20 +51,16 @@ angular.module('umbraco').controller("SearchController", function ($scope, searc if(term != undefined && term != currentTerm){ if(term.length > 3){ $scope.ui.selectedSearchResult = -1; - $scope.ui.mode("search"); - + navigationService.showSearch(); currentTerm = term; $scope.ui.searchResults = search.search(term, $scope.currentSection); - }else{ $scope.ui.searchResults = []; } } }; - $scope.hideSearch = function () { - $scope.ui.mode("default-hidesearch"); - }; + $scope.hideSearch = navigationService.hideSearch; $scope.iterateResults = function (direction) { if(direction == "up" && $scope.ui.selectedSearchResult < $scope.ui.searchResults.length) @@ -171,7 +70,7 @@ angular.module('umbraco').controller("SearchController", function ($scope, searc }; $scope.selectResult = function () { - $scope.showContextMenu($scope.ui.searchResults[$scope.ui.selectedSearchResult], undefined); + navigationService.showMenu($scope.ui.searchResults[$scope.ui.selectedSearchResult], undefined); }; }); @@ -183,26 +82,20 @@ angular.module('umbraco').controller("DashboardController", function ($scope, $r //handles authentication and other application.wide services angular.module('umbraco').controller("MainController", - function ($scope, notifications, $routeParams, userFactory, localizationFactory) { + function ($scope, notifications, $routeParams, userFactory, navigationService) { //also be authed for e2e test var d = new Date(); var weekday = new Array("Super Sunday", "Manic Monday", "Tremendous Tuesday", "Wonderfull Wednesday", "Thunder Thursday", "Friendly Friday", "Shiny Saturday"); $scope.today = weekday[d.getDay()]; - $scope.ui = { - showTree: false, - showSearchResults: false, - mode: undefined - }; - + $scope.signin = function () { $scope.authenticated = userFactory.authenticate($scope.login, $scope.password); if($scope.authenticated){ $scope.user = userFactory.getCurrentUser(); - $scope.localization = localizationFactory.getLabels($scope.user.locale); } }; @@ -220,21 +113,13 @@ angular.module('umbraco').controller("MainController", } }); - //subscribes to auth status in $user - $scope.authenticated = userFactory.authenticated; - $scope.$watch('userFactory.authenticated', function (newVal, oldVal, scope) { - if (newVal) { - $scope.authenticated = newVal; - } - }); - $scope.removeNotification = function(index) { notifications.remove(index); }; $scope.closeDialogs = function(event){ - if($scope.ui.stickyNavigation && $(event.target).parents(".umb-modalcolumn").size() == 0){ - $scope.ui.mode("default-closedialogs"); + if(navigationService.ui.stickyNavigation && $(event.target).parents(".umb-modalcolumn").size() == 0){ + navigationService.hideNavigation(); } }; @@ -271,13 +156,13 @@ angular.module("umbraco").controller("Umbraco.Common.LegacyController", }); angular.module('umbraco').controller("Umbraco.Editors.ContentCreateController", function ($scope, $routeParams, contentTypeResource) { - //get the allowed content types and update the property when it resolves - contentTypeResource.getAllowedTypes($scope.currentNode.id) - .then(function (data) { - $scope.allowedTypes = data; - }, function (reason) { - alert(reason); - return; + //get the allowed content types and update the property when it resolves + contentTypeResource.getAllowedTypes($scope.currentNode.id) + .then(function (data) { + $scope.allowedTypes = data; + }, function (reason) { + alert(reason); + return; }); }); angular.module("umbraco").controller("Umbraco.Editors.ContentEditController", function ($scope, $routeParams, contentResource, notifications) { @@ -338,29 +223,29 @@ angular.module('umbraco').controller("Umbraco.Editors.ContentPickerController", $scope.model.value = data.selection; } }); -angular.module("umbraco").controller("Umbraco.Editors.DatepickerController", function ($rootScope, $scope, notifications, $timeout) { - require( - [ - 'views/propertyeditors/umbraco/datepicker/bootstrap.datepicker.js', - 'css!/belle/views/propertyeditors/umbraco/datepicker/bootstrap.datepicker.css' - ], - function () { - //The Datepicker js and css files are available and all components are ready to use. - - // Get the id of the datepicker button that was clicked - var pickerId = $scope.model.alias; - - // Open the datepicker and add a changeDate eventlistener - $("#" + pickerId).datepicker({ - format: "dd/mm/yyyy", - autoclose: true - }).on("changeDate", function (e) { - // When a date is clicked the date is stored in model.value as a ISO 8601 date - $scope.model.value = e.date.toISOString(); - }); - } - ); -}); +angular.module("umbraco").controller("Umbraco.Editors.DatepickerController", function ($rootScope, $scope, notifications, $timeout) { + require( + [ + 'views/propertyeditors/umbraco/datepicker/bootstrap.datepicker.js', + 'css!/belle/views/propertyeditors/umbraco/datepicker/bootstrap.datepicker.css' + ], + function () { + //The Datepicker js and css files are available and all components are ready to use. + + // Get the id of the datepicker button that was clicked + var pickerId = $scope.model.alias; + + // Open the datepicker and add a changeDate eventlistener + $("#" + pickerId).datepicker({ + format: "dd/mm/yyyy", + autoclose: true + }).on("changeDate", function (e) { + // When a date is clicked the date is stored in model.value as a ISO 8601 date + $scope.model.value = e.date.toISOString(); + }); + } + ); +}); angular.module("umbraco").controller("Umbraco.Editors.GoogleMapsController", function ($rootScope, $scope, notifications, $timeout) { require( @@ -471,14 +356,14 @@ angular.module("umbraco") }; $scope.pagination = new Array(100); - - //get the allowed content types and update the property when it resolves - contentTypeResource.getAllowedTypes($scope.content.id) - .then(function (data) { - $scope.listViewAllowedTypes = data; - }, function (reason) { - alert(reason); - return; + + //get the allowed content types and update the property when it resolves + contentTypeResource.getAllowedTypes($scope.content.id) + .then(function (data) { + $scope.listViewAllowedTypes = data; + }, function (reason) { + alert(reason); + return; }); $scope.next = function(){ diff --git a/src/Umbraco.Web.UI/umbraco/js/umbraco.directives.js b/src/Umbraco.Web.UI/umbraco/js/umbraco.directives.js index aa90dee860..3d9fe6c9bb 100644 --- a/src/Umbraco.Web.UI/umbraco/js/umbraco.directives.js +++ b/src/Umbraco.Web.UI/umbraco/js/umbraco.directives.js @@ -1,4 +1,4 @@ -/*! umbraco - v0.0.1-SNAPSHOT - 2013-06-03 +/*! umbraco - v0.0.1-SNAPSHOT - 2013-06-04 * http://umbraco.github.io/Belle * Copyright (c) 2013 Per Ploug, Anders Stenteberg & Shannon Deminick; * Licensed MIT @@ -306,7 +306,7 @@ angular.module('umbraco.directives', []) }) -.directive('umbTree', function ($compile, $log, tree, $q) { +.directive('umbTree', function ($compile, $log, treeService, $q) { return { restrict: 'E', terminal: true, @@ -349,17 +349,16 @@ angular.module('umbraco.directives', []) '' + '{{node.name}}'; if(showoptions){ - itemTemplate += ''; + itemTemplate += ''; } itemTemplate += '
    '; - scope.options = function(n, event){ - $log.log("emitting options"); - scope.$emit("treeOptionsClick", n); + + scope.options = function(e, n, ev){ + scope.$emit("treeOptionsClick", {element: e, node: n, event: ev}); }; scope.select = function(e,n,ev){ - $log.log("emitting select"); scope.$emit("treeNodeSelect", {element: e, node: n, event: ev}); }; @@ -403,18 +402,17 @@ angular.module('umbraco.directives', []) else { template = itemTemplate + treeTemplate; } - - var newElement = angular.element(template); - $compile(newElement)(scope); + + var newElement = angular.element(template); + $compile(newElement)(scope); element.replaceWith(newElement); } scope.$watch("section", function (newVal, oldVal) { if (newVal !== oldVal) { - $log.info("loading tree for section " + newVal); loadTree(); } - }); + }); loadTree(); } }; diff --git a/src/Umbraco.Web.UI/umbraco/js/umbraco.services.js b/src/Umbraco.Web.UI/umbraco/js/umbraco.services.js index 63065ede4f..dec27e66c4 100644 --- a/src/Umbraco.Web.UI/umbraco/js/umbraco.services.js +++ b/src/Umbraco.Web.UI/umbraco/js/umbraco.services.js @@ -177,6 +177,171 @@ return{ } }; }]); +angular.module('umbraco.services.navigation', []) +.factory('navigationService', function ($rootScope, $routeParams, $log, dialog, treeService) { + + var _currentSection = $routeParams.section; + var _currentId = $routeParams.id; + var _currentNode; + var _ui = {}; + + function _setMode(mode){ + switch(mode) + { + case 'tree': + _ui.showNavigation = true; + _ui.showContextMenu = false; + _ui.showContextMenuDialog = false; + _ui.stickyNavigation = false; + + $("#search-form input").focus(); + break; + case 'menu': + _ui.showNavigation = true; + _ui.showContextMenu = true; + _ui.showContextMenuDialog = false; + _ui.stickyNavigation = true; + break; + case 'dialog': + _ui.stickyNavigation = true; + _ui.showNavigation = true; + _ui.showContextMenu = false; + _ui.showContextMenuDialog = true; + break; + case 'search': + _ui.stickyNavigation = false; + _ui.showNavigation = true; + _ui.showContextMenu = false; + _ui.showSearchResults = true; + _ui.showContextMenuDialog = false; + break; + default: + _ui.showNavigation = false; + _ui.showContextMenu = false; + _ui.showContextMenuDialog = false; + _ui.showSearchResults = false; + _ui.stickyNavigation = false; + break; + } + } + + return { + currentNode: _currentNode, + mode: "default", + ui: _ui, + + sections: function(){ + $log.log("fetch sections"); + + return [ + { name: "Content", cssclass: "content", alias: "content" }, + { name: "Media", cssclass: "media", alias: "media" }, + { name: "Settings", cssclass: "settings", alias: "settings" }, + { name: "Developer", cssclass: "developer", alias: "developer" }, + { name: "Users", cssclass: "user", alias: "users" } + ]; + }, + + changeSection: function(sectionAlias){ + if(this.ui.stickyNavigation){ + _setMode("default-opensection"); + this.ui.currentSection = selectedSection; + this.showTree(selectedSection); + } + }, + + showTree: function(sectionAlias){ + if(!this.ui.stickyNavigation && sectionAlias !== this.ui.currentTree){ + $log.log("show tree" + sectionAlias); + this.ui.currentTree = sectionAlias; + _setMode("tree"); + } + }, + + hideTree: function(){ + if(!this.ui.stickyNavigation){ + $log.log("hide tree"); + this.ui.currentTree = ""; + _setMode("default-hidesectiontree"); + } + }, + + showMenu: function (event, args) { + $log.log("testing the show meny"); + + if(args.event !== undefined && args.node.defaultAction && !args.event.altKey){ + //hack for now, it needs the complete action object to, so either include in tree item json + //or lookup in service... + var act = { + alias: args.node.defaultAction, + name: args.node.defaultAction + }; + + this.ui.currentNode = args.node; + this.showDialog({ + scope: args.scope, + node: args.node, + action: act, + section: this.ui.currentTree + }); + }else{ + _setMode("menu"); + _ui.actions = treeService.getActions({node: args.node, section: this.ui.currentTree}); + + + this.ui.currentNode = args.node; + this.ui.dialogTitle = args.node.name; + } + }, + + hideMenu: function () { + _selectedId = $routeParams.id; + this.ui.currentNode = undefined; + this.ui.actions = []; + _setMode("tree"); + }, + + showDialog: function (args) { + _setMode("dialog"); + + var _scope = args.scope || $rootScope.$new(); + _scope.currentNode = args.node; + + //this.currentNode = item; + this.ui.dialogTitle = args.action.name; + + var templateUrl = "views/" + this.ui.currentTree + "/" + args.action.alias + ".html"; + var d = dialog.append( + { + container: $("#dialog div.umb-panel-body"), + scope: _scope, + template: templateUrl + }); + }, + + hideDialog: function() { + $log.log("hide dialog"); + this.showMenu(undefined, {node: this.ui.currentNode}); + }, + + showSearch: function() { + _setMode("search"); + }, + + hideSearch: function() { + _setMode("default-hidesearch"); + }, + + hideNavigation: function(){ + this.ui.currentTree = ""; + this.ui.actions = []; + this.ui.currentNode = undefined; + + _setMode("default"); + } + }; + +}); angular.module('umbraco.services.notifications', []) .factory('notifications', function ($rootScope, $timeout) {