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

Page Number doesn't change when user scroll the document #319

Browse Source
This commit is contained in:
Eugenio Romano
2016-07-04 21:13:05 +01:00
parent 3b0b679cca
commit 4641937a13
4 changed files with 100 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
ng2-components/ng2-alfresco-viewer/src/assets/PDFViewer.mock.ts
View File

@@ -28,15 +28,33 @@ export class PDFViewermock {
[{
width: 793,
scale: 1,
update: this.update
update: this.update,
div: {
offsetTop: 400
},
viewport: {
height: 400
}
}, {
width: 793,
scale: 1,
update: this.update
update: this.update,
div: {
offsetTop: 800
},
viewport: {
height: 400
}
}, {
width: 793,
scale: 1,
update: this.update
update: this.update,
div: {
offsetTop: 1200
},
viewport: {
height: 400
}
}];
_currentPageNumber: number = 0;

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

@@ -1,6 +1,6 @@
<!-- Start Pdf Canvas -->
<div id="viewer-pdf-container" class="viewer-pdf-container" (keypress)=eventHandler() (window:resize)="onResize($event)">
<div id="viewer-viewerPdf" class="pdfViewer" >
<div id="viewer-viewerPdf" class="pdfViewer">
<div id="loader-container" class="loader-container">
<div class="loader-item">
<div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>

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

@@ -346,8 +346,7 @@ describe('PdfViewer', () => {
}));
});
describe('Rezize interaction', () => {
describe('Resize interaction', () => {
it('resize event should trigger setScaleUpdatePages', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(PdfViewerComponent)
@@ -370,4 +369,33 @@ describe('PdfViewer', () => {
}));
});
describe('scroll interaction', () => {
it('scroll page should return the current page', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(PdfViewerComponent)
.then((fixture) => {
let component = fixture.componentInstance;
spyOn(component, 'getPDFJS').and.returnValue(new PDFJSmock());
spyOn(component, 'initPDFViewer').and.callFake(() => {
component.pdfViewer = new PDFViewermock();
});
component.urlFile = 'fake-url-file';
component.ngOnChanges().then(() => {
fixture.detectChanges();
expect(component.displayPage).toBe(1);
component.inputPage('4');
fixture.detectChanges();
expect(component.displayPage).toBe(4);
component.watchScroll({scrollTop: 10000});
expect(component.displayPage).toBe(4);
}).catch((error) => {
expect(error).toBeUndefined();
});
});
}));
});
});

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

@@ -91,6 +91,10 @@ export class PdfViewerComponent {
let documentContainer = document.getElementById('viewer-pdf-container');
let viewer: any = document.getElementById('viewer-viewerPdf');
window.document.addEventListener('scroll', (event) => {
this.watchScroll(event.target);
}, true);
this.pdfViewer = new PDFJS.PDFViewer({
container: documentContainer,
viewer: viewer
@@ -284,6 +288,50 @@ export class PdfViewerComponent {
}
}
/**
* Litener Scroll Event
*
* @param {any} target
*/
watchScroll(target) {
let outputPage = this.getVisibleElement(target);
if (outputPage) {
this.page = outputPage.id;
this.displayPage = this.page;
}
}
/**
* find out what elements are visible within a scroll pane
*
* @param {any} target
*
* @returns {Object} page
*/
getVisibleElement(target) {
return this.pdfViewer._pages.find((page) => {
return this.isOnScreen(page, target);
});
}
/**
* check if a page is visible
*
* @param {any} page
* @param {any} target
*
* @returns {boolean}
*/
isOnScreen(page: any, target: any) {
let viewport: any = {};
viewport.top = target.scrollTop;
viewport.bottom = viewport.top + target.scrollHeight;
let bounds: any = {};
bounds.top = page.div.offsetTop;
bounds.bottom = bounds.top + page.viewport.height;
return ((bounds.top <= viewport.bottom) && (bounds.bottom >= viewport.top));
};
/**
* Litener Keyboard Event
* @param {KeyboardEvent} event