From d6b824040a8bc7e44a6a663e20f9f31181de1b6d Mon Sep 17 00:00:00 2001 From: Manuele Sarfatti Date: Mon, 15 Feb 2016 11:44:16 +0100 Subject: [PATCH 1/2] Made it a UMD module --- src/object-fit-polyfill.js | 91 +++++++++++++++++++++++--------------- 1 file changed, 55 insertions(+), 36 deletions(-) diff --git a/src/object-fit-polyfill.js b/src/object-fit-polyfill.js index 930d4b9..7c51147 100644 --- a/src/object-fit-polyfill.js +++ b/src/object-fit-polyfill.js @@ -5,7 +5,20 @@ * */ -;(function (window, document) { +;(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define([], factory); + } else if (typeof module === 'object' && module.exports) { + // Node. Does not work with strict CommonJS, but + // only CommonJS-like environments that support module.exports, + // like Node. + module.exports = factory(); + } else { + // Browser globals (root is window) + root.objectFitPolyfill = factory(); + } +}(this, function () { 'use strict'; var supports = function (){ @@ -69,49 +82,55 @@ }; - if ( supports('object-fit') === false ) { + var init = function() { - var oImages = document.querySelectorAll('[data-object-fit]'), - oDiv, sSource; + if ( supports('object-fit') === false ) { - for ( var nKey = 0; nKey < oImages.length; nKey++ ) { + var oImages = document.querySelectorAll('[data-object-fit]'), + oDiv, sSource; - oDiv = document.createElement('div'); + for ( var nKey = 0; nKey < oImages.length; nKey++ ) { - if (oImages[nKey].getAttribute('data-src-retina')) { - sSource = oImages[nKey].getAttribute('data-src-retina'); - } else if ( oImages[nKey].getAttribute('data-src')) { - sSource = oImages[nKey].getAttribute('data-src'); - } else { - sSource = oImages[nKey].src; - } + oDiv = document.createElement('div'); + + if (oImages[nKey].getAttribute('data-src-retina')) { + sSource = oImages[nKey].getAttribute('data-src-retina'); + } else if ( oImages[nKey].getAttribute('data-src')) { + sSource = oImages[nKey].getAttribute('data-src'); + } else { + sSource = oImages[nKey].src; + } - copyComputedStyle( oImages[nKey], oDiv ); - - oDiv.style.display = "block"; - oDiv.style.backgroundImage = "url("+ sSource + ")"; - oDiv.style.backgroundPosition = "center center"; - oDiv.style.className = oImages[nKey].className; - oDiv.style.backgroundRepeat = "no-repeat"; - - switch (oImages[nKey].getAttribute('data-object-fit')) { - case "cover": - oDiv.style.backgroundSize = "cover"; - break; - case "contain": - oDiv.style.backgroundSize = "contain"; - break; - case "fill": - oDiv.style.backgroundSize = "100% 100%"; - break; - case "none": - oDiv.style.backgroundSize = "auto"; - break; + copyComputedStyle( oImages[nKey], oDiv ); + + oDiv.style.display = "block"; + oDiv.style.backgroundImage = "url("+ sSource + ")"; + oDiv.style.backgroundPosition = "center center"; + oDiv.className = oImages[nKey].className; + oDiv.style.backgroundRepeat = "no-repeat"; + + switch (oImages[nKey].getAttribute('data-object-fit')) { + case "cover": + oDiv.style.backgroundSize = "cover"; + break; + case "contain": + oDiv.style.backgroundSize = "contain"; + break; + case "fill": + oDiv.style.backgroundSize = "100% 100%"; + break; + case "none": + oDiv.style.backgroundSize = "auto"; + break; + } + + oImages[nKey].parentNode.replaceChild( oDiv, oImages[nKey]); } - oImages[nKey].parentNode.replaceChild( oDiv, oImages[nKey]); } } -})(window, document); + return { init: init }; + +})); From da069a3b0f36d5d1948ae079ed79171f9ef18b4b Mon Sep 17 00:00:00 2001 From: Manuele Sarfatti Date: Thu, 18 Feb 2016 12:34:33 +0100 Subject: [PATCH 2/2] Add support for srcset attribute --- src/object-fit-polyfill.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/object-fit-polyfill.js b/src/object-fit-polyfill.js index 7c51147..2745e92 100644 --- a/src/object-fit-polyfill.js +++ b/src/object-fit-polyfill.js @@ -98,7 +98,7 @@ } else if ( oImages[nKey].getAttribute('data-src')) { sSource = oImages[nKey].getAttribute('data-src'); } else { - sSource = oImages[nKey].src; + sSource = oImages[nKey].currentSrc || oImages[nKey].src; } copyComputedStyle( oImages[nKey], oDiv );