mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
#878 doc and demo viewer component
This commit is contained in:
Mario Romano
parent
0a8bc8bccc
commit
bb9cfd2913
@ -1,4 +1,5 @@
|
|||||||
# Alfresco File Viewer Component for Angular 2
|
# Alfresco File Viewer Component for Angular 2
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
|
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
|
||||||
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
|
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
|
||||||
@ -31,48 +32,73 @@
|
|||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
### Node
|
## Prerequisites
|
||||||
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
|
|
||||||
|
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
|
## Install
|
||||||
|
|
||||||
```sh
|
Follow the 3 steps below:
|
||||||
npm install --save ng2-alfresco-viewer
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Dependencies
|
1. Npm
|
||||||
|
|
||||||
Add the following dependency to your index.html:
|
|
||||||
|
|
||||||
```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>
|
|
||||||
```
|
|
||||||
|
|
||||||
The following component needs to be added to your systemjs.config:
|
|
||||||
|
|
||||||
- ng2-translate
|
|
||||||
- ng2-alfresco-core
|
|
||||||
|
|
||||||
#### 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:
|
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm install --save material-design-icons material-design-lite
|
npm install ng2-alfresco-viewer --save
|
||||||
```
|
```
|
||||||
|
|
||||||
Also make sure you include these dependencies in your .html page:
|
2. Html
|
||||||
|
|
||||||
|
Include these dependencies in your index.html page:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
|
|
||||||
<!-- Google Material Design Lite -->
|
<!-- Google Material Design Lite -->
|
||||||
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
|
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
|
||||||
<script src="node_modules/material-design-lite/material.min.js"></script>
|
<script src="node_modules/material-design-lite/material.min.js"></script>
|
||||||
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
|
<!-- 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
|
#### Basic usage with node id
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@ -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 :
|
Example of an App that declares the file viewer component :
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { Component } from '@angular/core';
|
import { NgModule, Component } from '@angular/core';
|
||||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';
|
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||||
|
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||||
|
import { ViewerModule } from 'ng2-alfresco-viewer';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'my-app',
|
selector: 'alfresco-app-demo',
|
||||||
template: ` <alfresco-viewer [showViewer]="true" [overlayMode]="true" [fileNodeId]="fileNodeId">
|
template: `<alfresco-viewer [showViewer]="true" [overlayMode]="true" [fileNodeId]="'d367023a-7ebe-4f3a-a7d0-4f27c43f1045'">
|
||||||
<div class="mdl-spinner mdl-js-spinner is-active"></div>
|
<div class="mdl-spinner mdl-js-spinner is-active"></div>
|
||||||
</alfresco-viewer>`,
|
</alfresco-viewer>`
|
||||||
directives: [VIEWERCOMPONENT]
|
|
||||||
})
|
})
|
||||||
class MyDemoApp {
|
class MyDemoApp {
|
||||||
|
|
||||||
fileNodeId: any;
|
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||||
|
settingsService.ecmHost = 'http://localhost:8080';
|
||||||
|
|
||||||
constructor() {
|
this.authService.login('admin', 'admin').subscribe(
|
||||||
this.fileNodeId = '09469a81-1ed9-4caa-a5df-8362fc3d096f';
|
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
|
#### Basic usage with urlFile
|
||||||
@ -115,25 +159,45 @@ bootstrap(MyDemoApp, [
|
|||||||
Example of an App that declares the file viewer component :
|
Example of an App that declares the file viewer component :
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { Component } from '@angular/core';
|
import { NgModule, Component } from '@angular/core';
|
||||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';
|
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||||
|
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||||
|
import { ViewerModule } from 'ng2-alfresco-viewer';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'my-app',
|
selector: 'alfresco-app-demo',
|
||||||
template: ` <alfresco-viewer [showViewer]="true" [overlayMode]="true" [urlFile]="'local_filename.pdf'">
|
template: `<alfresco-viewer [showViewer]="true" [overlayMode]="true" [urlFile]="'localTestFile.pdf'">
|
||||||
<div class="mdl-spinner mdl-js-spinner is-active"></div>
|
<div class="mdl-spinner mdl-js-spinner is-active"></div>
|
||||||
</alfresco-viewer>`,
|
</alfresco-viewer>`
|
||||||
directives: [VIEWERCOMPONENT]
|
|
||||||
})
|
})
|
||||||
class MyDemoApp {
|
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
|
#### Options
|
||||||
@ -157,14 +221,16 @@ Text | pdf
|
|||||||
|
|
||||||
|
|
||||||
## Build from sources
|
## Build from sources
|
||||||
|
|
||||||
Alternatively you can build component from sources with the following commands:
|
Alternatively you can build component from sources with the following commands:
|
||||||
|
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm install
|
npm install
|
||||||
npm run build
|
npm run build
|
||||||
```
|
```
|
||||||
|
|
||||||
##Build the files and keep watching for changes
|
### Build the files and keep watching for changes
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
$ npm run build:w
|
$ npm run build:w
|
||||||
@ -176,7 +242,7 @@ npm run build
|
|||||||
npm test
|
npm test
|
||||||
```
|
```
|
||||||
|
|
||||||
## Running unit tests in browser
|
### Running unit tests in browser
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm test-browser
|
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
|
This task rebuilds all the code, runs tslint, license checks and other quality check tools
|
||||||
before performing unit testing.
|
before performing unit testing.
|
||||||
|
|
||||||
## Code coverage
|
### Code coverage
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm run coverage
|
npm run coverage
|
||||||
@ -201,25 +267,7 @@ npm install
|
|||||||
npm start
|
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
|
|
||||||
|
|||||||
@ -17,29 +17,6 @@
|
|||||||
},
|
},
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"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"
|
"ng2-alfresco-viewer": "0.3.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@ -33,16 +33,21 @@ import { ViewerModule } from 'ng2-alfresco-viewer';
|
|||||||
operations.
|
operations.
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
|
File node id: <input id="fileNodeId" type="text" [(ngModel)]="fileNodeId">
|
||||||
<div class="container" *ngIf="authenticated">
|
<div class="container" *ngIf="authenticated">
|
||||||
<alfresco-viewer
|
<alfresco-viewer *ngIf="fileNodeId"
|
||||||
[showViewer]="true"
|
[showViewer]="true"
|
||||||
[overlayMode]="true"
|
[overlayMode]="true"
|
||||||
[urlFile]="'localTestFile.pdf'">
|
[fileNodeId]="fileNodeId">
|
||||||
<div class="mdl-spinner mdl-js-spinner is-active"></div>
|
<div class="mdl-spinner mdl-js-spinner is-active"></div>
|
||||||
</alfresco-viewer>
|
</alfresco-viewer>
|
||||||
</div>`
|
</div>`
|
||||||
})
|
})
|
||||||
class MyDemoApp {
|
class MyDemoApp {
|
||||||
|
|
||||||
|
fileNodeId: string;
|
||||||
|
|
||||||
authenticated: boolean;
|
authenticated: boolean;
|
||||||
|
|
||||||
ecmHost: string = 'http://127.0.0.1:8080';
|
ecmHost: string = 'http://127.0.0.1:8080';
|
||||||
|
|||||||
@ -46,23 +46,6 @@
|
|||||||
"alfresco"
|
"alfresco"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"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",
|
"ng2-alfresco-core": "0.3.2",
|
||||||
"pdfjs-dist": "1.5.404"
|
"pdfjs-dist": "1.5.404"
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user