/*
* Determine whether or not `window` is available. */
const hasWindow = typeof window !== 'undefined';
/*
* Get the device pixel ratio per our environment. * Default to 1. */
const environment = Math.round(hasWindow ? window.devicePixelRatio || 1 : 1);
/*
* Define a pattern for capturing src url suffixes. */
const srcReplace = /(.[A-z]{3,4}/?(?.*)?)$/; const inlineReplace = /url((‘|“)?(+)('|”)?)/i;
/*
* Define our selectors for elements to target. */
const selector = '[data-rjs]';
/*
* Define the attribute we'll use to mark an image as having been processed. */
const processedAttr = 'data-rjs-processed';
/**
* Shortcut for turning some iterable object into an array. * * @param {Iterable} object Any iterable object. * * @return {Array} */
function arrayify(object) {
return Array.prototype.slice.call(object);
}
/**
* Chooses the actual image size to fetch, (for example 2 or 3) that * will be used to create a suffix like "@2x" or "@3x". * * @param {String|Number} cap The number the user provided indicating that * they have prepared images up to this size. * * @return {Number} The number we'll be using to create a suffix. */
function chooseCap(cap) {
const numericCap = parseInt(cap, 10); /* * If the environment's device pixel ratio is less than what the user * provided, we'll only grab images at that size. */ if (environment < numericCap) { return environment; /* * If the device pixel ratio is greater than or equal to what the * user provided, we'll use what the user provided. */ } else { return numericCap; }
}
/**
* Makes sure that, since we are going to swap out the source of an image, * the image does not change size on the page. * * @param {Element} image An image element in the DOM. * * @return {Element} The same element that was passed in. */
function forceOriginalDimensions(image) {
if (!image.hasAttribute('data-no-resize')) { if (image.offsetWidth === 0 && image.offsetHeight === 0) { image.setAttribute('width', image.naturalWidth); image.setAttribute('height', image.naturalHeight); } else { image.setAttribute('width', image.offsetWidth); image.setAttribute('height', image.offsetHeight); } } return image;
}
/**
* Determines whether the retina image actually exists on the server. * If so, swaps out the retina image for the standard one. If not, * leaves the original image alone. * * @param {Element} image An image element in the DOM. * @param {String} newSrc The url to the retina image. * * @return {undefined} */
function setSourceIfAvailable(image, retinaURL) {
const imgType = image.nodeName.toLowerCase(); /* * Create a new image element and give it a load listener. When the * load listener fires, it means the URL is correct and we will then * attach it to the user's image. */ const testImage = document.createElement('img'); testImage.addEventListener('load', () => { /* * If we're dealing with an image tag, force it's dimensions * and set the source attribute. If not, go after the background-image * inline style. */ if (imgType === 'img') { forceOriginalDimensions(image).setAttribute('src', retinaURL); } else { image.style.backgroundImage = `url(${retinaURL})`; } }); /* * Attach the retina URL to our proxy image to load in the new * image resource. */ testImage.setAttribute('src', retinaURL); /* * Mark our image as processed so that it won't be processed again. */ image.setAttribute(processedAttr, true);
}
/**
* Attempts to do an image url swap on a given image. * * @param {Element} image An image in the DOM. * @param {String} src The original image source attribute. * @param {String|Number} rjs The pixel density cap for images provided. * * @return {undefined} */
function dynamicSwapImage(image, src, rjs = 1) {
const cap = chooseCap(rjs); /* * Don't do anything if the cap is less than 2 or there is no src. */ if (src && cap > 1) { const newSrc = src.replace(srcReplace, `@${cap}x$1`); setSourceIfAvailable(image, newSrc); }
}
/**
* Performs an image url swap on a given image with a provided url. * * @param {Element} image An image in the DOM. * @param {String} src The original image source attribute. * @param {String} hdsrc The path for a 2x image. * * @return {undefined} */
function manualSwapImage(image, src, hdsrc) {
if (environment > 1) { setSourceIfAvailable(image, hdsrc); }
}
/**
* Collects all images matching our selector, and converts our * NodeList into an Array so that Array methods will be available to it. * * @param {Iterable} images Optional. An Array, jQuery selection, or NodeList * of elements to affect with retina.js. * * @return {Iterable} Contains all elements matching our selector. */
function getImages(images) {
if (!images) { return typeof document !== 'undefined' ? arrayify( document.querySelectorAll(selector) ) : []; } else { return typeof images.forEach === 'function' ? images : arrayify(images); }
}
/**
* Converts a string like "url(hello.png)" into "hello.png". * * @param {Element} img An HTML element with a background image. * * @return {String} */
function cleanBgImg(img) {
return img.style.backgroundImage.replace(inlineReplace, '$2');
}
/**
* Gets all participating images and dynamically swaps out each one for its * retina equivalent taking into account the environment capabilities and * the densities for which the user has provided images. * * @param {Iterable} images Optional. An Array, jQuery selection, or NodeList * of elements to affect with retina.js. If not * provided, retina.js will grab all images on the * page. * * @return {undefined} */
function retina(images) {
getImages(images).forEach(img => { if (!img.getAttribute(processedAttr)) { const isImg = img.nodeName.toLowerCase() === 'img'; const src = isImg ? img.getAttribute('src') : cleanBgImg(img); const rjs = img.getAttribute('data-rjs'); const rjsIsNumber = !isNaN(parseInt(rjs, 10)); // do not try to load /null image! if (rjs === null) { return; } /* * If the user provided a number, dynamically swap out the image. * If the user provided a url, do it manually. */ if (rjsIsNumber) { dynamicSwapImage(img, src, rjs); } else { manualSwapImage(img, src, rjs); } } });
}
/*
* If this environment has `window`, activate the plugin. */
if (hasWindow) {
window.addEventListener('load', function() { retina(); }); window.retinajs = retina;
}
export default retina;