Merge branch 'master' into gh-pages

verlok · Mar 15, 2014 · b73f798 · b73f798
2 parents 2ab23c6 + fa207ec
commit b73f798
Show file tree

Hide file tree

Showing 13 changed files with 250 additions and 195 deletions.
diff --git a/bower.json b/bower.json
@@ -1,11 +1,31 @@
 {
-  "name": "pictyrePolyfill",
-  "version": "1.0.1",
-  "main": "",
+  "name": "picturePolyfill",
+  "version": "1.0.0",
+  "main": "picturePolyfill.js",
   "ignore": [
     ".idea",
-    ".gitignore"
+    ".gitignore",
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
   ],
-  "dependencies": {},
-  "devDependencies": {}
-}
+  "homepage": "https://github.com/verlok/picturePolyfill",
+  "authors": [
+    "Andrea Verlicchi <[email protected]>"
+  ],
+  "description": "The real <picture> polyfill to use responsive images today",
+  "keywords": [
+    "picture",
+    "polyfill",
+    "picturefill",
+    "responsive",
+    "images",
+    "responsive",
+    "design",
+    "responsive",
+    "images"
+  ],
+  "license": "MIT"
+}
diff --git a/index.css b/index.css
diff --git a/index.html b/index.html
@@ -3,7 +3,19 @@
 <head>
 	<meta charset="UTF-8">
 	<title>Responsive images using verlok/picturePolyfill - by Andrea Verlicchi</title>
-	<link rel="stylesheet" href="index.css"/>
+	<meta name="viewport" content="width=device-width">
+	<style>
+		body { margin: 0; padding: 0; text-align: center; }
+		.intro { padding: 0 16px; }
+		.outro { padding: 1px 16px; clear: both; }
+		.element a, .element span, .element img { display: block; }
+		img { width: 100%; height: auto; border: 0; }
+		.element h2 { padding: 0 16px; }
+		.element:hover h2 { text-decoration: underline; }
+		@media screen and (min-width: 481px) {
+			.element { float: left; width: 50%; }
+		}
+	</style>
 </head>
 <body>
 	<div id="container">

diff --git a/picturePolyfill.js b/picturePolyfill.js
@@ -5,7 +5,7 @@
 	"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;
 
 
@@ -22,7 +22,6 @@
 		if (typeof arrayOrString === 'string') {
 			return arrayOrString;
 		}
-		position = Math.ceil(position);
 		while (arrayOrString[position]===undefined && position>0) {
 			position-=1;
 		}
@@ -98,7 +97,7 @@
 	 * @param element the starting element to parse DOM into. If not passed, it parses the whole document.
 	 */
 
-	function parseDOM(element) {
+	function parseDOMTree(element) {
 		var pictureData, imageHolder,
 			imageHolders = element.querySelectorAll('[data-picture]');
 
@@ -119,34 +118,42 @@
 		}
 	}
 
+	/**
+	 * 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}
 	 */
 
 	w.picturePolyfill = (!document.querySelectorAll) ? function(){} : function(element){
-		parseDOM(element || document);
+		parseDOMTree(element || document);
 	};
 
+
 	/**
-	 * Manage resize event calling the parseDOM function
+	 * Manage resize event calling the parseDOMTree function
 	 * only if they've passed 100 milliseconds between a resize event and another
 	 * to avoid the script to slower the browser on animated resize or browser edge dragging
 	 */
 
 	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));
diff --git a/picturePolyfill.min.js b/picturePolyfill.min.js
diff --git a/tests/index.html b/tests/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>Responsive images with picturePolyfill - by Andrea Verlicchi</title>
+	<meta name="viewport" content="width=device-width">
+	<style>
+		body { margin: 0; padding: 0; text-align: center; }
+		.element a, .element span, .element img { display: block; }
+		img { width: 100%; height: auto; border: 0; }
+		.element h2 { padding: 0 16px; }
+		.element:hover h2 { text-decoration: underline; }
+	</style>
+</head>
+<body>
+	<div id="container">
+		<h1>picturePolyfill Test</h1>
+		<p>To test script solidness.</p>
+		<div class="element">
+			<h2>Most complex usage</h2>
+			<span data-alt="A beautiful image" data-picture='[
+				{"srcset": "../img/320x320.gif"},
+				{"srcset": ["../img/768x768.gif", "../img/768x768x2.gif"], "media": "(min-width: 321px)"},
+				{"srcset": ["../img/1024x1024.gif", "../img/1024x1024x2.gif"], "media": "(min-width: 769px)"},
+				{"srcset": ["../img/1280x1280.gif", "../img/1280x1280x2.gif"], "media": "(min-width: 1025px)"},
+				{"srcset": ["../img/1440x1440.gif", "../img/1440x1440x2.gif"], "media": "(min-width: 1281px)"},
+				{"srcset": ["../img/1920x1920.gif", "../img/1920x1920x2.gif"], "media": "(min-width: 1441px)"}
+		    ]'>
+				<noscript>
+					<img src="../img/1280x1280.gif" alt="A beautiful image"/>
+				</noscript>
+			</span>
+		</div>
+	</div>
+	<script src="../external/matchMedia.js"></script>
+	<script src="../picturePolyfill.js"></script>
+</body>
+</html>
diff --git a/tests/picturefill_vs_picturePolyfill.html b/tests/picturefill_vs_picturePolyfill.html
@@ -1,10 +1,18 @@
 <!doctype html>
 <html lang="en">
 <head>
