From f81353af0b9e87e149bc6311b3ed4027f82edbe6 Mon Sep 17 00:00:00 2001 From: Nicholas-Westby Date: Sun, 8 Nov 2015 17:16:17 -0800 Subject: [PATCH] Amended last commit for detailed node info (so it plays nice when picking media): http://issues.umbraco.org/issue/U4-5764 Also added node path to title of "Open" button (so it shows the full path on hover). More consistent quoting (namely, using apostrophes rather than double quotes). --- .../directives/umbbreadcrumbnav.directive.js | 46 +++++++++++------ .../contentpicker/contentpicker.controller.js | 49 +++++++++++++++---- .../contentpicker/contentpicker.html | 4 +- 3 files changed, 72 insertions(+), 27 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbbreadcrumbnav.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbbreadcrumbnav.directive.js index 944fe48e30..f9c77c55f2 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/umbbreadcrumbnav.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbbreadcrumbnav.directive.js @@ -11,13 +11,27 @@ function breadcrumbNavDirective(entityResource, $compile) { // Workaround since ng-if won't work at the root level of the directive. function useEmptyMarkup(scope, element) { - var newElement = $compile("")(scope); + var newElement = $compile('')(scope); element.replaceWith(newElement); } + // Populates the ancestors of the node (inclusive of the node). + function populateAncestors(scope, entityType, element) { + entityResource + .getAncestors(scope.nodeId, entityType) + .then(function (anc) { + if (anc && anc.length > 1) { + scope.ancestors = anc; + } else { + useEmptyMarkup(scope, element); + } + }); + } + + // Return directive definition. return { - restrict: "E", // restrict to an element - replace: true,//TODO: Restore comment. + restrict: 'E', // restrict to an element + replace: true, // replace the html element with the template templateUrl: 'views/directives/umb-breadcrumb-nav.html', scope: { nodeId: '=', @@ -26,27 +40,27 @@ function breadcrumbNavDirective(entityResource, $compile) { link: function (scope, element, attrs, ctrl) { // Fetch all ancestors. - var entityType = scope.kind === "content" ? "document" : "media"; + var entityType = scope.kind === 'content' ? 'document' : 'media'; if (scope.nodeId) { - entityResource - .getAncestors(scope.nodeId, entityType) - .then(function (anc) { - if (anc && anc.length > 1) { - scope.ancestors = anc; - } else { - useEmptyMarkup(scope, element); - } - }); + populateAncestors(scope, entityType, element); } else { - useEmptyMarkup(scope, element); + + // Wait until the node ID is present before searching for ancestors. + var unwatch = scope.$watch('nodeId', function (value) { + if (value) { + unwatch(); + populateAncestors(scope, entityType, element); + } + }); + } // Set path for editing the entity. - scope.editBasePath = "#/" + scope.kind + "/" + scope.kind + "/edit/"; + scope.editBasePath = '#/' + scope.kind + '/' + scope.kind + '/edit/'; } }; } -angular.module('umbraco.directives').directive("umbBreadcrumbNav", breadcrumbNavDirective); \ No newline at end of file +angular.module('umbraco.directives').directive('umbBreadcrumbNav', breadcrumbNavDirective); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js index da8d8f9a82..e0c12734b2 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js @@ -8,6 +8,30 @@ function contentPickerController($location, $scope, dialogService, entityResourc return str.replace(rgxtrim, ''); } + // Populates the name path of the entity (inclusive of the entity). + // Example: "Home > Blog > Post 1". + function populateNamePath(nodeId, entityType, renderModel) { + + // Only works for content/media (i.e., not for members). + var lowerEntityType = entityType.toLowerCase(); + if (lowerEntityType != "document" && lowerEntityType != "media") { + return; + } + + // Fetch ancestors and set path. + entityResource + .getAncestors(nodeId, lowerEntityType) + .then(function (anc) { + if (anc && anc.length >= 1) { + var names = _.map(anc, function (item) { + return item.name; + }); + renderModel.namePath = names.join(" > "); + } + }); + + } + function startWatch() { //We need to watch our renderModel so that we can update the underlying $scope.model.value properly, this is required // because the ui-sortable doesn't dispatch an event after the digest of the sort operation. Any of the events for UI sortable @@ -66,11 +90,13 @@ function contentPickerController($location, $scope, dialogService, entityResourc $scope.model.config.multiPicker = ($scope.model.config.multiPicker === "1" ? true : false); $scope.model.config.showEditButton = ($scope.model.config.showEditButton === "1" ? true : false); - var entityType = $scope.model.config.startNode.type === "member" + var nodeType = $scope.model.config.startNode.type.toLowerCase(); + var entityType = nodeType === "member" ? "Member" : $scope.model.config.startNode.type === "media" ? "Media" : "Document"; + $scope.showOpenButton = nodeType === "content" || nodeType === "media"; //the dialog options for the picker var dialogOptions = { @@ -146,13 +172,14 @@ function contentPickerController($location, $scope, dialogService, entityResourc $scope.showNode = function (index) { var item = $scope.renderModel[index]; var id = item.id; - contentResource - .getById(id) - .then(function (data) { - navigationService.syncTree({ tree: "content", path: data.path, forceReload: false, activate: true }); - var routePath = "content/content/edit/" + id.toString(); - $location.path(routePath).search(""); + entityResource.getPath(id, entityType).then(function (path) { + navigationService.changeSection(nodeType); + navigationService.showTree(nodeType, { + tree: nodeType, path: path, forceReload: false, activate: true }); + var routePath = nodeType + "/" + nodeType + "/edit/" + id.toString(); + $location.path(routePath).search(""); + }); } $scope.add = function (item) { @@ -162,7 +189,9 @@ function contentPickerController($location, $scope, dialogService, entityResourc if (currIds.indexOf(item.id) < 0) { item.icon = iconHelper.convertFromLegacyIcon(item.icon); - $scope.renderModel.push({ name: item.name, id: item.id, icon: item.icon }); + var renderModel = { name: item.name, id: item.id, icon: item.icon }; + $scope.renderModel.push(renderModel); + populateNamePath(item.id, entityType, renderModel); } }; @@ -194,7 +223,9 @@ function contentPickerController($location, $scope, dialogService, entityResourc if (entity) { entity.icon = iconHelper.convertFromLegacyIcon(entity.icon); - $scope.renderModel.push({ name: entity.name, id: entity.id, icon: entity.icon }); + var renderModel = { name: entity.name, id: entity.id, icon: entity.icon }; + $scope.renderModel.push(renderModel); + populateNamePath(id, entityType, renderModel); } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html index 795afddb7d..aa5ba5a096 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html @@ -16,8 +16,8 @@ {{node.name}} -
- Open +
+ Open Edit