diff --git a/ng2-components/ng2-alfresco-viewer/src/assets/PDFViewer.mock.ts b/ng2-components/ng2-alfresco-viewer/src/assets/PDFViewer.mock.ts index afeed2b2a6..d2c597e7aa 100644 --- a/ng2-components/ng2-alfresco-viewer/src/assets/PDFViewer.mock.ts +++ b/ng2-components/ng2-alfresco-viewer/src/assets/PDFViewer.mock.ts @@ -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; diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html index 8d2007d9e1..eba85c7581 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.html @@ -1,6 +1,6 @@
-
+
diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts index 6939c87ead..4c8f0d8f8c 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.spec.ts @@ -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(); + }); + }); + })); + }); + }); diff --git a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts index b6a14f8d95..238b679ae4 100644 --- a/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.ts @@ -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