diff --git a/ng2-components/ng2-alfresco-viewer/README.md b/ng2-components/ng2-alfresco-viewer/README.md index dd408ffabe..36ef77c70f 100644 --- a/ng2-components/ng2-alfresco-viewer/README.md +++ b/ng2-components/ng2-alfresco-viewer/README.md @@ -1,4 +1,5 @@ # Alfresco File Viewer Component for Angular 2 +

travis @@ -31,47 +32,72 @@ </a> </p> -### Node -To correctly use this component check that on your machine is running Node version 5.0.0 or higher. +## Prerequisites + +Before you start using this development framework, make sure you have installed all required software and done all the +necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md). ## Install -```sh -npm install --save ng2-alfresco-viewer -``` +Follow the 3 steps below: -#### Dependencies +1. Npm -Add the following dependency to your index.html: + ```sh + npm install ng2-alfresco-viewer --save + ``` -```html -<script src="node_modules/pdfjs-dist/build/pdf.js"></script> -<script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script> -<script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script> -<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script> -``` +2. Html -The following component needs to be added to your systemjs.config: + Include these dependencies in your index.html page: -- ng2-translate -- ng2-alfresco-core + ```html -#### Style -The style of this component is based on material design, so if you want to visualize it correctly you have to add the material -design dependency to your project: + <!-- Google Material Design Lite --> + <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css"> + <script src="node_modules/material-design-lite/material.min.js"></script> + <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css"> -```sh -npm install --save material-design-icons material-design-lite -``` + <!-- Polyfill(s) for Safari (pre-10.x) --> + <script src="node_modules/intl/dist/Intl.min.js"></script> + <script src="node_modules/intl/locale-data/jsonp/en.js"></script> -Also make sure you include these dependencies in your .html page: + <!-- Polyfill(s) for older browsers --> + <script src="node_modules/core-js/client/shim.min.js"></script> + <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script> + <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script> -```html -<!-- Google Material Design Lite --> -<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css"> -<script src="node_modules/material-design-lite/material.min.js"></script> -<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css"> -``` + <!-- Polyfill(s) for dialogs --> + <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script> + <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" /> + <style>._dialog_overlay { position: static !important; } </style> + + <!-- Modules --> + <script src="node_modules/zone.js/dist/zone.js"></script> + <script src="node_modules/reflect-metadata/Reflect.js"></script> + <script src="node_modules/systemjs/dist/system.src.js"></script> + + <!-- Polyfill(s) for pdf support --> + <script src="node_modules/pdfjs-dist/web/compatibility.js"></script> + + <script src="node_modules/pdfjs-dist/build/pdf.js"></script> + <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script> + <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script> + + + ``` + +3. SystemJs + + Add the following components to your systemjs.config.js file: + + - ng2-translate + - alfresco-js-api + - ng2-alfresco-core + - ng2-alfresco-viewer + + Please refer to the following example file: [systemjs.config.js](demo/systemjs + .config.js) . #### Basic usage with node id @@ -82,28 +108,46 @@ Also make sure you include these dependencies in your .html page: Example of an App that declares the file viewer component : ```ts -import { Component } from + selector: 'alfresco-app-demo', + template: `

