inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Viewer readme cleanup (#1837)

Browse Source
This commit is contained in:
Denys Vuika 2017-04-21 14:05:58 +01:00 committed by Mario Romano
parent 554e0d79db
commit 39ffd515d9
1 changed files with 78 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
ng2-components/ng2-alfresco-viewer/README.md
View File

@ -103,11 +103,10 @@ Follow the 3 steps below:
Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) . 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
<ng2-alfresco-viewer [overlayMode]="true" [urlFile]="'filename.pdf'"></ng2-alfresco-viewer> <alfresco-viewer [overlayMode]="true" [urlFile]="'filename.pdf'"></alfresco-viewer>
``` ```
Example of an App that declares the file viewer component : Example of an App that declares the file viewer component :
@ -121,22 +120,23 @@ import { ViewerModule } from 'ng2-alfresco-viewer';
@Component({ @Component({
selector: 'alfresco-app-demo', selector: 'alfresco-app-demo',
template: `<alfresco-viewer [showViewer]="true" [overlayMode]="true" [fileNodeId]="'d367023a-7ebe-4f3a-a7d0-4f27c43f1045'"> template: `
<div class="mdl-spinner mdl-js-spinner is-active"></div> <alfresco-viewer
</alfresco-viewer>` [showViewer]="true"
[overlayMode]="true"
[fileNodeId]="'d367023a-7ebe-4f3a-a7d0-4f27c43f1045'">
</alfresco-viewer>`
}) })
class MyDemoApp { class MyDemoApp {
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) { constructor(private authService: AlfrescoAuthenticationService,
private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080'; settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe( this.authService.login('admin', 'admin').subscribe(
ticket => { ticket => console.log(ticket),
console.log(ticket); error => console.log(error)
}, );
error => {
console.log(error);
});
} }
} }
@ -152,13 +152,12 @@ class MyDemoApp {
export class AppModule { } export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule); platformBrowserDynamic().bootstrapModule(AppModule);
``` ```
#### Basic usage with urlFile #### Basic usage with urlFile
```html ```html
<ng2-alfresco-viewer [overlayMode]="true" [urlFile]="'filename.pdf'"></ng2-alfresco-viewer> <alfresco-viewer [overlayMode]="true" [urlFile]="'filename.pdf'"></alfresco-viewer>
``` ```
Example of an App that declares the file viewer component : Example of an App that declares the file viewer component :
@ -172,22 +171,22 @@ import { ViewerModule } from 'ng2-alfresco-viewer';
@Component({ @Component({
selector: 'alfresco-app-demo', selector: 'alfresco-app-demo',
template: `<alfresco-viewer [showViewer]="true" [overlayMode]="true" [urlFile]="'localTestFile.pdf'"> template: `
<div class="mdl-spinner mdl-js-spinner is-active"></div> <alfresco-viewer
</alfresco-viewer>` [showViewer]="true"
[overlayMode]="true"
[urlFile]="'localTestFile.pdf'">
</alfresco-viewer>`
}) })
class MyDemoApp { class MyDemoApp {
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) { constructor(private authService: AlfrescoAuthenticationService,
private settingsService: AlfrescoSettingsService) {
settingsService.ecmHost = 'http://localhost:8080'; settingsService.ecmHost = 'http://localhost:8080';
this.authService.login('admin', 'admin').subscribe( this.authService.login('admin', 'admin').subscribe(
ticket => { ticket => console.log(ticket),
console.log(ticket); error => console.log(error)
}, );
error => {
console.log(error);
});
} }
} }
@ -207,68 +206,80 @@ platformBrowserDynamic().bootstrapModule(AppModule);
#### Options #### Options
Attribute | Options | Default | Description | Mandatory | Attribute | Options | Default | Description | Mandatory
--- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
`fileNodeId` | *string* | | node Id of the file to load the file | | `fileNodeId` | *string* | | Node Id of the file to load the file |
`urlFile` | *string* | | If you want load an external file that not comes from the ECM you can use this Url where to load the file | | `urlFile` | *string* | | If you want load an external file that not comes from the ECM you can use this Url where to load the file |
`urlBlob` | *Blob* | | If you want load a Blob File | | `urlBlob` | *Blob* | | If you want load a Blob File |
`overlayMode` | *boolean* | `false` | if true Show the Viewer full page over the present content otherwise will fit the parent div | | `overlayMode` | *boolean* | `false` | if true Show the Viewer full page over the present content otherwise will fit the parent div |
`showViewer` | *boolean* | `true` | Hide or show the viewer | | `showViewer` | *boolean* | `true` | Hide or show the viewer |
`showToolbar` | *boolean* | `true` | Hide or show the toolbars | | `showToolbar` | *boolean* | `true` | Hide or show the toolbars |
`displayName` | *string* | | You can specify the name of the file| | `displayName` | *string* | | You can specify the name of the file |
#### Supported file formats #### Supported file formats
Type | extensions | Type | extensions |
--- | --- | --- | --- |
Media | Mp4, WebM, Ogv | Media | Mp4, WebM, Ogv |
Images | png, jpg, jpeg, gif, bmp | Images | png, jpg, jpeg, gif, bmp |
Text | pdf | Text | pdf |
# Custom extension handler # Custom extension handler
If you want handle other file formats that are not yet supported by the ng2-alfresco-viewer you can define your own custom handler. If you want handle other file formats that are not yet supported by the ng2-alfresco-viewer you can define your own custom handler.
Above you can find an example where with the use of ``` extension-viewer ``` if you can handle 3d files
Below you can find an example where with the use of ```extension-viewer``` if you can handle 3d files
```html ```html
<alfresco-viewer [(showViewer)]="fileShowed" <alfresco-viewer
[fileNodeId]="fileNodeId" [(showViewer)]="fileShowed"
[overlayMode]="true"> [fileNodeId]="fileNodeId"
<extension-viewer [supportedExtensions]="['obj','3ds']" #extension> [overlayMode]="true">
<template let-urlFileContent="urlFileContent" let-extension="extension" >
<threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer> <extension-viewer [supportedExtensions]="['obj','3ds']" #extension>
</template> <template let-urlFileContent="urlFileContent" let-extension="extension">
</extension-viewer> <threed-viewer
</alfresco-viewer> [urlFile]="urlFileContent"
[extension]="extension">
</threed-viewer>
</template>
</extension-viewer>
</alfresco-viewer>
``` ```
Note: In order to make the example above works you need to add in your package.json the dependency to ng2-3d-editor.
Is possible define multiple ``` extension-viewer ``` Note: you need adding `ng2-3d-editor` dependency to your `package.json` file to make example above work.
It is possible to define multiple ```extension-viewer``` templates:
```html ```html
<alfresco-viewer [(showViewer)]="fileShowed" <alfresco-viewer
[fileNodeId]="fileNodeId" [(showViewer)]="fileShowed"
[overlayMode]="true"> [fileNodeId]="fileNodeId"
[overlayMode]="true">
<extension-viewer [supportedExtensions]="['xls','xlsx']" #extension> <extension-viewer [supportedExtensions]="['xls','xlsx']" #extension>
<template let-urlFileContent="urlFileContent" > <template let-urlFileContent="urlFileContent" >
<my-custom-xls-component urlFileContent="urlFileContent"></my-custom-xls-component> <my-custom-xls-component
</template> urlFileContent="urlFileContent">
</extension-viewer> </my-custom-xls-component>
</template>
</extension-viewer>
<extension-viewer [supportedExtensions]="['txt']" #extension> <extension-viewer [supportedExtensions]="['txt']" #extension>
<template let-urlFileContent="urlFileContent" > <template let-urlFileContent="urlFileContent" >
<my-custom-txt-component urlFileContent="urlFileContent"></my-custom-txt-component> <my-custom-txt-component
</template> urlFileContent="urlFileContent">
</extension-viewer> </my-custom-txt-component>
</alfresco-viewer> </template>
</extension-viewer>
</alfresco-viewer>
``` ```
## 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
@ -323,5 +334,4 @@ npm start
## License ## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE) [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)