From e1cf277e3e7d2df728886b4ecdde7e0bd394338a Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 22 Nov 2013 00:06:00 +0100
Subject: [PATCH] better use picturefill

---
 Gruntfile.js                  |  5 +--
 _src/_includes/head.html      |  2 ++
 _src/assets/js/app.js         |  0
 _src/assets/js/picturefill.js | 67 +++++++++++++++++++++++++++++++++++
 _src/assets/less/media.less   |  3 +-
 _src/index.html               | 27 ++++++++++----
 6 files changed, 95 insertions(+), 9 deletions(-)
 create mode 100644 _src/assets/js/app.js
 create mode 100644 _src/assets/js/picturefill.js

diff --git a/Gruntfile.js b/Gruntfile.js
index 87b659a2..c0bcf668 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -77,7 +77,8 @@ module.exports = function(grunt){
                 },
                 files: {
                     '<%= config.site %>/<%= config.assets.js %>/kremalicious3.min.js': [
-                        '<%= config.src %>/<%= config.assets.js %>/script.js'
+                        '<%= config.src %>/<%= config.assets.js %>/picturefill.js',
+                        '<%= config.src %>/<%= config.assets.js %>/app.js'
                     ]
                 }
             }
@@ -207,7 +208,7 @@ module.exports = function(grunt){
         'less',
         'cmq',
         'cssmin',
-        //'uglify',
+        'uglify',
         'connect',
         'watch'
     ]);
diff --git a/_src/_includes/head.html b/_src/_includes/head.html
index 55a888ea..e5e85818 100644
--- a/_src/_includes/head.html
+++ b/_src/_includes/head.html
@@ -33,6 +33,8 @@
 	<script data-cfasync="false" src="//use.typekit.com/msu4qap.js"></script>
 	<script data-cfasync="false">try{Typekit.load();}catch(e){}</script>
     
+    <script src="/assets/js/kremalicious3.min.js"></script>
+    
     <!-- Twitter Cards -->
     <meta name="twitter:card" content="summary">
     <meta name="twitter:site" content="@kremaliciouscom">
diff --git a/_src/assets/js/app.js b/_src/assets/js/app.js
new file mode 100644
index 00000000..e69de29b
diff --git a/_src/assets/js/picturefill.js b/_src/assets/js/picturefill.js
new file mode 100644
index 00000000..2115a8e9
--- /dev/null
+++ b/_src/assets/js/picturefill.js
@@ -0,0 +1,67 @@
+/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with span elements). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
+
+(function( w ){
+
+	// Enable strict mode
+	"use strict";
+
+	w.picturefill = function() {
+		var ps = w.document.getElementsByTagName( "span" );
+
+		// Loop the pictures
+		for( var i = 0, il = ps.length; i < il; i++ ){
+			if( ps[ i ].getAttribute( "data-picture" ) !== null ){
+
+				var sources = ps[ i ].getElementsByTagName( "span" ),
+					matches = [];
+
+				// See if which sources match
+				for( var j = 0, jl = sources.length; j < jl; j++ ){
+					var media = sources[ j ].getAttribute( "data-media" );
+					// if there's no media specified, OR w.matchMedia is supported 
+					if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
+						matches.push( sources[ j ] );
+					}
+				}
+
+			// Find any existing img element in the picture element
+			var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
+
+			if( matches.length ){
+				var matchedEl = matches.pop();
+				if( !picImg || picImg.parentNode.nodeName === "NOSCRIPT" ){
+					picImg = w.document.createElement( "img" );
+					picImg.alt = ps[ i ].getAttribute( "data-alt" );
+				}
+				else if( matchedEl === picImg.parentNode ){
+					// Skip further actions if the correct image is already in place
+					continue;
+				}
+
+				picImg.src =  matchedEl.getAttribute( "data-src" );
+				matchedEl.appendChild( picImg );
+				picImg.removeAttribute("width");
+				picImg.removeAttribute("height");
+			}
+			else if( picImg ){
+				picImg.parentNode.removeChild( picImg );
+			}
+		}
+		}
+	};
+
+	// Run on resize and domready (w.load as a fallback)
+	if( w.addEventListener ){
+		w.addEventListener( "resize", w.picturefill, false );
+		w.addEventListener( "DOMContentLoaded", function(){
+			w.picturefill();
+			// Run once only
+			w.removeEventListener( "load", w.picturefill, false );
+		}, false );
+		w.addEventListener( "load", w.picturefill, false );
+	}
+	else if( w.attachEvent ){
+		w.attachEvent( "onload", w.picturefill );
+	}
+
+}( this ));
\ No newline at end of file
diff --git a/_src/assets/less/media.less b/_src/assets/less/media.less
index d813c904..652502ad 100644
--- a/_src/assets/less/media.less
+++ b/_src/assets/less/media.less
@@ -31,7 +31,8 @@ a.linkedImage img {
 	border-color: @link-color-hover;
 }
 
-.teaser {
+.teaser,
+.teaser img {
     margin-top: @line-height-computed*1.5;
     margin-bottom: @line-height-computed*1.5;
 }
diff --git a/_src/index.html b/_src/index.html
index 1a9de97c..cd225093 100644
--- a/_src/index.html
+++ b/_src/index.html
@@ -31,9 +31,17 @@ description: 'Blog of designer & developer Matthias Kretschmann'
             <a class="photoPost" href="{{ post.url }}">
             	<figure class="hmedia">
                     
-            		<img 
-                        src="/media/640/{{ post.image }}"
-                        srcset="/media/1280/{{ post.image }} 2x" />
+                    <span data-picture data-alt="">
+                        <span data-src="/media/320/{{ post.image }}"></span>
+                        <span data-src="/media/640/{{ post.image }}"   data-media="(min-device-pixel-ratio: 1.5)"></span>
+                        <span data-src="/media/640/{{ post.image }}"   data-media="(min-width: 500px)"></span>
+                        <span data-src="/media/1280/{{ post.image }}"  data-media="(min-width: 640px) and (min-device-pixel-ratio: 2.0)"></span>
+
+                        <noscript>
+                            <img src="small.jpg">
+                        </noscript>
+                    </span>
+                    
             		<figcaption class="entry-title fn">{{ post.title }}</figcaption>
             		exif
             	</figure>
@@ -52,9 +60,16 @@ description: 'Blog of designer & developer Matthias Kretschmann'
                 
                 {% if post.image %}
                     <a href="{{ post.url }}">
-                        <img class="teaser" 
-                            src="/media/640/{{ post.image }}"
-                            srcset="/media/1280/{{ post.image }} 2x" />
+                        <span class="teaser" data-picture data-alt="">
+                            <span data-src="/media/320/{{ post.image }}"></span>
+                            <span data-src="/media/640/{{ post.image }}"   data-media="(min-device-pixel-ratio: 1.5)"></span>
+                            <span data-src="/media/640/{{ post.image }}"   data-media="(min-width: 500px)"></span>
+                            <span data-src="/media/1280/{{ post.image }}"  data-media="(min-width: 640px) and (min-device-pixel-ratio: 2.0)"></span>
+
+                            <noscript>
+                                <img src="small.jpg">
+                            </noscript>
+                        </span>
                     </a>
                 {% endif %}