#68 start separation between viewer and pdfViewer

ng2-components/ng2-alfresco-viewer/src/assets/PDFJS.mock.ts

@@ -18,10 +18,6 @@
 
 export class PDFJSmock {
 
-    getFilenameFromUrl(url: string) {
-        return 'fake-name';
-    }
-
     getDocument(url: string) {
         return new Promise((resolve) => {
             resolve({numPages: '10'});

ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css

@@ -0,0 +1,15 @@
+.viewer-pdf-container {
+    background: #3E3E3E;
+}
+
+:host .page {
+    margin: 10px auto !important;
+    overflow: visible;
+    border: 9px solid transparent;
+    background-clip: content-box;
+    background-color: white;
+}
+
+:host .canvasWrapper {
+    box-shadow: 0px 0px 8px 2px #000;
+}

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

@@ -0,0 +1,12 @@
+<!-- Start Pdf Canvas -->
+<div id="viewer-pdf-container" class="viewer-pdf-container" (keypress)=eventHandler()>
+    <div id="viewer-viewerPdf" style="border:1px solid black;">
+        <div id="loader">
+            <div>
+                <div id="loader-spin"  class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
+            </div>
+            <div id="loader-text">Loading...</div>
+        </div>
+    </div>
+</div>
+<!-- End Pdf Canvas -->

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

@@ -0,0 +1,122 @@
+/*!
+ * @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 { describe, expect, it, injectAsync, TestComponentBuilder, setBaseTestProviders } from 'angular2/testing';
+import { TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS } from 'angular2/platform/testing/browser';
+import { PdfViewerComponent } from './pdfViewer.component';
+import { PDFJSmock } from './assets/PDFJS.mock';
+import { PDFViewermock } from './assets/PDFViewer.mock';
+
+describe('PdfViewer', () => {
+    setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
+
+    describe('View', () => {
+        it('Canvas should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(PdfViewerComponent)
+                .then((fixture) => {
+                    let element = fixture.nativeElement;
+
+                    fixture.detectChanges();
+
+                    expect(element.querySelector('#viewer-viewerPdf')).not.toBeNull();
+                    expect(element.querySelector('#viewer-pdf-container')).not.toBeNull();
+                });
+        }));
+
+        it('Total number of pages should be showed', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(PdfViewerComponent)
+                .then((fixture) => {
+                    let element = fixture.nativeElement;
+                    let component = fixture.componentInstance;
+
+                    component.urlFile = 'fake-url-file';
+                    spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
+
+                    component.ngOnChanges().then(() => {
+                        expect(element.querySelector('#viewer-total-pages').innerHTML).toEqual('/10');
+                    });
+                });
+        }));
+    });
+
+    describe('User interaction', () => {
+        it('Click on next page should move to the next page', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(PdfViewerComponent)
+                .then((fixture) => {
+                    let element = fixture.nativeElement;
+                    let component = fixture.componentInstance;
+                    spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
+                    component.pdfViewer = new PDFViewermock();
+                    component.urlFile = 'fake-url-file';
+
+                    component.ngOnChanges().then(() => {
+                        fixture.detectChanges();
+                        expect(element.querySelector('#viewer-pagenumber-input').value).toBe('1');
+                        element.querySelector('#viewer-next-page-button').click();
+                        fixture.detectChanges();
+                        expect(element.querySelector('#viewer-pagenumber-input').value).toBe('2');
+                    });
+                });
+        }));
+
+        it('Click on previous page should move to the previous page', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(PdfViewerComponent)
+                .then((fixture) => {
+                    let element = fixture.nativeElement;
+                    let component = fixture.componentInstance;
+                    spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
+                    component.pdfViewer = new PDFViewermock();
+                    component.urlFile = 'fake-url-file';
+
+                    component.ngOnChanges().then(() => {
+                        fixture.detectChanges();
+                        expect(element.querySelector('#viewer-pagenumber-input').value).toBe('1');
+                        element.querySelector('#viewer-next-page-button').click();
+                        element.querySelector('#viewer-next-page-button').click();
+                        element.querySelector('#viewer-previous-page-button').click();
+                        fixture.detectChanges();
+                        expect(element.querySelector('#viewer-pagenumber-input').value).toBe('2');
+                    });
+                });
+        }));
+
+        /* tslint:disable:max-line-length */
+        it('Click on previous page should not move to the previous page if is page 1', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(PdfViewerComponent)
+                .then((fixture) => {
+                    let element = fixture.nativeElement;
+                    let component = fixture.componentInstance;
+                    spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
+                    component.pdfViewer = new PDFViewermock();
+                    component.urlFile = 'fake-url-file';
+
+                    component.ngOnChanges().then(() => {
+                        fixture.detectChanges();
+                        expect(element.querySelector('#viewer-pagenumber-input').value).toBe('1');
+                        element.querySelector('#viewer-previous-page-button').click();
+                        fixture.detectChanges();
+                        expect(element.querySelector('#viewer-pagenumber-input').value).toBe('1');
+                    });
+                });
+        }));
+    });
+});

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