- `, - directives: [VIEWERCOMPONENT] + ` }) class MyDemoApp { - fileNodeId: any; - - constructor() { - this.fileNodeId = '09469a81-1ed9-4caa-a5df-8362fc3d096f'; + constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) { + settingsService.ecmHost = 'http://localhost:8080'; + + this.authService.login('admin', 'admin').subscribe( + ticket => { + console.log(ticket); + }, + error => { + console.log(error); + }); } } -bootstrap(MyDemoApp, [ - VIEWERCOMPONENT -]); + +@NgModule({ + imports: [ + BrowserModule, + CoreModule.forRoot(), + ViewerModule.forRoot() + ], + declarations: [ MyDemoApp ], + bootstrap: [ MyDemoApp ] +}) +export class AppModule { } + +platformBrowserDynamic().bootstrapModule(AppModule); + ``` #### Basic usage with urlFile @@ -115,25 +159,45 @@ bootstrap(MyDemoApp, [ Example of an App that declares the file viewer component : ```ts -import { Component } from '@angular/core'; -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer'; +import { NgModule, Component } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core'; +import { ViewerModule } from 'ng2-alfresco-viewer'; @Component({ - selector: 'my-app', - template: ` + selector: 'alfresco-app-demo', + template: ` - `, - directives: [VIEWERCOMPONENT] + ` }) class MyDemoApp { - constructor() { - console.log('constructor'); + + constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) { + settingsService.ecmHost = 'http://localhost:8080'; + + this.authService.login('admin', 'admin').subscribe( + ticket => { + console.log(ticket); + }, + error => { + console.log(error); + }); } } -bootstrap(MyDemoApp, [ - VIEWERCOMPONENT -]); + +@NgModule({ + imports: [ + BrowserModule, + CoreModule.forRoot(), + ViewerModule.forRoot() + ], + declarations: [ MyDemoApp ], + bootstrap: [ MyDemoApp ] +}) +export class AppModule { } + +platformBrowserDynamic().bootstrapModule(AppModule); ``` #### Options @@ -157,26 +221,28 @@ Text | pdf ## Build from sources + Alternatively you can build component from sources with the following commands: + ```sh npm install npm run build ``` -##Build the files and keep watching for changes +### Build the files and keep watching for changes + +```sh +$ npm run build:w +``` - ```sh - $ npm run build:w - ``` - ## Running unit tests ```sh npm test ``` -## Running unit tests in browser +### Running unit tests in browser ```sh npm test-browser @@ -185,7 +251,7 @@ npm test-browser This task rebuilds all the code, runs tslint, license checks and other quality check tools before performing unit testing. -## Code coverage +### Code coverage ```sh npm run coverage @@ -201,25 +267,7 @@ npm install npm start ``` +## License -## History +[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE) -For detailed changelog, check [Releases](https://github.com/alfresco/ng2-alfresco-viewer/releases). - -## Contributors - -[Contributors](https://github.com/alfresco/ng2-alfresco-viewer/graphs/contributors) - - -[npm-image]: https://badge.fury.io/js/ng2-alfresco-viewer.svg -[npm-url]: https://npmjs.org/package/ng2-alfresco-viewer -[travis-image]: https://travis-ci.org/alfresco/ng2-alfresco-viewer.svg?branch=master -[travis-url]: https://travis-ci.org/alfresco/ng2-alfresco-viewer -[daviddm-image]: https://david-dm.org/alfresco/ng2-alfresco-viewer.svg?theme=shields.io -[daviddm-url]: https://david-dm.org/alfresco/ng2-alfresco-viewer -[coveralls-image]: https://coveralls.io/repos/alfresco/ng2-alfresco-viewer/badge.svg -[coveralls-url]: https://coveralls.io/r/alfresco/ng2-alfresco-viewer -[style-url]: https://github.com/mgechev/angular2-style-guide -[style-image]: https://mgechev.github.io/angular2-style-guide/images/badge.svg -[alfrescocomponent-image]: https://img.shields.io/badge/Alfresco%20component-approved-green.svg -[alfrescocomponent-url]: https://www.alfresco.com diff --git a/ng2-components/ng2-alfresco-viewer/demo/package.json b/ng2-components/ng2-alfresco-viewer/demo/package.json index 23d7a464e6..ff16381bf9 100644 --- a/ng2-components/ng2-alfresco-viewer/demo/package.json +++ b/ng2-components/ng2-alfresco-viewer/demo/package.json @@ -17,29 +17,6 @@ }, "license": "Apache-2.0", "dependencies": { - "@angular/common": "2.0.0", - "@angular/compiler": "2.0.0", - "@angular/core": "2.0.0", - "@angular/forms": "2.0.0", - "@angular/http": "2.0.0", - "@angular/platform-browser": "2.0.0", - "@angular/platform-browser-dynamic": "2.0.0", - "@angular/router": "3.0.0", - "@angular/upgrade": "2.0.0", - "@types/node": "^6.0.42", - "core-js": "^2.4.1", - "reflect-metadata": "^0.1.3", - "rxjs": "5.0.0-beta.12", - "systemjs": "0.19.27", - "zone.js": "^0.6.23", - - "material-design-icons": "2.2.3", - "material-design-lite": "1.2.1", - "pdfjs-dist": "1.5.258", - - "ng2-translate": "2.5.0", - "ng2-alfresco-core": "^0.3.0", - "alfresco-js-api": "^0.3.0", "ng2-alfresco-viewer": "0.3.2" }, "devDependencies": { diff --git a/ng2-components/ng2-alfresco-viewer/demo/src/main.ts b/ng2-components/ng2-alfresco-viewer/demo/src/main.ts index 378184d205..26796f0ac3 100644 --- a/ng2-components/ng2-alfresco-viewer/demo/src/main.ts +++ b/ng2-components/ng2-alfresco-viewer/demo/src/main.ts @@ -33,16 +33,21 @@ import { ViewerModule } from 'ng2-alfresco-viewer'; operations.
-
- - - -
` + + File node id: +
+ + + +
` }) class MyDemoApp { + + fileNodeId: string; + authenticated: boolean; ecmHost: string = 'http://127.0.0.1:8080'; diff --git a/ng2-components/ng2-alfresco-viewer/package.json b/ng2-components/ng2-alfresco-viewer/package.json index 7e320d2ea2..361a9228e4 100644 --- a/ng2-components/ng2-alfresco-viewer/package.json +++ b/ng2-components/ng2-alfresco-viewer/package.json @@ -46,23 +46,6 @@ "alfresco" ], "dependencies": { - "@angular/common": "2.0.0", - "@angular/compiler": "2.0.0", - "@angular/core": "2.0.0", - "@angular/forms": "2.0.0", - "@angular/http": "2.0.0", - "@angular/platform-browser": "2.0.0", - "@angular/platform-browser-dynamic": "2.0.0", - "@angular/router": "3.0.0", - "@angular/upgrade": "2.0.0", - "@types/node": "^6.0.42", - "core-js": "^2.4.1", - "reflect-metadata": "^0.1.3", - "rxjs": "5.0.0-beta.12", - "systemjs": "0.19.27", - "zone.js": "^0.6.23", - "ng2-translate": "2.5.0", - "alfresco-js-api": "^0.3.0", "ng2-alfresco-core": "0.3.2", "pdfjs-dist": "1.5.404" },