-<title>Hey</title>
+	<title>Hey</title>
+	<style>
+		body { margin: 0; padding: 0; text-align: center; }
+		img { width: 100%; height: auto; border: 0; }
+	</style>
 </head>
 <body>
 
+	<h1>Picturefill vs picturePolyfill performance test</h1>
+
+	<p>This test is published in jsPerf: <a href="http://jsperf.com/picturefill-vs-picturepolyfill-performance-test">picturefill vs picturePolyfill performance test</a></p>
+
 	<!-- Picturefill markup -->
 	<span data-picturefill data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
 		<span data-src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=320"></span>

diff --git a/tests/test_pic_ie8.html b/tests/test_pic_ie8.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>Responsive images with picturePolyfill - by Andrea Verlicchi</title>
+	<style>
+		body { margin: 0; padding: 0; text-align: center; }
+		.intro { padding: 0 16px; }
+		.outro { padding: 1px 16px; clear: both; }
+		.element a, .element span, .element img { display: block; }
+		img { width: 100%; height: auto; border: 0; }
+		.element h2 { padding: 0 16px; }
+		.element:hover h2 { text-decoration: underline; }
+		@media screen and (min-width: 481px) {
+			.element { float: left; width: 50%; }
+		}
+	</style>
+</head>
+<body>
+	<div id="container">
+		<div class="intro">
+			<h1>Responsive images using PicturePolyfill - Demo</h1>
+			<p>The following link contains two <strong>responsive images</strong> created using a <code>&lt;span&gt;</code> element, inline JSON (instead of <code>&lt;source&gt;</code> markup), and the <a href="https://github.com/verlok/picturePolyfill">picturePolyfill</a> script.</p>
+		</div>
+		<div class="element">
+			<h2>With HD (Retina) display support</h2>
+			<a href="#someLink1">
+				<picture data-alt="A beautiful responsive image">
+					<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=480, http://demo.api.pixtulate.com/demo/large-2.jpg?w=960 2x"/>
+					<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=512, http://demo.api.pixtulate.com/demo/large-2.jpg?w=1024 2x" media="(min-width: 481px)"/>
+					<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=960, http://demo.api.pixtulate.com/demo/large-2.jpg?w=1920 2x" media="(min-width: 1025px)"/>
+					<noscript><img src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=512" alt="A beautiful responsive image"/></noscript>
+				</picture>
+			</a>
+		</div>
+		<div class="element">
+			<h2>Without HD (Retina) display support</h2>
+			<a href="#someLink2">
+				<picture id="second" data-alt="A beautiful responsive image">
+					<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=480"/>
+					<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=512" media="(min-width: 481px)"/>
+					<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=960" media="(min-width: 1025px)"/>
+					<noscript>
+						<img src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=512" alt="A beautiful responsive image"/>
+					</noscript>
+				</picture>
+			</a>
+		</div>
+		<div class="outro">
+			<p>Real time server side scaling is provided by <a href="http://www.pixtulate.com">Pixtulate</a>.</p>
+		</div>
+	</div>
+	<script>
+
+		(function(){
+
+			var picture;
+
+			function replacePictureWithPictureWithImg(picture, imgSrc) {
+				var newImage = document.createElement("img"),
+					newPicture = document.createElement("picture");
+				newImage.setAttribute('src', imgSrc);
+				newPicture.appendChild(newImage);
+				picture.parentNode.replaceChild(newPicture, picture);
+			}
+
+			function updateImgSrcOrReplacePicture(picture, imgSrc) {
+				var imgs = picture.getElementsByTagName("img");
+				if (imgs.length === 0) {
+					replacePictureWithPictureWithImg(picture, imgSrc);
+				}
+				else {
+					imgs[0].setAttribute("img", imgSrc);
+				}
+			}
+
+			var appendImageIsAllowed, pictures;
+
+			pictures = document.getElementsByTagName("picture");
+
+			for (var i=0, len=pictures.length; i<len; i+=1) {
+				picture = pictures[i];
+				replacePictureWithPictureWithImg(picture, 'http://www.placehold.it/500x500');
+			}
+
+			picture = pictures[1];
+			replacePictureWithPictureWithImg(picture, 'http://www.placehold.it/500x500/f00ba5');
+
+		}());
+
+	</script>
+</body>
+</html>
diff --git a/tests/tests.html b/tests/tests.html
@@ -3,7 +3,14 @@
 <head>
 	<meta charset="UTF-8">
 	<title>Responsive images with picturePolyfill - by Andrea Verlicchi</title>
-	<link rel="stylesheet" href="../index.css"/>
+	<meta name="viewport" content="width=device-width">
+	<style>
+		body { margin: 0; padding: 0; text-align: center; }
+		.element a, .element span, .element img { display: block; }
+		img { width: 100%; height: auto; border: 0; }
+		.element h2 { padding: 0 16px; }
+		.element:hover h2 { text-decoration: underline; }
+	</style>
 </head>
 <body>
 	<div id="container">