@@ -0,0 +1,150 @@
+/*!
+ * @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 'angular2/core';
+
+declare let PDFJS: any;
+declare let __moduleName: string;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'pdf-viewer',
+    templateUrl: './pdfViewer.component.html',
+    styleUrls: ['./pdfViewer.component.css']
+})
+export class PdfViewerComponent {
+
+    @Input()
+    urlFile: string;
+
+    currentPdfDocument: any;
+    page: number;
+    displayPage: number;
+    totalPages: number;
+
+    pdfViewer: any;
+
+    renderingStates = {
+        FINISHED: 3 as number
+    };
+
+    ngOnChanges(changes) {
+        if (!this.urlFile) {
+            throw new Error('Attribute urlFile is required');
+        }
+
+        if (this.urlFile) {
+            let urlFileTicket = this.addAlfrescoTicket(this.urlFile);
+
+            return new Promise((resolve) => {
+                this.getPDFJS().getDocument(urlFileTicket, null, null).then((pdfDocument) => {
+                    this.currentPdfDocument = pdfDocument;
+                    this.totalPages = pdfDocument.numPages;
+                    this.page = 1;
+                    this.displayPage = 1;
+                    this.initPDFViewer(this.currentPdfDocument);
+                });
+                resolve();
+            });
+        }
+    }
+
+    /**
+     * Add Ticket to the file request
+     * @returns {string}
+     */
+    private addAlfrescoTicket(url: string) {
+        return url + '?alf_ticket=' + this.getAlfrescoTicket();
+    }
+
+    /**
+     * Get the token from the local storage
+     * @returns {string}
+     */
+    private getAlfrescoTicket() {
+        return localStorage.getItem('token');
+    }
+
+    /**
+     * return the PDFJS global object (exist to facilitate the mock of PDFJS in the test)
+     * @returns {PDFJS}
+     */
+    getPDFJS() {
+        return PDFJS;
+    }
+
+    initPDFViewer(pdfDocument: any) {
+        PDFJS.verbosity = 5;
+
+        let documentContainer: any = document.getElementById('viewer-pdf-container');
+        let viewer: any = document.getElementById('viewer-viewerPdf');
+
+        this.pdfViewer = new PDFJS.PDFViewer({
+            container: documentContainer,
+            viewer: viewer
+        });
+
+        this.pdfViewer.setDocument(pdfDocument);
+    }
+
+    /**
+     * load the previous page
+     */
+    previousPage() {
+        if (this.pdfViewer && this.page > 1) {
+            this.page--;
+            this.displayPage = this.page;
+
+            this.pdfViewer.currentPageNumber = this.page;
+
+            if (this.pdfViewer.currentPage.renderingState === this.renderingStates.FINISHED) {
+                // remove loader
+            } else {
+                // add loader
+            }
+        }
+    }
+
+    /**
+     * load the next page
+     */
+    nextPage() {
+        if (this.pdfViewer && this.page < this.totalPages) {
+            this.page++;
+            this.displayPage = this.page;
+
+            this.pdfViewer.currentPageNumber = this.page;
+        }
+    }
+
+    /**
+     * load the page in input
+     *
+     * @param {string} page - page to load
+     */
+    inputPage(page: string) {
+        let pageInput = parseInt(page, 10);
+
+        if (!isNaN(pageInput) && pageInput > 0 && pageInput <= this.totalPages) {
+            this.page = pageInput;
+
+            this.pdfViewer.currentPageNumber = this.page;
+        } else {
+            this.displayPage = this.page;
+        }
+    }
+}

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

@@ -46,10 +46,6 @@
     text-overflow: ellipsis;
 }
 
-.viewer-pdf-container {
-    background: #3E3E3E;
-}
-
 .viewer-shadow-transparent {
     background-color: #3E3E3E;
     position: fixed;
@@ -69,15 +65,9 @@
     z-index: 1000;
 }
 
