From 1b2ff612ab367ba1d8fff838c4fbdb88feee9e52 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Fri, 3 Jun 2016 17:19:40 +0100 Subject: [PATCH] #68 start separation between viewer and pdfViewer --- .../src/assets/PDFJS.mock.ts | 4 - .../src/pdfViewer.component.css | 15 ++ .../src/pdfViewer.component.html | 12 ++ .../src/pdfViewer.component.spec.ts | 122 ++++++++++++ .../src/pdfViewer.component.ts | 150 +++++++++++++++ .../src/viewer.component.css | 16 +- .../src/viewer.component.html | 37 ++-- .../src/viewer.component.spec.ts | 133 ++++--------- .../src/viewer.component.ts | 182 +++++++----------- 9 files changed, 418 insertions(+), 253 deletions(-) create mode 100644 ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css create mode 100644 ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html create mode 100644 ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts create mode 100644 ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts diff --git a/ng2-components/ng2-alfresco-viewer/src/assets/PDFJS.mock.ts b/ng2-components/ng2-alfresco-viewer/src/assets/PDFJS.mock.ts index 573cbc9571..dd9f6871bb 100644 --- a/ng2-components/ng2-alfresco-viewer/src/assets/PDFJS.mock.ts +++ b/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'}); diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css new file mode 100644 index 0000000000..5d0b4b8a4e --- /dev/null +++ b/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; +} diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html new file mode 100644 index 0000000000..2d2ab2b450 --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html @@ -0,0 +1,12 @@ + +
+
+
+
+
+
+
Loading...
+
+
+
+ diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts new file mode 100644 index 0000000000..ac67617435 --- /dev/null +++ b/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'); + }); + }); + })); + }); +}); diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts new file mode 100644 index 0000000000..3d15b4561e --- /dev/null +++ b/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; + } + } +} diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css index 0a7ead1210..4bc1db7da3 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css +++ b/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 { - margin: 10px auto !important; - overflow: visible; - border: 9px solid transparent; - background-clip: content-box; - background-color: white; +.viewer-image { + width: 100%; + height: 100%; } -:host .canvasWrapper { - box-shadow: 0px 0px 8px 2px #000; -} diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html index e3792971a9..75a158c132 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html @@ -3,7 +3,7 @@
-
+
@@ -58,47 +58,32 @@
- -
-
-
-
-
-
-
Loading...
-
-
+
+ +
+
+
Not Supported Download
+
- -
+
-
+
- -
diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts index 9471a10592..1b66254a86 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts +++ b/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 { TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS } from 'angular2/platform/testing/browser'; +import { describe, expect, it, injectAsync, TestComponentBuilder } from 'angular2/testing'; import { ViewerComponent } from './viewer.component'; -import { PDFJSmock } from './assets/PDFJS.mock'; -import { PDFViewermock } from './assets/PDFViewer.mock'; -describe('Ng2-alfresco-viewer', () => { - setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS); +describe('ViewerComponent', () => { 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 = 'fake-url-file'; - spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock()); + component.urlFile = 'http://localhost:9876/fake-url-file.pdf'; 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-pdf-container')).toBeNull(); + expect(element.querySelector('#viewer-main-container')).toBeNull(); }); })); }); - describe('User interaction', () => { - it('Click on next page should move to the next page', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { + /* tslint:disable:max-line-length */ + 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()); - component.pdfViewer = new PDFViewermock(); - component.urlFile = 'fake-url-file'; + let element = fixture.nativeElement; + component.urlFile = 'fake-url-file.pdf'; 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(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'); + expect(element.querySelector('pdf-viewer')).not.toBeNull(); }); }); })); /* 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()); - component.pdfViewer = new PDFViewermock(); - component.urlFile = 'fake-url-file'; + let element = fixture.nativeElement; + component.urlFile = 'fake-url-file.png'; 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'); + expect(element.querySelector('#viewer-image')).not.toBeNull(); }); }); })); - 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()); - component.urlFile = 'fake-url-file'; + let element = fixture.nativeElement; + component.urlFile = 'fake-url-file.unsupported'; - fixture.detectChanges(); - expect(element.querySelector('#viewer-pdf-container')).not.toBeNull(); - element.querySelector('#viewer-close-button').click(); - fixture.detectChanges(); - expect(element.querySelector('#viewer-pdf-container')).toBeNull(); + component.ngOnChanges().then(() => { + fixture.detectChanges(); + expect(element.querySelector('#viewer-unsupported')).not.toBeNull(); + }); }); })); }); diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts index ef0cf4de1b..1bc3ea4c01 100644 --- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts +++ b/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 = new EventEmitter(); @@ -46,124 +48,22 @@ export class ViewerComponent { displayPage: number; totalPages: number; - pdfViewer: any; - - renderingStates = { - FINISHED: 3 as number - }; + extension: string; ngOnChanges(changes) { if (this.showViewer) { if (!this.urlFile) { throw new Error('Attribute urlFile is required'); } - - if (this.urlFile) { - this.nameFile = this.getPDFJS().getFilenameFromUrl(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(); - }); - } + return new Promise((resolve) => { + if (this.urlFile) { + this.nameFile = this.getFilenameFromUrl(this.urlFile); + this.extension = this.getFileExtension(this.nameFile); + } + 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 - * @returns {string} + * get File name from url */ - private getAlfrescoTicket(): string { - return localStorage.getItem('token'); + getFilenameFromUrl(url: string) { + 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(); + } } }