Merge pull request #5 from mobify/rewrite-srcset

Allow for writing the srcset attribute
mobify · Oct 23, 2014 · 4f2ba4f · 4f2ba4f
2 parents 054180f + 07d3961
commit 4f2ba4f
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 16 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -1,2 +1,5 @@
+1.0.3
+    - Supports rewriting `srcset` attribute in `<source>` elements in `<picture>`
+      element.
 1.0.2
     - Sets default cacheHours to 8
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "imageresize-client",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "main": "resizeImages.js",
     "dependencies": {
         "mobifyjs-utils": "git://github.com/mobify/mobifyjs-utils.git#1.0.0"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "imageresize-client",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "devDependencies": {
         "grunt": "~0.4.0",
         "grunt-express": "~0.3.6",

diff --git a/resizeImages.js b/resizeImages.js
@@ -157,20 +157,27 @@ ResizeImages.getImageURL = function(url, options) {
  */
 
 ResizeImages._rewriteSrcAttribute = function(element, opts, srcVal){
-    srcVal = element.getAttribute(opts.sourceAttribute) || srcVal;
+    srcVal = element.getAttribute(opts.sourceAttribute) ||
+             element.getAttribute(opts.sourceSetAttribute) ||
+             srcVal;
     if (srcVal) {
         var url = Utils.absolutify(srcVal);
         if (Utils.httpUrl(url)) {
             if (opts.onerror) {
                 element.setAttribute('onerror', opts.onerror);
             }
-            element.setAttribute(opts.targetAttribute, ResizeImages.getImageURL(url, opts));
+            // if the element is a source element, then we always want to set srcset rather then src
+            var targetAttribute = (element.nodeName === 'SOURCE') ? opts.targetSrcSetAttribute : opts.targetSrcAttribute;
+
+            element.setAttribute(targetAttribute, ResizeImages.getImageURL(url, opts));
             element.setAttribute('data-orig-src', srcVal);
             // if using resize when not capturing, remove the sourceAttribute
-            // as long as it's not "src", which is the target attribute used
-            // when not capturing.
-            if (!capturing && opts.sourceAttribute != opts.targetAttribute) {
+            // or sourceSetAttribute as long as it's not "src", which is the target
+            // attribute used when not capturing.
+            if (!capturing && opts.sourceAttribute != opts.targetSrcAttribute) {
                 element.removeAttribute(opts.sourceAttribute);
+            } else if (!capturing && opts.sourceSetAttribute != opts.targetSrcSetAttribute) {
+                element.removeAttribute(opts.sourceSetAttribute);
             }
         }
     }
@@ -361,11 +368,14 @@ ResizeImages.resize = function(elements, options) {
     }
     var opts = ResizeImages.processOptions(options);
 
-    for(var i=0; i < elements.length; i++) {
+    for (var i=0; i < elements.length; i++) {
         var element = elements[i];
-
         // For an `img`, simply modify the src attribute
         if (element.nodeName === 'IMG' && !element.hasAttribute('mobify-optimized')) {
+            // Skip this image if it's parent is a picture element
+            if (element.parentNode && element.parentNode.nodeName === 'PICTURE') {
+                continue;
+            }
             element.setAttribute('mobify-optimized', '');
             ResizeImages._rewriteSrcAttribute(element, opts);
         }
@@ -396,7 +406,9 @@ ResizeImages.defaults = {
     host: 'ir0.mobify.com',
     projectName: "oss-" + location.hostname.replace(/[^\w]/g, '-'),
     sourceAttribute: "x-src",
-    targetAttribute: (capturing ? "x-src" : "src"),
+    sourceSetAttribute: "x-srcset",
+    targetSrcAttribute: (capturing ? "x-src" : "src"),
+    targetSrcSetAttribute: (capturing ? "x-srcset" : "srcset"),
     webp: ResizeImages.supportsWebp(),
     resize: true,
     onerror: 'ResizeImages.restoreOriginalSrc(event);'

diff --git a/tests/index.html b/tests/index.html
@@ -50,7 +50,7 @@
 
     <div id="resizeImages-picture-element">
         <picture data-src="http://www.mobify.com/i/phone-tablet.png">
-            <source src="http://www.mobify.com/i/phone-tablet-small.png" data-media="(min-width: 800px)" data-width="300" id="width-and-src">
+            <source srcset="http://www.mobify.com/i/phone-tablet-small.png" data-media="(min-width: 800px)" data-width="300" id="width-and-src">
             <source media="(min-width: 800px)" data-width="400" id="width-and-no-src">
             <source media="(min-width: 1000px)" id="no-width-and-no-src">
             <img src="http://www.mobify.com/i/phone-tablet-small.png">
@@ -457,6 +457,7 @@
                 maxHeight: 480,
                 webp: false,
                 sourceAttribute: 'src',
+                sourceSetAttribute: 'srcset',
                 devicePixelRatio: 1
             });
 
@@ -467,16 +468,15 @@
                     "if source not properly parsed (iOS 4.3), src for img element inside of a picture element should remain");
                 return;
             }
-
-            equal(images[0].querySelectorAll("#width-and-src")[0].getAttribute("src"),
+            equal(images[0].querySelectorAll("#width-and-src")[0].getAttribute("srcset"),
                   "//ir0.mobify.com/project-test1/c8/300/480/http://www.mobify.com/i/phone-tablet-small.png",
                   "source in picture has width overridden, and uses own src");
 
-            equal(images[0].querySelectorAll("#width-and-no-src")[0].getAttribute("src"),
+            equal(images[0].querySelectorAll("#width-and-no-src")[0].getAttribute("srcset"),
                   "//ir0.mobify.com/project-test1/c8/400/480/http://www.mobify.com/i/phone-tablet.png",
                   "source in picture has width overridden, and uses data-src in picture");
 
-            equal(images[0].querySelectorAll("#no-width-and-no-src")[0].getAttribute("src"),
+            equal(images[0].querySelectorAll("#no-width-and-no-src")[0].getAttribute("srcset"),
                   "//ir0.mobify.com/project-test1/c8/1280/480/http://www.mobify.com/i/phone-tablet.png",
                   "source in picture has no width overide, and uses data-src in picture");
         });
@@ -579,7 +579,7 @@
                 resize: false,
                 projectName: "test",
                 sourceAttribute: "x-src",
-                targetAttribute: "x-src",
+                targetSrcAttribute: "x-src",
                 webp: false
             };
             var options = Utils.extend({}, baseOptions,