Merge pull request #25 from WPMedia/master

adamdbradley · adamdbradley · commit fb4914d48498 · 2012-05-31T07:00:16.000-07:00
Simplified changes to fix issues with aspect ratio not being set
diff --git a/demos/index.html b/demos/index.html
@@ -123,6 +123,15 @@ <h3>
 		how foresight.js is updated after page transitions.
 	</p>
 
+	<h3>
+		<a href="parent-element-known-dimension-and-aspect-ratio.html">Demo 12: Parent Known Dimension and Aspect Ratio</a>
+	</h3>
+	<p>
+		This demo shows image-set() CSS can work with pixel css width and an known aspect ratio. 
+		Obviously this will not allow you to specify the height on the URL for dynamic images so 
+		you should set the aspect ratio not to auto.
+	</p>
+
 
 	<h3>
 		<a href="resolve-method.html">foresight.resolve() Public Method</a>
diff --git a/demos/parent-element-known-dimension-and-aspect-ratio.html b/demos/parent-element-known-dimension-and-aspect-ratio.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<head>
+	<title>Foresight.js Demo: With Aspect Ratio and Only One Dimension Known from Parent</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+	<link href="demo.css" type="text/css" rel="stylesheet" />
+
+	<style>
+		article {
+			float:left;
+		}
+		aside {
+			float:right;
+			width:300px;
+		}
+				
+		.fs-img {
+			width:100%;
+			font-family: 'image-set( url(dynamic-images/|dynamic-images/{requestWidth}x{requestHeight}/) )';
+			display: inline-block;
+			border-left: 4px solid yellow;
+		}
+	
+	</style>
+
+	<script src="foresight-debugger.js"></script>
+	<script src="../foresight.js"></script>
+
+</head>
+<body>
+		<section>
+	
+		<h2>
+			Demo: With Aspect Ratio and Only One Dimension Known from Parent
+		</h2>
+
+		<article>
+			<p>
+				This demo shows image-set() CSS can work with pixel css width and an known aspect ratio. 
+				Obviously this will not allow you to specify the height on the URL for dynamic images so your 
+				server side component should determine the aspect ratio or you should set the aspect ratio not to auto.
+			</p>
+			<p>
+				The primary content on the left side take of the available width. 
+				The content on the right side containing the image takes 300px of the available width.
+			</p>
+			<p>
+				Adjusting the width of the browser will request various static images.
+			</p>
+		</article>
+	
+		<aside>
+			<img data-src="http://foresightjs.appspot.com/dynamic-images/dew-on-grass.jpg" data-aspect-ratio="1" class="fs-img">
+			<noscript>
+				<img src="http://foresightjs.appspot.com/dynamic-images/dew-on-grass.jpg">
+			</noscript>
+			<p>
+				Photo by <a href="http://commons.wikimedia.org/wiki/File:Dew_on_grass_Luc_Viatour.jpg">Luc Viatour</a>
+			</p>
+		</aside>
+	
+	</section>
+
+
+	<hr style="clear:both">
+
+
+	<ul>
+		<li><a href="index.html">Demo Homepage</a>
+		<li><a href="https://github.com/adamdbradley/foresight.js">Foresight.js Homepage</a>
+	</ul>
+
+</body>
+</html>
diff --git a/foresight.js b/foresight.js
@@ -57,6 +57,7 @@
 	TRUE = true,
 	FALSE = false,
 	imageSetItemRegex = /url\((?:([a-zA-Z-_0-9{}\?=&\\/.:\s]+)|([a-zA-Z-_0-9{}\?=&\\/.:\s]+)\|([a-zA-Z-_0-9{}\?=&\\/.:\s]+))\)/g,
+	STRIP_UNITS_REGEX =	/[^\d]+/,
 
 	// used to keep track of the progress status for finding foresight 
 	// images in the DOM and connection test results
@@ -233,7 +234,7 @@
 	getDataAttribute = function ( img, attribute, getInt, value ) {
 		// get an <img> element's data- attribute value
 		value = img.getAttribute( 'data-' + attribute );
-		if ( getInt ) {
+		if ( getInt  && value!==null) {
 			if ( !isNaN( value ) ) {
 				return parseInt( value, 10 );
 			}
@@ -510,12 +511,12 @@
 					// If the aspect ratio is set then we will get the other value off the
 					// aspect ratio
 					if( img[ ASPECT_RATIO ] ) {
-						if( img[ WIDTH_UNITS ] ){
-							img[ BROWSER_WIDTH ] = img[ WIDTH_UNITS ];
-							img[ BROWSER_HEIGHT ] =  Math.round( img[ WIDTH_UNITS ] / img[ ASPECT_RATIO ] );
-						} else if( img[ HEIGHT_UNITS ] ){
+						if( img[ HEIGHT_UNITS ] ){						
 							img[ BROWSER_WIDTH ] = Math.round( img[ HEIGHT_UNTIS ] / img[ ASPECT_RATIO ] );
 							img[ BROWSER_HEIGHT ] = img[ HEIGHT_UNITS ];
+						} else {
+							img[ BROWSER_WIDTH ] = img[ WIDTH_UNITS ] || computedWidthValue.replace(STRIP_UNITS_REGEX, "");
+							img[ BROWSER_HEIGHT ] =  Math.round( img[ BROWSER_WIDTH ] / img[ ASPECT_RATIO ] );
 						}
 					} else {
 						img[ BROWSER_WIDTH ] = img[ WIDTH_UNITS ];