-:host .page {
+.viewer-image {
-    margin: 10px auto !important;
+    width: 100%;
-    overflow: visible;
+    height: 100%;
-    border: 9px solid transparent;
-    background-clip: content-box;
-    background-color: white;
 }
 
-:host .canvasWrapper {
-    box-shadow: 0px 0px 8px 2px #000;
-}
 

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

@@ -3,7 +3,7 @@
         <div id="viewer-shadow-transparent" class="viewer-shadow-transparent"></div>
     </div>
 
-    <div id="viewer-main-container" class="viewer-main-container" [ngClass]="{'viewer-overlay-view': overlayMode }" (keypress)=eventHandler() >
+    <div id="viewer-main-container" class="viewer-main-container" [ngClass]="{'viewer-overlay-view': overlayMode }" >
 
         <!-- Start Layout -->
         <div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
@@ -58,47 +58,32 @@
                         <div
                             class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
 
-                            <!-- Start Pdf Canvas -->
+                            <div id="viewer-content-container">
-                            <div id="viewer-pdf-container" class="viewer-pdf-container">
+                            <!-- Start View Switch-->
-                                <div id="viewer-viewerPdf" style="border:1px solid black;">
+                                <div *ngIf="isPdf()"><pdf-viewer [urlFile]="urlFile" ></pdf-viewer></div>
-                                    <div id="loader">
+                                <div *ngIf="isImage()" ><img src="{{urlFile}}"  id="viewer-image" class="viewer-image"/></div>
-                                        <div>
+                                <div *ngIf="notSupportedExtension()"><div id="viewer-unsupported">Not Supported Download</div></div>
-                                            <div id="loader-spin"  class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
+                            <!-- End View Switch -->
-                                        </div>
-                                        <div id="loader-text">Loading...</div>
-                                    </div>
-                                </div>
                             </div>
-                            <!-- End Pdf Canvas -->
 
-                            <div id="viewer-previous-page-button" class="previous-page-button">
+                            <div id="viewer-previous-file-button" class="previous-page-button" ng-hide="true">
                                 <button
                                     class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
-                                    (click)="previousPage()">
+                                    (click)="previousFile()">
                                     <i class="icon material-icons">keyboard_arrow_left</i>
                                 </button>
                             </div>
 
-                            <div id="viewer-next-page-button" class="next-page-button">
+                            <div id="viewer-next-file-button" class="next-page-button"  ng-hide="true">
                                 <button
                                     class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
-                                    (click)="nextPage()">
+                                    (click)="nextFile()">
                                     <i class="icon material-icons">keyboard_arrow_right</i>
                                 </button>
                             </div>
 
                         </div>
                     </div>
-                    <footer class="mdl-mini-footer">
-                        <div class="mdl-mini-footer--left-section">
-                            <ul class="mdl-mini-footer--link-list">
-                                <li><a href="#">Footer link 1</a></li>
-                                <li><a href="#">Footer link 2</a></li>
-                                <li><a href="#">Footer link 3</a></li>
-                            </ul>
-                        </div>
-                    </footer>
-
                 </div>
             </main>
         </div>

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

@@ -15,30 +15,12 @@
  * limitations under the License.
  */
 
-import { describe, expect, it, injectAsync, TestComponentBuilder, setBaseTestProviders } from 'angular2/testing';
+import { describe, expect, it, injectAsync, TestComponentBuilder } from 'angular2/testing';
-import { TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS } from 'angular2/platform/testing/browser';
 import { ViewerComponent } from './viewer.component';
-import { PDFJSmock } from './assets/PDFJS.mock';
-import { PDFViewermock } from './assets/PDFViewer.mock';
 
-describe('Ng2-alfresco-viewer', () => {
+describe('ViewerComponent', () => {
-    setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
 
     describe('View', () => {
-
-        it('Canvas should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-            return tcb
-                .createAsync(ViewerComponent)
-                .then((fixture) => {
-                    let element = fixture.nativeElement;
-
-                    fixture.detectChanges();
-
-                    expect(element.querySelector('#viewer-viewerPdf')).not.toBeNull();
-                    expect(element.querySelector('#viewer-pdf-container')).not.toBeNull();
-                });
-        }));
-
         it('shadow overlay should be present if overlay is true', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
             return tcb
                 .createAsync(ViewerComponent)
@@ -83,35 +65,17 @@ describe('Ng2-alfresco-viewer', () => {
                 });
         }));
 
-        it('Total number of pages should be showed', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-            return tcb
-                .createAsync(ViewerComponent)
-                .then((fixture) => {
-                    let element = fixture.nativeElement;
-                    let component = fixture.componentInstance;
-
-                    component.urlFile = 'fake-url-file';
-                    spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
-
-                    component.ngOnChanges().then(() => {
-                        expect(element.querySelector('#viewer-total-pages').innerHTML).toEqual('/10');
-                    });
-                });
-        }));
-
         it('Name File should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
             return tcb
                 .createAsync(ViewerComponent)
                 .then((fixture) => {
                     let element = fixture.nativeElement;
                     let component = fixture.componentInstance;
-
+                    component.urlFile = 'http://localhost:9876/fake-url-file.pdf';
-                    component.urlFile = 'fake-url-file';
-                    spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
 
                     component.ngOnChanges().then(() => {
                         fixture.detectChanges();
-                        expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-name');
+                        expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-url-file.pdf');
                     });
                 });
         }));
