all in.

scottjehl · Feb 21, 2012 · 77defd7 · 77defd7
commit 77defd7
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,15 @@
+# Picturefill
+
+A crude polyfill for proposed behavior of the picture element, which does not yet exist, but should. :)
+
+* Author: Scott Jehl (c) 2012
+* License: MIT/GPLv2
+* Notes: For active discussion of the picture element, see [http://www.w3.org/community/respimg/](http://www.w3.org/community/respimg/). While this code does work, it is intended to be used only for example purposes until either:
+
+	A) A W3C Candidate Recommendation for <picture> is released
+		
+	B) A major browser implements <picture>
+
+Demo URL: [http://scottjehl.github.com/picturefill/](http://scottjehl.github.com/picturefill/)
+
+Note: The demo only polyfills picture support for browsers that support CSS3 media queries, but it includes the [matchMedia polyfill](https://github.com/paulirish/matchMedia.js/) for media-query-supporting browsers that don't have matchMedia.
diff --git a/external/matchmedia.js b/external/matchmedia.js
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset=utf-8 />
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+		<title>Picturefill</title>
+		<style>
+			body { font-family: sans-serif }
+			img {  max-width: 100% }
+		</style>
+	</head>
+	<body>
+
+		<h1>Picturefill: A &lt;picture&gt; element polyfill</h1>
+
+		<p>For more info: <a href="http://github.com/scottjehl/picturefill">see project home.</a></p>
+
+		<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
+			<!-- smallest size first - no @media qualifier -->
+			<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_m.jpg">
+			<!-- medium size - send to viewport widths 400px wide and up -->
+			<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5.jpg" media="(min-width: 400px)">
+			<!-- large size - send to viewport widths 800px wide and up -->
+			<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_z.jpg" media="(min-width: 800px)">
+			<!-- extra large size - send to viewport widths 1000px wide and up -->
+			<source src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_b.jpg" media="(min-width: 1000px)">
+			<!-- extra large size - send to viewport widths 1300px wide and up -->
+			<source src="http://farm8.staticflickr.com/7144/6547286841_c6160b34e2_o.jpg" media="(min-width: 1200px)">
+			<!-- Fallback content for non-JS or non-media-query-supporting browsers. Same img src smallest size. -->
+			<img src="http://farm8.staticflickr.com/7144/6547286841_635bbd97e5_m.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
+		</picture>
+
+		<script src="external/matchmedia.js"></script>
+		<script src="picturefill.js"></script>
+	</body>
+</html>
diff --git a/picturefill.js b/picturefill.js
@@ -0,0 +1,51 @@
+/*
+	Picturefill - a crude polyfill for proposed behavior of the picture element, which does not yet exist, but should. :)
+	* Author: Scott Jehl, 2012
+	* License: MIT/GPLv2
+	* Notes: 
+	  * For active discussion of the picture element, see http://www.w3.org/community/respimg/
+	  * While this code does work, it is intended to be used only for example purposes until either:
+		A) A W3C Candidate Recommendation for <picture> is released
+		B) A major browser implements <picture>
+*/ 
+(function( w ){
+
+	// requires media query supporting browser with matchMedia support (polyfill available)
+	if( !w.matchMedia || !w.matchMedia( "only all" ) ){
+		return;
+	}
+
+	w.picturefill = function(){
+		var ps = w.document.getElementsByTagName( "picture" );
+
+		// Loop the pictures
+		for( var i = 0, il = ps.length; i < il; i++ ){
+			var sources = ps[ i ].getElementsByTagName( "source" ),
+				matches = [];
+
+			// See if which sources match	
+			for( var j = 0, jl = sources.length; j < jl; j++ ){
+				if( w.matchMedia( sources[ j ].getAttribute( "media" ) ).matches ){
+					matches.push( sources[ j ] );
+				}
+			}
+
+			// Set fallback img element src from that of last matching source element
+			if( matches.length ){
+				ps[ i ].getElementsByTagName( "img" )[ 0 ].src =  matches.pop().getAttribute( "src" );
+			}
+		}
+	}
+
+	// Run on resize
+	if( w.addEventListener ){
+		w.addEventListener( "resize", picturefill, false );
+	}
+	else if( w.addEvent ){
+		w.addEvent( "onresize", picturefill );
+	}
+
+	// Run when DOM is ready
+	picturefill();
+
+})( this );