-
Notifications
You must be signed in to change notification settings - Fork 14
/
retina.js
218 lines (197 loc) · 5.94 KB
/
retina.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
/*!
* Retina.js v2.0.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]';
/**
* 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);
}
/**
* 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.
*
* @return {Array} Contains all elements matching our selector.
*/
function getImages() {
return typeof document !== 'undefined' ? Array.prototype.slice.call(document.querySelectorAll(selector)) : [];
}
/**
* 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.
*
* @return {undefined}
*/
function retina() {
getImages().forEach(function (img) {
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;