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.

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
                 '<a href class="umb-options" ng-hide="tree.root.isContainer || !tree.root.menuUrl" ng-click="options(this, tree.root, $event)" ng-swipe-right="options(this, tree.root, $event)"><i></i><i></i><i></i></a>' +
                 '</div>';
             template += '<ul>' +
-                '<umb-tree-item ng-repeat="child in tree.root.children" eventhandler="eventhandler" node="child" current-node="currentNode" tree="child" section="{{section}}" ng-animate="animation()"></umb-tree-item>' +
+                '<umb-tree-item ng-repeat="child in tree.root.children" eventhandler="eventhandler" node="child" current-node="currentNode" tree="this" section="{{section}}" ng-animate="animation()"></umb-tree-item>' +
                 '</ul>' +
                 '</li>' +
                 '</ul>';

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: '<li ng-class="{\'current\': (node == currentNode)}" on-right-click="altSelect(node, $event)"><div ng-style="setTreePadding(node)" ng-class="node.stateCssClass" ng-class="{\'loading\': node.loading}" ng-swipe-right="options(this, node, $event)" >' +
-            '<ins ng-if="node.metaData.isContainer && node.metaData.isDialog" class="umb-tree-node-search icon-search" ng-click="searchNode(node, $event)" alt="searchAltText"></ins>' +
+            //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
+            '<ins ng-if="tree.enablelistviewsearch && node.metaData.isContainer" class="umb-tree-node-search icon-search" ng-click="searchNode(node, $event)" alt="searchAltText"></ins>' +
             '<ins ng-if="node.hasChildren" style="width:18px;"></ins>' +
             '<ins ng-if="node.hasChildren" ng-class="{\'icon-navigation-right\': !node.expanded, \'icon-navigation-down\': node.expanded}" ng-click="load(node)"></ins>' +
-            '<i title="#{{node.routePath}}" class="{{node.cssClass}}"></i>' +
+            //NOTE: If the tree supports check boxes, render different markup
+            '<i ng-if="tree.enablecheckboxes == \'true\'" title="#{{node.routePath}}" ng-class="selectEnabledNodeClass(node)"></i>' +
+            '<i ng-if="!tree.enablecheckboxes || tree.enablecheckboxes == \'false\'" title="#{{node.routePath}}" class="{{node.cssClass}}"></i>' +
             '<a href ng-click="select(node, $event)" on-right-click="altSelect(node, $event)" ng-bind-html="node.name"></a>' +
             '<a href class="umb-options" ng-hide="!node.menuUrl" ng-click="options(node, $event)"><i></i><i></i><i></i></a>' +
             '<div ng-show="node.loading" class="l"><div></div></div>' +
@@ -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

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.id < 0) {
-	        if (args.node !== $scope.target) {
+	            $scope.target.url = "/";
-	            if ($scope.selectedEl) {
+	        }
-	                $scope.selectedEl.find(".temporary").remove();
+	        else {
-	                $scope.selectedEl.find("i.umb-tree-icon").show();
+	            contentResource.getNiceUrl(args.node.id).then(function (url) {
-	            }
+	                $scope.target.url = url;
-
+	            });
-	            $scope.selectedEl = c;
-	            $scope.target.id = args.node.id;
-	            $scope.target.name = args.node.name;
-
-	            $scope.selectedEl.find("i.umb-tree-icon")
-                 .hide()
-                 .after("<i class='icon umb-tree-icon sprTree icon-check blue temporary'></i>");
-
-	            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 (!angular.isUndefined($scope.target.isMedia)) {

src/Umbraco.Web.UI.Client/src/views/common/dialogs/linkpicker.html

@@ -31,12 +31,13 @@
 
 		
 
-		<umb-tree 
+        <umb-tree section="content"
-			section="content" 
+                  hideheader="true"
-			hideheader="true" 
+                  hideoptions="true"
-			hideoptions="true"
+                  eventhandler="dialogTreeEventHandler"
-			eventhandler="dialogTreeEventHandler">
+                  isdialog="true"
-		</umb-tree>
+                  enablecheckboxes="true">
+        </umb-tree>
 	</div>
 
 	<div class="umb-panel-footer">

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 = "<i class='icon umb-tree-icon sprTree icon-check blue temporary'></i>";
-                    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

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}}">
                 </umb-tree>
             </div>
         </div>