@@ -122,7 +86,6 @@ describe('Ng2-alfresco-viewer', () => {
                 .then((fixture) => {
                     let element = fixture.nativeElement;
                     let component = fixture.componentInstance;
-                    spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
                     component.urlFile = 'fake-url-file';
 
                     fixture.detectChanges();
@@ -130,6 +93,21 @@ describe('Ng2-alfresco-viewer', () => {
                     expect(element.querySelector('#viewer-close-button')).not.toBeNull();
                 });
         }));
+
+        it('Click on close button should hide the viewer', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(ViewerComponent)
+                .then((fixture) => {
+                    let element = fixture.nativeElement;
+                    let component = fixture.componentInstance;
+                    component.urlFile = 'fake-url-file';
+
+                    fixture.detectChanges();
+                    element.querySelector('#viewer-close-button').click();
+                    fixture.detectChanges();
+                    expect(element.querySelector('#viewer-main-container')).toBeNull();
+                });
+        }));
     });
 
     describe('Attribute', () => {
@@ -162,96 +140,61 @@ describe('Ng2-alfresco-viewer', () => {
                 .then((fixture) => {
                     let component = fixture.componentInstance;
                     let element = fixture.nativeElement;
-                    spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
-
                     component.urlFile = 'fake-url-file';
                     component.showViewer = false;
 
                     fixture.detectChanges();
-                    expect(element.querySelector('#viewer-viewerPdf')).toBeNull();
+                    expect(element.querySelector('#viewer-main-container')).toBeNull();
-                    expect(element.querySelector('#viewer-pdf-container')).toBeNull();
                 });
         }));
     });
 
-    describe('User interaction', () => {
+    /* tslint:disable:max-line-length */
-        it('Click on next page should move to the next page', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+    describe('Extension Type Test', () => {
+        it('if extension file is a pdf the pdf viewer should be loaded', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
             return tcb
                 .createAsync(ViewerComponent)
                 .then((fixture) => {
-                    let element = fixture.nativeElement;
                     let component = fixture.componentInstance;
-                    spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
+                    let element = fixture.nativeElement;
-                    component.pdfViewer = new PDFViewermock();
+                    component.urlFile = 'fake-url-file.pdf';
-                    component.urlFile = 'fake-url-file';
 
                     component.ngOnChanges().then(() => {
                         fixture.detectChanges();
-                        expect(element.querySelector('#viewer-pagenumber-input').value).toBe('1');
+                        expect(element.querySelector('pdf-viewer')).not.toBeNull();
-                        element.querySelector('#viewer-next-page-button').click();
-                        fixture.detectChanges();
-                        expect(element.querySelector('#viewer-pagenumber-input').value).toBe('2');
-                    });
-                });
-        }));
-
-        it('Click on previous page should move to the previous page', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-            return tcb
-                .createAsync(ViewerComponent)
-                .then((fixture) => {
-                    let element = fixture.nativeElement;
-                    let component = fixture.componentInstance;
-                    spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
-                    component.pdfViewer = new PDFViewermock();
-                    component.urlFile = 'fake-url-file';
-
-                    component.ngOnChanges().then(() => {
-                        fixture.detectChanges();
-                        expect(element.querySelector('#viewer-pagenumber-input').value).toBe('1');
-                        element.querySelector('#viewer-next-page-button').click();
-                        element.querySelector('#viewer-next-page-button').click();
-                        element.querySelector('#viewer-previous-page-button').click();
-                        fixture.detectChanges();
-                        expect(element.querySelector('#viewer-pagenumber-input').value).toBe('2');
                     });
                 });
         }));
 
         /* tslint:disable:max-line-length */
-        it('Click on previous page should not move to the previous page if is page 1', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+        it('if extension file is a image the img viewer should be loaded', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
             return tcb
                 .createAsync(ViewerComponent)
                 .then((fixture) => {
-                    let element = fixture.nativeElement;
                     let component = fixture.componentInstance;
-                    spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
+                    let element = fixture.nativeElement;
-                    component.pdfViewer = new PDFViewermock();
+                    component.urlFile = 'fake-url-file.png';
-                    component.urlFile = 'fake-url-file';
 
                     component.ngOnChanges().then(() => {
                         fixture.detectChanges();
-                        expect(element.querySelector('#viewer-pagenumber-input').value).toBe('1');
+                        expect(element.querySelector('#viewer-image')).not.toBeNull();
-                        element.querySelector('#viewer-previous-page-button').click();
-                        fixture.detectChanges();
-                        expect(element.querySelector('#viewer-pagenumber-input').value).toBe('1');
                     });
                 });
         }));
 
