Skip to content

Commit

Permalink
Chore: setOriginalImageSize() for multi image viewer (#547)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JustinHoldstock
JustinHoldstock authored Jan 3, 2018
1 parent 3302906 commit 697b03c
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 27 deletions.
2 changes: 1 addition & 1 deletion src/lib/viewers/image/ImageBaseViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ class ImageBaseViewer extends BaseViewer {
* Sets the original image width and height on the img element. Can be removed when
* naturalHeight and naturalWidth attributes work correctly in IE 11.
*
* @private
* @protected
* @param {HTMLElement} imageEl - The image to set the original size attributes on
* @return {Promise} A promise that is resolved if the original image dimensions were set.
*/
Expand Down
16 changes: 15 additions & 1 deletion src/lib/viewers/image/MultiImageViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ const CSS_CLASS_IMAGE_WRAPPER = 'bp-images-wrapper';
const ZOOM_UPDATE_PAN_DELAY = 50;

class MultiImageViewer extends ImageBaseViewer {
/** @property {Image[]} - List of images rendered sequentially */
singleImageEls = [];

/** @inheritdoc */
constructor(options) {
super(options);
Expand All @@ -33,7 +36,7 @@ class MultiImageViewer extends ImageBaseViewer {
this.imageEl = this.wrapperEl.appendChild(document.createElement('div'));
this.imageEl.classList.add(CSS_CLASS_IMAGE);

this.singleImageEls = [this.imageEl.appendChild(document.createElement('img'))];
this.singleImageEls.push(this.imageEl.appendChild(document.createElement('img')));
this.loadTimeout = 60000;

// Defaults the current page number to 1
Expand Down Expand Up @@ -130,6 +133,17 @@ class MultiImageViewer extends ImageBaseViewer {
this.singleImageEls[index].src = imageUrl;
}

/** @inheritdoc */
setOriginalImageSize() {
const promises = [];

this.singleImageEls.forEach((imageEl) => {
promises.push(super.setOriginalImageSize(imageEl));
});

return Promise.all(promises);
}

/**
* Updates pannability state and cursor.
*
Expand Down
70 changes: 45 additions & 25 deletions src/lib/viewers/image/__tests__/MultiImageViewer-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import MultiImageViewer from '../MultiImageViewer';
import PageControls from '../../../PageControls';
import fullscreen from '../../../Fullscreen';
import BaseViewer from '../../BaseViewer';
import ImageBaseViewer from '../ImageBaseViewer';
import Browser from '../../../Browser';
import * as util from '../../../util';
import { ICON_FULLSCREEN_IN, ICON_FULLSCREEN_OUT } from '../../../icons/icons';
Expand All @@ -19,6 +20,7 @@ let containerEl;
describe('lib/viewers/image/MultiImageViewer', () => {
stubs.errorHandler = MultiImageViewer.prototype.errorHandler;
const setupFunc = BaseViewer.prototype.setup;
const sizeFunc = ImageBaseViewer.prototype.setOriginalImageSize;

before(() => {
fixture.setBase('src/lib');
Expand Down Expand Up @@ -61,11 +63,15 @@ describe('lib/viewers/image/MultiImageViewer', () => {
multiImage = new MultiImageViewer(options);

Object.defineProperty(BaseViewer.prototype, 'setup', { value: sandbox.stub() });
Object.defineProperty(ImageBaseViewer.prototype, 'setOriginalImageSize', {
value: sandbox.stub().returns(Promise.resolve())
});
multiImage.containerEl = containerEl;
});

afterEach(() => {
Object.defineProperty(BaseViewer.prototype, 'setup', { value: setupFunc });
Object.defineProperty(ImageBaseViewer.prototype, 'setOriginalImageSize', { value: sizeFunc });

if (multiImage && multiImage.imagesEl) {
multiImage.destroy();
Expand Down Expand Up @@ -186,42 +192,56 @@ describe('lib/viewers/image/MultiImageViewer', () => {
});

it('should set the single image el and error handler if it is not the first image', () => {
multiImage.singleImageEls = {
1: stubs.singleImageEl
};
multiImage.singleImageEls = [,stubs.singleImageEl];

multiImage.setupImageEls('file/100/content/{page}.png', 1);
expect(multiImage.singleImageEls[1].src).to.not.equal(undefined);
expect(stubs.bindImageListeners).to.be.called;
});

it('should set the image source', () => {
multiImage.singleImageEls = {
0: stubs.singleImageEl
};
multiImage.singleImageEls = [stubs.singleImageEl];

multiImage.setupImageEls('file/100/content/{page}.png', 0);
expect(multiImage.singleImageEls[0].src).to.be.equal('file/100/content/{page}.png');
});

it('should set the page number for each image el', () => {
multiImage.singleImageEls = {
0: stubs.singleImageEl
};
multiImage.singleImageEls = [stubs.singleImageEl];

multiImage.setupImageEls('file/100/content/{page}.png', 0);
expect(stubs.singleImageEl.setAttribute).to.be.calledWith('data-page-number', 1);
});

it('should add the "page" class to all image pages', () => {
multiImage.singleImageEls = {
0: stubs.singleImageEl
};
multiImage.singleImageEls = [stubs.singleImageEl];

multiImage.setupImageEls('file/100/content/{page}.png', 0);
expect(stubs.singleImageEl.classList.add).to.be.calledWith('page');
});
});

describe('setOriginalImageSize()', () => {
beforeEach(() => {
multiImage.singleImageEls = [
stubs.singleImageEl,
stubs.singleImageEl,
stubs.singleImageEl
];
});

it('should return a promise', () => {
const promise = multiImage.setOriginalImageSize();
expect(promise).to.be.a('Promise');
});

it('should return a promise that resolves after each image has a proper size', (done) => {
// We've overridden super.setOriginalImageSize() to resolve immediately
multiImage.setOriginalImageSize().then(() => {
done();
});
});
});

describe('updatePannability()', () => {
beforeEach(() => {
Expand Down Expand Up @@ -357,14 +377,14 @@ describe('lib/viewers/image/MultiImageViewer', () => {

describe('bindImageListeners', () => {
beforeEach(() => {
multiImage.singleImageEls = {
0: {
multiImage.singleImageEls = [
{
addEventListener: sandbox.stub()
},
1: {
{
addEventListener: sandbox.stub()
}
};
];
});

it('should add the load event listener to the first image', () => {
Expand All @@ -380,14 +400,14 @@ describe('lib/viewers/image/MultiImageViewer', () => {

describe('unbindImageListeners', () => {
beforeEach(() => {
multiImage.singleImageEls = {
0: {
multiImage.singleImageEls = [
{
removeEventListener: sandbox.stub()
},
1: {
{
removeEventListener: sandbox.stub()
}
};
];
});

it('should remove the load event listener from the first image', () => {
Expand All @@ -403,11 +423,11 @@ describe('lib/viewers/image/MultiImageViewer', () => {

describe('setPage()', () => {
beforeEach(() => {
multiImage.singleImageEls = {
1: stubs.singleImageEl,
2: stubs.singleImageEl,
3: stubs.singleImageEl
};
multiImage.singleImageEls = [,
stubs.singleImageEl,
stubs.singleImageEl,
stubs.singleImageEl
];
sandbox.stub(multiImage, 'emit');
stubs.isValidPageChange = sandbox.stub(multiImage, 'isValidPageChange');
stubs.updateCurrentPage = sandbox.stub(multiImage, 'updateCurrentPage')
Expand Down

0 comments on commit 697b03c

Please sign in to comment.