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

[ADF-1843] rename 'extension-viewer' to 'add-viewer-extension' (#2568)

Browse Source 
* rename 'extension-viewer' to 'adf-viewer-extension'

also add support for json preview

* docs updates
This commit is contained in:
Denys Vuika
2017-10-30 18:14:27 +00:00
committed by Eugenio Romano
parent 30fb980afd
commit e5fe39fdc1
6 changed files with 62 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
demo-shell-ng2/src/app/components/file-view/file-view.component.html
View File

@@ -1,9 +1,36 @@
<ng-container *ngIf="nodeId"> <ng-container *ngIf="nodeId">
<adf-viewer [fileNodeId]="nodeId" [allowSidebar]="true"> <adf-viewer [fileNodeId]="nodeId" [allowSidebar]="true">
<!--<extension-viewer [supportedExtensions]="['obj','3DS']" #extension>-->
<!--<ng-template let-urlFileContent="urlFileContent" let-extension="extension" >--> <!--
<!--<threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>--> <adf-viewer-extension [supportedExtensions]="['json']">
<!--</ng-template>--> <ng-template let-urlFileContent="urlFileContent" let-extension="extension">
<!--</extension-viewer>--> <h1>JSON VIEWER</h1>
</ng-template>
</adf-viewer-extension>
-->
<!--
<adf-viewer-extension [supportedExtensions]="['png']">
<ng-template>
<h1>PNG Viewer</h1>
</ng-template>
</adf-viewer-extension>
-->
<!--
<adf-viewer-extension [supportedExtensions]="['pdf']">
<ng-template>
<h1>PDF Viewer</h1>
</ng-template>
</adf-viewer-extension>
-->
<!--
<extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
<ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
<threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
</ng-template>
</extension-viewer>
-->
</adf-viewer> </adf-viewer>
</ng-container> </ng-container>

45
docs/viewer.component.md
View File

@@ -48,18 +48,18 @@ Using with file url:
| urlBlob | Blob | | If you want to load a Blob File | | urlBlob | Blob | | If you want to 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 toolbar |
| displayName | string | | You can specify the name of the file | | displayName | string | | You can specify the name of the file |
| allowGoBack | boolean | true | Allow `back` navigation | | allowGoBack | boolean | true | Allow `back` navigation |
| allowDownload | boolean | true | Toggle download feature | | allowDownload | boolean | true | Toggle download feature |
| allowPrint | boolean | false | Toggle printing feature | | allowPrint | boolean | false | Toggle printing feature |
| allowShare | boolean | false | Toggle sharing feature | | allowShare | boolean | false | Toggle sharing feature |
| allowSidebar | boolean |false | Toogle sidebar feature | | allowSidebar | boolean |false | Toggle sidebar feature |
| showSidebar | boolean | false | Toggles sidebar visibility. Requires `allowSidebar` to be set to `true`. | | showSidebar | boolean | false | Toggles sidebar visibility. Requires `allowSidebar` to be set to `true`. |
## Events ## Events
| Name | Argument Type | Cancellable | Description | | Name | Argument Type | Cancelable | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| goBack | any | Yes | Raised when user clicks the 'Back' button. | | goBack | any | Yes | Raised when user clicks the 'Back' button. |
| download | any | Yes | Raised when user clicks the 'Download' button. | | download | any | Yes | Raised when user clicks the 'Download' button. |
@@ -133,7 +133,7 @@ Everything you put inside the "adf-viewer-toolbar" tags is going to be rendered
### Custom sidebar ### Custom sidebar
The Viewer component also suports custom sidebar components and layouts. The Viewer component also supports custom sidebar components and layouts.
The `allowSidebar` property should be set to `true` to enable this feature. The `allowSidebar` property should be set to `true` to enable this feature.
```html ```html
@@ -175,7 +175,7 @@ You can enable custom "Open With" menu by providing at least one action inside t
### Custom "More actions" menu ### Custom "More actions" menu
You can enable custom "More actions" menu by providing at least one action indide the "adf-viewer-more-actions" tag: You can enable custom "More actions" menu by providing at least one action inside the "adf-viewer-more-actions" tag:
```html ```html
<adf-viewer [fileNodeId]="nodeId"> <adf-viewer [fileNodeId]="nodeId">
@@ -200,54 +200,49 @@ You can enable custom "More actions" menu by providing at least one action indid
![More actions](docassets/images/viewer-more-actions.png) ![More actions](docassets/images/viewer-more-actions.png)
### Custom extension handler ### Extending the Viewer
If you want to handle other file formats that are not yet supported by the ng2-alfresco-viewer you can define your own custom handler. If you want to handle other file formats that are not yet supported by the Viewer component,
you can define your own custom handler.
Below you can find an example with the use of `extension-viewer` if you can handle 3d files Below you can find an example with the use of `adf-viewer-extension` if you can handle 3d files
```html ```html
<adf-viewer <adf-viewer [fileNodeId]="fileNodeId">
[(showViewer)]="fileShowed"
[fileNodeId]="fileNodeId"
[overlayMode]="true">
<extension-viewer [supportedExtensions]="['obj','3ds']" #extension> <adf-viewer-extension [supportedExtensions]="['obj','3ds']" #extension>
<ng-template let-urlFileContent="urlFileContent" let-extension="extension"> <ng-template let-urlFileContent="urlFileContent" let-extension="extension">
<threed-viewer <threed-viewer
[urlFile]="urlFileContent" [urlFile]="urlFileContent"
[extension]="extension"> [extension]="extension">
</threed-viewer> </threed-viewer>
</ng-template> </ng-template>
</extension-viewer> </adf-viewer-extension>
</adf-viewer> </adf-viewer>
``` ```
Note: you need adding `ng2-3d-editor` dependency to your `package.json` file to make the example above work. Note: you need adding `ng2-3d-editor` dependency to your `package.json` file to make the example above work.
It is possible to define multiple `extension-viewer` templates: It is possible to define multiple `adf-viewer-extension` templates:
```html ```html
<adf-viewer <adf-viewer [fileNodeId]="fileNodeId">
[(showViewer)]="fileShowed"
[fileNodeId]="fileNodeId"
[overlayMode]="true">
<extension-viewer [supportedExtensions]="['xls','xlsx']" #extension> <adf-viewer-extension [supportedExtensions]="['xls','xlsx']" #extension>
<ng-template let-urlFileContent="urlFileContent" > <ng-template let-urlFileContent="urlFileContent">
<my-custom-xls-component <my-custom-xls-component
urlFileContent="urlFileContent"> urlFileContent="urlFileContent">
</my-custom-xls-component> </my-custom-xls-component>
</ng-template> </ng-template>
</extension-viewer> </adf-viewer-extension>
<extension-viewer [supportedExtensions]="['txt']" #extension> <adf-viewer-extension [supportedExtensions]="['txt']" #extension>
<ng-template let-urlFileContent="urlFileContent" > <ng-template let-urlFileContent="urlFileContent" >
<my-custom-txt-component <my-custom-txt-component
urlFileContent="urlFileContent"> urlFileContent="urlFileContent">
</my-custom-txt-component> </my-custom-txt-component>
</ng-template> </ng-template>
</extension-viewer> </adf-viewer-extension>
</adf-viewer> </adf-viewer>
``` ```

4
ng2-components/ng2-alfresco-viewer/index.ts
View File

@@ -29,7 +29,7 @@ import { ViewerOpenWithComponent } from './src/components/viewer-open-with.compo
import { ViewerSidebarComponent } from './src/components/viewer-sidebar.component'; import { ViewerSidebarComponent } from './src/components/viewer-sidebar.component';
import { ViewerToolbarComponent } from './src/components/viewer-toolbar.component'; import { ViewerToolbarComponent } from './src/components/viewer-toolbar.component';
import { ViewerComponent } from './src/components/viewer.component'; import { ViewerComponent } from './src/components/viewer.component';
import { ExtensionViewerDirective } from './src/directives/extension-viewer.directive'; import { ViewerExtensionDirective } from './src/directives/viewer-extension.directive';
import { RenderingQueueServices } from './src/services/rendering-queue.services'; import { RenderingQueueServices } from './src/services/rendering-queue.services';
export { ViewerComponent } from './src/components/viewer.component'; export { ViewerComponent } from './src/components/viewer.component';
@@ -41,7 +41,7 @@ export function declarations() {
TxtViewerComponent, TxtViewerComponent,
MediaPlayerComponent, MediaPlayerComponent,
PdfViewerComponent, PdfViewerComponent,
ExtensionViewerDirective, ViewerExtensionDirective,
UnknownFormatComponent, UnknownFormatComponent,
ViewerToolbarComponent, ViewerToolbarComponent,
ViewerSidebarComponent, ViewerSidebarComponent,

2
ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts
View File

@@ -121,7 +121,7 @@ export class ViewerComponent implements OnDestroy, OnChanges {
private extensions = { private extensions = {
image: ['png', 'jpg', 'jpeg', 'gif', 'bpm'], image: ['png', 'jpg', 'jpeg', 'gif', 'bpm'],
media: ['wav', 'mp4', 'mp3', 'webm', 'ogg'], media: ['wav', 'mp4', 'mp3', 'webm', 'ogg'],
text: ['txt', 'xml', 'js', 'html'], text: ['txt', 'xml', 'js', 'html', 'json'],
pdf: ['pdf'] pdf: ['pdf']
}; };

8
ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.spec.ts → ng2-components/ng2-alfresco-viewer/src/directives/viewer-extension.directive.spec.ts
View File

@@ -22,7 +22,7 @@ import { Injector } from '@angular/core';
import { async, getTestBed, TestBed } from '@angular/core/testing'; import { async, getTestBed, TestBed } from '@angular/core/testing';
import { CoreModule } from 'ng2-alfresco-core'; import { CoreModule } from 'ng2-alfresco-core';
import { ViewerComponent } from '../components/viewer.component'; import { ViewerComponent } from '../components/viewer.component';
import { ExtensionViewerDirective } from './extension-viewer.directive'; import { ViewerExtensionDirective } from './viewer-extension.directive';
export class MockElementRef extends ElementRef { export class MockElementRef extends ElementRef {
constructor() { constructor() {
@@ -32,7 +32,7 @@ export class MockElementRef extends ElementRef {
describe('ExtensionViewerDirective', () => { describe('ExtensionViewerDirective', () => {
let injector: Injector; let injector: Injector;
let extensionViewerDirective: ExtensionViewerDirective; let extensionViewerDirective: ViewerExtensionDirective;
let viewerComponent: ViewerComponent; let viewerComponent: ViewerComponent;
beforeEach(async(() => { beforeEach(async(() => {
@@ -40,13 +40,13 @@ describe('ExtensionViewerDirective', () => {
imports: [CoreModule], imports: [CoreModule],
providers: [ providers: [
{ provide: Location, useClass: SpyLocation }, { provide: Location, useClass: SpyLocation },
ExtensionViewerDirective, ViewerExtensionDirective,
{provide: ElementRef, useClass: MockElementRef}, {provide: ElementRef, useClass: MockElementRef},
ViewerComponent ViewerComponent
] ]
}); });
injector = getTestBed(); injector = getTestBed();
extensionViewerDirective = injector.get(ExtensionViewerDirective); extensionViewerDirective = injector.get(ViewerExtensionDirective);
viewerComponent = injector.get(ViewerComponent); viewerComponent = injector.get(ViewerComponent);
extensionViewerDirective.templateModel = {template: '', isVisible: false}; extensionViewerDirective.templateModel = {template: '', isVisible: false};
})); }));

12
ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.ts → ng2-components/ng2-alfresco-viewer/src/directives/viewer-extension.directive.ts
View File

@@ -15,19 +15,13 @@
* limitations under the License. * limitations under the License.
*/ */
import { import { AfterContentInit, ContentChild, Directive, Input, TemplateRef } from '@angular/core';
AfterContentInit,
ContentChild,
Directive,
Input,
TemplateRef
} from '@angular/core';
import { ViewerComponent } from '../components/viewer.component'; import { ViewerComponent } from '../components/viewer.component';
@Directive({ @Directive({
selector: 'extension-viewer' selector: 'adf-viewer-extension'
}) })
export class ExtensionViewerDirective implements AfterContentInit { export class ViewerExtensionDirective implements AfterContentInit {
@ContentChild(TemplateRef) @ContentChild(TemplateRef)
template: any; template: any;