Skip to content

Commit e0a4911

Browse files
Ben RubinBen Rubin
Ben Rubin
authored and
Ben Rubin
committed
fix selection restrictions
1 parent 59a49b1 commit e0a4911

File tree

4 files changed

+52
-274
lines changed

4 files changed

+52
-274
lines changed

‎docsApp/pages/home/home.controller.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,42 +13,42 @@ function HomeController($scope) {
1313
}, true);
1414

1515

16-
vm.locationData = [
16+
vm.locationData2 = [
1717
{
1818
id: 1,
19-
name: 'One',
19+
name: 'Location One',
2020
menus: [
2121
{
2222
id: 1,
23-
name: 'One',
23+
name: 'Menu One',
2424
items: [
2525
{
2626
id: 1,
27-
name: 'One'
27+
name: 'Item One'
2828
}
2929
]
3030
}
3131
]
3232
},
3333
{
3434
id: 2,
35-
name: 'Two',
35+
name: 'Location Two',
3636
menus: [
3737
{
3838
id: 2,
39-
name: 'Two',
39+
name: 'Menu Two',
4040
items: [
4141
{
4242
id: 2,
43-
name: 'Two'
43+
name: 'Item Two'
4444
}
4545
]
4646
}
4747
]
4848
}
4949
];
5050

51-
vm.locationData2 = [
51+
vm.locationData = [
5252
{
5353
id: 1,
5454
name: 'Smashburger texas Austin north',

‎docsApp/pages/home/home.html‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
1-
<input ng-model="searchTerm" />
21
<div layout="row">
3-
<md-tree ng-model="vm.selectedItems" restrict-selection="depth" flex>
4-
<md-branch branch-repeat="location in vm.locationData | filter: searchTerm | orderBy: location.name" class="md-2-line" select>
5-
<div class="md-branch-text">
6-
<h3>{{location.name}}</h3>
7-
<p>Location</p>
8-
</div>
9-
10-
<md-branch branch-repeat="menu in location.menus | filter: searchTerm | orderBy: menu.name" class="md-2-line" select>
2+
<div layout="column" flex>
3+
<input type="search" style="line-height: 48px; padding-left: 16px; border: none; outline: none;" placeholder="Search..." ng-model="searchTerm" />
4+
<md-tree ng-model="vm.selectedItems" restrict-selection="depth" open-on-filter="searchTerm" flex>
5+
<md-branch branch-repeat="location in vm.locationData | filter: searchTerm | orderBy: location.name" class="md-2-line" select>
116
<div class="md-branch-text">
12-
<h3>{{menu.name}}</h3>
13-
<p>Menu</p>
7+
<h3>{{location.name}}</h3>
8+
<p>Location</p>
149
</div>
1510

16-
<md-branch branch-repeat="item in menu.items | filter: searchTerm | orderBy: item.name" class="md-2-line">
11+
<md-branch branch-repeat="menu in location.menus | filter: searchTerm | orderBy: menu.name" class="md-2-line" select>
1712
<div class="md-branch-text">
18-
<h3>{{item.name}}</h3>
19-
<p>Item</p>
13+
<h3>{{menu.name}}</h3>
14+
<p>Menu</p>
2015
</div>
16+
17+
<md-branch branch-repeat="item in menu.items | filter: searchTerm | orderBy: item.name" class="md-2-line" select>
18+
<div class="md-branch-text">
19+
<h3>{{item.name}}</h3>
20+
<p>Item</p>
21+
</div>
22+
</md-branch>
2123
</md-branch>
2224
</md-branch>
23-
</md-branch>
24-
</md-tree>
25+
</md-tree>
26+
</div>
2527

2628
<div class="master-panel closed">
2729
<h4 style="width: 120px; margin: 0 auto; padding-top: 16px;">Master Panel</h4>

‎src/js/branch.js‎

Lines changed: 5 additions & 233 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
angular
22
.module('angular-material-tree')
3-
.directive('mdBranch', branchDirective)
4-
.controller('BranchController', branchController);
3+
.directive('mdBranch', branchDirective);
54

65

76
var CHECKBOX_SELECTION_INDICATOR = angular.element('<div class="checkbox-container"><div class="checkbox-icon"></div></div>');
@@ -22,8 +21,7 @@ function branchDirective($parse, $document, $mdUtil) {
2221
priority: 1000,
2322
terminal: true,
2423
transclude: 'element',
25-
compile: compile,
26-
// controller: 'BranchController'
24+
compile: compile
2725
};
2826

2927

@@ -58,13 +56,6 @@ function branchDirective($parse, $document, $mdUtil) {
5856
}
5957
scope.startWatching = startWatching;
6058
scope.killWatching = killWatching;
61-
// ctrl.setOpenState(isOpen);
62-
//
63-
// // add tree controller and register if available
64-
// if (ctrls[2]) {
65-
// ctrl.treeCtrl = ctrls[2];
66-
// ctrl.registerBranch();
67-
// }
6859

6960

7061
function updateBranch(newItems, oldItems) {
@@ -194,6 +185,8 @@ function branchDirective($parse, $document, $mdUtil) {
194185
$scope.repeatName = repeatName;
195186
$scope[repeatName] = items && items[index];
196187
$scope.$odd = !($scope.$even = (index & 1) === 0);
188+
$scope.$depth = ($scope.$parent.$depth + 1) || 0;
189+
items[index].$$depth = $scope.$depth;
197190
}
198191

199192
function updateState($scope, index) {
@@ -203,28 +196,8 @@ function branchDirective($parse, $document, $mdUtil) {
203196
element.toggleClass('md-open', item.$$isOpen);
204197
if (item.$$isOpen) {
205198
$mdUtil.reconnectScope($scope);
206-
} else {
207-
// disconnectScope($scope);
208-
}
209-
210-
if (item.$$isOpen !== undefined && item.$$isOpen !== $scope.isOpen) {
211-
// $scope.isOpen = item.$$isOpen;
212-
// console.log($scope.$element[0])
213-
// console.log('a', item.$$isOpen);
214-
setTimeout(function () {
215-
// console.log($scope.$element[0])
216-
// console.log('b', item.$$isOpen, item, $scope[$scope.repeatName])
217-
// $scope.$element.controller('md').setOpenState(item.$$isOpen, true);
218-
}, 100);
199+
$scope.startWatching();
219200
}
220-
221-
// console.log('-- begin');
222-
// console.log(element[0])
223-
// console.log('pooled', pooled, item.$$isOpen !== undefined, item.$$isOpen !== $scope.isOpen);
224-
// console.log($scope);
225-
// console.log(item);
226-
// console.log('--');
227-
// console.log();
228201
}
229202

230203
function initState(item) {
@@ -272,204 +245,3 @@ function branchDirective($parse, $document, $mdUtil) {
272245
}
273246

274247
}
275-
276-
277-
278-
279-
280-
281-
282-
283-
// --- Controller ---
284-
285-
/*@ngInject*/
286-
function branchController($scope, $mdUtil, $animateCss) {
287-
/*jshint validthis: true*/
288-
var vm = this;
289-
$scope.isOpen = false;
290-
291-
// injected $element is holds refernce to the comment. heres how to get arround this
292-
var $element = $scope.$element;
293-
294-
// vm.startWatching; set in link function
295-
// vm.killWatching; set in link function
296-
vm.setOpenState = setOpenState;
297-
vm.setSelected = setSelected;
298-
vm.registerBranch = registerBranch;
299-
300-
if (!$element) { return; }
301-
var arrow = $element[0].querySelector('.md-branch-icon');
302-
var ngClick = $element.attr('ng-click');
303-
304-
if (!ngClick) {
305-
$element.on('click', handleClick);
306-
}
307-
308-
$scope.$on('$destroy', function () {
309-
// tree controller may not exist if branch was never opened
310-
if (vm.treeCtrl) {
311-
vm.treeCtrl.unregisterBranch(vm.treeCtrl.hashGetter($scope[$scope.repeatName]));
312-
}
313-
});
314-
315-
316-
function handleClick(e) {
317-
// toggel branch
318-
if (e.target.classList.contains('md-branch-icon-container')) {
319-
toggleBranchClick(e);
320-
return;
321-
}
322-
323-
// handle select
324-
var isSelect = $element.attr('select') !== undefined;
325-
if (isSelect && branchContainsElement(e.target)) {
326-
var selected = $element.attr('selected') !== undefined;
327-
328-
// deselect all if user did not click the checkbox
329-
// var hadMultiple = false;
330-
if (!e.target.classList.contains('checkbox-container')) { // clicked on checkbox
331-
if (Object.keys(getTreeCtrl().selected).length > 1) {
332-
selected = false;
333-
}
334-
getTreeCtrl().deselectAll();
335-
}
336-
337-
$element.attr('selected', !selected);
338-
getTreeCtrl().toggleSelect(!selected, getTreeCtrl().hashGetter($scope[$scope.repeatName]), $scope[$scope.repeatName]);
339-
e.stopPropagation();
340-
} else {
341-
toggleBranchClick(e);
342-
}
343-
}
344-
345-
function setOpenState(value, force) {
346-
// if (isOpen == false) { disconnectScope($scope); }
347-
if (force !== true && value === $scope.isOpen) { return; }
348-
$scope.isOpen = value;
349-
if ($scope.isOpen === true) { open(true, force); }
350-
else { close(true, force); }
351-
}
352-
353-
function toggleBranchClick(e) {
354-
if (!branchContainsElement(e.target)) { return; }
355-
if ($scope.isOpen !== true) { open(); }
356-
else { close(); }
357-
e.stopPropagation();
358-
}
359-
360-
function branchContainsElement(el) {
361-
var innerContainer = $element[0].querySelector('.md-branch-inner');
362-
if (el === innerContainer) { return true; } // check if el is container be preceding
363-
var parent = el.parentNode;
364-
365-
while (parent && parent !== document.body) {
366-
if (parent === innerContainer) { return true; }
367-
if (parent.nodeName === 'MD-BRANCH') { return false; }
368-
parent = parent.parentNode;
369-
}
370-
return false;
371-
}
372-
373-
374-
function open(noAnimation, force) {
375-
if (force !== true && $scope.isOpen) { return; }
376-
$mdUtil.reconnectScope($scope);
377-
$scope.isOpen = true;
378-
setItemOpenState();
379-
vm.startWatching();
380-
$element.toggleClass('md-no-animation', noAnimation || false);
381-
382-
$mdUtil.nextTick(function () {
383-
var container = angular.element($element[0].querySelector('.md-branch-container'));
384-
$element.addClass('md-open');
385-
container.addClass('md-overflow md-show');
386-
387-
$animateCss(container, {
388-
from: {'max-height': '0px', opacity: 0},
389-
to: {'max-height': getHeight(), opacity: 1}
390-
})
391-
.start()
392-
.then(function () {
393-
container.css('max-height', 'none');
394-
container.removeClass('md-overflow md-show');
395-
});
396-
});
397-
}
398-
399-
function close(noAnimation, force) {
400-
if (force !== true && !$scope.isOpen) { return; }
401-
$scope.isOpen = false;
402-
setItemOpenState();
403-
vm.killWatching();
404-
$element.toggleClass('md-no-animation', noAnimation || false);
405-
406-
$mdUtil.nextTick(function () {
407-
var container = angular.element($element[0].querySelector('.md-branch-container'));
408-
$element.removeClass('md-open');
409-
container.addClass('md-overflow md-hide');
410-
$animateCss(container, {
411-
from: {'max-height': getHeight(), opacity: 1},
412-
to: {'max-height': '0px', opacity: 0}
413-
})
414-
.start()
415-
.then(function () {
416-
container.removeClass('md-overflow md-hide');
417-
$mdUtil.disconnectScope($scope);
418-
});
419-
});
420-
}
421-
422-
function setItemOpenState() {
423-
var item = $scope[$scope.repeatName];
424-
item.$$isOpen = $scope.isOpen;
425-
}
426-
427-
function getHeight() {
428-
return $element[0].scrollHeight + 'px';
429-
}
430-
431-
// nested, nested branches cannot access the tree controller due to their parents not being added to the dom.
432-
// To fix this we will walk the dom to find the tree and grab its controller
433-
function getTreeCtrl() {
434-
if (vm.treeCtrl) { return vm.treeCtrl; }
435-
436-
var parent = $element[0].parentNode;
437-
while (parent && parent !== document.body) {
438-
if (parent.nodeName === 'MD-TREE') {
439-
vm.treeCtrl = angular.element(parent).controller('mdTree');
440-
registerBranch();
441-
return vm.treeCtrl;
442-
}
443-
parent = parent.parentNode;
444-
}
445-
446-
console.error('`<md-branch>` element is not nested in a `<md-tree>` element. Selection will not work');
447-
}
448-
449-
// register branch if tree controller is accesable
450-
function registerBranch() {
451-
vm.treeCtrl.registerBranch(vm.treeCtrl.hashGetter($scope[$scope.repeatName]), {
452-
setSelected: setSelected,
453-
getDepth: getDepth
454-
});
455-
setSelected(vm.treeCtrl.selected[vm.treeCtrl.hashGetter($scope[$scope.repeatName])] !== undefined);
456-
}
457-
458-
function getDepth() {
459-
if ($scope.$depth) { return $scope.$depth; }
460-
var depth = 0;
461-
var parent = $element[0].parentNode;
462-
while (parent && parent !== document.body) {
463-
if (parent.nodeName === 'MD-TREE') { break; }
464-
if (parent.nodeName === 'MD-BRANCH') { depth += 1; }
465-
parent = parent.parentNode;
466-
}
467-
$scope.$depth = depth;
468-
return depth;
469-
}
470-
471-
// set select state
472-
function setSelected(isSelected) {
473-
if ($element) { $element.attr('selected', isSelected); }
474-
}
475-
}

0 commit comments

Comments
 (0)