retina.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. (function (global, factory) {
  2. typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  3. typeof define === 'function' && define.amd ? define(factory) :
  4. (global.retinajs = factory());
  5. }(this, (function () { 'use strict';
  6. var hasWindow = typeof window !== 'undefined';
  7. var environment = Math.round(hasWindow ? window.devicePixelRatio || 1 : 1);
  8. var srcReplace = /(\.[A-z]{3,4}\/?(\?.*)?)$/;
  9. var inlineReplace = /url\(('|")?([^)'"]+)('|")?\)/i;
  10. var selector = '[data-rjs]';
  11. var processedAttr = 'data-rjs-processed';
  12. function arrayify(object) {
  13. return Array.prototype.slice.call(object);
  14. }
  15. function chooseCap(cap) {
  16. var numericCap = parseInt(cap, 10);
  17. if (environment < numericCap) {
  18. return environment;
  19. } else {
  20. return numericCap;
  21. }
  22. }
  23. function forceOriginalDimensions(image) {
  24. if (!image.hasAttribute('data-no-resize')) {
  25. if (image.offsetWidth === 0 && image.offsetHeight === 0) {
  26. image.setAttribute('width', image.naturalWidth);
  27. image.setAttribute('height', image.naturalHeight);
  28. } else {
  29. image.setAttribute('width', image.offsetWidth);
  30. image.setAttribute('height', image.offsetHeight);
  31. }
  32. }
  33. return image;
  34. }
  35. function setSourceIfAvailable(image, retinaURL) {
  36. var imgType = image.nodeName.toLowerCase();
  37. var testImage = document.createElement('img');
  38. testImage.addEventListener('load', function () {
  39. if (imgType === 'img') {
  40. forceOriginalDimensions(image).setAttribute('src', retinaURL);
  41. } else {
  42. image.style.backgroundImage = 'url(' + retinaURL + ')';
  43. }
  44. });
  45. testImage.setAttribute('src', retinaURL);
  46. image.setAttribute(processedAttr, true);
  47. }
  48. function dynamicSwapImage(image, src) {
  49. var rjs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
  50. var cap = chooseCap(rjs);
  51. if (src && cap > 1) {
  52. var newSrc = src.replace(srcReplace, '@' + cap + 'x$1');
  53. setSourceIfAvailable(image, newSrc);
  54. }
  55. }
  56. function manualSwapImage(image, src, hdsrc) {
  57. if (environment > 1) {
  58. setSourceIfAvailable(image, hdsrc);
  59. }
  60. }
  61. function getImages(images) {
  62. if (!images) {
  63. return typeof document !== 'undefined' ? arrayify(document.querySelectorAll(selector)) : [];
  64. } else {
  65. return typeof images.forEach === 'function' ? images : arrayify(images);
  66. }
  67. }
  68. function cleanBgImg(img) {
  69. return img.style.backgroundImage.replace(inlineReplace, '$2');
  70. }
  71. function retina(images) {
  72. getImages(images).forEach(function (img) {
  73. if (!img.getAttribute(processedAttr)) {
  74. var isImg = img.nodeName.toLowerCase() === 'img';
  75. var src = isImg ? img.getAttribute('src') : cleanBgImg(img);
  76. var rjs = img.getAttribute('data-rjs');
  77. var rjsIsNumber = !isNaN(parseInt(rjs, 10));
  78. if (rjs === null) {
  79. return;
  80. }
  81. if (rjsIsNumber) {
  82. dynamicSwapImage(img, src, rjs);
  83. } else {
  84. manualSwapImage(img, src, rjs);
  85. }
  86. }
  87. });
  88. }
  89. if (hasWindow) {
  90. window.addEventListener('load', function () {
  91. retina();
  92. });
  93. window.retinajs = retina;
  94. }
  95. return retina;
  96. })));
  97. //# sourceMappingURL=retina.js.map