From 1932a8557ef21ef32e272e93570232ac0aeb35bf Mon Sep 17 00:00:00 2001 From: constancecchen Date: Sat, 22 Apr 2017 14:47:50 -0700 Subject: [PATCH] Update checkMediaConstraints() to check for pre-set positioning and margin CSS, which can also throw off image calcs or end results --- dist/objectFitPolyfill.basic.min.js | 2 +- dist/objectFitPolyfill.min.js | 2 +- src/objectFitPolyfill.basic.js | 20 ++++++++++++++------ src/objectFitPolyfill.js | 20 ++++++++++++++------ 4 files changed, 30 insertions(+), 14 deletions(-) diff --git a/dist/objectFitPolyfill.basic.min.js b/dist/objectFitPolyfill.basic.min.js index 484613b..2af24e3 100644 --- a/dist/objectFitPolyfill.basic.min.js +++ b/dist/objectFitPolyfill.basic.min.js @@ -1 +1 @@ -!function(){"use strict";if("objectFit"in document.documentElement.style!=!1)return void(window.objectFitPolyfill=function(){return!1});var t=function(t){var e=window.getComputedStyle(t,null),i=e.getPropertyValue("position"),n=e.getPropertyValue("overflow"),o=e.getPropertyValue("display");i&&"static"!==i||(t.style.position="relative"),"hidden"!==n&&(t.style.overflow="hidden"),o&&"inline"!==o||(t.style.display="block"),0===t.clientHeight&&(t.style.height="100%"),-1===t.className.indexOf("object-fit-polyfill")&&(t.className=t.className+" object-fit-polyfill")},e=function(t){var e=window.getComputedStyle(t,null),i={"max-width":"none","max-height":"none","min-width":"0px","min-height":"0px"};for(var n in i){e.getPropertyValue(n)!==i[n]&&(t.style[n]=i[n])}},i=function(i){var n=i.parentNode;t(n),e(i),i.style.position="absolute",i.style.height="100%",i.style.width="auto",i.clientWidth>n.clientWidth?(i.style.top="0",i.style.marginTop="0",i.style.left="50%",i.style.marginLeft=i.clientWidth/-2+"px"):(i.style.width="100%",i.style.height="auto",i.style.left="0",i.style.marginLeft="0",i.style.top="50%",i.style.marginTop=i.clientHeight/-2+"px")},n=function(){for(var t=document.querySelectorAll("[data-object-fit]"),e=0;e0?i(t[e]):t[e].addEventListener("loadedmetadata",function(){i(this)}))}return!0};document.addEventListener("DOMContentLoaded",function(){n()}),window.addEventListener("resize",function(){n()}),window.objectFitPolyfill=n}(); \ No newline at end of file +!function(){"use strict";if("objectFit"in document.documentElement.style!=!1)return void(window.objectFitPolyfill=function(){return!1});var t=function(t){var e=window.getComputedStyle(t,null),i=e.getPropertyValue("position"),o=e.getPropertyValue("overflow"),n=e.getPropertyValue("display");i&&"static"!==i||(t.style.position="relative"),"hidden"!==o&&(t.style.overflow="hidden"),n&&"inline"!==n||(t.style.display="block"),0===t.clientHeight&&(t.style.height="100%"),-1===t.className.indexOf("object-fit-polyfill")&&(t.className=t.className+" object-fit-polyfill")},e=function(t){var e=window.getComputedStyle(t,null),i={"max-width":"none","max-height":"none","min-width":"0px","min-height":"0px",top:"auto",right:"auto",bottom:"auto",left:"auto","margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px"};for(var o in i){e.getPropertyValue(o)!==i[o]&&(t.style[o]=i[o])}},i=function(i){var o=i.parentNode;t(o),e(i),i.style.position="absolute",i.style.height="100%",i.style.width="auto",i.clientWidth>o.clientWidth?(i.style.top="0",i.style.marginTop="0",i.style.left="50%",i.style.marginLeft=i.clientWidth/-2+"px"):(i.style.width="100%",i.style.height="auto",i.style.left="0",i.style.marginLeft="0",i.style.top="50%",i.style.marginTop=i.clientHeight/-2+"px")},o=function(){for(var t=document.querySelectorAll("[data-object-fit]"),e=0;e0?i(t[e]):t[e].addEventListener("loadedmetadata",function(){i(this)}))}return!0};document.addEventListener("DOMContentLoaded",function(){o()}),window.addEventListener("resize",function(){o()}),window.objectFitPolyfill=o}(); \ No newline at end of file diff --git a/dist/objectFitPolyfill.min.js b/dist/objectFitPolyfill.min.js index 7976fd8..f77f756 100644 --- a/dist/objectFitPolyfill.min.js +++ b/dist/objectFitPolyfill.min.js @@ -1 +1 @@ -!function(){"use strict";if("objectFit"in document.documentElement.style!=!1)return void(window.objectFitPolyfill=function(){return!1});var t=function(t){var e=window.getComputedStyle(t,null),i=e.getPropertyValue("position"),n=e.getPropertyValue("overflow"),o=e.getPropertyValue("display");i&&"static"!==i||(t.style.position="relative"),"hidden"!==n&&(t.style.overflow="hidden"),o&&"inline"!==o||(t.style.display="block"),0===t.clientHeight&&(t.style.height="100%"),-1===t.className.indexOf("object-fit-polyfill")&&(t.className=t.className+" object-fit-polyfill")},e=function(t){var e=window.getComputedStyle(t,null),i={"max-width":"none","max-height":"none","min-width":"0px","min-height":"0px"};for(var n in i){e.getPropertyValue(n)!==i[n]&&(t.style[n]=i[n])}},i=function(t,e,i){var n,o,l,a,d;if(i=i.split(" "),i.length<2&&(i[1]=i[0]),"x"===t)n=i[0],o=i[1],l="left",a="right",d=e.clientWidth;else{if("y"!==t)return;n=i[1],o=i[0],l="top",a="bottom",d=e.clientHeight}return n===l||o===l?void(e.style[l]="0"):n===a||o===a?void(e.style[a]="0"):"center"===n||"50%"===n?(e.style[l]="50%",void(e.style["margin-"+l]=d/-2+"px")):n.indexOf("%")>=0?(n=parseInt(n),void(n<50?(e.style[l]=n+"%",e.style["margin-"+l]=d*(n/-100)+"px"):(n=100-n,e.style[a]=n+"%",e.style["margin-"+a]=d*(n/-100)+"px"))):void(e.style[l]=n)},n=function(n){var o=n.dataset?n.dataset.objectFit:n.getAttribute("data-object-fit"),l=n.dataset?n.dataset.objectPosition:n.getAttribute("data-object-position");o=o||"cover",l=l||"50% 50%";var a=n.parentNode;t(a),e(n),n.style.position="absolute",n.style.height="100%",n.style.width="auto","scale-down"===o&&(n.style.height="auto",n.clientWidtha.clientWidth||"contain"===o&&n.clientWidth0?n(t[e]):t[e].addEventListener("loadedmetadata",function(){n(this)}))}return!0};document.addEventListener("DOMContentLoaded",function(){o()}),window.addEventListener("resize",function(){o()}),window.objectFitPolyfill=o}(); \ No newline at end of file +!function(){"use strict";if("objectFit"in document.documentElement.style!=!1)return void(window.objectFitPolyfill=function(){return!1});var t=function(t){var e=window.getComputedStyle(t,null),i=e.getPropertyValue("position"),o=e.getPropertyValue("overflow"),n=e.getPropertyValue("display");i&&"static"!==i||(t.style.position="relative"),"hidden"!==o&&(t.style.overflow="hidden"),n&&"inline"!==n||(t.style.display="block"),0===t.clientHeight&&(t.style.height="100%"),-1===t.className.indexOf("object-fit-polyfill")&&(t.className=t.className+" object-fit-polyfill")},e=function(t){var e=window.getComputedStyle(t,null),i={"max-width":"none","max-height":"none","min-width":"0px","min-height":"0px",top:"auto",right:"auto",bottom:"auto",left:"auto","margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px"};for(var o in i){e.getPropertyValue(o)!==i[o]&&(t.style[o]=i[o])}},i=function(t,e,i){var o,n,l,a,d;if(i=i.split(" "),i.length<2&&(i[1]=i[0]),"x"===t)o=i[0],n=i[1],l="left",a="right",d=e.clientWidth;else{if("y"!==t)return;o=i[1],n=i[0],l="top",a="bottom",d=e.clientHeight}return o===l||n===l?void(e.style[l]="0"):o===a||n===a?void(e.style[a]="0"):"center"===o||"50%"===o?(e.style[l]="50%",void(e.style["margin-"+l]=d/-2+"px")):o.indexOf("%")>=0?(o=parseInt(o),void(o<50?(e.style[l]=o+"%",e.style["margin-"+l]=d*(o/-100)+"px"):(o=100-o,e.style[a]=o+"%",e.style["margin-"+a]=d*(o/-100)+"px"))):void(e.style[l]=o)},o=function(o){var n=o.dataset?o.dataset.objectFit:o.getAttribute("data-object-fit"),l=o.dataset?o.dataset.objectPosition:o.getAttribute("data-object-position");n=n||"cover",l=l||"50% 50%";var a=o.parentNode;t(a),e(o),o.style.position="absolute",o.style.height="100%",o.style.width="auto","scale-down"===n&&(o.style.height="auto",o.clientWidtha.clientWidth||"contain"===n&&o.clientWidth0?o(t[e]):t[e].addEventListener("loadedmetadata",function(){o(this)}))}return!0};document.addEventListener("DOMContentLoaded",function(){n()}),window.addEventListener("resize",function(){n()}),window.objectFitPolyfill=n}(); \ No newline at end of file diff --git a/src/objectFitPolyfill.basic.js b/src/objectFitPolyfill.basic.js index b3b0ba8..961dda2 100644 --- a/src/objectFitPolyfill.basic.js +++ b/src/objectFitPolyfill.basic.js @@ -53,18 +53,26 @@ }; /** - * Check for pre-set max-width/height or min-width/height, - * which can mess up image calculations + * Check for pre-set max-width/height, min-width/height, + * positioning, or margins, which can mess up image calculations * * @param {node} $media - img/video element */ - var checkMediaConstraints = function($media) { + var checkMediaProperties = function($media) { var styles = window.getComputedStyle($media, null); var constraints = { "max-width": "none", "max-height": "none", "min-width": "0px", - "min-height": "0px" + "min-height": "0px", + "top": "auto", + "right": "auto", + "bottom": "auto", + "left": "auto", + "margin-top": "0px", + "margin-right": "0px", + "margin-bottom": "0px", + "margin-left": "0px", }; for (var property in constraints) { @@ -86,8 +94,8 @@ var $container = $media.parentNode; checkParentContainer($container); - // Check for max-width/height or min-width/height, which can mess up image calculations - checkMediaConstraints($media); + // Check for any pre-set CSS which could mess up image calculations + checkMediaProperties($media); // Mathematically figure out which side needs covering, and add CSS positioning & centering $media.style.position = "absolute"; diff --git a/src/objectFitPolyfill.js b/src/objectFitPolyfill.js index 9051dbd..015117e 100644 --- a/src/objectFitPolyfill.js +++ b/src/objectFitPolyfill.js @@ -50,18 +50,26 @@ }; /** - * Check for pre-set max-width/height or min-width/height, - * which can mess up image calculations + * Check for pre-set max-width/height, min-width/height, + * positioning, or margins, which can mess up image calculations * * @param {node} $media - img/video element */ - var checkMediaConstraints = function($media) { + var checkMediaProperties = function($media) { var styles = window.getComputedStyle($media, null); var constraints = { "max-width": "none", "max-height": "none", "min-width": "0px", - "min-height": "0px" + "min-height": "0px", + "top": "auto", + "right": "auto", + "bottom": "auto", + "left": "auto", + "margin-top": "0px", + "margin-right": "0px", + "margin-bottom": "0px", + "margin-left": "0px", }; for (var property in constraints) { @@ -161,8 +169,8 @@ var $container = $media.parentNode; checkParentContainer($container); - // Check for max-width/height or min-width/height, which can mess up image calculations - checkMediaConstraints($media); + // Check for any pre-set CSS which could mess up image calculations + checkMediaProperties($media); // Mathematically figure out which side needs covering, and add CSS positioning & centering $media.style.position = "absolute";