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

Dev eromano external viewer (#1636)

Browse Source 
* add extensibility point to add a custom viewer

* documentation and tests

* add example in document list
This commit is contained in:
Eugenio Romano
2017-02-16 09:50:12 +00:00
committed by Mario Romano
parent e3ce65880f
commit 59cbbcbe4d
30 changed files with 309 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -223,7 +223,44 @@ 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
```html
<alfresco-viewer [(showViewer)]="fileShowed"
[fileNodeId]="fileNodeId"
[overlayMode]="true">
<extension-viewer [supportedExtensions]="['obj','3ds']" #extension>
<template let-urlFileContent="urlFileContent" let-extension="extension" >
<threed-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 ```
```html
<alfresco-viewer [(showViewer)]="fileShowed"
[fileNodeId]="fileNodeId"
[overlayMode]="true">
<extension-viewer [supportedExtensions]="['xls','xlsx']" #extension>
<template let-urlFileContent="urlFileContent" >
<my-custom-xls-component urlFileContent="urlFileContent"></my-custom-xls-component>
</template>
</extension-viewer>
<extension-viewer [supportedExtensions]="['txt']" #extension>
<template let-urlFileContent="urlFileContent" >
<my-custom-txt-component urlFileContent="urlFileContent"></my-custom-txt-component>
</template>
</extension-viewer>
</alfresco-viewer>
```
## Build from sources

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

@@ -27,26 +27,28 @@
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CoreModule } from 'ng2-alfresco-core';
import { ViewerComponent } from './src/componets/viewer.component';
import { ViewerComponent } from './src/components/viewer.component';
import { RenderingQueueServices } from './src/services/rendering-queue.services';
import { ImgViewerComponent } from './src/componets/imgViewer.component';
import { MediaPlayerComponent } from './src/componets/mediaPlayer.component';
import { NotSupportedFormat } from './src/componets/notSupportedFormat.component';
import { PdfViewerComponent } from './src/componets/pdfViewer.component';
import { ImgViewerComponent } from './src/components/imgViewer.component';
import { MediaPlayerComponent } from './src/components/mediaPlayer.component';
import { NotSupportedFormat } from './src/components/notSupportedFormat.component';
import { PdfViewerComponent } from './src/components/pdfViewer.component';
import { ExtensionViewerDirective } from './src/directives/extension-viewer.directive';
export * from './src/componets/viewer.component';
export * from './src/components/viewer.component';
export * from './src/services/rendering-queue.services';
export * from './src/componets/imgViewer.component';
export * from './src/componets/mediaPlayer.component';
export * from './src/componets/notSupportedFormat.component';
export * from './src/componets/pdfViewer.component';
export * from './src/components/imgViewer.component';
export * from './src/components/mediaPlayer.component';
export * from './src/components/notSupportedFormat.component';
export * from './src/components/pdfViewer.component';
export const VIEWER_DIRECTIVES: any[] = [
ViewerComponent,
ImgViewerComponent,
MediaPlayerComponent,
NotSupportedFormat,
PdfViewerComponent
PdfViewerComponent,
ExtensionViewerDirective
];
export const VIEWER_PROVIDERS: any[] = [

0
ng2-components/ng2-alfresco-viewer/src/componets/imgViewer.component.css → ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.css
View File

0
ng2-components/ng2-alfresco-viewer/src/componets/imgViewer.component.html → ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.html
View File

6
ng2-components/ng2-alfresco-viewer/src/componets/imgViewer.component.spec.ts → ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.spec.ts
View File

@@ -27,7 +27,7 @@ import {
describe('Test ng2-alfresco-viewer Img viewer component ', () => {
let component: any;
let component: ImgViewerComponent;
let fixture: ComponentFixture<ImgViewerComponent>;
let debug: DebugElement;
let element: HTMLElement;
@@ -57,14 +57,14 @@ describe('Test ng2-alfresco-viewer Img viewer component ', () => {
it('If no url is passed should thrown an error', () => {
expect(() => {
component.ngOnChanges();
component.ngOnChanges(null);
}).toThrow(new Error('Attribute urlFile is required'));
});
it('If url is passed should not thrown an error', () => {
component.urlFile = 'fake-url';
expect(() => {
component.ngOnChanges();
component.ngOnChanges(null);
}).not.toThrow(new Error('Attribute urlFile is required'));
});

0
ng2-components/ng2-alfresco-viewer/src/componets/imgViewer.component.ts → ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.ts
View File

0
ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.css → ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.css
View File

0
ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.html → ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.html
View File

8
ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.spec.ts → ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.spec.ts
View File

@@ -27,7 +27,7 @@ import {
describe('Test ng2-alfresco-viewer Media player component ', () => {
let component: any;
let component: MediaPlayerComponent;
let fixture: ComponentFixture<MediaPlayerComponent>;
let debug: DebugElement;
let element: HTMLElement;
@@ -57,21 +57,21 @@ describe('Test ng2-alfresco-viewer Media player component ', () => {
it('If no url is passed should thrown an error', () => {
expect(() => {
component.ngOnChanges();
component.ngOnChanges(null);
}).toThrow(new Error('Attribute urlFile is required'));
});
it('If url is passed should not thrown an error', () => {
component.urlFile = 'fake-url';
expect(() => {
component.ngOnChanges();
component.ngOnChanges(null);
}).not.toThrow(new Error('Attribute urlFile is required'));
});
it('If url is passed should not thrown an error', () => {
component.urlFile = 'fake-url';
expect(() => {
component.ngOnChanges();
component.ngOnChanges(null);
}).not.toThrow(new Error('Attribute urlFile is required'));
});
});

0
ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.ts → ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.ts
View File

0
ng2-components/ng2-alfresco-viewer/src/componets/notSupportedFormat.component.css → ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.css
View File

0
ng2-components/ng2-alfresco-viewer/src/componets/notSupportedFormat.component.html → ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.html
View File

2
ng2-components/ng2-alfresco-viewer/src/componets/notSupportedFormat.component.spec.ts → ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.spec.ts
View File

@@ -27,7 +27,7 @@ import {
describe('Test ng2-alfresco-viewer Not Supported Format View component', () => {
let component: any;
let component: NotSupportedFormat;
let fixture: ComponentFixture<NotSupportedFormat>;
let debug: DebugElement;
let element: HTMLElement;

0
ng2-components/ng2-alfresco-viewer/src/componets/notSupportedFormat.component.ts → ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.ts
View File

0
ng2-components/ng2-alfresco-viewer/src/componets/pdfViewer.component.css → ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.css
View File

0
ng2-components/ng2-alfresco-viewer/src/componets/pdfViewer.component.html → ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.html
View File

33
ng2-components/ng2-alfresco-viewer/src/componets/pdfViewer.component.spec.ts → ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.spec.ts
View File

@@ -29,7 +29,7 @@ import {
describe('Test ng2-alfresco-viewer PdfViewer component', () => {
let component: any;
let component: PdfViewerComponent;
let fixture: ComponentFixture<PdfViewerComponent>;
let debug: DebugElement;
let element: HTMLElement;
@@ -70,7 +70,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
fixture.detectChanges();
expect(() => {
component.ngOnChanges();
component.ngOnChanges(null);
}).toThrow();
});
@@ -109,11 +109,11 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
describe('User interaction', () => {
beforeEach(() => {
component.inputPage(1);
component.inputPage('1');
});
it('Total number of pages should be loaded', (done) => {
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(component.totalPages).toEqual(6);
done();
@@ -121,7 +121,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
}, 5000);
it('right arrow should move to the next page', (done) => {
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(component.displayPage).toBe(1);
EventMock.keyDown(39);
@@ -134,7 +134,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
it('nextPage should move to the next page', (done) => {
let nextPageButton: any = element.querySelector('#viewer-next-page-button');
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(component.displayPage).toBe(1);
nextPageButton.click();
@@ -145,7 +145,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
});
it('left arrow should move to the previous page', (done) => {
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(component.displayPage).toBe(1);
EventMock.keyDown(39);
@@ -161,7 +161,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
let previousPageButton: any = element.querySelector('#viewer-previous-page-button');
let nextPageButton: any = element.querySelector('#viewer-next-page-button');
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(component.displayPage).toBe(1);
nextPageButton.click();
@@ -174,7 +174,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
});
it('previous page should not move to the previous page if is page 1', (done) => {
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(component.displayPage).toBe(1);
component.previousPage();
@@ -185,7 +185,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
});
it('Input page should move to the inserted page', (done) => {
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(component.displayPage).toBe(1);
component.inputPage('2');
@@ -205,7 +205,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
it('In should increment the scale value', (done) => {
let zoomInButton: any = element.querySelector('#viewer-zoom-in-button');
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
let zoomBefore = component.currentScale;
zoomInButton.click();
expect(component.currentScaleMode).toBe('auto');
@@ -218,7 +218,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
it('Out should decrement the scale value', (done) => {
let zoomOutButton: any = element.querySelector('#viewer-zoom-out-button');
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
let zoomBefore = component.currentScale;
zoomOutButton.click();
expect(component.currentScaleMode).toBe('auto');
@@ -231,7 +231,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
it('fit-in button should toggle page-fit and auto scale mode', (done) => {
let fitPage: any = element.querySelector('#viewer-scale-page-button');
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
expect(component.currentScaleMode).toBe('auto');
fitPage.click();
expect(component.currentScaleMode).toBe('page-fit');
@@ -245,20 +245,19 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
describe('Resize interaction', () => {
it('resize event should trigger setScaleUpdatePages', (done) => {
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
spyOn(component, 'onResize');
component.documentContainer = element.querySelector('#viewer-pdf-container');
EventMock.resizeMobileView();
expect(component.onResize).toHaveBeenCalled();
done();
}, 5000);
});
});
});
describe('scroll interaction', () => {
it('scroll page should return the current page', (done) => {
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(component.displayPage).toBe(1);
component.inputPage('2');

0
ng2-components/ng2-alfresco-viewer/src/componets/pdfViewer.component.ts → ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts
View File

0
ng2-components/ng2-alfresco-viewer/src/componets/pdfViewerHost.component.css → ng2-components/ng2-alfresco-viewer/src/components/pdfViewerHost.component.css
View File

0
ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.css → ng2-components/ng2-alfresco-viewer/src/components/viewer.component.css
View File

28
ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.html → ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html
View File

@@ -31,19 +31,10 @@
<!-- End Navigation -->
</div>
</header>
<!--<div class="mdl-layout__drawer">-->
<!--<span class="mdl-layout-title">Thumbnail</span>-->
<!--</div>-->
<main id="page-content" class="mdl-layout__content" [ngClass]="{'all-space': !overlayMode }">
<div class="mdl-grid">
<!--<div id="viewer-previous-file-button" class="center-element mdl-cell mdl-cell&#45;&#45;2-col mdl-cell&#45;&#45;hide-tablet mdl-cell&#45;&#45;hide-phone">-->
<!--<button *ngIf="false"-->
<!--class="center-element mdl-color&#45;&#45;black mdl-button mdl-js-button mdl-button&#45;&#45;fab mdl-button&#45;&#45;mini-fab mdl-button&#45;&#45;colored"-->
<!--(click)="previousFile()">-->
<!--<i class="icon material-icons ">keyboard_arrow_left</i>-->
<!--</button>-->
<!--</div>-->
<div id="viewer-content-container" *ngIf="isLoaded()"
class="center-element mdl-cell mdl-cell--12-col">
@@ -60,22 +51,19 @@
<media-player [urlFile]="urlFileContent" [mimeType]="mimeType"
[nameFile]="displayName"></media-player>
</div>
<span *ngFor="let extensionTemplate of extensionTemplates">
<template [ngTemplateOutlet]="extensionTemplate.template" *ngIf="extensionTemplate.isVisible"
[ngOutletContext]="{ urlFileContent: urlFileContent, extension:extension }"></template>
</span>
<div *ngIf="!supportedExtension()">
<not-supported-format [urlFile]="urlFileContent"
[nameFile]="displayName"></not-supported-format>
<not-supported-format *ngIf="!extensionTemplate" [urlFile]="urlFileContent" [nameFile]="displayName"></not-supported-format>
</div>
<!-- End View Switch -->
</div>
<!--<div id="viewer-next-file-button" class="center-element mdl-cell mdl-cell&#45;&#45;2-col mdl-cell&#45;&#45;hide-tablet mdl-cell&#45;&#45;hide-phone">-->
<!--<button *ngIf="false"-->
<!--class="center-element mdl-color&#45;&#45;black mdl-button mdl-js-button mdl-button&#45;&#45;fab mdl-button&#45;&#45;mini-fab mdl-button&#45;&#45;colored"-->
<!--(click)="nextFile()">-->
<!--<i class="icon material-icons">keyboard_arrow_right</i>-->
<!--</button>-->
<!--</div>-->
</div>
</main>
</div>

46
ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.spec.ts → ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts
View File

@@ -35,7 +35,7 @@ declare let jasmine: any;
describe('Test ng2-alfresco-viewer ViewerComponent', () => {
let component: any;
let component: ViewerComponent;
let fixture: ComponentFixture<ViewerComponent>;
let debug: DebugElement;
let element: HTMLElement;
@@ -99,7 +99,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => {
});
it('Name File should be present if is overlay mode ', () => {
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-test-file.pdf');
});
@@ -161,7 +161,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => {
component.urlFile = undefined;
expect(() => {
component.ngOnChanges();
component.ngOnChanges(null);
}).toThrow();
});
@@ -171,7 +171,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => {
component.urlFile = undefined;
expect(() => {
component.ngOnChanges();
component.ngOnChanges(null);
}).not.toThrow();
});
@@ -180,7 +180,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => {
component.fileNodeId = undefined;
expect(() => {
component.ngOnChanges();
component.ngOnChanges(null);
}).not.toThrow();
});
@@ -200,7 +200,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => {
it('if extension file is a pdf the pdf viewer should be loaded', (done) => {
component.urlFile = 'base/src/assets/fake-test-file.pdf';
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(element.querySelector('pdf-viewer')).not.toBeNull();
done();
@@ -210,7 +210,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => {
it('if extension file is a image the img viewer should be loaded', (done) => {
component.urlFile = 'fake-url-file.png';
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(element.querySelector('#viewer-image')).not.toBeNull();
done();
@@ -220,7 +220,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => {
it('if extension file is a video the the media player should be loaded', (done) => {
component.urlFile = 'fake-url-file.mp4';
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(element.querySelector('media-player')).not.toBeNull();
done();
@@ -230,7 +230,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => {
it('if extension file is a not supported the not supported div should be loaded', (done) => {
component.urlFile = 'fake-url-file.unsupported';
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(element.querySelector('not-supported-format')).not.toBeNull();
done();
@@ -243,7 +243,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => {
component.urlFile = 'content';
component.mimeType = 'application/pdf';
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(element.querySelector('pdf-viewer')).not.toBeNull();
done();
@@ -255,7 +255,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => {
component.urlFile = 'content.bin';
component.mimeType = 'application/pdf';
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(element.querySelector('pdf-viewer')).not.toBeNull();
done();
@@ -266,7 +266,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => {
component.urlFile = 'content';
component.mimeType = 'image/png';
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(element.querySelector('#viewer-image')).not.toBeNull();
done();
@@ -277,7 +277,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => {
component.urlFile = 'content.bin';
component.mimeType = 'image/png';
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(element.querySelector('#viewer-image')).not.toBeNull();
done();
@@ -288,7 +288,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => {
component.urlFile = 'content.bin';
component.mimeType = 'video/mp4';
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(element.querySelector('media-player')).not.toBeNull();
done();
@@ -299,7 +299,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => {
component.urlFile = 'content';
component.mimeType = 'video/mp4';
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(element.querySelector('media-player')).not.toBeNull();
done();
@@ -310,11 +310,25 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => {
component.urlFile = 'content';
component.mimeType = 'video/avi';
component.ngOnChanges().then(() => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
expect(element.querySelector('media-player')).toBeNull();
done();
});
});
});
describe('Events', () => {
it('if extension change exextensionChange event should be fired ', (done) => {
component.extensionChange.subscribe((fileExtension) => {
expect(fileExtension).toEqual('png');
done();
});
component.urlFile = 'fake-url-file.png';
component.ngOnChanges(null);
});
});
});

39
ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.ts → ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, ElementRef, Input, Output, HostListener, EventEmitter, Inject } from '@angular/core';
import { Component, ElementRef, Input, Output, HostListener, EventEmitter, Inject, TemplateRef } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
import { AlfrescoApiService, LogService } from 'ng2-alfresco-core';
@@ -46,6 +46,13 @@ export class ViewerComponent {
@Output()
showViewerChange: EventEmitter<boolean> = new EventEmitter<boolean>();
@Output()
extensionChange: EventEmitter<String> = new EventEmitter<String>();
extensionTemplates: { template: TemplateRef<any>, isVisible: boolean }[] = [];
externalExtensions: string[] = [];
urlFileContent: string;
otherMenu: any;
displayName: string;
@@ -72,6 +79,7 @@ export class ViewerComponent {
let filenameFromUrl = this.getFilenameFromUrl(this.urlFile);
this.displayName = filenameFromUrl ? filenameFromUrl : '';
this.extension = this.getFileExtension(filenameFromUrl);
this.extensionChange.emit(this.extension);
this.urlFileContent = this.urlFile;
resolve();
} else if (this.fileNodeId) {
@@ -79,6 +87,8 @@ export class ViewerComponent {
this.mimeType = data.content.mimeType;
this.displayName = data.name;
this.urlFileContent = alfrescoApi.content.getContentUrl(data.id);
this.extension = this.getFileExtension(data.name);
this.extensionChange.emit(this.extension);
this.loaded = true;
resolve();
}, function (error) {
@@ -103,6 +113,9 @@ export class ViewerComponent {
this.showViewerChange.emit(this.showViewer);
}
/**
* cleanup before the close
*/
cleanup() {
this.urlFileContent = '';
this.displayName = '';
@@ -216,7 +229,25 @@ export class ViewerComponent {
* @returns {boolean}
*/
supportedExtension() {
return this.isImage() || this.isPdf() || this.isMedia();
return this.isImage() || this.isPdf() || this.isMedia() || this.isExternalSupportedExtension();
}
/**
* Check if the file is compatible with one of the extension
*
* @returns {boolean}
*/
isExternalSupportedExtension() {
let externalType: string;
if (this.externalExtensions && (this.externalExtensions instanceof Array)) {
externalType = this.externalExtensions.find((externalExtension) => {
return externalExtension.toLowerCase() === this.extension;
});
}
return !!externalType;
}
/**
@@ -272,8 +303,8 @@ export class ViewerComponent {
* @param {string} nodeName
* @returns {HTMLElement}
*/
private closestElement(elelemnt: HTMLElement, nodeName: string) {
let parent = elelemnt.parentElement;
private closestElement(element: HTMLElement, nodeName: string) {
let parent = element.parentElement;
if (parent) {
if (parent.nodeName.toLowerCase() === nodeName) {
return parent;

62
ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.spec.ts Normal file
View File

@@ -0,0 +1,62 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ElementRef } from '@angular/core';
import { CoreModule } from 'ng2-alfresco-core';
import { ExtensionViewerDirective } from './extension-viewer.directive';
import { ViewerComponent } from '../components/viewer.component';
import { getTestBed, TestBed, async } from '@angular/core/testing';
import { Injector } from '@angular/core';
export class MockElementRef extends ElementRef {
}
describe('ExtensionViewerComponent', () => {
let injector: Injector;
let extensionViewerDirective: ExtensionViewerDirective;
let viewerComponent: ViewerComponent;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [CoreModule.forRoot()],
providers: [
ExtensionViewerDirective,
{provide: ElementRef, useClass: MockElementRef},
ViewerComponent
]
});
injector = getTestBed();
extensionViewerDirective = injector.get(ExtensionViewerDirective);
viewerComponent = injector.get(ViewerComponent);
extensionViewerDirective.templateModel = {template: '', isVisible: false};
}));
it('is defined', () => {
expect(extensionViewerDirective).toBeDefined();
});
it('if the file in the viewer has an extension handled by this extension isVisible should be true', () => {
extensionViewerDirective.supportedExtensions = ['xls', 'sts'];
expect(extensionViewerDirective.isVisible('xls')).toBeTruthy();
});
it('if the file in the viewer not has an extension handled by this extension isVisible should be false', () => {
extensionViewerDirective.supportedExtensions = ['xls', 'sts'];
expect(extensionViewerDirective.isVisible('png')).not.toBeTruthy();
});
});

83
ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.ts Normal file
View File

@@ -0,0 +1,83 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
Directive,
ContentChild,
TemplateRef,
AfterContentInit,
Input
} from '@angular/core';
import { ViewerComponent } from '../components/viewer.component';
@Directive({
selector: 'extension-viewer'
})
export class ExtensionViewerDirective implements AfterContentInit {
@ContentChild(TemplateRef)
template: any;
@Input()
urlFileContent: string;
@Input()
extension: string;
@Input()
supportedExtensions: string[];
templateModel: any;
constructor(private viewerComponent: ViewerComponent) {
}
ngAfterContentInit() {
this.templateModel = {template: this.template, isVisible: false};
this.viewerComponent.extensionTemplates.push(this.templateModel);
this.viewerComponent.extensionChange.subscribe((fileExtension) => {
this.templateModel.isVisible = this.isVisible(fileExtension);
});
if (this.supportedExtensions instanceof Array) {
this.supportedExtensions.forEach((extension) => {
this.viewerComponent.externalExtensions.push(extension);
});
}
}
/**
* check if the current extension in the viewer is compatible with this extension checking against supportedExtensions
*
* @returns {boolean}
*/
isVisible(fileExtension) {
let supportedExtension: string;
if (this.supportedExtensions && (this.supportedExtensions instanceof Array)) {
supportedExtension = this.supportedExtensions.find((extension) => {
return extension.toLowerCase() === fileExtension;
});
}
return !!supportedExtension;
}
}