-        it('Click on close button should hide the viewer', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+        /* tslint:disable:max-line-length */
+        it('if extension file is a not supported the not supported div should be loaded', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
             return tcb
                 .createAsync(ViewerComponent)
                 .then((fixture) => {
-                    let element = fixture.nativeElement;
                     let component = fixture.componentInstance;
-                    spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
+                    let element = fixture.nativeElement;
-                    component.urlFile = 'fake-url-file';
+                    component.urlFile = 'fake-url-file.unsupported';
 
-                    fixture.detectChanges();
+                    component.ngOnChanges().then(() => {
-                    expect(element.querySelector('#viewer-pdf-container')).not.toBeNull();
+                        fixture.detectChanges();
-                    element.querySelector('#viewer-close-button').click();
+                        expect(element.querySelector('#viewer-unsupported')).not.toBeNull();
-                    fixture.detectChanges();
+                    });
-                    expect(element.querySelector('#viewer-pdf-container')).toBeNull();
                 });
         }));
     });

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

@@ -17,13 +17,14 @@
 
 import { Component, Input, Output, HostListener } from 'angular2/core';
 import { EventEmitter } from 'angular2/src/facade/async';
+import { PdfViewerComponent } from './pdfViewer.component';
 
-declare let PDFJS: any;
 declare let __moduleName: string;
 
 @Component({
     moduleId: __moduleName,
     selector: 'alfresco-viewer',
+    directives: [PdfViewerComponent],
     templateUrl: './viewer.component.html',
     styleUrls: ['./viewer.component.css']
 })
