Skip to content
This repository was archived by the owner on Nov 20, 2018. It is now read-only.

Commit 550c97f

Browse files
qjonqjon
committed
New way of build
1 parent 2569ad1 commit 550c97f

19 files changed

+124
-34
lines changed

‎README.md

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
1+
# angular2-tree
2+
3+
Simple component to display tree structure
4+
15
[![npm (scoped)](https://img.shields.io/npm/v/@rign/angular2-tree.svg)]()
26
[![Build Status](https://travis-ci.org/qjon/angular2-tree.svg?branch=master)](https://travis-ci.org/qjon/angular2-tree)
37
[![npm version](https://badge.fury.io/js/%40rign%2Fangular2-tree.svg)](https://badge.fury.io/js/%40rign%2Fangular2-tree.svg)
48
[![npm](https://img.shields.io/npm/dm/@rign\/angular2-tree.svg)](https://img.shields.io/npm/dm/@rign\/angular2-tree.svg)
59
[![npm](https://img.shields.io/npm/l/@rign\/angular2-tree.svg)](https://github.com/qjon/angular2-tree/blob/master/LICENSE)
610

7-
# angular2-tree
8-
911
## Installation
1012

1113
npm i @rign/angular2-tree
1214

1315

1416
## Usage
1517

16-
Include _TreeModule_ in your application module and create Store with empty state and initialize Effects
18+
Include _TreeModule_ in your application module and create Store with empty state and initialize Effects.
1719

18-
import {TreeModule} from '@rign/angular2-tree/main';
20+
import {TreeModule} from '@rign/angular2-tree';
1921

2022
@NgModule({
2123
declarations: [
@@ -29,14 +31,15 @@ Include _TreeModule_ in your application module and create Store with empty sta
2931
]
3032
})
3133

32-
You need also init translations module, because Tree needs it to translate all labels.
34+
You need also init translations and animations module, because Tree needs it to translate all labels and animate expanding and collapsing.
3335

3436
@NgModule({
3537
declarations: [
3638
...
3739
],
3840
imports: [
3941
...
42+
BrowserAnimationsModule,
4043
TranslationModule.forRoot(),
4144
TreeModule.forRoot()
4245
]
@@ -103,6 +106,18 @@ In component where you create tree, you should register _tree store_, create _Tr
103106
}
104107
}
105108

109+
### CSS Styles
110+
111+
To load default CSS styles and makes our tree looks nice you have to add 2 CSS files to your _angular-cli.json_ file:
112+
113+
...
114+
"styles": [
115+
"../node_modules/bootstrap/dist/css/bootstrap.css",
116+
"../node_modules/font-awesome/css/font-awesome.css",
117+
"../node_modules/@rign/angular2-tree/styles.css",
118+
"styles.css"
119+
],
120+
106121

107122
### Create own item template
108123

@@ -233,6 +248,10 @@ At the end do not forget to add this effects to your app.
233248

234249
## Changes
235250

251+
### v2.3.0
252+
* fix problem with building tree component in AOT
253+
* fix few small issues
254+
236255
### v2.2.0
237256
* add _forRoot_ static method
238257
* change translation module to _ng2-translate_
@@ -302,6 +321,9 @@ At the end do not forget to add this effects to your app.
302321
## Demo
303322

304323
Working demo with _local storage_ you can find [here](https://qjon.github.io/angular2-tree/).
324+
To run Demo locally clone this repository and run
325+
326+
npm start
305327

306328
## License
307329

‎inlineAssets.js renamed to ‎config/inlineAssets.js

File renamed without changes.

‎config/package.json

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "@rign/angular2-tree",
3+
"version": "2.3.0",
4+
"license": "MIT",
5+
"angular-cli": {},
6+
"scripts": {
7+
"start": "ng serve",
8+
"build": "ng build",
9+
"lint": "ng lint",
10+
"e2e": "ng e2e",
11+
"test": "./node_modules/.bin/karma --config karma.conf.js start"
12+
},
13+
"repository": {
14+
"type": "git",
15+
"url": "git+ssh://[email protected]/qjon/angular2-tree.git"
16+
},
17+
"main": "./bundles/angular2-teee.umd.min.js",
18+
"module": "./esm5/angular2-tree.es5.js",
19+
"es2015": "./esm2015/angular2-tree.es2015.js",
20+
"typings": "./angular2-tree.d.ts",
21+
"author": "Rafal Ignaszewski <[email protected]> http://ignaszewski.pl",
22+
"dependencies": {
23+
"@angular/animations": "^5.2.0",
24+
"@angular/cdk": "^2.0.0-beta.12",
25+
"@angular/common": "^5.2.0",
26+
"@angular/compiler": "^5.2.0",
27+
"@angular/core": "^5.2.0",
28+
"@angular/forms": "^5.2.0",
29+
"@angular/http": "^5.2.0",
30+
"@angular/platform-browser": "^5.2.0",
31+
"@angular/platform-browser-dynamic": "^5.2.0",
32+
"@angular/router": "^5.0.0",
33+
"@ngrx/core": "^1.2.0",
34+
"@ngrx/effects": "^5.1.0",
35+
"@ngrx/store": "^5.1.0",
36+
"@ngrx/store-devtools": "^4.0.0",
37+
"angular2-uuid": "^1.1.1",
38+
"bootstrap": "^3.3.7",
39+
"core-js": "^2.4.1",
40+
"font-awesome": "^4.6.3",
41+
"ng2-dnd": "^2.2.2",
42+
"ng2-translate": "^5.0.0",
43+
"ngx-contextmenu": "^2.0.0-beta.6",
44+
"rxjs": "^5.5.6",
45+
"zone.js": "^0.8.4"
46+
},
47+
"devDependencies": {
48+
}
49+
}

‎rollup-esm2015.conf.js renamed to ‎config/rollup-esm2015.conf.js

File renamed without changes.

‎rollup-esm5.conf.js renamed to ‎config/rollup-esm5.conf.js

File renamed without changes.

‎rollup-umd.conf.js renamed to ‎config/rollup-umd.conf.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,5 +94,5 @@ export default {
9494
'rxjs/Observable',
9595
'rxjs/Subscription',
9696
'ngx-contextmenu'
97-
],
97+
]
9898
}

‎tsconfig-es2015.json renamed to ‎config/tsconfig-es2015.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,29 @@
33
"declaration": true,
44
"module": "es2015",
55
"target": "es2015",
6-
"baseUrl": "./tmp",
6+
"baseUrl": "../tmp",
77
"experimentalDecorators": true,
88
"moduleResolution": "node",
99
"emitDecoratorMetadata": true,
10-
"outDir": "./tmp/esm2015",
11-
"rootDir": "./tmp",
10+
"outDir": "../tmp/esm2015",
11+
"rootDir": "../tmp",
1212
"skipLibCheck": true,
1313
"lib": [
1414
"es2015",
1515
"dom"
1616
]
1717
},
1818
"files": [
19-
"./tmp/public_api.ts"
19+
"../tmp/public_api.ts"
2020
],
2121
"exclude": [
22-
"./node_modules"
22+
"../node_modules"
2323
],
2424
"angularCompilerOptions": {
2525
"annotateForClosureCompiler": true,
2626
"strictMetadataEmit": true,
2727
"skipTemplateCodegen": true,
2828
"flatModuleOutFile": "angular2-tree.js",
29-
"flatModuleId": "angular2-tree"
29+
"flatModuleId": "@rign/angular2-tree"
3030
}
3131
}

‎tsconfig-esm5.json renamed to ‎config/tsconfig-esm5.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
"extends": "./tsconfig-es2015.json",
33
"compilerOptions": {
44
"target": "es5",
5-
"outDir": "./tmp/esm5",
6-
"rootDir": "./tmp"
5+
"outDir": "../tmp/esm5",
6+
"rootDir": "../tmp"
77
},
88
"angularCompilerOptions": {
99
"annotateForClosureCompiler": true,
1010
"strictMetadataEmit": true,
1111
"skipTemplateCodegen": true,
1212
"flatModuleOutFile": "angular2-tree.js",
13-
"flatModuleId": "angular2-tree"
13+
"flatModuleId": "@rign/angular2-tree"
1414
}
1515
}

‎demo/src/app/app.module.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {HttpClientModule} from '@angular/common/http';
99
import {StoreModule} from '@ngrx/store';
1010
import {EffectsModule} from '@ngrx/effects';
1111
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
12-
import {TreeModule} from '../../../src/tree.module';
12+
import {TreeModule} from '../../../main';
1313
import {DndModule} from 'ng2-dnd';
1414

1515
@NgModule({

‎demo/src/app/treeOne/treeOne.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import {BrowserModule} from '@angular/platform-browser';
22
import {NgModule} from '@angular/core';
33
import {FormsModule} from '@angular/forms';
4-
import {HttpModule} from '@angular/http';
54
import {TreeModule} from '../../../../main';
65
import {TreeOneNodeService} from './treeOneNode.service';
76
import {TreeOneComponent} from './treeOne.component';
7+
import {HttpClientModule} from '@angular/common/http';
88

99
@NgModule({
1010
declarations: [TreeOneComponent],
1111
exports: [TreeOneComponent],
1212
imports: [
1313
BrowserModule,
1414
FormsModule,
15-
HttpModule,
15+
HttpClientModule,
1616
TreeModule
1717
],
1818
providers: [TreeOneNodeService]

‎demo/src/app/treeTwo/newItem.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<span *ngIf="!isEditMode" class="tree-item-name" (click)="onSelect()">{{node.name}}</span>
1313
<form name="form">
1414
<input #inputElement type="text" class="form-control" *ngIf="isEditMode" [formControl]="nameField"
15-
name="name" (keydown)="onChange($event)" (blur)="onBlur($event)"/>
15+
name="name" (keydown)="onChange($event)" (blur)="onBlur()"/>
1616
</form>
1717
</div>
1818
<div class="col-sm-4 text-right">

‎demo/src/app/treeTwo/treeTwo.component.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
import {Component, OnInit} from '@angular/core';
2-
import {IConfiguration, IContextMenu, ITreeState, ITreeData, TreeModel, TreeActionsService, NodeDispatcherService, treeStateSelector} from '../../../../main';
2+
import {
3+
IConfiguration,
4+
IContextMenu,
5+
ITreeData,
6+
ITreeState,
7+
NodeDispatcherService,
8+
TreeActionsService,
9+
TreeModel,
10+
treeStateSelector
11+
} from '../../../../main';
312
import {Store} from '@ngrx/store';
413
import {Observable} from 'rxjs/Observable';
514
import {TreeTwoNodeService} from './treeTwoNode.service';

‎demo/src/app/treeTwo/treeTwo.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import {BrowserModule} from '@angular/platform-browser';
22
import {NgModule} from '@angular/core';
33
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
4-
import {HttpModule} from '@angular/http';
54
import {TreeModule} from '../../../../main';
65
import {TreeTwoComponent} from './treeTwo.component';
76
import {NewItemComponent} from './newItem.component';
87
import {TreeTwoNodeService} from './treeTwoNode.service';
98
import {TreeLocalStorageModule} from '../localStorage/treeLocalStorage.module';
9+
import {HttpClientModule} from '@angular/common/http';
1010

1111
@NgModule({
1212
declarations: [
@@ -17,7 +17,7 @@ import {TreeLocalStorageModule} from '../localStorage/treeLocalStorage.module';
1717
imports: [
1818
BrowserModule,
1919
FormsModule,
20-
HttpModule,
20+
HttpClientModule,
2121
TreeLocalStorageModule,
2222
ReactiveFormsModule,
2323
TreeModule

‎demo/src/tsconfig.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,9 @@
1818
"typeRoots": [
1919
"../node_modules/@types"
2020
]
21+
},
22+
"angularCompilerOptions": {
23+
"fullTemplateTypeCheck": true,
24+
"strictMetadataEmit": true
2125
}
2226
}

‎karma.conf.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,6 @@ module.exports = function (config) {
2929
logLevel: config.LOG_INFO,
3030
autoWatch: true,
3131
browsers: ['Chrome'],
32-
singleRun: false
32+
singleRun: true
3333
});
3434
};

‎main.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,7 @@ export * from './src/service/nodesDispatcher.service';
1313
export * from './src/store/treeEffects.service';
1414
export * from './src/store/ITreeState';
1515
export * from './src/store/treeReducer'
16+
export * from './src/dragAndDrop/dragAndDrop.service';
17+
export * from './src/dragAndDrop/draggable.directive';
18+
export * from './src/dragAndDrop/droppable.directive';
19+
export * from './src/dragAndDrop/dropzone/dropzone.component';

‎package.json

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,22 @@
55
"angular-cli": {},
66
"scripts": {
77
"start": "ng serve",
8-
"build": "npm run clean:all && npm run build:inline && npm run build:esm2015 && npm run build:fesm2015 && npm run build:esm5 && npm run build:fesm5 && npm run build:umd && npm run build:min && npm run move:assets && npm run clean:tmp",
9-
"build:inline": "rm -rf ./tmp && rsync -a --exclude *spec.ts *.ts ./tmp & node inlineAssets.js",
10-
"build:esm2015": "ngc -p tsconfig-es2015.json",
11-
"build:fesm2015": "rollup -c rollup-esm2015.conf.js",
12-
"build:esm5": "ngc -p tsconfig-esm5.json",
13-
"build:fesm5": "rollup -c rollup-esm5.conf.js",
14-
"build:umd": "rollup -c rollup-umd.conf.js",
8+
"build": "npm run clean:all && npm run build:inline && npm run build:esm2015 && npm run build:fesm2015 && npm run build:esm5 && npm run build:fesm5 && npm run build:umd && npm run build:min && npm run move:assets && npm run less && npm run clean:tmp",
9+
"build:inline": "rm -rf ./tmp && rsync -a --exclude *spec.ts *.ts ./tmp & node config/inlineAssets.js",
10+
"build:esm2015": "ngc -p config/tsconfig-es2015.json",
11+
"build:fesm2015": "rollup -c config/rollup-esm2015.conf.js",
12+
"build:esm5": "ngc -p config/tsconfig-esm5.json",
13+
"build:fesm5": "rollup -c config/rollup-esm5.conf.js",
14+
"build:umd": "rollup -c config/rollup-umd.conf.js",
1515
"build:min": "uglifyjs dist/bundles/angular2-tree.umd.js -c -m -o dist/bundles/angular2-tree.umd.min.js",
16-
"move:assets": "cpx \"./tmp/esm2015/src/**/*.d.ts\" dist/src && copyfiles -up 1 tmp/esm2015/*.d.ts tmp/esm2015/*.json dist && copyfiles README.md package.json dist",
16+
"move:assets": "cpx \"./tmp/esm2015/src/**/*.d.ts\" dist/src && copyfiles -up 1 tmp/esm2015/*.d.ts tmp/esm2015/*.json dist && copyfiles README.md npm-package.json dist && copyfiles -up 1 config/package.json dist",
17+
"less": "lessc ./src/styles.less ./dist/styles.css",
1718
"clean:all": "rimraf dist/ && npm run clean:tmp",
1819
"clean:tmp": "rimraf tmp/",
1920
"lint": "ng lint",
2021
"e2e": "ng e2e",
2122
"test": "./node_modules/.bin/karma --config karma.conf.js start",
22-
"gh-pages": "ng build --env=prod --base-href \"https://qjon.github.io/angular2-tree/\" && ./node_modules/.bin/angular-cli-ghpages -b gh-pages --name=\"Rafał Ignaszewski\" --email=\"[email protected]\" --no-silent"
23+
"gh-pages": "ng build --prod --base-href \"https://qjon.github.io/angular2-tree/\" && ./node_modules/.bin/angular-cli-ghpages -b gh-pages --name=\"Rafał Ignaszewski\" --email=\"[email protected]\" --no-silent"
2324
},
2425
"repository": {
2526
"type": "git",
@@ -76,6 +77,7 @@
7677
"karma-jasmine": "~1.1.0",
7778
"karma-jasmine-diff-reporter": "^1.1.1",
7879
"karma-jasmine-html-reporter": "^0.2.2",
80+
"less": "^3.0.1",
7981
"ng2-inline-template": "^0.1.1",
8082
"protractor": "~5.1.2",
8183
"rollup": "^0.56.3",

‎src/dragAndDrop/dropzone/dropzone.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<div *ngIf="isOpen$ | async" (drop)="onDrop($event)" (dragover)="onDragOver($event)" class="dropzone">
1+
<div *ngIf="isOpen$ | async" (drop)="onDrop()" (dragover)="onDragOver($event)" class="dropzone">
22
{{'RI_TREE_LBL_DROP_ZONE' | translate}}
33
</div>

‎src/item/item.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<span *ngIf="!isEditMode" class="tree-item-name" (click)="onSelect()">{{node.name}}</span>
1313
<form name="form">
1414
<input #inputElement type="text" class="form-control" *ngIf="isEditMode" [formControl]="nameField"
15-
name="name" (keydown)="onChange($event)" (blur)="onBlur($event)"/>
15+
name="name" (keydown)="onChange($event)" (blur)="onBlur()"/>
1616
</form>
1717
</div>
1818
<div class="tree" [@isExpanded]="animationState" (@isExpanded.done)="onAnimationDone($event)">

0 commit comments

Comments
 (0)