diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js index 06ddff709..8c3b1f5a9 100644 --- a/src/lib/viewers/BaseViewer.js +++ b/src/lib/viewers/BaseViewer.js @@ -1083,6 +1083,17 @@ class BaseViewer extends EventEmitter { }) ); } + + /** + * Method that is run after all the assets and rep are loaded. In this + * base class, it will attempt to load the Box Annotations and create + * the annotator + * + * @return {void} + */ + handleAssetAndRepLoad() { + this.loadBoxAnnotations().then(this.createAnnotator); + } } export default BaseViewer; diff --git a/src/lib/viewers/__tests__/BaseViewer-test.js b/src/lib/viewers/__tests__/BaseViewer-test.js index 56df6c569..f3a3d0c2e 100644 --- a/src/lib/viewers/__tests__/BaseViewer-test.js +++ b/src/lib/viewers/__tests__/BaseViewer-test.js @@ -1377,4 +1377,21 @@ describe('lib/viewers/BaseViewer', () => { expect(combinedOptions.localizedStrings).to.not.be.undefined; }); }); + + describe('handleAssetAndRepLoad()', () => { + it('should load annotations and create the annotator', (done) => { + sandbox.stub(base, 'loadBoxAnnotations').returns(Promise.resolve()); + sandbox.stub(base, 'createAnnotator').returns( + new Promise((resolve) => { + resolve(); + done(); + }) + ); + + base.handleAssetAndRepLoad(); + + expect(base.loadBoxAnnotations).to.be.called; + expect(base.createAnnotator).to.be.called; + }); + }); }); diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js index c9cd656ae..4691069da 100644 --- a/src/lib/viewers/doc/DocBaseViewer.js +++ b/src/lib/viewers/doc/DocBaseViewer.js @@ -288,14 +288,13 @@ class DocBaseViewer extends BaseViewer { return Promise.all([this.loadAssets(JS, CSS), this.getRepStatus().getPromise()]) .then(this.handleAssetAndRepLoad) - .then(this.loadBoxAnnotations) - .then(this.createAnnotator) .catch(this.handleAssetError); } /** * Loads a document after assets and representation are ready. * + * @override * @return {void} */ handleAssetAndRepLoad() { @@ -303,6 +302,8 @@ class DocBaseViewer extends BaseViewer { this.initViewer(this.pdfUrl); this.initPrint(); this.initFind(); + + super.handleAssetAndRepLoad(); } /** diff --git a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js index 554c23d46..9c27947f2 100644 --- a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js +++ b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js @@ -419,13 +419,12 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => { expect(docBase.setup).to.be.called; expect(docBase.createContentUrlWithAuthParams).to.be.calledWith('foo'); expect(docBase.handleAssetAndRepLoad).to.be.called; - expect(docBase.loadBoxAnnotations).to.be.called; }); }); }); describe('handleAssetAndRepLoad', () => { - it('should setup pdfjs, init viewer, print, and find', () => { + it('should setup pdfjs, init viewer, print, and find', (done) => { const url = 'foo'; docBase.pdfUrl = url; docBase.pdfViewer = { @@ -436,6 +435,13 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => { const initViewerStub = sandbox.stub(docBase, 'initViewer'); const initPrintStub = sandbox.stub(docBase, 'initPrint'); const initFindStub = sandbox.stub(docBase, 'initFind'); + const loadBoxAnnotations = sandbox.stub(docBase, 'loadBoxAnnotations').returns(Promise.resolve()); + const createAnnotator = sandbox.stub(docBase, 'createAnnotator').returns( + new Promise((resolve) => { + resolve(); + done(); + }) + ); docBase.handleAssetAndRepLoad(); @@ -443,6 +449,8 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => { expect(initViewerStub).to.be.calledWith(docBase.pdfUrl); expect(initPrintStub).to.be.called; expect(initFindStub).to.be.called; + expect(loadBoxAnnotations).to.be.called; + expect(createAnnotator).to.be.called; }); }); diff --git a/src/lib/viewers/image/ImageViewer.js b/src/lib/viewers/image/ImageViewer.js index bdcd255a8..1895b80e9 100644 --- a/src/lib/viewers/image/ImageViewer.js +++ b/src/lib/viewers/image/ImageViewer.js @@ -17,6 +17,7 @@ class ImageViewer extends ImageBaseViewer { this.rotateLeft = this.rotateLeft.bind(this); this.updatePannability = this.updatePannability.bind(this); this.handleImageDownloadError = this.handleImageDownloadError.bind(this); + this.handleAssetAndRepLoad = this.handleAssetAndRepLoad.bind(this); if (this.isMobile) { this.handleOrientationChange = this.handleOrientationChange.bind(this); @@ -58,15 +59,23 @@ class ImageViewer extends ImageBaseViewer { this.bindDOMListeners(); return this.getRepStatus() .getPromise() - .then(() => { - this.startLoadTimer(); - this.imageEl.src = downloadUrl; - }) - .then(this.loadBoxAnnotations) - .then(this.createAnnotator) + .then(() => this.handleAssetAndRepLoad(downloadUrl)) .catch(this.handleAssetError); } + /** + * Loads the image to be viewed + * + * @override + * @return {void} + */ + handleAssetAndRepLoad(downloadUrl) { + this.startLoadTimer(); + this.imageEl.src = downloadUrl; + + super.handleAssetAndRepLoad(); + } + /** * Prefetches assets for an image. * diff --git a/src/lib/viewers/image/MultiImageViewer.js b/src/lib/viewers/image/MultiImageViewer.js index f3b26050e..f46a66c8d 100644 --- a/src/lib/viewers/image/MultiImageViewer.js +++ b/src/lib/viewers/image/MultiImageViewer.js @@ -22,6 +22,7 @@ class MultiImageViewer extends ImageBaseViewer { this.scrollHandler = this.scrollHandler.bind(this); this.handlePageChangeFromScroll = this.handlePageChangeFromScroll.bind(this); this.handleMultiImageDownloadError = this.handleMultiImageDownloadError.bind(this); + this.handleAssetAndRepLoad = this.handleAssetAndRepLoad.bind(this); } /** @@ -81,18 +82,28 @@ class MultiImageViewer extends ImageBaseViewer { return this.getRepStatus() .getPromise() - .then(() => { - const template = this.options.representation.content.url_template; - this.imageUrls = this.constructImageUrls(template); + .then(this.handleAssetAndRepLoad) + .catch(this.handleAssetError); + } + + /** + * Loads the multipart image for viewing + * + * @override + * @return {void} + */ + handleAssetAndRepLoad() { + const template = this.options.representation.content.url_template; + this.imageUrls = this.constructImageUrls(template); - // Start load timer - this.startLoadTimer(); + // Start load timer + this.startLoadTimer(); - this.imageUrls.forEach((imageUrl, index) => this.setupImageEls(imageUrl, index)); + this.imageUrls.forEach((imageUrl, index) => this.setupImageEls(imageUrl, index)); - this.wrapperEl.addEventListener('scroll', this.scrollHandler, true); - }) - .catch(this.handleAssetError); + this.wrapperEl.addEventListener('scroll', this.scrollHandler, true); + + super.handleAssetAndRepLoad(); } /** diff --git a/src/lib/viewers/image/__tests__/ImageViewer-test.js b/src/lib/viewers/image/__tests__/ImageViewer-test.js index 0da38d9a3..12b98d973 100644 --- a/src/lib/viewers/image/__tests__/ImageViewer-test.js +++ b/src/lib/viewers/image/__tests__/ImageViewer-test.js @@ -583,4 +583,28 @@ describe('lib/viewers/image/ImageViewer', () => { }); }); }); + + describe('handleAssetAndRepLoad', () => { + it('should setup image src', (done) => { + const url = 'foo'; + const imageEl = document.createElement('img'); + + image.imageEl = imageEl; + const startLoadTimer = sandbox.stub(image, 'startLoadTimer'); + const loadBoxAnnotations = sandbox.stub(image, 'loadBoxAnnotations').returns(Promise.resolve()); + const createAnnotator = sandbox.stub(image, 'createAnnotator').returns( + new Promise((resolve) => { + resolve(); + done(); + }) + ); + + image.handleAssetAndRepLoad(url); + + expect(startLoadTimer).to.be.called; + expect(imageEl.url).to.be.equal(url); + expect(loadBoxAnnotations).to.be.called; + expect(createAnnotator).to.be.called; + }); + }); });