Skip to content

Commit f03846a

Browse files
rychkogrychkog
committed
feat(ng2-tree): tree is implemented as an Angular2 component
1 parent c29e0c7 commit f03846a

6 files changed

Lines changed: 131 additions & 137 deletions

File tree

‎components/ng2-tree.component.ts‎

Lines changed: 56 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,64 @@
1-
import {Component} from 'angular2/core';
1+
import {Input} from "angular2/core";
2+
import {Component} from "angular2/core";
3+
import {CORE_DIRECTIVES} from "angular2/common";
24

35
@Component({
46
selector: 'ng2-tree',
57
template: `
6-
<pre>
7-
[-] A
8-
|
9-
+-----B
10-
|
11-
+-----C
12-
|
13-
+-----[-] D
14-
| |
15-
| +-----X
16-
| |
17-
| +-----Y
18-
|
19-
[+]
20-
</pre>
21-
`
8+
<ul class="tree">
9+
<li>
10+
<span class="folding" (click)="switchFolding($event, tree)" [ngClass]="foldingType(tree)"></span><span class="node-value">{{tree.value}}</span>
11+
<ng2-tree *ngFor="#child of tree.children" [tree]="child"></ng2-tree>
12+
</li>
13+
</ul>
14+
`,
15+
directives: [Ng2Tree, CORE_DIRECTIVES]
2216
})
2317
export class Ng2Tree {
18+
@Input()
19+
private tree:any;
2420

21+
private switchFolding($event: any, tree: any): void {
22+
this.handleFoldingType($event.target.parentNode, tree);
23+
}
24+
25+
private foldingType(node: any): any {
26+
if (node.foldingType) {
27+
return node.foldingType;
28+
}
29+
30+
if (node.children) {
31+
node.foldingType = 'node-expanded';
32+
return 'node-expanded';
33+
}
34+
35+
node.foldingType = 'leaf';
36+
return 'leaf';
37+
}
38+
39+
private nextFoldingType(node: any): string {
40+
if (node.foldingType === 'node-expanded') {
41+
return 'node-collapsed';
42+
}
43+
44+
return 'node-expanded';
45+
}
46+
47+
private handleFoldingType(parent: any, node: any) {
48+
if (node.foldingType === 'leaf') {
49+
return;
50+
}
51+
52+
let display = 'block';
53+
if (node.foldingType === 'node-expanded') {
54+
display = 'none';
55+
}
56+
57+
node.foldingType = this.nextFoldingType(node);
58+
for (let element of parent.childNodes) {
59+
if (element.nodeName === 'NG2-TREE') {
60+
element.style.display = display;
61+
}
62+
}
63+
}
2564
}

‎demo/app.ts‎

Lines changed: 52 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,60 @@ import {Component} from 'angular2/core';
55
import {Ng2Tree} from '../ng2-tree';
66

77
@Component({
8-
selector: 'app',
9-
template: `
10-
<h1>{{msg}}</h1>
11-
<ng2-tree></ng2-tree>
12-
`,
13-
directives: [Ng2Tree]
8+
selector: 'app',
9+
template: `<ng2-tree [tree]="tree"></ng2-tree>`,
10+
directives: [Ng2Tree]
1411
})
1512
class App {
16-
public msg:string = 'Hello, World!';
13+
private tree:any = {
14+
value: 'A',
15+
children: [
16+
{
17+
value: 'B',
18+
},
19+
{
20+
value: 'C',
21+
},
22+
{
23+
value: 'D',
24+
children: [
25+
{
26+
value: 'X',
27+
children: [
28+
{
29+
value: 'X',
30+
},
31+
{
32+
value: 'Y',
33+
}
34+
]
35+
},
36+
{
37+
value: 'Y',
38+
children: [
39+
{
40+
value: 'X',
41+
},
42+
{
43+
value: 'Y',
44+
children: [
45+
{
46+
value: 'X',
47+
},
48+
{
49+
value: 'Y',
50+
}
51+
]
52+
}
53+
]
54+
}
55+
]
56+
},
57+
{
58+
value: 'W'
59+
}
60+
]
61+
};
1762
}
1863

1964
bootstrap(App);

‎demo/index.html‎

Lines changed: 0 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -10,110 +10,10 @@
1010
<body>
1111
<app>Loading...</app>
1212

13-
<div id="tree"></div>
14-
1513
<script src="../build/common.js"></script>
1614
<script src="../build/vendor.js"></script>
1715
<script src="../build/app.js"></script>
18-
<script>
19-
;
20-
(function () {
21-
'use strict';
22-
var tree = {
23-
value: 'A',
24-
children: [
25-
{
26-
value: 'B',
27-
},
28-
{
29-
value: 'C',
30-
},
31-
{
32-
value: 'D',
33-
children: [
34-
{
35-
value: 'X',
36-
children: [
37-
{
38-
value: 'X',
39-
},
40-
{
41-
value: 'Y',
42-
}
43-
]
44-
},
45-
{
46-
value: 'Y',
47-
children: [
48-
{
49-
value: 'X',
50-
},
51-
{
52-
value: 'Y',
53-
children: [
54-
{
55-
value: 'X',
56-
},
57-
{
58-
value: 'Y',
59-
}
60-
]
61-
}
62-
]
63-
}
64-
]
65-
},
66-
{
67-
value: 'W'
68-
}
69-
]
70-
};
71-
72-
function walkTree2(tree, level) {
73-
var value = tree.value;
74-
if (!tree.children) {
75-
var li = document.createElement('li');
76-
li.innerHTML = value;
77-
return li;
78-
}
79-
80-
var nodeLi = document.createElement('li');
81-
var nodeValue = document.createElement('span');
82-
nodeValue.className = 'node-value';
83-
nodeValue.innerText = value;
84-
85-
var nodeFold = document.createElement('span');
86-
nodeFold.innerText = '[-]';
87-
nodeFold.className = 'folding';
88-
nodeFold.addEventListener('click', function() {
89-
if (nodeFold.innerText === '[-]') {
90-
nodeFold.innerText = '[+]';
91-
nodeFold.parentNode.querySelector('span + ul').style.display = 'none';
92-
} else {
93-
nodeFold.innerText = '[-]';
94-
nodeFold.parentNode.querySelector('span + ul').style.display = 'block';
95-
}
96-
});
97-
98-
var nodeChildren = document.createElement('ul');
99-
100-
nodeLi.appendChild(nodeValue);
101-
nodeLi.appendChild(nodeFold);
102-
nodeLi.appendChild(nodeChildren);
103-
104-
tree.children.forEach(function (child) {
105-
nodeChildren.appendChild(walkTree2(child, level + 1));
106-
});
107-
108-
return nodeLi;
109-
}
11016

111-
console.log(walkTree2(tree, 0));
112-
var result = document.createElement('ul');
113-
result.appendChild(walkTree2(tree, 0));
114-
document.getElementById('tree').appendChild(result);
115-
}());
116-
</script>
11717
</body>
11818

11919
</html>

‎demo/styles.css‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,35 @@
1-
#tree {
1+
.tree {
22
font-family: monospace;
33
}
44

5-
#tree ul {
6-
margin-left: 0px;
7-
padding-left: 25px;
8-
}
9-
10-
11-
#tree li {
5+
.tree li {
126
padding: 3px 0;
7+
list-style: none;
138
}
149

15-
#tree .folding {
10+
.tree .folding {
1611
cursor: pointer;
1712
padding: 0 5px 0 5px;
1813
font-weight: bold;
1914
color: #0b97c4;
2015
}
2116

22-
#tree .node-value {
17+
.tree .folding.node-expanded:after {
18+
content: '[-]';
19+
}
20+
21+
.tree .folding.node-collapsed:after {
22+
content: '[+]';
23+
}
24+
25+
.tree .folding.leaf {
26+
cursor: default;
27+
}
28+
.tree .folding.leaf:after {
29+
content: '\25cf';
30+
}
31+
32+
.tree .node-value {
2333
font-weight: bold;
2434
color: #8A6343;
2535
}

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"author": "rychko.georgiy@gmail.com",
1010
"license": "ISC",
1111
"dependencies": {
12-
"angular2": "2.0.0-beta.7",
12+
"angular2": "2.0.0-beta.12",
1313
"es6-shim": "0.34.4",
1414
"lodash": "^4.6.1",
1515
"reflect-metadata": "0.1.3",
@@ -18,7 +18,7 @@
1818
"ts-loader": "^0.8.1",
1919
"typescript": "1.8.2",
2020
"webpack": "1.12.14",
21-
"zone.js": "0.5.15"
21+
"zone.js": "0.6.6"
2222
},
2323
"devDependencies": {
2424
"clean-webpack-plugin": "0.1.8",

‎webpack.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ config.resolve = {
1717

1818
config.entry = {
1919
vendor: [
20-
'zone.js/dist/zone-microtask',
20+
'zone.js',
2121
'reflect-metadata',
2222
'angular2/common',
2323
'angular2/core',

0 commit comments

Comments
 (0)
⚡