mediawiki-extensions-Popups/.storybook/helpers/scaleDownThumbnail.js

/**
 * 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
 * @returns {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,
	});
}