New: Allow scrolling for multi-page image files

src/lib/viewers/image/MultiImageViewer.js

@@ -29,6 +29,9 @@ class MultiImageViewer extends ImageBaseViewer {
 
         this.singleImageEls = [this.imageEl.appendChild(document.createElement('img'))];
         this.loadTimeout = 60000;
+
+        // Defaults the current page number to 1
+        this.currentPageNumber = 1;
     }
 
     /**
@@ -166,6 +169,9 @@ class MultiImageViewer extends ImageBaseViewer {
 
         // Give the browser some time to render before updating pannability
         setTimeout(this.updatePannability, ZOOM_UPDATE_PAN_DELAY);
+
+        // Set current page to previously opened page or first page
+        this.setPage(this.currentPageNumber);
     }
 
     /**
@@ -222,6 +228,21 @@ class MultiImageViewer extends ImageBaseViewer {
 
         this.singleImageEls[index].removeEventListener('error', this.errorHandler);
     }
+
+    /**
+     * Go to specified page
+     *
+     * @param {number} pageNum - Page to navigate to
+     * @return {void}
+     */
+    setPage(pageNum) {
+        if (pageNum <= 0 || pageNum > this.singleImageEls.length) {
+            return;
+        }
+
+        this.currentPageNumber = pageNum;
+        this.singleImageEls[pageNum].scrollIntoView();
+    }
 }
 
 export default MultiImageViewer;

src/lib/viewers/image/__tests__/MultiImageViewer-test.js

@@ -46,6 +46,15 @@ describe('lib/viewers/image/MultiImageViewer', () => {
             }
         };
 
+        stubs.singleImageEl = {
+            src: undefined,
+            setAttribute: sandbox.stub(),
+            classList: {
+                add: sandbox.stub()
+            },
+            scrollIntoView: sandbox.stub()
+        };
+
         multiImage = new MultiImageViewer(options);
 
         Object.defineProperty(BaseViewer.prototype, 'setup', { value: sandbox.stub() });
@@ -138,13 +147,6 @@ describe('lib/viewers/image/MultiImageViewer', () => {
         beforeEach(() => {
             multiImage.setup();
             stubs.bindImageListeners = sandbox.stub(multiImage, 'bindImageListeners');
-            stubs.singleImageEl = {
-                src: undefined,
-                setAttribute: sandbox.stub(),
-                classList: {
-                    add: sandbox.stub()
-                }
-            };
         });
 
         it('should set the single image el and error handler if it is not the first image', () => {
@@ -252,6 +254,7 @@ describe('lib/viewers/image/MultiImageViewer', () => {
         beforeEach(() => {
             stubs.zoomEmit = sandbox.stub(multiImage, 'emit');
             stubs.setScale = sandbox.stub(multiImage, 'setScale');
+            stubs.scroll = sandbox.stub(multiImage, 'setPage');
             stubs.updatePannability = sandbox.stub(multiImage, 'updatePannability');
             multiImage.setup();
         });
@@ -356,4 +359,23 @@ describe('lib/viewers/image/MultiImageViewer', () => {
             expect(multiImage.emit).to.be.calledWith('scale', { scale: 0.5 });
         });
     });
+
+    describe('setPage()', () => {
+        it('should scroll to the current page', () => {
+            multiImage.singleImageEls = {
+                1: stubs.singleImageEl,
+                2: stubs.singleImageEl,
+                3: stubs.singleImageEl
+            };
+            sandbox.stub(multiImage, 'emit');
+
+            multiImage.setPage(2);
+            expect(multiImage.currentPageNumber).equals(2);
+        });
+
+        it('should not do anything if setting an invalid page', () => {
+            multiImage.setPage(-1);
+            expect(multiImage.currentPageNumber).to.be.undefined;
+        });
+    });
 });