Skip to content

Commit be3d56e

Browse files
rychkogrychkog
committed
feat(ng2-tree): add stylus, webpack-dev-server support
1 parent f03846a commit be3d56e

12 files changed

Lines changed: 145 additions & 111 deletions

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
node_modules/
22
.idea/
3-
build/
3+
build/
4+
typings/

‎components/ng2-tree.component.ts‎

Lines changed: 47 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,69 @@
1-
import {Input} from "angular2/core";
2-
import {Component} from "angular2/core";
1+
import {Input, Component} from "angular2/core";
32
import {CORE_DIRECTIVES} from "angular2/common";
43

54
@Component({
6-
selector: 'ng2-tree',
7-
template: `
5+
selector: 'ng2-tree',
6+
template: `
87
<ul class="tree">
98
<li>
10-
<span class="folding" (click)="switchFolding($event, tree)" [ngClass]="foldingType(tree)"></span><span class="node-value">{{tree.value}}</span>
9+
<span class="folding" (click)="switchFolding($event, tree)" [ngClass]="foldingType(tree)"></span>
10+
<span class="node-value">{{tree.value}}</span>
1111
<ng2-tree *ngFor="#child of tree.children" [tree]="child"></ng2-tree>
1212
</li>
1313
</ul>
14-
`,
15-
directives: [Ng2Tree, CORE_DIRECTIVES]
14+
`,
15+
directives: [Ng2Tree, CORE_DIRECTIVES]
1616
})
1717
export class Ng2Tree {
18-
@Input()
19-
private tree:any;
18+
private static COMPONENT_TAG_NAME: string = 'NG2-TREE';
19+
private static FOLDING_NODE_EXPANDED: string = 'node-expanded';
20+
private static FOLDING_NODE_COLLAPSED: string = 'node-collapsed';
21+
private static FOLDING_NODE_LEAF: string = 'node-leaf';
2022

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-
}
23+
@Input()
24+
private tree: any;
2925

30-
if (node.children) {
31-
node.foldingType = 'node-expanded';
32-
return 'node-expanded';
26+
private switchFolding($event: any, tree: any): void {
27+
this.handleFoldingType($event.target.parentNode, tree);
3328
}
3429

35-
node.foldingType = 'leaf';
36-
return 'leaf';
37-
}
30+
private foldingType(node: any): any {
31+
if (node.foldingType) {
32+
return node.foldingType;
33+
}
34+
35+
if (node.children) {
36+
node.foldingType = Ng2Tree.FOLDING_NODE_EXPANDED;
37+
} else {
38+
node.foldingType = Ng2Tree.FOLDING_NODE_LEAF;
39+
}
3840

39-
private nextFoldingType(node: any): string {
40-
if (node.foldingType === 'node-expanded') {
41-
return 'node-collapsed';
41+
return node.foldingType;
4242
}
4343

44-
return 'node-expanded';
45-
}
44+
private nextFoldingType(node: any): string {
45+
if (node.foldingType === Ng2Tree.FOLDING_NODE_EXPANDED) {
46+
return Ng2Tree.FOLDING_NODE_COLLAPSED;
47+
}
4648

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';
49+
return Ng2Tree.FOLDING_NODE_EXPANDED;
5550
}
5651

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-
}
52+
private handleFoldingType(parent: any, node: any) {
53+
if (node.foldingType === Ng2Tree.FOLDING_NODE_LEAF) {
54+
return;
55+
}
56+
57+
let display = 'block';
58+
if (node.foldingType === Ng2Tree.FOLDING_NODE_EXPANDED) {
59+
display = 'none';
60+
}
61+
62+
node.foldingType = this.nextFoldingType(node);
63+
for (let element of parent.childNodes) {
64+
if (element.nodeName === Ng2Tree.COMPONENT_TAG_NAME) {
65+
element.style.display = display;
66+
}
67+
}
6268
}
63-
}
6469
}

