Skip to content

Commit

Permalink
Revert "Fix: Only call setOriginalImageSize() on single page images (#…
Browse files Browse the repository at this point in the history 
…394)" (#415)

This reverts commit 8f1cc35.
  • Loading branch information
@pramodsum
pramodsum authored Sep 29, 2017
1 parent 150f038 commit d685dfe
Show file tree
Hide file tree
Showing 4 changed files with 504 additions and 580 deletions.
65 changes: 59 additions & 6 deletions src/lib/viewers/image/ImageBaseViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Controls from '../../Controls';
import BaseViewer from '../BaseViewer';
import Browser from '../../Browser';
import { ICON_ZOOM_IN, ICON_ZOOM_OUT } from '../../icons/icons';
import { get } from '../../util';

import { CLASS_INVISIBLE } from '../../constants';

Expand Down Expand Up @@ -43,12 +44,17 @@ class ImageBaseViewer extends BaseViewer {
return;
}

this.loadUI();
this.zoom();

this.imageEl.classList.remove(CLASS_INVISIBLE);
this.loaded = true;
this.emit('load');
const loadOriginalDimensions = this.setOriginalImageSize(this.imageEl);
loadOriginalDimensions
.then(() => {
this.loadUI();
this.zoom();

this.imageEl.classList.remove(CLASS_INVISIBLE);
this.loaded = true;
this.emit('load');
})
.catch(this.errorHandler);
}

/**
Expand Down Expand Up @@ -167,6 +173,53 @@ class ImageBaseViewer extends BaseViewer {
this.bindControlListeners();
}

/**
* 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
* @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.
*/
setOriginalImageSize(imageEl) {
const promise = new Promise((resolve) => {
// Do not bother loading a new image when the natural size attributes exist
if (imageEl.naturalWidth && imageEl.naturalHeight) {
imageEl.setAttribute('originalWidth', imageEl.naturalWidth);
imageEl.setAttribute('originalHeight', imageEl.naturalHeight);
resolve();
} else {
// Case when natural dimensions are not assigned
// By default, assigned width and height in Chrome/Safari/Firefox will be 300x150.
// IE11 workaround. Dimensions only displayed if the image is attached to the document.
get(imageEl.src, {}, 'text')
.then((imageAsText) => {
const parser = new DOMParser();
const svgEl = parser.parseFromString(imageAsText, 'image/svg+xml');

try {
// Assume svgEl is an instanceof an SVG with a viewBox and preserveAspectRatio of meet
// where the height is the limiting axis
const viewBox = svgEl.documentElement.getAttribute('viewBox');
const [, , w, h] = viewBox.split(' ');
const aspectRatio = h ? w / h : w;
imageEl.setAttribute('originalWidth', Math.round(aspectRatio * 150));
imageEl.setAttribute('originalHeight', 150);
} catch (e) {
// Assume 300x150 that chrome does by default
imageEl.setAttribute('originalWidth', 300);
imageEl.setAttribute('originalHeight', 150);
} finally {
resolve();
}
})
.catch(resolve);
}
});

return promise;
}

//--------------------------------------------------------------------------
// Event Listeners
//--------------------------------------------------------------------------
Expand Down
60 changes: 1 addition & 59 deletions src/lib/viewers/image/ImageViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Browser from '../../Browser';
import ImageBaseViewer from './ImageBaseViewer';
import { ICON_FILE_IMAGE, ICON_FULLSCREEN_IN, ICON_FULLSCREEN_OUT, ICON_ROTATE_LEFT } from '../../icons/icons';
import { CLASS_INVISIBLE } from '../../constants';
import { get, openContentInsideIframe } from '../../util';
import { openContentInsideIframe } from '../../util';
import './Image.scss';

const CSS_CLASS_IMAGE = 'bp-image';
Expand Down Expand Up @@ -33,21 +33,6 @@ class ImageViewer extends ImageBaseViewer {
this.currentRotationAngle = 0;
}

/**
* @inheritdoc
*
* @return {void}
*/
finishLoading() {
if (this.isDestroyed()) {
return;
}

this.setOriginalImageSize(this.imageEl)
.then(() => super.finishLoading())
.catch(this.errorHandler);
}

/**
* Loads an Image.
*
Expand Down Expand Up @@ -418,49 +403,6 @@ class ImageViewer extends ImageBaseViewer {
rotationAngle: this.rotationAngle
});
}

/**
* 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
* @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.
*/
setOriginalImageSize(imageEl) {
// Do not bother loading a new image when the natural size attributes exist
if (imageEl.naturalWidth && imageEl.naturalHeight) {
imageEl.setAttribute('originalWidth', imageEl.naturalWidth);
imageEl.setAttribute('originalHeight', imageEl.naturalHeight);
return Promise.resolve();
}

// Case when natural dimensions are not assigned
// By default, assigned width and height in Chrome/Safari/Firefox will be 300x150.
// IE11 workaround. Dimensions only displayed if the image is attached to the document.
return get(imageEl.src, {}, 'text')
.then((imageAsText) => {
const parser = new DOMParser();
const svgEl = parser.parseFromString(imageAsText, 'image/svg+xml');

try {
// Assume svgEl is an instanceof an SVG with a viewBox and preserveAspectRatio of meet
// where the height is the limiting axis
const viewBox = svgEl.documentElement.getAttribute('viewBox');
const [, , w, h] = viewBox.split(' ');
const aspectRatio = h ? w / h : w;
imageEl.setAttribute('originalWidth', Math.round(aspectRatio * 150));
imageEl.setAttribute('originalHeight', 150);
} catch (e) {
// Assume 300x150 that chrome does by default
imageEl.setAttribute('originalWidth', 300);
imageEl.setAttribute('originalHeight', 150);
} finally {
Promise.resolve();
}
})
.catch(Promise.resolve);
}
}

export default ImageViewer;
Loading

0 comments on commit d685dfe

Please sign in to comment.