Fix: resize preload in document viewer (#850)

box · Oct 16, 2018 · d29afa6 · d29afa6
1 parent 8fdd344
commit d29afa6
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 3 deletions.
diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
@@ -654,6 +654,9 @@ class DocBaseViewer extends BaseViewer {
      */
     resize() {
         if (!this.pdfViewer || !this.pdfViewer.pageViewsReady) {
+            if (this.preloader) {
+                this.preloader.resize();
+            }
             return;
         }
 

diff --git a/src/lib/viewers/doc/DocPreloader.js b/src/lib/viewers/doc/DocPreloader.js
@@ -38,6 +38,9 @@ class DocPreloader extends EventEmitter {
     /** @property {HTMLElement} - Preload overlay element */
     overlayEl;
 
+    /** @property {Object} - The EXIF data for the PDF */
+    pdfData;
+
     /** @property {HTMLElement} - Preload container element */
     preloadEl;
 
@@ -230,9 +233,9 @@ class DocPreloader extends EventEmitter {
         // Calculate pdf width, height, and number of pages from EXIF if possible
         return this.readEXIF(this.imageEl)
             .then((pdfData) => {
-                const { pdfWidth, pdfHeight, numPages } = pdfData;
-                const { scaledWidth, scaledHeight } = this.getScaledDimensions(pdfWidth, pdfHeight);
-                this.scaleAndShowPreload(scaledWidth, scaledHeight, Math.min(numPages, NUM_PAGES_MAX));
+                this.pdfData = pdfData;
+                const { scaledWidth, scaledHeight } = this.getScaledWidthAndHeight(pdfData);
+                this.scaleAndShowPreload(scaledWidth, scaledHeight, Math.min(pdfData.numPages, NUM_PAGES_MAX));
 
                 // Otherwise, use the preload image's natural dimensions as a base to scale from
             })
@@ -243,6 +246,40 @@ class DocPreloader extends EventEmitter {
             });
     };
 
+    /**
+     * Gets the scaled width and height from the EXIF data
+     *
+     * @param {Object} pdfData - the EXIF data from the image
+     * @return {Object} the scaled width and height the
+     */
+    getScaledWidthAndHeight(pdfData) {
+        const { pdfWidth, pdfHeight } = pdfData;
+        const { scaledWidth, scaledHeight } = this.getScaledDimensions(pdfWidth, pdfHeight);
+
+        return {
+            scaledWidth,
+            scaledHeight
+        };
+    }
+
+    /**
+     * Resizes the preload and placeholder elements
+     *
+     * @return {void}
+     */
+    resize() {
+        if (!this.pdfData || !this.preloadEl) {
+            return;
+        }
+
+        const { scaledWidth, scaledHeight } = this.getScaledWidthAndHeight(this.pdfData);
+        // Scale preload and placeholder elements
+        const preloadEls = this.preloadEl.getElementsByClassName(CLASS_BOX_PREVIEW_PRELOAD_CONTENT);
+        for (let i = 0; i < preloadEls.length; i++) {
+            setDimensions(preloadEls[i], scaledWidth, scaledHeight);
+        }
+    }
+
     /**
      * Returns scaled PDF dimensions using same algorithm as pdf.js up to a maximum of 1.25x zoom.
      *

diff --git a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js
@@ -1028,6 +1028,16 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
             expect(BaseViewer.prototype.resize).to.not.be.called;
         });
 
+        it('should resize the preload', () => {
+            docBase.pdfViewer = null;
+            docBase.preloader = {
+                resize: sandbox.stub()
+            };
+            docBase.resize();
+            expect(docBase.preloader.resize).to.be.called;
+            expect(BaseViewer.prototype.resize).to.not.be.called;
+        });
+
         it('should update the pdfViewer and reset the page', () => {
             docBase.resize();
             expect(docBase.pdfViewer.update).to.be.called;

diff --git a/src/lib/viewers/doc/__tests__/DocPreloader-test.js b/src/lib/viewers/doc/__tests__/DocPreloader-test.js
@@ -558,4 +558,51 @@ describe('lib/viewers/doc/DocPreloader', () => {
             expect(docPreloader.checkDocumentLoaded()).to.be.false;
         });
     });
+
+    describe('resize()', () => {
+        beforeEach(() => {
+            sandbox.stub(docPreloader, 'getScaledWidthAndHeight').returns({
+                scaledWidth: 1000,
+                scaledHeight: 800
+            });
+            sandbox.stub(util, 'setDimensions');
+            docPreloader.preloadEl = document.createElement('div');
+            docPreloader.preloadEl.innerHTML = `<img class="${CLASS_BOX_PREVIEW_PRELOAD_CONTENT}" /><div class="${CLASS_BOX_PREVIEW_PRELOAD_CONTENT}" />`;
+        });
+
+        it('should short circuit if there is no pdf data', () => {
+            docPreloader.resize();
+            expect(docPreloader.getScaledWidthAndHeight).to.not.be.called;
+        });
+
+        it('should resize all the elements', () => {
+            docPreloader.pdfData = {
+                pdfWidth: 800,
+                pdfHeight: 600
+            };
+            docPreloader.resize();
+            expect(docPreloader.getScaledWidthAndHeight).to.be.called;
+            expect(util.setDimensions).to.be.calledTwice;
+        });
+    });
+
+    describe('getScaledWidthAndHeight()', () => {
+        const scaledDimensions = {
+            scaledWidth: 1000,
+            scaledHeight: 800
+        };
+        const pdfData = {
+            pdfWidth: 800,
+            pdfHeight: 600
+        };
+        beforeEach(() => {
+            sandbox.stub(docPreloader, 'getScaledDimensions').returns(scaledDimensions);
+        });
+
+        it('should return the scaled width and height', () => {
+            const scaledWidthAndHeight = docPreloader.getScaledWidthAndHeight(pdfData);
+            expect(docPreloader.getScaledDimensions).to.be.calledWith(pdfData.pdfWidth, pdfData.pdfHeight);
+            expect(scaledWidthAndHeight).to.deep.equal(scaledDimensions);
+        });
+    });
 });