Commit b5e1302e by Julius Samosir

Upload New File

parent 3830c974
/*!
* Retina.js v2.1.0
*
* Copyright 2016 Axial, LLC
* Released under the MIT license
*
* Retina.js is an open source script that makes it easy to serve
* high-resolution images to devices with retina displays.
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
/*
* Determine whether or not `window` is available.
*/
var hasWindow = typeof window !== 'undefined';
/*
* Get the device pixel ratio per our environment.
* Default to 1.
*/
var environment = hasWindow ? window.devicePixelRatio || 1 : 1;
/*
* Define a pattern for capturing src url suffixes.
*/
var srcReplace = /(\.[A-z]{3,4}\/?(\?.*)?)$/;
var inlineReplace = /url\(('|")?([^\)'"]+)('|")?\)/i;
/*
* Define our selectors for elements to target.
*/
var selector = '[data-rjs]';
/*
* Define the attribute we'll use to mark an image as having been processed.
*/
var 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) {
var 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) {
var 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.
*/
var testImage = document.createElement('img');
testImage.addEventListener('load', function () {
/*
* 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) {
var rjs = arguments.length <= 2 || arguments[2] === undefined ? 1 : arguments[2];
var cap = chooseCap(rjs);
/*
* Don't do anything if the cap is less than 2 or there is no src.
*/
if (src && cap > 1) {
var 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(function (img) {
if (!img.getAttribute(processedAttr)) {
var isImg = img.nodeName.toLowerCase() === 'img';
var src = isImg ? img.getAttribute('src') : cleanBgImg(img);
var rjs = img.getAttribute('data-rjs');
var rjsIsNumber = !isNaN(parseInt(rjs, 10));
/*
* 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', retina);
window.retinajs = retina;
}
exports.default = retina;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment