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