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.
cee-chen · Jun 25, 2017 · e3b2ca8 · e3b2ca8
1 parent 1932a85
commit e3b2ca8
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 8 deletions.
diff --git a/dist/objectFitPolyfill.basic.min.js b/dist/objectFitPolyfill.basic.min.js
diff --git a/dist/objectFitPolyfill.min.js b/dist/objectFitPolyfill.min.js
diff --git 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
@@ -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") {