From 4b5eb4bb29e2e304abff4de5e69dedc9be8b90b1 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Tue, 30 May 2017 13:13:07 +0100 Subject: [PATCH] [ADF-613] Add plain text viewer (#1873) * add plain text viewer * different devices optimizations * returns types --- .../src/services/alfresco-content.service.ts | 44 +++++++++++-- ng2-components/ng2-alfresco-viewer/README.md | 2 +- ng2-components/ng2-alfresco-viewer/index.ts | 3 + .../components/mediaPlayer.component.spec.ts | 8 +-- .../notSupportedFormat.component.spec.ts | 4 +- .../components/pdfViewer.component.spec.ts | 50 +++++++------- .../src/components/txtViewer.component.css | 10 +++ .../src/components/txtViewer.component.html | 6 ++ .../components/txtViewer.component.spec.ts | 65 +++++++++++++++++++ .../src/components/txtViewer.component.ts | 46 +++++++++++++ .../src/components/viewer.component.html | 3 + .../src/components/viewer.component.spec.ts | 63 ++++++++++++------ .../src/components/viewer.component.ts | 52 ++++++++------- 13 files changed, 273 insertions(+), 83 deletions(-) create mode 100644 ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.css create mode 100644 ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.html create mode 100644 ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.spec.ts create mode 100644 ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.ts diff --git a/ng2-components/ng2-alfresco-core/src/services/alfresco-content.service.ts b/ng2-components/ng2-alfresco-core/src/services/alfresco-content.service.ts index ae46746cd7..ca50c87025 100644 --- a/ng2-components/ng2-alfresco-core/src/services/alfresco-content.service.ts +++ b/ng2-components/ng2-alfresco-core/src/services/alfresco-content.service.ts @@ -19,29 +19,59 @@ import { Injectable } from '@angular/core'; import { AlfrescoAuthenticationService } from './alfresco-authentication.service'; import { AlfrescoApiService } from './alfresco-api.service'; +import { LogService } from './log.service.ts'; +import { Observable } from 'rxjs/Rx'; @Injectable() export class AlfrescoContentService { constructor(public authService: AlfrescoAuthenticationService, - public apiService: AlfrescoApiService) { + public apiService: AlfrescoApiService, + private logService: LogService) { } /** * Get thumbnail URL for the given document node. - * @param document Node to get URL for. + * @param nodeId {string} Node to get URL for. * @returns {string} URL address. */ - getDocumentThumbnailUrl(document: any): string { - return this.apiService.getInstance().content.getDocumentThumbnailUrl(document.entry.id); + getDocumentThumbnailUrl(nodeId: any): string { + + if (nodeId && nodeId.entry) { + nodeId = nodeId.entry.id; + } + + return this.apiService.getInstance().content.getDocumentThumbnailUrl(nodeId); } /** * Get content URL for the given node. - * @param document Node to get URL for. + * @param nodeId {string} Node to get URL for. * @returns {string} URL address. */ - getContentUrl(document: any): string { - return this.apiService.getInstance().content.getContentUrl(document.entry.id); + getContentUrl(nodeId: any): string { + + if (nodeId && nodeId.entry) { + nodeId = nodeId.entry.id; + } + + return this.apiService.getInstance().content.getContentUrl(nodeId); + } + + /** + * Get content for the given node. + * @param nodeId {string}. + * + * @returns {Observable} URL address. + */ + getNodeContent(nodeId: string): Observable { + return Observable.fromPromise(this.apiService.getInstance().core.nodesApi.getFileContent(nodeId).then((dataContent) => { + return dataContent; + })).catch(this.handleError); + } + + private handleError(error: any) { + this.logService.error(error); + return Observable.throw(error || 'Server error'); } } diff --git a/ng2-components/ng2-alfresco-viewer/README.md b/ng2-components/ng2-alfresco-viewer/README.md index 02c42f2491..c280e31514 100644 --- a/ng2-components/ng2-alfresco-viewer/README.md +++ b/ng2-components/ng2-alfresco-viewer/README.md @@ -222,7 +222,7 @@ platformBrowserDynamic().bootstrapModule(AppModule); | --- | --- | | Media | Mp4, WebM, Ogv | | Images | png, jpg, jpeg, gif, bmp | -| Text | pdf | +| Text | pdf, txt | # Custom extension handler diff --git a/ng2-components/ng2-alfresco-viewer/index.ts b/ng2-components/ng2-alfresco-viewer/index.ts index c133a06d80..4addc22125 100644 --- a/ng2-components/ng2-alfresco-viewer/index.ts +++ b/ng2-components/ng2-alfresco-viewer/index.ts @@ -33,6 +33,7 @@ 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 { TxtViewerComponent } from './src/components/txtViewer.component'; import { ExtensionViewerDirective } from './src/directives/extension-viewer.directive'; export * from './src/components/viewer.component'; @@ -41,10 +42,12 @@ 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 * from './src/components/txtViewer.component'; export const VIEWER_DIRECTIVES: any[] = [ ViewerComponent, ImgViewerComponent, + TxtViewerComponent, MediaPlayerComponent, NotSupportedFormat, PdfViewerComponent, diff --git a/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.spec.ts index a263a443d3..368a8310a0 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.spec.ts @@ -64,28 +64,28 @@ describe('Test ng2-alfresco-viewer Media player component ', () => { fixture.detectChanges(); }); - it('If no url or no blob are passed should thrown an error', () => { + it('should thrown an error If no url or no blob are passed', () => { let change = new SimpleChange(null, null, true); expect(() => { component.ngOnChanges({ 'blobFile': change }); }).toThrow(new Error('Attribute urlFile or blobFile is required')); }); - it('If url is passed should not thrown an error', () => { + it('should not thrown an error If url is passed', () => { component.urlFile = 'fake-url'; expect(() => { component.ngOnChanges(null); }).not.toThrow(new Error('Attribute urlFile or blobFile is required')); }); - it('If url is passed should not thrown an error', () => { + it('should not thrown an error If url is passed', () => { component.urlFile = 'fake-url'; expect(() => { component.ngOnChanges(null); }).not.toThrow(new Error('Attribute urlFile or blobFile is required')); }); - it('If blob is passed should not thrown an error', () => { + it('should not thrown an error If blob is passed', () => { let blob = createFakeBlob(); spyOn(service, 'createTrustedUrl').and.returnValue('fake-blob-url'); diff --git a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.spec.ts index 37da1e7c2d..c1633f55b9 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/notSupportedFormat.component.spec.ts @@ -57,7 +57,7 @@ describe('Test ng2-alfresco-viewer Not Supported Format View component', () => { describe('View', () => { - it('Download button should be present', () => { + it('should be present Download button', () => { expect(element.querySelector('#viewer-download-button')).not.toBeNull(); }); @@ -69,7 +69,7 @@ describe('Test ng2-alfresco-viewer Not Supported Format View component', () => { }); describe('User Interaction', () => { - it('Click on Download button should call download method', () => { + it('should call download method if Click on Download button', () => { spyOn(window, 'open'); let downloadButton: any = element.querySelector('#viewer-download-button'); diff --git a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.spec.ts index 42ff3d4f69..0681eb2619 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.spec.ts @@ -84,7 +84,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { fixture.detectChanges(); }); - it('If urlfile is not present should thrown an error ', () => { + it('should thrown an error If urlfile is not present', () => { component.urlFile = undefined; fixture.detectChanges(); @@ -94,21 +94,21 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { }).toThrow(new Error('Attribute urlFile or blobFile is required')); }); - it('Canvas should be present', () => { + it('should Canvas be present', () => { expect(element.querySelector('#viewer-viewerPdf')).not.toBeNull(); expect(element.querySelector('#viewer-pdf-container')).not.toBeNull(); }); - it('Loader should be present', () => { + it('should Loader be present', () => { expect(element.querySelector('#loader-container')).not.toBeNull(); }); - it('Next an Previous Buttons should be present', () => { + it('should Next an Previous Buttons be present', () => { expect(element.querySelector('#viewer-previous-page-button')).not.toBeNull(); expect(element.querySelector('#viewer-next-page-button')).not.toBeNull(); }); - it('Input Page elements should be present', () => { + it('should Input Page elements be present', () => { expect(element.querySelector('#viewer-pagenumber-input')).toBeDefined(); expect(element.querySelector('#viewer-total-pages')).toBeDefined(); @@ -116,7 +116,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { expect(element.querySelector('#viewer-next-page-button')).not.toBeNull(); }); - it('Toolbar should be hide if showToolbar is false', () => { + it('should Toolbar be hide if showToolbar is false', () => { component.showToolbar = false; fixture.detectChanges(); @@ -135,28 +135,28 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { fixture.detectChanges(); }); - it('If blobFile is not present should thrown an error ', () => { + it('should If blobFile is not present thrown an error ', () => { component.blobFile = undefined; expect(() => { component.ngOnChanges(null); }).toThrow(new Error('Attribute urlFile or blobFile is required')); }); - it('Canvas should be present', () => { + it('should Canvas be present', () => { expect(element.querySelector('#viewer-viewerPdf')).not.toBeNull(); expect(element.querySelector('#viewer-pdf-container')).not.toBeNull(); }); - it('Loader should be present', () => { + it('should Loader be present', () => { expect(element.querySelector('#loader-container')).not.toBeNull(); }); - it('Next an Previous Buttons should be present', () => { + it('should Next an Previous Buttons be present', () => { expect(element.querySelector('#viewer-previous-page-button')).not.toBeNull(); expect(element.querySelector('#viewer-next-page-button')).not.toBeNull(); }); - it('Input Page elements should be present', () => { + it('should Input Page elements be present', () => { expect(element.querySelector('#viewer-pagenumber-input')).toBeDefined(); expect(element.querySelector('#viewer-total-pages')).toBeDefined(); @@ -164,7 +164,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { expect(element.querySelector('#viewer-next-page-button')).not.toBeNull(); }); - it('Toolbar should be hide if showToolbar is false', () => { + it('should Toolbar be hide if showToolbar is false', () => { component.showToolbar = false; fixture.detectChanges(); @@ -182,7 +182,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { component.inputPage('1'); }); - it('Total number of pages should be loaded', (done) => { + it('should Total number of pages be loaded', (done) => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); fixture.whenStable().then(() => { @@ -193,7 +193,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { }); }, 5000); - it('right arrow should move to the next page', (done) => { + it('should right arrow move to the next page', (done) => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); fixture.whenStable().then(() => { @@ -207,7 +207,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { }); }, 5000); - it('nextPage should move to the next page', (done) => { + it('should nextPage move to the next page', (done) => { let nextPageButton: any = element.querySelector('#viewer-next-page-button'); component.ngOnChanges(null).then(() => { @@ -223,7 +223,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { }); }); - it('left arrow should move to the previous page', (done) => { + it('should left arrow move to the previous page', (done) => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); fixture.whenStable().then(() => { @@ -239,7 +239,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { }); }); - it('previous page should move to the previous page', (done) => { + it('should previous page move to the previous page', (done) => { let previousPageButton: any = element.querySelector('#viewer-previous-page-button'); let nextPageButton: any = element.querySelector('#viewer-next-page-button'); @@ -258,7 +258,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { }); }); - it('previous page should not move to the previous page if is page 1', (done) => { + it('should previous page not move to the previous page if is page 1', (done) => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); fixture.whenStable().then(() => { @@ -272,7 +272,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { }); }); - it('Input page should move to the inserted page', (done) => { + it('should Input page move to the inserted page', (done) => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); fixture.whenStable().then(() => { @@ -293,7 +293,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { fixture.detectChanges(); }); - it('In should increment the scale value', (done) => { + it('should zoom in increment the scale value', (done) => { let zoomInButton: any = element.querySelector('#viewer-zoom-in-button'); component.ngOnChanges(null).then(() => { @@ -306,7 +306,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { }); }); - it('Out should decrement the scale value', (done) => { + it('should zoom out decrement the scale value', (done) => { let zoomOutButton: any = element.querySelector('#viewer-zoom-out-button'); component.ngOnChanges(null).then(() => { @@ -319,7 +319,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { }); }); - it('fit-in button should toggle page-fit and auto scale mode', (done) => { + it('should fit-in button toggle page-fit and auto scale mode', (done) => { let fitPage: any = element.querySelector('#viewer-scale-page-button'); component.ngOnChanges(null).then(() => { @@ -341,8 +341,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { fixture.detectChanges(); component.inputPage('1'); }); - - it('resize event should trigger setScaleUpdatePages', (done) => { + it('should resize event trigger setScaleUpdatePages', (done) => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); fixture.whenStable().then(() => { @@ -362,8 +361,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => { component.urlFile = require('../assets/fake-test-file.pdf'); fixture.detectChanges(); }); - - it('scroll page should return the current page', (done) => { + it('should scroll page return the current page', (done) => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); fixture.whenStable().then(() => { diff --git a/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.css b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.css new file mode 100644 index 0000000000..a9957d60e8 --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.css @@ -0,0 +1,10 @@ +.adf-txt-viewer-margin { + margin: auto !important; + overflow: auto; + font-size: 1em; + padding: 20px; +} + +.full_width{ + width :95% !important; +} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.html b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.html new file mode 100644 index 0000000000..c5376f46f4 --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.html @@ -0,0 +1,6 @@ +
+ 
+        {{content}}
+
+
+ diff --git a/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.spec.ts new file mode 100644 index 0000000000..fc6018ed34 --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.spec.ts @@ -0,0 +1,65 @@ +/*! + * @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 { ComponentFixture, TestBed, async } from '@angular/core/testing'; +import { TxtViewerComponent } from './txtViewer.component'; +import { DebugElement } from '@angular/core'; +import { + AlfrescoAuthenticationService, + AlfrescoSettingsService, + AlfrescoApiService, + CoreModule +} from 'ng2-alfresco-core'; + +describe('Test ng2-alfresco-viewer Text View component', () => { + + let component: TxtViewerComponent; + let fixture: ComponentFixture; + let debug: DebugElement; + let element: HTMLElement; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + CoreModule + ], + declarations: [TxtViewerComponent], + providers: [ + AlfrescoSettingsService, + AlfrescoAuthenticationService, + AlfrescoApiService + ] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TxtViewerComponent); + + debug = fixture.debugElement; + element = fixture.nativeElement; + component = fixture.componentInstance; + component.content = 'example'; + fixture.detectChanges(); + }); + + + describe('View', () => { + it('Should text container be present', () => { + expect(element.querySelector('#adf-viewer-text-container').textContent).toContain('example'); + }); + }); +}); diff --git a/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.ts new file mode 100644 index 0000000000..952079bf67 --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.ts @@ -0,0 +1,46 @@ +/*! + * @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 { Component, Input } from '@angular/core'; +import { AlfrescoContentService } from 'ng2-alfresco-core'; + +@Component({ + selector: 'txt-viewer', + templateUrl: './txtViewer.component.html', + styleUrls: ['./txtViewer.component.css'] +}) +export class TxtViewerComponent { + + @Input() + nodeId: string; + + content: string; + + constructor(private alfrescoContentService: AlfrescoContentService) { + } + + ngOnChanges() { + this.getNodeContent(this.nodeId); + } + + private getNodeContent(nodeId) { + this.alfrescoContentService.getNodeContent(nodeId).subscribe((nodeContent) => { + this.content = nodeContent; + }); + } + +} diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html index f52d2d9b2c..8dfe401e96 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html @@ -51,6 +51,9 @@ +
+ +
{ declarations: [ ViewerComponent, PdfViewerComponent, + TxtViewerComponent, NotSupportedFormat, MediaPlayerComponent, ImgViewerComponent @@ -88,39 +90,39 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { fixture.detectChanges(); }); - it('shadow overlay should be present if is overlay mode', () => { + it('should shadow overlay be present if is overlay mode', () => { expect(element.querySelector('#viewer-shadow-transparent')).not.toBeNull(); }); - it('header should be present if is overlay mode', () => { + it('should header be present if is overlay mode', () => { expect(element.querySelector('header')).not.toBeNull(); }); - it('Name File should be present if is overlay mode ', () => { + it('should Name File be present if is overlay mode ', () => { component.ngOnChanges(null).then(() => { fixture.detectChanges(); expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-test-file.pdf'); }); }); - it('Close button should be present if overlay mode', () => { + it('should Close button be present if overlay mode', () => { expect(element.querySelector('#viewer-close-button')).not.toBeNull(); }); - it('Click on close button should hide the viewer', () => { + it('should Click on close button hide the viewer', () => { let closebutton: any = element.querySelector('#viewer-close-button'); closebutton.click(); fixture.detectChanges(); expect(element.querySelector('#viewer-main-container')).toBeNull(); }); - it('Esc button should hide the viewer', () => { + it('should Esc button hide the viewer', () => { EventMock.keyDown(27); fixture.detectChanges(); expect(element.querySelector('#viewer-main-container')).toBeNull(); }); - it('all-space class should not be present if is in overlay mode', () => { + it('should all-space class not be present if is in overlay mode', () => { expect(element.querySelector('#viewer').getAttribute('class')).toEqual(''); }); }); @@ -132,15 +134,15 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { fixture.detectChanges(); }); - it('header should be NOT be present if is not overlay mode', () => { + it('should header be NOT be present if is not overlay mode', () => { expect(element.querySelector('header')).toBeNull(); }); - it('Close button should be not present if is not overlay mode', () => { + it('should Close button be not present if is not overlay mode', () => { expect(element.querySelector('#viewer-close-button')).toBeNull(); }); - it('Esc button should not hide the viewer if is not overlay mode', () => { + it('should Esc button not hide the viewer if is not overlay mode', () => { EventMock.keyDown(27); fixture.detectChanges(); expect(element.querySelector('#viewer-main-container')).not.toBeNull(); @@ -153,7 +155,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { }); describe('Attribute', () => { - it('Url or fileNodeId File should be mandatory', () => { + it('should Url or fileNodeId be mandatory', () => { component.showViewer = true; component.fileNodeId = undefined; component.urlFile = undefined; @@ -163,7 +165,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { }).toThrow(); }); - it('If FileNodeId is present should not be thrown any error ', () => { + it('should FileNodeId present not thrown any error ', () => { component.showViewer = true; component.fileNodeId = 'file-node-id'; component.urlFile = undefined; @@ -173,7 +175,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { }).not.toThrow(); }); - it('If urlFile is present should not be thrown any error ', () => { + it('should urlFile present not thrown any error ', () => { component.showViewer = true; component.fileNodeId = undefined; @@ -182,11 +184,11 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { }).not.toThrow(); }); - it('showViewer default value should be true', () => { + it('should showViewer default value be true', () => { expect(component.showViewer).toBe(true); }); - it('if showViewer value is false the viewer should be hide', () => { + it('should viewer be hide if showViewer value is false', () => { component.showViewer = false; fixture.detectChanges(); @@ -195,7 +197,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { }); describe('Extension Type Test', () => { - it('if extension file is a pdf the pdf viewer should be loaded', (done) => { + it('should extension file pdf be loaded', (done) => { component.urlFile = 'base/src/assets/fake-test-file.pdf'; component.ngOnChanges(null).then(() => { @@ -205,7 +207,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { }); }); - it('if extension file is a image the img viewer should be loaded', (done) => { + it('should extension file png be loaded', (done) => { component.urlFile = 'fake-url-file.png'; component.ngOnChanges(null).then(() => { @@ -215,7 +217,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { }); }); - it('if extension file is a video the the media player should be loaded', (done) => { + it('should extension file mp4 be loaded', (done) => { component.urlFile = 'fake-url-file.mp4'; component.ngOnChanges(null).then(() => { @@ -225,7 +227,17 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { }); }); - it('if extension file is a not supported the not supported div should be loaded', (done) => { + it('should extension file txt be loaded', (done) => { + component.urlFile = 'fake-url-file.txt'; + + component.ngOnChanges(null).then(() => { + fixture.detectChanges(); + expect(element.querySelector('txt-viewer')).not.toBeNull(); + done(); + }); + }); + + it('should the not supported div be loaded if the file is a not supported extension', (done) => { component.urlFile = 'fake-url-file.unsupported'; component.ngOnChanges(null).then(() => { @@ -293,6 +305,17 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { }); }); + it('should display the txt viewer if the file identified by mimetype is a txt when the filename has wrong extension', (done) => { + component.urlFile = 'content.bin'; + component.mimeType = 'text/txt'; + + component.ngOnChanges(null).then(() => { + fixture.detectChanges(); + expect(element.querySelector('txt-viewer')).not.toBeNull(); + done(); + }); + }); + it('should display the media player if the file identified by mimetype is a media when the filename has no extension', (done) => { component.urlFile = 'content'; component.mimeType = 'video/mp4'; @@ -317,7 +340,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => { }); describe('Events', () => { - it('if extension change exextensionChange event should be fired ', (done) => { + it('should if the extension change extension Change event be fired ', (done) => { component.extensionChange.subscribe((fileExtension) => { expect(fileExtension).toEqual('png'); diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts index c8b06ecad0..add9916093 100644 --- a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts @@ -80,7 +80,6 @@ export class ViewerComponent { throw new Error('Attribute urlFile or fileNodeId or blobFile is required'); } return new Promise((resolve, reject) => { - let alfrescoApi = this.apiService.getInstance(); if (this.blobFile) { this.mimeType = this.blobFile.type; this.extensionChange.emit(this.mimeType); @@ -93,10 +92,10 @@ export class ViewerComponent { this.urlFileContent = this.urlFile; resolve(); } else if (this.fileNodeId) { - alfrescoApi.nodes.getNodeInfo(this.fileNodeId).then((data: MinimalNodeEntryEntity) => { + this.apiService.getInstance().nodes.getNodeInfo(this.fileNodeId).then((data: MinimalNodeEntryEntity) => { this.mimeType = data.content.mimeType; this.displayName = data.name; - this.urlFileContent = alfrescoApi.content.getContentUrl(data.id); + this.urlFileContent = this.apiService.getInstance().content.getContentUrl(data.id); this.extension = this.getFileExtension(data.name); this.extensionChange.emit(this.extension); this.loaded = true; @@ -145,7 +144,7 @@ export class ViewerComponent { * @param {string} url - url file * @returns {string} name file */ - getFilenameFromUrl(url: string) { + getFilenameFromUrl(url: string): string { let anchor = url.indexOf('#'); let query = url.indexOf('?'); let end = Math.min( @@ -160,7 +159,7 @@ export class ViewerComponent { * @param {string} fileName - file name * @returns {string} file name extension */ - private getFileExtension(fileName: string) { + private getFileExtension(fileName: string): string { return fileName.split('.').pop().toLowerCase(); } @@ -169,7 +168,7 @@ export class ViewerComponent { * * @returns {boolean} */ - private isImage() { + private isImage(): boolean { return this.isImageExtension() || this.isImageMimeType(); } @@ -178,7 +177,7 @@ export class ViewerComponent { * * @returns {boolean} */ - private isMedia() { + private isMedia(): boolean { return this.isMediaExtension(this.extension) || this.isMediaMimeType(); } @@ -187,7 +186,7 @@ export class ViewerComponent { * * @returns {boolean} */ - private isImageExtension() { + private isImageExtension(): boolean { return this.extension === 'png' || this.extension === 'jpg' || this.extension === 'jpeg' || this.extension === 'gif' || this.extension === 'bmp'; } @@ -197,7 +196,7 @@ export class ViewerComponent { * * @returns {boolean} */ - private isMediaMimeType() { + private isMediaMimeType(): boolean { let mimeExtension; if (this.mimeType && this.mimeType.indexOf('/')) { mimeExtension = this.mimeType.substr(this.mimeType.indexOf('/') + 1, this.mimeType.length); @@ -211,7 +210,7 @@ export class ViewerComponent { * * @returns {boolean} */ - private isMediaExtension(extension: string) { + private isMediaExtension(extension: string): boolean { return extension === 'mp4' || extension === 'WebM' || extension === 'Ogg'; } @@ -220,7 +219,7 @@ export class ViewerComponent { * * @returns {boolean} */ - private isImageMimeType() { + private isImageMimeType(): boolean { return this.mimeType && this.mimeType.indexOf('image/') === 0; } @@ -229,17 +228,26 @@ export class ViewerComponent { * * @returns {boolean} */ - private isPdf() { + private isPdf(): boolean { return this.extension === 'pdf' || this.mimeType === 'application/pdf'; } + /** + * check if the current file is a supported txt extension + * + * @returns {boolean} + */ + private isText(): boolean { + return this.extension === 'txt' || this.mimeType === 'text/txt'; + } + /** * check if the current file is a supported extension * * @returns {boolean} */ - supportedExtension() { - return this.isImage() || this.isPdf() || this.isMedia() || this.isExternalSupportedExtension(); + supportedExtension(): boolean { + return this.isImage() || this.isPdf() || this.isMedia() || this.isText() || this.isExternalSupportedExtension(); } /** @@ -247,7 +255,7 @@ export class ViewerComponent { * * @returns {boolean} */ - isExternalSupportedExtension() { + isExternalSupportedExtension(): boolean { let externalType: string; if (this.externalExtensions && (this.externalExtensions instanceof Array)) { @@ -274,8 +282,6 @@ export class ViewerComponent { /** * Check if in the document there are scrollable main area and disable it - * - * @returns {boolean} */ private blockOtherScrollBar() { let mainElements: any = document.getElementsByTagName('main'); @@ -286,9 +292,7 @@ export class ViewerComponent { } /** - * Check if in the document there are scrollable main area and renable it - * - * @returns {boolean} + * Check if in the document there are scrollable main area and re-enable it */ private unblockOtherScrollBar() { let mainElements: any = document.getElementsByTagName('main'); @@ -303,7 +307,7 @@ export class ViewerComponent { * * @returns {boolean} */ - private isParentElementHeaderBar() { + private isParentElementHeaderBar(): boolean { return !!this.closestElement(this.element.nativeElement, 'header'); } @@ -313,7 +317,7 @@ export class ViewerComponent { * @param {string} nodeName * @returns {HTMLElement} */ - private closestElement(element: HTMLElement, nodeName: string) { + private closestElement(element: HTMLElement, nodeName: string): HTMLElement { let parent = element.parentElement; if (parent) { if (parent.nodeName.toLowerCase() === nodeName) { @@ -340,8 +344,10 @@ export class ViewerComponent { /** * return true if the data about the node in the ecm are loaded + * + * @returns {boolean} */ - isLoaded() { + isLoaded(): boolean { return this.fileNodeId ? this.loaded : true; } }