@@ -37,6 +38,7 @@ export class ViewerComponent {
 
     @Input()
     showViewer: boolean = true;
+
     @Output()
     showViewerChange: EventEmitter<boolean> = new EventEmitter<boolean>();
 
@@ -46,124 +48,22 @@ export class ViewerComponent {
     displayPage: number;
     totalPages: number;
 
-    pdfViewer: any;
+    extension: string;
-
-    renderingStates = {
-        FINISHED: 3 as number
-    };
 
     ngOnChanges(changes) {
         if (this.showViewer) {
             if (!this.urlFile) {
                 throw new Error('Attribute urlFile is required');
             }
-
+            return new Promise((resolve) => {
-            if (this.urlFile) {
+                if (this.urlFile) {
-                this.nameFile = this.getPDFJS().getFilenameFromUrl(this.urlFile);
+                    this.nameFile = this.getFilenameFromUrl(this.urlFile);
-
+                    this.extension = this.getFileExtension(this.nameFile);
-                let urlFileTicket = this.addAlfrescoTicket(this.urlFile);
+                }
-
+                resolve();
-                return new Promise((resolve) => {
+            });
-                    this.getPDFJS().getDocument(urlFileTicket, null, null).then((pdfDocument) => {
-                        this.currentPdfDocument = pdfDocument;
-                        this.totalPages = pdfDocument.numPages;
-                        this.page = 1;
-                        this.displayPage = 1;
-                        this.initPDFViewer(this.currentPdfDocument);
-                    });
-                    resolve();
-                });
-            }
         }
-    }
 
-    /**
-     * return the PDFJS global object (exist to facilitate the mock of PDFJS in the test)
-     * @returns {PDFJS}
-     */
-    getPDFJS() {
-        return PDFJS;
-    }
-
-    initPDFViewer(pdfDocument: any) {
-        PDFJS.verbosity = 5;
-
-        let documentContainer: any = document.getElementById('viewer-pdf-container');
-        let viewer: any = document.getElementById('viewer-viewerPdf');
-
-        this.pdfViewer = new PDFJS.PDFViewer({
-            container: documentContainer,
-            viewer: viewer
-        });
-
-        this.pdfViewer.setDocument(pdfDocument);
-    }
-
-    /**
-     * load the previous page
-     */
-    previousPage() {
-        if (this.pdfViewer && this.page > 1) {
-            this.page--;
-            this.displayPage = this.page;
-
-            this.pdfViewer.currentPageNumber = this.page;
-
-            if (this.pdfViewer.currentPage.renderingState === this.renderingStates.FINISHED) {
-                // remove loader
-            } else {
-                // add loader
-            }
-        }
-    }
-
-    /**
-     * load the next page
-     */
-    nextPage() {
-        if (this.pdfViewer && this.page < this.totalPages) {
-            this.page++;
-            this.displayPage = this.page;
-
-            this.pdfViewer.currentPageNumber = this.page;
-        }
-    }
-
-    /**
-     * load the page in input
-     *
-     * @param {string} page - page to load
-     */
-    inputPage(page: string) {
-        let pageInput = parseInt(page, 10);
-
-        if (!isNaN(pageInput) && pageInput > 0 && pageInput <= this.totalPages) {
-            this.page = pageInput;
-
-            this.pdfViewer.currentPageNumber = this.page;
-        } else {
-            this.displayPage = this.page;
-        }
-    }
-
-    @HostListener('document:keydown', ['$event'])
-    handleKeyboardEvent(event: KeyboardEvent) {
-        let key = event.keyCode;
-        if (key === 27) { //esc
-            this.close();
-        } else if (key === 39) { //right arrow
-            this.nextPage();
-        } else if (key === 37) {//left arrow
-            this.previousPage();
-        }
-    }
-
-    /**
-     * Add Ticket to the file request
-     * @returns {string}
-     */
-    private addAlfrescoTicket(url: string) {
-        return url + '?alf_ticket=' + this.getAlfrescoTicket();
     }
 
     /**
@@ -175,10 +75,62 @@ export class ViewerComponent {
     }
 
     /**
-     * Get the token from the local storage
+     * get File name from url
-     * @returns {string}
      */
-    private getAlfrescoTicket(): string {
+    getFilenameFromUrl(url: string) {
-        return localStorage.getItem('token');
+        let anchor = url.indexOf('#');
+        let query = url.indexOf('?');
+        let end = Math.min(
+            anchor > 0 ? anchor : url.length,
+            query > 0 ? query : url.length);
+        return url.substring(url.lastIndexOf('/', end) + 1, end);
+    }
+
+    /**
+     * Get the token from the local storage
+     *
+     * @param {string} fileName - file name
+     * @returns {string} file name extension
+     */
+    private getFileExtension(fileName: string) {
+        return fileName.split('.').pop().toLowerCase();
+    }
+
+    /**
+     * check if the current file is a suppoerted image extension
+     */
+    private isImage() {
+        return this.extension === 'png' || this.extension === 'jpg' ||
+            this.extension === 'jpeg' || this.extension === 'gif' || this.extension === 'bmp';
+    }
+
+    /**
+     * check if the current file is a suppoerted pdf extension
+     */
+    private isPdf() {
+        return this.extension === 'pdf';
+    }
+
+    /**
+     * check if the current file is not a supported extension
+     */
+    private notSupportedExtension() {
+        return !this.isImage() && !this.isPdf();
+    }
+
+    /**
+     * Litener Keyboard Event
+     * @param {KeyboardEvent} event
+     */
+    @HostListener('document:keydown', ['$event'])
+    handleKeyboardEvent(event: KeyboardEvent) {
+        let key = event.keyCode;
+        if (key === 27) { //esc
+            this.close();
+        } else if (key === 39) { //right arrow
+            //this.nextPage();
+        } else if (key === 37) {//left arrow
+            //this.previousPage();
+        }
     }
 }