From 0ff1c9915dede26338ad3c3a47b5e5669569dfc0 Mon Sep 17 00:00:00 2001 From: Shannon Date: Thu, 9 Oct 2014 12:36:52 +1100 Subject: [PATCH] Updates tree to natively support check boxes as an option, same with search icons, fixes tree directive to pass the current tree scope correctly, removes the requirement for the cache key on the umbtreeitem directive. Fixes the link picker to use the correct way to show check boxes instead of hacking with jquery. --- .../common/directives/umbtree.directive.js | 6 ++- .../directives/umbtreeitem.directive.js | 12 +++-- .../common/dialogs/linkpicker.controller.js | 46 +++++++------------ .../src/views/common/dialogs/linkpicker.html | 13 +++--- .../common/dialogs/treepicker.controller.js | 41 +++++++---------- .../src/views/common/dialogs/treepicker.html | 4 +- 6 files changed, 56 insertions(+), 66 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js index 481827bd56..0ba36efcea 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js @@ -19,7 +19,9 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat isdialog: '@', //Custom query string arguments to pass in to the tree as a string, example: "startnodeid=123&something=value" customtreeparams: '@', - eventhandler: '=' + eventhandler: '=', + enablecheckboxes: '@', + enablelistviewsearch: '@' }, compile: function(element, attrs) { @@ -32,7 +34,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat '' + ''; template += '' + '' + ''; diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js index b225ccaa44..37d07436c6 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js @@ -25,7 +25,6 @@ angular.module("umbraco.directives") scope: { section: '@', - cachekey: '@', eventhandler: '=', currentNode: '=', node: '=', @@ -33,10 +32,13 @@ angular.module("umbraco.directives") }, template: '
  • ' + - '' + + //NOTE: This ins element is used to display the search icon if the node is a container/listview and the tree is currently in dialog + '' + '' + '' + - '' + + //NOTE: If the tree supports check boxes, render different markup + '' + + '' + '' + '' + '
    ' + @@ -77,6 +79,10 @@ angular.module("umbraco.directives") }, 0, false); } + scope.selectEnabledNodeClass = function(node) { + return node.selected ? 'icon umb-tree-icon sprTree icon-check blue temporary' : node.cssClass; + }; + //add a method to the node which we can use to call to update the node data if we need to , // this is done by sync tree, we don't want to add a $watch for each node as that would be crazy insane slow // so we have to do this diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/linkpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/linkpicker.controller.js index 2a6e822a22..791761f1aa 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/linkpicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/linkpicker.controller.js @@ -45,38 +45,24 @@ angular.module("umbraco").controller("Umbraco.Dialogs.LinkPickerController", args.event.stopPropagation(); eventsService.emit("dialogs.linkPicker.select", args); + + if ($scope.currentNode) { + //un-select if there's a current one selected + $scope.currentNode.selected = false; + } - var c = $(args.event.target.parentElement); + $scope.currentNode = args.node; + $scope.currentNode.selected = true; + $scope.target.id = args.node.id; + $scope.target.name = args.node.name; - //renewing - if (args.node !== $scope.target) { - if ($scope.selectedEl) { - $scope.selectedEl.find(".temporary").remove(); - $scope.selectedEl.find("i.umb-tree-icon").show(); - } - - $scope.selectedEl = c; - $scope.target.id = args.node.id; - $scope.target.name = args.node.name; - - $scope.selectedEl.find("i.umb-tree-icon") - .hide() - .after(""); - - if (args.node.id < 0) { - $scope.target.url = "/"; - } else { - contentResource.getNiceUrl(args.node.id).then(function (url) { - $scope.target.url = url; - }); - } - } else { - $scope.target = undefined; - //resetting - if ($scope.selectedEl) { - $scope.selectedEl.find(".temporary").remove(); - $scope.selectedEl.find("i.umb-tree-icon").show(); - } + if (args.node.id < 0) { + $scope.target.url = "/"; + } + else { + contentResource.getNiceUrl(args.node.id).then(function (url) { + $scope.target.url = url; + }); } if (!angular.isUndefined($scope.target.isMedia)) { diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/linkpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/linkpicker.html index a6167d56eb..a567e616f3 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/linkpicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/linkpicker.html @@ -31,12 +31,13 @@ - - + +
    diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.controller.js index 6c1d9e4d4f..76ffa91da8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.controller.js @@ -74,7 +74,21 @@ angular.module("umbraco").controller("Umbraco.Dialogs.TreePickerController", } function nodeExpandedHandler(ev, args) { - if (angular.isArray(args.children)) { + if (angular.isArray(args.children)) { + + //TODO: Not only this but we need to ensure that any currently displayed nodes that get selected + // from the search get updated to have a check box! + ////now we need to look in the already selected search results and + //// toggle the check boxes for those ones that are listed + //_.each($scope.searchInfo.results, function (result) { + // var exists = _.find($scope.searchInfo.selectedSearchResults, function (selectedId) { + // return result.id == selectedId; + // }); + // if (exists) { + // result.selected = true; + // } + //}); + //check filter if (dialogOptions.filter) { performFiltering(args.children); @@ -97,31 +111,10 @@ angular.module("umbraco").controller("Umbraco.Dialogs.TreePickerController", //from the server in this method. select(args.node.name, args.node.id); - toggleCheck(args.event, args.node); + //toggle checked state + args.node.selected = args.node.selected === true ? false : true; } - function toggleCheck(evt, node) { - if ($scope.multiPicker) { - var c = $(evt.target.parentElement); - if (!node.selected) { - node.selected = true; - var temp = ""; - var icon = c.find("i.umb-tree-icon"); - if (icon.length > 0) { - icon.hide().after(temp); - } - else { - c.prepend(temp); - } - } - else { - node.selected = false; - c.find(".temporary").remove(); - c.find("i.umb-tree-icon").show(); - } - } - } - /** Method used for selecting a node */ function select(text, id, entity) { //if we get the root, we just return a constructed entity, no need for server data diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.html index 8775fc02cb..88273cad01 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.html @@ -67,7 +67,9 @@ hideoptions="true" isdialog="true" customtreeparams="{{customTreeParams}}" - eventhandler="dialogTreeEventHandler"> + eventhandler="dialogTreeEventHandler" + enablelistviewsearch="true" + enablecheckboxes="{{multiPicker}}">