mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-12-18 10:10:48 +00:00
38 lines
1.3 KiB
JavaScript
38 lines
1.3 KiB
JavaScript
/**
|
|
* Popups thumbnails are requested from the server at a size
|
|
* relative to the screen DPI. Since we're not making that
|
|
* server request, instead using predefined models, we have to
|
|
* scale the thumbnail dimensions down manually for low-dpi displays.
|
|
*
|
|
* We're only scaling images down and not up since the correct
|
|
* behaviour for popup is to not display an image if it's too small.
|
|
* An image that's too big wouldn't be requested in the first place.
|
|
*
|
|
* It's best to define hi-dpi images in the models, unless the purpose
|
|
* is to display the thumbnail on a low-dpi display and not a hi-dpi one.
|
|
*/
|
|
|
|
import { default as CONSTANTS } from '../../src/constants';
|
|
|
|
|
|
/**
|
|
* Scaled down thumbnails for low-dpi displays.
|
|
* @param {Object} thumbnail - PagePreviewModel.thumbnail property
|
|
* @return {Object} PagePreviewModel.thumbnail property
|
|
*/
|
|
export default function scaleDownThumbnail( thumbnail ) {
|
|
const
|
|
x = thumbnail.width,
|
|
y = thumbnail.height,
|
|
ratio = Math.min(CONSTANTS.THUMBNAIL_SIZE / x, CONSTANTS.THUMBNAIL_SIZE / y),
|
|
thumbSrc = thumbnail.source,
|
|
maxPxSize = CONSTANTS.THUMBNAIL_SIZE + 'px',
|
|
scaledSrc = thumbSrc.replace( /\d*.px/, maxPxSize );
|
|
|
|
return Object.assign({}, thumbnail, {
|
|
source: scaledSrc,
|
|
width: x * ratio,
|
|
height: y * ratio,
|
|
});
|
|
}
|