inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-6620] Proper viewer extension template projection to viewer renderer (#9273)

Browse Source 
* [ACS-6620] Proper viewer extension template projection to viewer renderer

* [ACS-6620] Use extensions instead of content for viewer config

* [ACS-6620] Lint fix
This commit is contained in:
MichalKinas
2024-01-25 19:36:59 +01:00
committed by GitHub
parent 5ec8228504
commit 2c627f1166
17 changed files with 265 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
docs/core/components/viewer-render.component.md
View File

@@ -62,6 +62,7 @@ Using with file [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob):
| thumbnailsTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the pdf thumbnails. |
| tracks | [`Track`](../../../lib/core/src/lib/viewer/models/viewer.model.ts)`[]` | \[] | media subtitles for the media player |
| urlFile | `string` | "" | If you want to load an external file that does not come from ACS you can use this URL to specify where to load the file from. |
| viewerTemplateExtensions | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | Template containing ViewerExtensionDirective instances providing different viewer extensions based on supported file extension. |
### Events
@@ -200,34 +201,13 @@ The [Viewer render component](viewer.component.md) should now be able to display
The Viewer supports dynamically-loaded viewer preview extensions, to know more about it [Preview Extension component](../../extensions/components/preview-extension.component.md). This
#### Code extension mechanism]
#### Code extension mechanism
You can define your own custom handler to handle other file formats that are not yet supported by
the [Viewer render component](viewer.component.md). Below is an example that shows how to use the `adf-viewer-render-extension`
to handle 3D data files:
```html
<adf-viewer-render [nodeId]="nodeId">
<adf-viewer-extension [supportedExtensions]="['obj','3ds']" #extension>
<ng-template let-urlFileContent="urlFileContent" let-extension="extension">
<threed-viewer
[urlFile]="urlFileContent"
[extension]="extension">
</threed-viewer>
</ng-template>
</adf-viewer-extension>
</adf-viewer-render>
```
Note: you need to add the `ng2-3d-editor` dependency to your `package.json` file to make the example above work.
You can define multiple `adf-viewer-render-extension` templates if required:
```html
<adf-viewer-render [nodeId]="nodeId">
You can define your own custom handler to override supported file formats or handle other file formats that are not yet supported by
the [Viewer render component](viewer.component.md). In order to do that first you need to define a template containing at least one `adf-viewer-extension`:
```html
<ng-template #viewerExtensions>
<adf-viewer-extension [supportedExtensions]="['xls','xlsx']" #extension>
<ng-template let-urlFileContent="urlFileContent">
<my-custom-xls-component
@@ -243,6 +223,22 @@ You can define multiple `adf-viewer-render-extension` templates if required:
</my-custom-txt-component>
</ng-template>
</adf-viewer-render-extension>
</ng-template>
```
Next in your component you need to get a reference of created template
```ts
@ViewChild('viewerExtensions')
viewerTemplateExtensions: TemplateRef<any>;
```
and pass it via `viewerTemplateExtensions` input:
```html
<adf-viewer-render>
...
[viewerTemplateExtensions]="viewerTemplateExtensions"
</adf-viewer-render>
```

57
docs/core/components/viewer.component.md
View File

@@ -85,6 +85,7 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
| sidebarRightTemplateContext | | null | Context object available for binding by the local sidebarRightTemplate with let declarations. |
| tracks | [`Track`](../../../lib/core/src/lib/viewer/models/viewer.model.ts)`[]` | \[] | media subtitles for the media player |
| urlFile | `string` | "" | If you want to load an external file that does not come from ACS you can use this URL to specify where to load the file from. |
| viewerExtensions | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | Template containing ViewerExtensionDirective instances providing different viewer extensions based on supported file extension. |
### Events
@@ -209,47 +210,47 @@ The Viewer supports dynamically-loaded viewer preview extensions, to know more a
#### Code extension mechanism]
You can define your own custom handler to handle other file formats that are not yet supported by
You can define your own custom handler to override supported file formats or handle other file formats that are not yet supported by
the [Viewer component](viewer.component.md). Below is an example that shows how to use the `adf-viewer-extension`
to handle 3D data files:
```html
<adf-viewer [urlFile]="urlFile">
<adf-viewer-extension [supportedExtensions]="['obj','3ds']" #extension>
<ng-template let-urlFileContent="urlFileContent" let-extension="extension">
<threed-viewer
[urlFile]="urlFileContent"
[extension]="extension">
</threed-viewer>
</ng-template>
</adf-viewer-extension>
<ng-template #viewerExtensions>
<adf-viewer-extension [supportedExtensions]="['obj','3ds']" #extension>
<ng-template let-urlFileContent="urlFileContent" let-extension="extension">
<threed-viewer
[urlFile]="urlFileContent"
[extension]="extension">
</threed-viewer>
</ng-template>
</adf-viewer-extension>
</ng-template>
</adf-viewer>
```
Note: you need to add the `ng2-3d-editor` dependency to your `package.json` file to make the example above work.
You can define multiple `adf-viewer-extension` templates if required:
You need to keep all instances of `adf-viewer-extension` inside `viewerExtensions` template, also you can define multiple `adf-viewer-extension` templates if required:
```html
<adf-viewer [urlFile]="urlFile">
<ng-template #viewerExtensions>
<adf-viewer-extension [supportedExtensions]="['xls','xlsx']" #extension>
<ng-template let-urlFileContent="urlFileContent">
<my-custom-xls-component
urlFileContent="urlFileContent">
</my-custom-xls-component>
</ng-template>
</adf-viewer-extension>
<adf-viewer-extension [supportedExtensions]="['xls','xlsx']" #extension>
<ng-template let-urlFileContent="urlFileContent">
<my-custom-xls-component
urlFileContent="urlFileContent">
</my-custom-xls-component>
</ng-template>
</adf-viewer-extension>
<adf-viewer-extension [supportedExtensions]="['txt']" #extension>
<ng-template let-urlFileContent="urlFileContent" >
<my-custom-txt-component
urlFileContent="urlFileContent">
</my-custom-txt-component>
</ng-template>
</adf-viewer-extension>
<adf-viewer-extension [supportedExtensions]="['txt']" #extension>
<ng-template let-urlFileContent="urlFileContent" >
<my-custom-txt-component
urlFileContent="urlFileContent">
</my-custom-txt-component>
</ng-template>
</adf-viewer-extension>
</ng-template>
</adf-viewer>
```