From 8a85c7cc9de9991e8982733c8dc6971bc5e4c522 Mon Sep 17 00:00:00 2001
From: Andrea Verlicchi <andrea.verlicchi@gmail.com>
Date: Fri, 14 Mar 2014 18:45:21 +0100
Subject: [PATCH] Working on real picture tag polyfill - moved default src to
 its own data

---
 usingPictureMarkup/picturePolyfill.js | 72 ++++++++++-----------------
 1 file changed, 27 insertions(+), 45 deletions(-)

diff --git a/usingPictureMarkup/picturePolyfill.js b/usingPictureMarkup/picturePolyfill.js
index d3a0c56..63aac43 100644
--- a/usingPictureMarkup/picturePolyfill.js
+++ b/usingPictureMarkup/picturePolyfill.js
@@ -5,16 +5,9 @@
 	"use strict";
 
 	var timerId,
-		pixelRatio = w.devicePixelRatio || 1,          // The pixel density (2 is for HD aka Retina displays)
+		pixelRatio = Math.ceil(w.devicePixelRatio || 1), // The pixel density (2 is for HD aka Retina displays)
 		mediaQueriesSupported = w.matchMedia && w.matchMedia("only all") !== null && w.matchMedia("only all").matches;
 
-	/**
-	 * Activate picture and source tag support for IE8
-	 */
-
-	document.createElement("picture");
-	document.createElement("source");
-
 
 	/**
 	 * Returns a hash density > src
@@ -23,15 +16,15 @@
 	function getSrcSetHash(srcSetAttribute) {
 		var hash = {},
 			sources = srcSetAttribute.split(',');
- 		
- 		for (var i=0, len=sources.length; i<len; i+=1) {
- 			var srcAndDensity = sources[i].trim().split(' ');
- 			var src = srcAndDensity[0].trim();
- 			var density = (parseInt(srcAndDensity[1], 10) || 1).toString();
- 			hash[density] = src;
- 		}
-
- 		return hash;
+		
+		for (var i=0, len=sources.length; i<len; i+=1) {
+			var srcAndDensity = sources[i].trim().split(' ');
+			var src = srcAndDensity[0].trim();
+			var density = (parseInt(srcAndDensity[1], 10) || 1).toString();
+			hash[density] = src;
+		}
+
+		return hash;
 	}
 
 
@@ -71,25 +64,6 @@
 	}
 
 
-	/**
-	 * Search for the "standard: true" image in the array
-	 * @param dataPicture {element}
-	 * @returns {string}
-	 */
-
-	function getStandardImageFromData(dataPicture) {
-		var dataElement;
-
-		for (var i=0, len=dataPicture.length; i<len; i+=1) {
-			dataElement = dataPicture[i];
-			if (dataElement.standard) {
-				break;
-			}
-		}
-		return getSrcFromSrcSetArray(dataElement.srcset, 0);
-	}
-
-
 	/**
 	 * Set the src attribute of the first image element inside passed pictureElement
 	 * if the image doesn't exist, creates it, sets its alt attribute, and appends it to pictureElement
@@ -155,16 +129,23 @@
 				pictureData = parseSources(pictureElement);
 				// Take the source from the matched media, or standard media
 				// Update the image, or create it
-				createOrUpdateImage(pictureElement, (mediaQueriesSupported) ?
+				createOrUpdateImage(pictureElement, (mediaQueriesSupported && pictureData.length>0) ?
 					getSrcAttributeFromData(pictureData) :
-					getStandardImageFromData(pictureData));
-			// }
+					pictureElement.getAttribute("data-defaultsrc"));
+			//}
 			//catch (e) {
-			//	w.console.log(e);
+				//w.console.log(e);
 			//}
 		}
 	}
 
+	/**
+	 * Private function to call w.picturePolyfill on the whole document
+	 */
+	function picturePolyfillDocument() {
+		w.picturePolyfill(document);
+	}
+
 	/**
 	 * Expose the function to the global environment, if browser is supported, else empty function
 	 * @type {Function}
@@ -174,6 +155,7 @@
 		parsePictures(element || document);
 	};
 
+
 	/**
 	 * Manage resize event calling the parsePictures function
 	 * only if they've passed 100 milliseconds between a resize event and another
@@ -183,16 +165,16 @@
 	if (w.addEventListener) {
 		w.addEventListener('resize', function() {
 			clearTimeout(timerId);
-			timerId = setTimeout(w.picturePolyfill, 100);
+			timerId = setTimeout(picturePolyfillDocument, 100);
 		});
 		w.addEventListener('DOMContentLoaded', function(){
-			w.picturePolyfill();
-			w.removeEventListener('load', w.picturePolyfill);
+			picturePolyfillDocument();
+			w.removeEventListener('load', picturePolyfillDocument);
 		});
-		w.addEventListener('load', w.picturePolyfill);
+		w.addEventListener('load', picturePolyfillDocument);
 	}
 	else if (w.attachEvent) {
-		w.attachEvent('onload', w.picturePolyfill);
+		w.attachEvent('onload', picturePolyfillDocument);
 	}
 
 }(this));
\ No newline at end of file