add selection restrictions for depth and single select

Author: Ben Rubin

docsApp/pages/home/home.html

@@ -1,5 +1,5 @@
 <div layout="row">
-  <md-tree ng-model="vm.selectedItems" flex>
+  <md-tree ng-model="vm.selectedItems" restrict-selection="depth,single" flex>
     <md-branch branch-repeat="location in vm.locationData" class="md-2-line" select>
       <div class="md-branch-text">
         <h3>{{location.name}}</h3>

src/js/branch.js

@@ -243,13 +243,11 @@ function branchDirective($parse, $document, $compile) {
 
 // --- Controller ---
 
-var cid = 0;
 /*@ngInject*/
 function branchController($scope, $mdUtil, $animateCss) {
   /*jshint validthis: true*/
   var vm = this;
   var isOpen = false;
-  var _id = cid++;
 
   // injected $element is holds refernce to the comment. heres how to get arround this
   var $element = $scope.$element;
@@ -333,7 +331,6 @@ function branchController($scope, $mdUtil, $animateCss) {
   function open(noAnimation) {
     if (isOpen) { return; }
     isOpen = true;
-    // findTree();
     reconnectScope();
     vm.startWatching();
     $element.toggleClass('md-no-animation', noAnimation || false);
@@ -402,11 +399,24 @@ function branchController($scope, $mdUtil, $animateCss) {
   // register branch if tree controller is accesable
   function registerBranch() {
     vm.treeCtrl.registerBranch(vm.treeCtrl.hashGetter($scope[$scope.repeatName]), {
-      setSelected: setSelected
+      setSelected: setSelected,
+      getDepth: getDepth
     });
     setSelected(vm.treeCtrl.selected[vm.treeCtrl.hashGetter($scope[$scope.repeatName])] !== undefined);
   }
 
+  function getDepth() {
+    if ($scope.$depth) { return $scope.$depth; }
+    var depth = 0;
+    var parent = $element[0].parentNode;
+    while (parent && parent !== document.body) {
+      if (parent.nodeName === 'MD-TREE') { break; }
+      if (parent.nodeName === 'MD-BRANCH') { depth += 1; }
+      parent = parent.parentNode;
+    }
+    return $scope.$depth = depth;
+  }
+
 
   // remove scope from parents reference so it is not used in digest
   function disconnectScope() {

src/js/tree.js

@@ -30,9 +30,10 @@ function treeDirective($mdTheming, $mdUtil) {
   }
 
   /*@ngInject*/
-  function controller($scope) {
+  function controller($scope, $attrs) {
     /*jshint validthis:true*/
     var vm = this;
+    var selectionRestictions;
     var branches = {};
 
     vm.selected = {};
@@ -107,17 +108,20 @@ function treeDirective($mdTheming, $mdUtil) {
       } else {
         deselect(hashKey);
       }
-      refreshViewValue();
     }
 
     function deselectAll() {
       Object.keys(branches).forEach(deselect);
     }
 
     function select(hashKey, hashedValue) {
+      var depth;
       var branch = branches[hashKey];
-      if (branch !== undefined) { branch.setSelected(true); }
-      vm.selected[hashKey] = hashedValue;
+      if (branch !== undefined) {
+        handleSelectionConflicts(branch)
+        branch.setSelected(true);
+        vm.selected[hashKey] = hashedValue;
+      }
     }
 
     function deselect(hashKey) {
@@ -127,6 +131,31 @@ function treeDirective($mdTheming, $mdUtil) {
       delete vm.selected[hashKey];
     }
 
+    // handle selection restrictions set by `[restrict-selection]` attr
+    function handleSelectionConflicts(branch) {
+      var restictions = getSelectionRestrictions();
+      if (restictions.single) { deselectAll(); }
+      var depth = branch.getDepth();
+      var conflictingDepths = Object.keys(vm.selected).filter(function (hashKey) {
+        return branches[hashKey].getDepth() !== depth;
+      });
+      if (restictions.depth && conflictingDepths.length) {
+        conflictingDepths.forEach(deselect);
+      }
+    }
+
+    // gets selection restrictions from the `[restrict-selection]` attr and puts it into an object
+    function getSelectionRestrictions() {
+      if (!selectionRestictions) {
+        selectionRestictions = {};
+        var attrArr = $attrs.restrictSelection ? $attrs.restrictSelection.split(',').map(function (item) { return item.trim(); }) : [];
+        attrArr.forEach(function (key) {
+          selectionRestictions[key] = true;
+        });
+      }
+      return selectionRestictions;
+    }
+
     function refreshViewValue() {
       var branchValue;
       var newValue;