From 089963f897fae54f3557e2ce42ed62e6f1a1d411 Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Sat, 26 Apr 2014 15:24:07 +0200 Subject: [PATCH] Releasing 3.3.0, picture width and height to img Releasing 3.3.0, which copies picture's width and height attributes to the resulting image --- Gruntfile.js | 2 +- bower.json | 2 +- dist/picturePolyfill.min.js | 4 ++-- src/picturePolyfill.js | 12 +++++++++++- test/picturePolyfill.qunit.js | 18 +++++++++++++++++- 5 files changed, 32 insertions(+), 6 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index acdcd4d..e0a030e 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -5,7 +5,7 @@ module.exports = function(grunt) { grunt.initConfig({ // Metadata. meta: { - version: '3.2.1' + version: '3.3.0' }, banner: '/*! picturePolyfill - v<%= meta.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>\n' + diff --git a/bower.json b/bower.json index 3618783..4599170 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "picturePolyfill", - "version": "3.2.1", + "version": "3.3.0", "main": "picturePolyfill.js", "ignore": [ ".idea", diff --git a/dist/picturePolyfill.min.js b/dist/picturePolyfill.min.js index 5e292a2..3d7ce04 100644 --- a/dist/picturePolyfill.min.js +++ b/dist/picturePolyfill.min.js @@ -1,4 +1,4 @@ -/*! picturePolyfill - v3.2.1 - 2014-04-21 +/*! picturePolyfill - v3.3.0 - 2014-04-26 * https://github.com/verlok/picturePolyfill/ * Copyright (c) 2014 Andrea "verlok" Verlicchi; Licensed MIT */ -var picturePolyfill=function(a){"use strict";function b(){var a,b,c=document.createElement("img");if(a=document.getElementsByTagName("picture"),b=a[0],!a.length)return!1;try{return b.appendChild(c),b.removeChild(c),!0}catch(d){return!1}}var c,d,e,f=100,g=!1;return{_appendImg:function(a,b){var c=document.createElement("img");this._setAttrs(c,b),a.appendChild(c)},_setAttrs:function(a,b){for(var c in b)a.setAttribute(c,b[c])},_getAttrs:function(a,b){for(var c,d,e={},f=0,g=b.length;g>f;f+=1)c=b[f],d=a.getAttribute(c),d&&(e[c]=d);return e},_getAttrsList:function(a){for(var b=[],c=0,d=a.attributes,e=d.length;e>c;c++)b.push(d.item(c).nodeName);return b},_replacePicture:function(a,b){var c=document.createElement("picture"),d=this._getAttrs(a,this._getAttrsList(a));this._appendImg(c,b),this._setAttrs(c,d),a.parentNode.replaceChild(c,a)},_getSrcsetArray:function(a){for(var b,c,d,e=[],f=a.split(","),g=0,h=f.length;h>g;g+=1)b=f[g].trim().split(" "),d=1===b.length?1:parseFloat(b[b.length-1],10),c=b[0],e.push({pxr:d,src:c});return e.sort(function(a,b){var c=a.pxr,d=b.pxr;return d>c?-1:c>d?1:0})},_getSrcFromArray:function(a,b){var c=0,d=a.length,e=-1;if(!d)return null;do(a[c].pxr>=b||c===d-1)&&(e=c),c+=1;while(!(e>-1||c>=d));return a[e].src},_getSrcFromData:function(b){for(var c,d,e,f,g=0,h=b.length;h>g;g+=1)d=b[g],e=d.media,f=d.srcset,(!e||a.matchMedia(e).matches)&&(c=f?this._getSrcFromArray(f,this._pxRatio):d.src);return c},_resetImg:function(a){var b=a.getElementsByTagName("img");b.length&&a.removeChild(b[0])},_setImg:function(a,b){var c=a.getElementsByTagName("img");c.length?c[0].setAttribute("src",b.src):this._appendSupport?this._appendImg(a,b):this._replacePicture(a,b)},_getSourcesData:function(a){for(var b,c,d=[],e=a.getElementsByTagName("source"),f=0,g=e.length;g>f;f+=1)b=e[f],c=this._getAttrs(b,this._getAttrsList(b)),c.srcset&&(c.srcset=this._getSrcsetArray(c.srcset)),d.push(c);return d},_addListeners:function(){function b(){picturePolyfill.parse(document)}function c(){clearTimeout(e),e=setTimeout(b,f)}return!this.isUseful||g?!1:(a.addEventListener?(a.addEventListener("resize",c),a.addEventListener("DOMContentLoaded",function(){b(),a.removeEventListener("load",b)}),a.addEventListener("load",b)):a.attachEvent&&(a.attachEvent("onload",b),a.attachEvent("onresize",c)),void(g=!0))},initialize:function(){this._pxRatio=a.devicePixelRatio||1,this._mqSupport=!!a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,this._appendSupport=b(),this.isUseful=!a.HTMLPictureElement,c=[],d=0,this._addListeners()},parse:function(a){var b,e,f,g;if(!this.isUseful)return 0;f=(a||document).getElementsByTagName("picture");for(var h=0,i=f.length;i>h;h+=1)e=f[h],this._mqSupport?(b=c[e.getAttribute("data-cache-index")],b||(b=this._getSourcesData(e),c[d]=b,e.setAttribute("data-cache-index",d),d+=1),g=this._getSrcFromData(b)):g=e.getAttribute("data-default-src"),g?this._setImg(e,{src:g,alt:e.getAttribute("data-alt")}):this._resetImg(e);return h}}}(window);picturePolyfill.initialize(); \ No newline at end of file +var picturePolyfill=function(a){"use strict";function b(){var a,b,c=document.createElement("img");if(a=document.getElementsByTagName("picture"),b=a[0],!a.length)return!1;try{return b.appendChild(c),b.removeChild(c),!0}catch(d){return!1}}var c,d,e,f=100,g=!1;return{_appendImg:function(a,b){var c=document.createElement("img");this._setAttrs(c,b),a.appendChild(c)},_setAttrs:function(a,b){for(var c in b)a.setAttribute(c,b[c])},_getAttrs:function(a,b){for(var c,d,e={},f=0,g=b.length;g>f;f+=1)c=b[f],d=a.getAttribute(c),d&&(e[c]=d);return e},_getAttrsList:function(a){for(var b=[],c=0,d=a.attributes,e=d.length;e>c;c++)b.push(d.item(c).nodeName);return b},_replacePicture:function(a,b){var c=document.createElement("picture"),d=this._getAttrs(a,this._getAttrsList(a));this._appendImg(c,b),this._setAttrs(c,d),a.parentNode.replaceChild(c,a)},_getSrcsetArray:function(a){for(var b,c,d,e=[],f=a.split(","),g=0,h=f.length;h>g;g+=1)b=f[g].trim().split(" "),d=1===b.length?1:parseFloat(b[b.length-1],10),c=b[0],e.push({pxr:d,src:c});return e.sort(function(a,b){var c=a.pxr,d=b.pxr;return d>c?-1:c>d?1:0})},_getSrcFromArray:function(a,b){var c=0,d=a.length,e=-1;if(!d)return null;do(a[c].pxr>=b||c===d-1)&&(e=c),c+=1;while(!(e>-1||c>=d));return a[e].src},_getSrcFromData:function(b){for(var c,d,e,f,g=0,h=b.length;h>g;g+=1)d=b[g],e=d.media,f=d.srcset,(!e||a.matchMedia(e).matches)&&(c=f?this._getSrcFromArray(f,this._pxRatio):d.src);return c},_resetImg:function(a){var b=a.getElementsByTagName("img");b.length&&a.removeChild(b[0])},_setImg:function(a,b){var c,d,e,f=a.getElementsByTagName("img");if(f.length)f[0].setAttribute("src",b.src);else{c=["width","height"];for(var g=0,h=c.length;h>g;g+=1)d=c[g],e=a.getAttribute(d),e&&(b[d]=e);this._appendSupport?this._appendImg(a,b):this._replacePicture(a,b)}},_getSourcesData:function(a){for(var b,c,d=[],e=a.getElementsByTagName("source"),f=0,g=e.length;g>f;f+=1)b=e[f],c=this._getAttrs(b,this._getAttrsList(b)),c.srcset&&(c.srcset=this._getSrcsetArray(c.srcset)),d.push(c);return d},_addListeners:function(){function b(){picturePolyfill.parse(document)}function c(){clearTimeout(e),e=setTimeout(b,f)}return!this.isUseful||g?!1:(a.addEventListener?(a.addEventListener("resize",c),a.addEventListener("DOMContentLoaded",function(){b(),a.removeEventListener("load",b)}),a.addEventListener("load",b)):a.attachEvent&&(a.attachEvent("onload",b),a.attachEvent("onresize",c)),void(g=!0))},initialize:function(){this._pxRatio=a.devicePixelRatio||1,this._mqSupport=!!a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,this._appendSupport=b(),this.isUseful=!a.HTMLPictureElement,c=[],d=0,this._addListeners()},parse:function(a){var b,e,f,g;if(!this.isUseful)return 0;f=(a||document).getElementsByTagName("picture");for(var h=0,i=f.length;i>h;h+=1)e=f[h],this._mqSupport?(b=c[e.getAttribute("data-cache-index")],b||(b=this._getSourcesData(e),c[d]=b,e.setAttribute("data-cache-index",d),d+=1),g=this._getSrcFromData(b)):g=e.getAttribute("data-default-src"),g?this._setImg(e,{src:g,alt:e.getAttribute("data-alt")}):this._resetImg(e);return h}}}(window);picturePolyfill.initialize(); \ No newline at end of file diff --git a/src/picturePolyfill.js b/src/picturePolyfill.js index 0143573..e6e417f 100644 --- a/src/picturePolyfill.js +++ b/src/picturePolyfill.js @@ -208,7 +208,8 @@ var picturePolyfill = (function(w) { * @param attributes */ _setImg: function(pictureElement, attributes) { - var imageElements = pictureElement.getElementsByTagName('img'); + var pictureAttributesToCopy, attributeName, attributeValue, + imageElements = pictureElement.getElementsByTagName('img'); // If image already exists, use it if (imageElements.length) { @@ -216,6 +217,15 @@ var picturePolyfill = (function(w) { } // Else create the image else { + // Adding picture's attributes to the image (e.g. width, height) + pictureAttributesToCopy = ['width', 'height']; + for (var i = 0, len = pictureAttributesToCopy.length; i'); + $('body').append('
'); testContainer = document.getElementById('testContainer'); // No images at start @@ -385,6 +385,22 @@ test("_setImg should first create then update an image", function() { }); +test("_setImg() should copy picture's width and height attributes to image", function() { + var testContainer, images; + + $('body').append(''); + testContainer = document.getElementById('testContainer'); + + // Check img width and height + picturePolyfill._setImg(testContainer, {src: 'http://placehold.it/1x1', alt: 'An image'}); + testContainer = document.getElementById('testContainer'); + images = testContainer.getElementsByTagName('img'); + strictEqual(images.length, 1); + + strictEqual(images[0].getAttribute('width'), '666'); + strictEqual(images[0].getAttribute('height'), '69'); +}); + test("parse() is called at DOM ready", function() { if (!document.createEvent) { ok(true);