First commit

verlok · Mar 3, 2014 · 671c566 · 671c566
commit 671c566
Show file tree

Hide file tree

Showing 18 changed files with 162 additions and 0 deletions.
diff --git a/external/matchMedia.js b/external/matchMedia.js
@@ -0,0 +1,46 @@
+/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */
+
+window.matchMedia || (window.matchMedia = function() {
+    "use strict";
+
+    // For browsers that support matchMedium api such as IE 9 and webkit
+    var styleMedia = (window.styleMedia || window.media);
+
+    // For those that don't support matchMedium
+    if (!styleMedia) {
+        var style       = document.createElement('style'),
+            script      = document.getElementsByTagName('script')[0],
+            info        = null;
+
+        style.type  = 'text/css';
+        style.id    = 'matchmediajs-test';
+
+        script.parentNode.insertBefore(style, script);
+
+        // 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
+        info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
+
+        styleMedia = {
+            matchMedium: function(media) {
+                var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
+
+                // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
+                if (style.styleSheet) {
+                    style.styleSheet.cssText = text;
+                } else {
+                    style.textContent = text;
+                }
+
+                // Test if media query is true or false
+                return info.width === '1px';
+            }
+        };
+    }
+
+    return function(media) {
+        return {
+            matches: styleMedia.matchMedium(media || 'all'),
+            media: media || 'all'
+        };
+    };
+}());
diff --git a/img/1024x1024.gif b/img/1024x1024.gif
diff --git a/img/1024x1024x2.gif b/img/1024x1024x2.gif
diff --git a/img/1280x1280.gif b/img/1280x1280.gif
diff --git a/img/1280x1280x2.gif b/img/1280x1280x2.gif
diff --git a/img/1440x1440.gif b/img/1440x1440.gif
diff --git a/img/1440x1440x2.gif b/img/1440x1440x2.gif
diff --git a/img/1920x1920.gif b/img/1920x1920.gif
diff --git a/img/1920x1920x2.gif b/img/1920x1920x2.gif
diff --git a/img/320x320.gif b/img/320x320.gif
diff --git a/img/320x320x2.gif b/img/320x320x2.gif
diff --git a/img/480x480.gif b/img/480x480.gif
diff --git a/img/480x480x2.gif b/img/480x480x2.gif
diff --git a/img/768x768.gif b/img/768x768.gif
diff --git a/img/768x768x2.gif b/img/768x768x2.gif
diff --git a/index.css b/index.css
@@ -0,0 +1,8 @@
+span, img, a {
+	display: block;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>Responsive Images - by Andrea Verlicchi</title>
+	<link rel="stylesheet" href="index.css"/>
+</head>
+<body>
+	<a href="#">
+		<picture data-alt="A placeholder">
+			<source srcset="img/320x320.gif, img/320x320x2.gif 2x">
+			<source media="(min-width: 321px)"  srcset="img/480x480.gif,   img/480x480x2.gif 2x">
+			<source media="(min-width: 481px)"  srcset="img/768x768.gif,   img/768x768x2.gif 2x">
+			<source media="(min-width: 769px)"  srcset="img/1024x1024.gif, img/1024x1024x2.gif 2x" data-default>
+			<source media="(min-width: 1025px)" srcset="img/1280x1280.gif, img/1280x1280x2.gif 2x">
+			<source media="(min-width: 1281px)" srcset="img/1440x1440.gif, img/1440x1440x2.gif 2x">
+			<source media="(min-width: 1441px)" srcset="img/1920x1920.gif, img/1920x1920x2.gif 2x">
+			<noscript>
+				<img src="img/1280x1280.gif" alt="A placeholder">
+			</noscript>
+		</picture>
+	</a>
+	<script src="external/matchMedia.js"></script>
+	<script src="picturePolyfill.js"></script>
+</body>
+</html>
diff --git a/picturePolyfill.js b/picturePolyfill.js
@@ -0,0 +1,82 @@
+function responsiveImages() {
+
+	var pictureElements = document.getElementsByTagName('picture'),
+		pictureElement,
+		imgElement, srcAttribute, i,
+		pixelRatio = window.devicePixelRatio || 1;
+
+	// Parse source elements and call parseSourceElement on each one
+	function parseSourceElements(sourceElements, ignoreMedia) {
+		var matchedSrc = null, i;
+		for (i=0; i<sourceElements.length; i+=1) {
+			// Get the right srcSet based on media queries
+			matchedSrc = parseSourceElement(sourceElements[i], ignoreMedia) || matchedSrc;
+		}
+		return matchedSrc;
+	}
+
+	// Parse source element and get the proper src attribute
+	function parseSourceElement(sourceElement, ignoreMedia) {
+		var media, i, ratio, srcSetElements, srcSetElement, matchedSrc, srcSetAttribute;
+		media = sourceElement.getAttribute('media');
+		if (ignoreMedia || !media || matchMedia(media).matches) {
+			srcSetAttribute = sourceElement.getAttribute('srcset');
+			// Get the right source based on pixel ratio
+			srcSetElements = srcSetAttribute.split(',');
+			for (i=0; i<srcSetElements.length; i+=1) {
+				srcSetElement = srcSetElements[i].trim().split(' ');
+				ratio = parseInt(srcSetElement[1]) || 1;
+				if (ratio === pixelRatio) {
+					matchedSrc = srcSetElement[0];
+				}
+			}
+		}
+		return matchedSrc;
+	}
+
+	function getOrCreateImage(picture) {
+		var imageElements, imageElement;
+		imageElements = picture.getElementsByTagName('img');
+
+		// If image already exist, return it
+		if (imageElements.length) {
+			imageElement = imageElements[0];
+		}
+		// Else create the image
+		else {
+			imageElement = document.createElement('img');
+			imageElement.setAttribute('alt', picture.getAttribute('data-alt'));
+			picture.appendChild(imageElement);
+		}
+		return imageElement;
+	}
+
+	// Loop through all picture elements
+	for (i=0; i<pictureElements.length; i+=1) {
+
+		pictureElement = pictureElements[i];
+
+		// If browser doesn't support matchMedia - NOTE: Paul Irish's polyfill is provided in "external/matchMedia.js"
+		srcAttribute = (false && window.matchMedia) ?
+			parseSourceElements(pictureElement.getElementsByTagName('source'), false) :
+			parseSourceElement(pictureElement.querySelector('source[data-default]'), true);
+
+		// Fallback image
+		// TODO: get from the options, to be passed in from an init function
+		srcAttribute = srcAttribute || "http://placehold.it/1x1";
+
+		// Select the image, or create it
+		imgElement = getOrCreateImage(pictureElement);
+
+		// Set the img source
+		imgElement.setAttribute('src', srcAttribute);
+	}
+}
+
+// On resize
+window.addEventListener('resize', function() {
+	responsiveImages();
+});
+
+// Execute the function right at page landing
+responsiveImages();