‎demo/app.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@ import {bootstrap} from 'angular2/platform/browser';
44
import {Component} from 'angular2/core';
55
import {Ng2Tree} from '../ng2-tree';
66

7+
require('./styles.styl');
8+
79
@Component({
810
selector: 'app',
911
template: `<ng2-tree [tree]="tree"></ng2-tree>`,
1012
directives: [Ng2Tree]
1113
})
1214
class App {
13-
private tree:any = {
15+
private tree: any = {
1416
value: 'A',
1517
children: [
1618
{

‎demo/colors.styl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
folding-color = orange
2+
node-value-color = green

‎demo/index.ejs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title><%= htmlWebpackPlugin.options.title %></title>
6+
</head>
7+
<body>
8+
<app>Loading...</app>
9+
10+
</body>
11+
</html>

‎demo/index.html‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎demo/styles.css‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎demo/styles.styl‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@import colors
2+
3+
node-expanded-symbol = '[-]'
4+
node-collapsed-symbol = '[+]'
5+
leaf-node-symbol = '\25cf' //black circle
6+
7+
.tree
8+
font-family: monospace
9+
10+
li
11+
padding: 3px 0
12+
list-style: none
13+
14+
.folding
15+
cursor: pointer
16+
padding: 0 5px 0 5px
17+
font-weight: bold
18+
color: folding-color
19+
20+
&.node-expanded
21+
&:after
22+
content: node-expanded-symbol
23+
24+
&.node-collapsed
25+
&:after
26+
content: node-collapsed-symbol
27+
28+
29+
&.node-leaf
30+
cursor: default
31+
32+
&:after
33+
content: leaf-node-symbol
34+
35+
.node-value
36+
font-weight: bold
37+
color: node-value-color

‎package.json‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,31 @@
44
"description": "angular2 component for representing ui tree structures",
55
"main": "ng2-tree.js",
66
"scripts": {
7-
"test": "echo \"Error: no test specified\" && exit 1"
7+
"preinstall": "rm -rf ./typings",
8+
"dev": "webpack-dev-server --inline --hot",
9+
"build": "webpack"
810
},
911
"author": "rychko.georgiy@gmail.com",
1012
"license": "ISC",
1113
"dependencies": {
1214
"angular2": "2.0.0-beta.12",
13-
"es6-shim": "0.34.4",
14-
"lodash": "^4.6.1",
15-
"reflect-metadata": "0.1.3",
15+
"es6-shim": "0.35.0",
16+
"lodash": "4.6.1",
17+
"reflect-metadata": "0.1.2",
1618
"rxjs": "5.0.0-beta.2",
17-
"systemjs": "^0.19.23",
18-
"ts-loader": "^0.8.1",
19+
"systemjs": "0.19.23",
20+
"ts-loader": "0.8.1",
1921
"typescript": "1.8.2",
2022
"webpack": "1.12.14",
2123
"zone.js": "0.6.6"
2224
},
2325
"devDependencies": {
2426
"clean-webpack-plugin": "0.1.8",
25-
"html-webpack-plugin": "^2.9.0"
27+
"css-loader": "0.23.1",
28+
"html-webpack-plugin": "2.9.0",
29+
"style-loader": "0.13.1",
30+
"stylus-loader": "1.5.1",
31+
"typings": "0.7.9",
32+
"webpack-dev-server": "1.14.1"
2633
}
2734
}

‎tsconfig.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"compilerOptions": {
44
"target": "es5",
55
"module": "commonjs",
6+
"moduleResolution": "node",
67
"sourceMap": true,
78
"declaration": true,
89
"removeComments": true,
@@ -15,5 +16,8 @@
1516
},
1617
"exclude": [
1718
"node_modules"
19+
],
20+
"files": [
21+
"typings/main.d.ts"
1822
]
1923
}

0 commit comments

Comments
 (0)
⚡