mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
#68 start separation between viewer and pdfViewer
This commit is contained in:
Eugenio Romano
parent
499cc7b124
commit
1b2ff612ab
@ -18,10 +18,6 @@
|
||||
|
||||
export class PDFJSmock {
|
||||
|
||||
getFilenameFromUrl(url: string) {
|
||||
return 'fake-name';
|
||||
}
|
||||
|
||||
getDocument(url: string) {
|
||||
return new Promise((resolve) => {
|
||||
resolve({numPages: '10'});
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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 -->
|
||||
@ -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');
|
||||
});
|
||||
});
|
||||
}));
|
||||
});
|
||||
});
|
||||
150
ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts
Normal file
150
ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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-pdf-container" class="viewer-pdf-container">
|
||||
<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 id="viewer-content-container">
|
||||
<!-- Start View Switch-->
|
||||
<div *ngIf="isPdf()"><pdf-viewer [urlFile]="urlFile" ></pdf-viewer></div>
|
||||
<div *ngIf="isImage()" ><img src="{{urlFile}}" id="viewer-image" class="viewer-image"/></div>
|
||||
<div *ngIf="notSupportedExtension()"><div id="viewer-unsupported">Not Supported Download</div></div>
|
||||
<!-- End View Switch -->
|
||||
</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>
|
||||
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
@ -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;
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user