[ADF-613] Add plain text viewer (#1873)

* add plain text viewer

* different devices optimizations

* returns types

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 {
+    getDocumentThumbnailUrl(nodeId: any): string {
-        return this.apiService.getInstance().content.getDocumentThumbnailUrl(document.entry.id);
+
+        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 {
+    getContentUrl(nodeId: any): string {
-        return this.apiService.getInstance().content.getContentUrl(document.entry.id);
+
+        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<any>} URL address.
+     */
+    getNodeContent(nodeId: string): Observable<any> {
+        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');
     }
 }

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
 

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,

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');

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');

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('should resize event trigger setScaleUpdatePages', (done) => {
-        it('resize event should 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('should scroll page return the current page', (done) => {
-        it('scroll page should return the current page', (done) => {
             component.ngOnChanges(null).then(() => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {

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;
+}

ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.html

@@ -0,0 +1,6 @@
+<section class="section--center mdl-grid mdl-grid--no-spacing">
+    <pre id="adf-viewer-text-container"class="adf-txt-viewer-margin mdl-card mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--2-col-phone mdl-shadow--2dp">
+        {{content}}
+    </pre>
+</section>
+

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<TxtViewerComponent>;
+    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');
+        });
+    });
+});

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;
+        });
+    }
+
+}

ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html

@@ -51,6 +51,9 @@
                             <media-player [urlFile]="urlFileContent" [mimeType]="mimeType" [blobFile]="blobFile"
                                           [nameFile]="displayName"></media-player>
                         </div>
+                        <div class="center-element" *ngIf="isText()">
+                            <txt-viewer [nodeId]="fileNodeId" ></txt-viewer>
+                        </div>
 
                          <span *ngFor="let extensionTemplate of extensionTemplates">
                             <ng-template

ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts

@@ -17,6 +17,7 @@
 
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { PdfViewerComponent } from './pdfViewer.component';
+import { TxtViewerComponent } from './txtViewer.component';
 import { NotSupportedFormat } from './notSupportedFormat.component';
 import { MediaPlayerComponent } from './mediaPlayer.component';
 import { ImgViewerComponent } from './imgViewer.component';
@@ -48,6 +49,7 @@ describe('Test ng2-alfresco-viewer ViewerComponent', () => {
             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');

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() {
+    supportedExtension(): boolean {
-        return this.isImage() || this.isPdf() || this.isMedia() || this.isExternalSupportedExtension();
+        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
+     * Check if in the document there are scrollable main area and re-enable it
-     *
-     * @returns {boolean}
      */
     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;
     }
 }