From e3b2ca89d23572ad3c5a75dd5fdfc75583d20008 Mon Sep 17 00:00:00 2001 From: constancecchen Date: Sat, 24 Jun 2017 20:42:39 -0700 Subject: [PATCH] Allow devs to pass optional DOM elements into objectFitPolyfill() This will greatly help performance for devs who require polyfilling extra JS functionality such as lazyloading, carousels, and so forth. --- dist/objectFitPolyfill.basic.min.js | 2 +- dist/objectFitPolyfill.min.js | 2 +- src/objectFitPolyfill.basic.js | 21 ++++++++++++++++++--- src/objectFitPolyfill.js | 22 +++++++++++++++++++--- 4 files changed, 39 insertions(+), 8 deletions(-) diff --git a/dist/objectFitPolyfill.basic.min.js b/dist/objectFitPolyfill.basic.min.js index 2af24e3..4bb481a 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"),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 +!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(t){if(void 0===t)t=document.querySelectorAll("[data-object-fit]");else if(t&&t.nodeName)t=[t];else{if("object"!=typeof t||!t.length||!t[0].nodeName)return!1;t=t}for(var 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 f77f756..a1cfb5f 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"),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 +!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 961dda2..ce09a52 100644 --- a/src/objectFitPolyfill.basic.js +++ b/src/objectFitPolyfill.basic.js @@ -122,11 +122,26 @@ /** * Initialize plugin + * + * @param {node} media - Optional specific DOM node(s) to be polyfilled */ - var objectFitPolyfill = function() { - var media = document.querySelectorAll("[data-object-fit]"); + var objectFitPolyfill = function(media) { + if (typeof media === "undefined") { + // If left blank, all media on the page will be polyfilled. + media = document.querySelectorAll("[data-object-fit]"); + } else if (media && media.nodeName) { + // If it's a single node, wrap it in an array so it works. + media = [media]; + } else if (typeof media === "object" && media.length && media[0].nodeName) { + // If it's an array of DOM nodes (e.g. a jQuery selector), it's fine as-is. + media = media; + } else { + // Otherwise, if it's invalid or an incorrect type, return false to let people know. + return false; + } - for (var i = 0; i < media.length; i ++) { + for (var i = 0; i < media.length; i++) { + if (!media[i].nodeName) { continue; } var mediaType = media[i].nodeName.toLowerCase(); if (mediaType === "img") { diff --git a/src/objectFitPolyfill.js b/src/objectFitPolyfill.js index 015117e..81ffbc8 100644 --- a/src/objectFitPolyfill.js +++ b/src/objectFitPolyfill.js @@ -218,11 +218,27 @@ /** * Initialize plugin + * + * @param {node} media - Optional specific DOM node(s) to be polyfilled */ - var objectFitPolyfill = function() { - var media = document.querySelectorAll("[data-object-fit]"); + var objectFitPolyfill = function(media) { + if (typeof media === "undefined") { + // If left blank, all media on the page will be polyfilled. + media = document.querySelectorAll("[data-object-fit]"); + } else if (media && media.nodeName) { + // If it's a single node, wrap it in an array so it works. + media = [media]; + } else if (typeof media === "object" && media.length && media[0].nodeName) { + // If it's an array of DOM nodes (e.g. a jQuery selector), it's fine as-is. + media = media; + } else { + // Otherwise, if it's invalid or an incorrect type, return false to let people know. + return false; + } + + for (var i = 0; i < media.length; i++) { + if (!media[i].nodeName) { continue; } - for (var i = 0; i < media.length; i ++) { var mediaType = media[i].nodeName.toLowerCase(); if (mediaType === "img") {