inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

#68 fix page navigation

Browse Source
This commit is contained in:
Eugenio Romano
2016-06-02 17:04:41 +01:00
parent 956f8e9e81
commit 8552c44c8d
5 changed files with 104 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,6 +18,8 @@
export class PDFJSmock {
currentPageNumber: number = 1;
getFilenameFromUrl(url: string) {
return 'fake-name';
}

6
ng2-components/ng2-alfresco-viewer/src/viewer.component.css
View File

@@ -33,7 +33,7 @@
text-overflow: ellipsis;
}
.viewer-canvas-container {
.viewer-pdf-container {
background: #3E3E3E;
}
@@ -63,3 +63,7 @@
background-clip: content-box;
background-color: white;
}
:host .canvasWrapper {
box-shadow: 0px 0px 8px 2px #000;
}

8
ng2-components/ng2-alfresco-viewer/src/viewer.component.html
View File

@@ -15,7 +15,7 @@
<!-- Pagination toolbar start -->
<div id="viewer-toolbar-pagination">
<div id="viewer-previous-page-button-input" class="left" (click)="previousPage()">
<div id="viewer-previous-page-button" class="left" (click)="previousPage()">
<i class="icon material-icons">keyboard_arrow_left</i>
</div>
@@ -23,7 +23,7 @@
(keyup.enter)="inputPage(page.value)" class="left" type="text" pattern="-?[0-9]*(\.[0-9]+)?" value="{{displayPage}}">
<span id="viewer-total-pages" class="left">/ {{totalPages}}</span>
<div id="viewer-next-page-button-button-input" (click)="nextPage()" class="left">
<div id="viewer-next-page-button" (click)="nextPage()" class="left">
<i class="icon material-icons" >keyboard_arrow_right</i>
</div>
</div>
@@ -59,8 +59,8 @@
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-canvas-container" class="viewer-canvas-container">
<div id="viewer-the-canvas" style="border:1px solid black;"></div>
<div id="viewer-pdf-container" class="viewer-pdf-container">
<div id="viewer-viewerPdf" style="border:1px solid black;"></div>
</div>
<!-- End Pdf Canvas -->

103
ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts
View File

@@ -33,8 +33,8 @@ describe('Ng2-alfresco-viewer', () => {
fixture.detectChanges();
expect(element.querySelector('#viewer-the-canvas')).not.toBeNull();
expect(element.querySelector('#viewer-canvas-container')).not.toBeNull();
expect(element.querySelector('#viewer-viewerPdf')).not.toBeNull();
expect(element.querySelector('#viewer-pdf-container')).not.toBeNull();
});
}));
@@ -92,9 +92,8 @@ describe('Ng2-alfresco-viewer', () => {
component.urlFile = 'fake-url-file';
spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
component.ngOnChanges().then((resolve) => {
component.ngOnChanges().then(() => {
expect(element.querySelector('#viewer-total-pages').innerHTML).toEqual('/10');
resolve();
});
});
}));
@@ -105,14 +104,13 @@ 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';
spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
fixture.detectChanges();
component.ngOnChanges().then((resolve) => {
component.ngOnChanges().then(() => {
fixture.detectChanges();
expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-name');
resolve();
});
});
}));
@@ -131,22 +129,6 @@ describe('Ng2-alfresco-viewer', () => {
expect(element.querySelector('#viewer-close-button')).not.toBeNull();
});
}));
it('if showViewer is false the viewer should be hide', 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.showViewer = false;
fixture.detectChanges();
expect(element.querySelector('#viewer-the-canvas')).toBeNull();
expect(element.querySelector('#viewer-canvas-container')).toBeNull();
});
}));
});
describe('Attribute', () => {
@@ -179,17 +161,79 @@ 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-the-canvas')).toBeNull();
expect(element.querySelector('#viewer-canvas-container')).toBeNull();
expect(element.querySelector('#viewer-viewerPdf')).toBeNull();
expect(element.querySelector('#viewer-pdf-container')).toBeNull();
});
}));
});
describe('User interaction', () => {
it('Click on next page should move to the next 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.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(ViewerComponent)
.then((fixture) => {
let element = fixture.nativeElement;
let component = fixture.componentInstance;
spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
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(ViewerComponent)
.then((fixture) => {
let element = fixture.nativeElement;
let component = fixture.componentInstance;
spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
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');
});
});
}));
it('Click on close button should hide the viewer', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(ViewerComponent)
@@ -200,11 +244,10 @@ describe('Ng2-alfresco-viewer', () => {
component.urlFile = 'fake-url-file';
fixture.detectChanges();
expect(element.querySelector('#viewer-canvas-container')).not.toBeNull();
expect(element.querySelector('#viewer-pdf-container')).not.toBeNull();
element.querySelector('#viewer-close-button').click();
fixture.detectChanges();
expect(element.querySelector('#viewer-canvas-container')).toBeNull();
expect(element.querySelector('#viewer-pdf-container')).toBeNull();
});
}));
});

36
ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
View File

@@ -53,8 +53,6 @@ export class ViewerComponent {
};
ngOnChanges(changes) {
console.log(changes);
if (this.showViewer) {
if (!this.urlFile) {
throw new Error('Attribute urlFile is required');
@@ -65,12 +63,15 @@ export class ViewerComponent {
let urlFileTicket = this.addAlfrescoTicket(this.urlFile);
return this.getPDFJS().getDocument(urlFileTicket, null, null).then((pdfDocument) => {
this.currentPdfDocument = pdfDocument;
this.totalPages = pdfDocument.numPages;
this.page = 1;
this.displayPage = 1;
this.loadPage(this.currentPdfDocument);
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();
});
}
}
@@ -84,14 +85,15 @@ export class ViewerComponent {
return PDFJS;
}
loadPage(pdfDocument: any) {
initPDFViewer(pdfDocument: any) {
PDFJS.verbosity = 5;
let documentContainer: any = document.getElementById('viewer-canvas-container');
let documentContainer: any = document.getElementById('viewer-pdf-container');
let viewer: any = document.getElementById('viewer-viewerPdf');
this.pdfViewer = new PDFJS.PDFViewer({
container: documentContainer
container: documentContainer,
viewer: viewer
});
this.pdfViewer.setDocument(pdfDocument);
@@ -105,9 +107,9 @@ export class ViewerComponent {
this.page--;
this.displayPage = this.page;
let currentPage = this.pdfViewer.getPageView(this.page - 1);
this.pdfViewer.currentPageNumber = this.page;
if (currentPage.renderingState === this.renderingStates.FINISHED) {
if (this.pdfViewer.currentPage.renderingState === this.renderingStates.FINISHED) {
// remove loader
} else {
// add loader
@@ -122,7 +124,8 @@ export class ViewerComponent {
if (this.page < this.totalPages) {
this.page++;
this.displayPage = this.page;
this.pdfViewer.getPageView(this.page - 1);
this.pdfViewer.currentPageNumber = this.page;
}
}
@@ -136,7 +139,8 @@ export class ViewerComponent {
if (!isNaN(pageInput) && pageInput > 0 && pageInput <= this.totalPages) {
this.page = pageInput;
this.loadPage(this.currentPdfDocument);
this.pdfViewer.currentPageNumber = this.page;
} else {
this.displayPage = this.page;
}