From 39ffd515d970ddb4b552621dbbed7d46b3d917d2 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Fri, 21 Apr 2017 14:05:58 +0100 Subject: [PATCH] Viewer readme cleanup (#1837) --- ng2-components/ng2-alfresco-viewer/README.md | 146 ++++++++++--------- 1 file changed, 78 insertions(+), 68 deletions(-) diff --git a/ng2-components/ng2-alfresco-viewer/README.md b/ng2-components/ng2-alfresco-viewer/README.md index 039e8ef82b..f55425aad8 100644 --- a/ng2-components/ng2-alfresco-viewer/README.md +++ b/ng2-components/ng2-alfresco-viewer/README.md @@ -103,11 +103,10 @@ Follow the 3 steps below: Please refer to the following example file: [systemjs.config.js](demo/systemjs.config.js) . - #### Basic usage with node id ```html - + ``` Example of an App that declares the file viewer component : @@ -121,22 +120,23 @@ import { ViewerModule } from 'ng2-alfresco-viewer'; @Component({ selector: 'alfresco-app-demo', - template: ` - - ` + template: ` + + ` }) class MyDemoApp { - constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) { + 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); - }); + ticket => console.log(ticket), + error => console.log(error) + ); } } @@ -152,13 +152,12 @@ class MyDemoApp { export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule); - ``` #### Basic usage with urlFile ```html - + ``` Example of an App that declares the file viewer component : @@ -172,22 +171,22 @@ import { ViewerModule } from 'ng2-alfresco-viewer'; @Component({ selector: 'alfresco-app-demo', - template: ` - - ` + template: ` + + ` }) class MyDemoApp { - constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) { + 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); - }); + ticket => console.log(ticket), + error => console.log(error) + ); } } @@ -207,68 +206,80 @@ platformBrowserDynamic().bootstrapModule(AppModule); #### Options -Attribute | Options | Default | Description | Mandatory ---- | --- | --- | --- | --- -`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 | -`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 | -`showViewer` | *boolean* | `true` | Hide or show the viewer | -`showToolbar` | *boolean* | `true` | Hide or show the toolbars | -`displayName` | *string* | | You can specify the name of the file| +| Attribute | Options | Default | Description | Mandatory +| --- | --- | --- | --- | --- | +| `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 | +| `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 | +| `showViewer` | *boolean* | `true` | Hide or show the viewer | +| `showToolbar` | *boolean* | `true` | Hide or show the toolbars | +| `displayName` | *string* | | You can specify the name of the file | #### Supported file formats -Type | extensions ---- | --- -Media | Mp4, WebM, Ogv -Images | png, jpg, jpeg, gif, bmp -Text | pdf +| Type | extensions | +| --- | --- | +| Media | Mp4, WebM, Ogv | +| Images | png, jpg, jpeg, gif, bmp | +| Text | pdf | # 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. -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 - - - - - + + + + + + + ``` -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 - + - - - + + + - - - - + + + + ``` ## Build from sources Alternatively you can build component from sources with the following commands: - ```sh npm install npm run build @@ -323,5 +334,4 @@ npm start ## 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) \ No newline at end of file