Skip to content

Commit c29e0c7

Browse files
rychkogrychkog
committed
fix(normalize tree rendering) - tree is rendered like a nested lists now
1 parent eaa3988 commit c29e0c7

4 files changed

Lines changed: 155 additions & 114 deletions

File tree

‎demo/index.html‎

Lines changed: 93 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -3,111 +3,117 @@
33

44
<head>
55
<title>Angular 2 QuickStart</title>
6+
7+
<link href="./styles.css" rel="stylesheet" type="text/css">
68
</head>
79

810
<body>
9-
<app>Loading...</app>
11+
<app>Loading...</app>
1012

13+
<div id="tree"></div>
1114

12-
<script src="../build/common.js"></script>
13-
<script src="../build/vendor.js"></script>
14-
<script src="../build/app.js"></script>
15-
<!--
16-
[-] A
17-
|
18-
+-----B
19-
|
20-
+-----C
21-
|
22-
+-----[-] D
23-
| |
24-
| +-----X
25-
| |
26-
| +-----Y
27-
|
28-
[+]
29-
-->
30-
<script>
31-
;
15+
<script src="../build/common.js"></script>
16+
<script src="../build/vendor.js"></script>
17+
<script src="../build/app.js"></script>
18+
<script>
19+
;
3220
(function () {
33-
var tree = {
34-
value: 'A',
35-
children: [
36-
{
37-
value: 'B',
38-
},
39-
{
40-
value: 'C',
41-
},
42-
{
43-
value: 'D',
21+
'use strict';
22+
var tree = {
23+
value: 'A',
4424
children: [
45-
{
46-
value: 'X',
47-
children: [
48-
{
49-
value: 'X',
50-
},
51-
{
52-
value: 'Y',
53-
}
54-
]
55-
},
56-
{
57-
value: 'Y',
58-
children: [
59-
{
60-
value: 'X',
61-
},
62-
{
63-
value: 'Y',
25+
{
26+
value: 'B',
27+
},
28+
{
29+
value: 'C',
30+
},
31+
{
32+
value: 'D',
6433
children: [
65-
{
66-
value: 'X',
67-
},
68-
{
69-
value: 'Y',
70-
}
71-
]
72-
}
73-
]
74-
}
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+
}
7569
]
76-
}
77-
]
78-
};
70+
};
7971

80-
function walkTree(tree, level) {
81-
var value = tree.value;
82-
if (!tree.children) {
83-
return draw(value, level, true);
84-
}
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+
}
8579

86-
var result = draw(value, level, false);
87-
tree.children.forEach(function (child) {
88-
result += walkTree(child, level + 1)
89-
});
80+
var nodeLi = document.createElement('li');
81+
var nodeValue = document.createElement('span');
82+
nodeValue.className = 'node-value';
83+
nodeValue.innerText = value;
9084

91-
return result;
92-
}
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+
});
9397

94-
function draw(value, level, isLeaf) {
95-
if (!level) {
96-
return isLeaf ? String(value) + '\n' : '[-] ' + value + '\n';
97-
}
98+
var nodeChildren = document.createElement('ul');
9899

99-
var result = _.repeat(' |' + _.repeat(' ', 5), level) + '\n';
100+
nodeLi.appendChild(nodeValue);
101+
nodeLi.appendChild(nodeFold);
102+
nodeLi.appendChild(nodeChildren);
100103

101-
if (!isLeaf) {
102-
value = '[-] ' + value;
103-
}
104+
tree.children.forEach(function (child) {
105+
nodeChildren.appendChild(walkTree2(child, level + 1));
106+
});
104107

105-
return level > 1 ? result + _.repeat(' |' + _.repeat(' ', 5), level - 1) + " +-----" + value + '\n' : " |\n +-----" + value + '\n';
106-
}
108+
return nodeLi;
109+
}
107110

108-
console.log(walkTree(tree, 0));
111+
console.log(walkTree2(tree, 0));
112+
var result = document.createElement('ul');
113+
result.appendChild(walkTree2(tree, 0));
114+
document.getElementById('tree').appendChild(result);
109115
}());
110-
</script>
116+
</script>
111117
</body>
112118

113119
</html>

‎demo/styles.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
#tree {
2+
font-family: monospace;
3+
}
4+
5+
#tree ul {
6+
margin-left: 0px;
7+
padding-left: 25px;
8+
}
9+
10+
11+
#tree li {
12+
padding: 3px 0;
13+
}
14+
15+
#tree .folding {
16+
cursor: pointer;
17+
padding: 0 5px 0 5px;
18+
font-weight: bold;
19+
color: #0b97c4;
20+
}
21+
22+
#tree .node-value {
23+
font-weight: bold;
24+
color: #8A6343;
25+
}

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"zone.js": "0.5.15"
2222
},
2323
"devDependencies": {
24+
"clean-webpack-plugin": "0.1.8",
2425
"html-webpack-plugin": "^2.9.0"
2526
}
2627
}

‎webpack.config.js‎

Lines changed: 36 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,56 @@
22

33
const path = require('path');
44
const webpack = require('webpack');
5-
const HtmlWebpackPlugin = require('html-webpack-plugin');
5+
//const HtmlWebpackPlugin = require('html-webpack-plugin');
6+
const CleanWebpackPlugin = require('clean-webpack-plugin');
67

78
let config = {};
89

9-
config.devtool = 'sourcemap'
10-
config.context = __dirname
10+
config.devtool = 'sourcemap';
11+
config.context = __dirname;
1112

1213
config.resolve = {
13-
root: __dirname,
14-
extensions: ['', '.ts', '.js', '.json']
15-
}
14+
root: __dirname,
15+
extensions: ['', '.ts', '.js', '.json']
16+
};
1617

1718
config.entry = {
18-
vendor: [
19-
'zone.js/dist/zone-microtask',
20-
'reflect-metadata',
21-
'angular2/common',
22-
'angular2/core',
23-
'lodash'
24-
],
25-
'app': ['./ng2-tree.ts', './demo/app.ts'],
19+
vendor: [
20+
'zone.js/dist/zone-microtask',
21+
'reflect-metadata',
22+
'angular2/common',
23+
'angular2/core',
24+
'lodash'
25+
],
26+
'app': ['./ng2-tree.ts', './demo/app.ts'],
2627
};
2728

2829
config.output = {
29-
path: path.join(__dirname, './build'),
30-
filename: '[name].js'
31-
}
30+
path: path.join(__dirname, './build'),
31+
filename: '[name].js'
32+
};
3233

3334
config.module = {
34-
loaders: [
35-
{
36-
test: /\.ts$/,
37-
loader: 'ts-loader'
38-
}
39-
]
40-
}
35+
loaders: [
36+
{
37+
test: /\.ts$/,
38+
loader: 'ts-loader'
39+
},
40+
{
41+
test: /\.css$/,
42+
loader: 'raw'
43+
}
44+
]
45+
};
4146

4247
config.plugins = [
43-
new webpack.optimize.CommonsChunkPlugin({
44-
name: 'common'
45-
})
48+
new CleanWebpackPlugin(['build'], {
49+
root: __dirname,
50+
verbose: true
51+
}),
52+
new webpack.optimize.CommonsChunkPlugin({
53+
name: 'common'
54+
})
4655
];
4756

4857
module.exports = config;

0 commit comments

Comments
 (0)
⚡