Merge pull request #18 from jmuthad/aspect_ratio_work

Aspect ratio work
adamdbradley · Apr 26, 2012 · 365948a · 365948a
2 parents 6dbeded + 4a8d01c
commit 365948a
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 10 deletions.
diff --git a/demos/parent-percentage-unknown-image-width.html b/demos/parent-percentage-unknown-image-width.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html>
+<head>
+	<title>Foresight.js Demo: Parent Percentage with unknown Image Width</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;
+			width:60%;
+		}
+		aside {
+			float:right;
+			width:40%;
+		}
+
+		.fs-img {
+			width:100%;
+			font-family: 'image-set( url(dynamic-images/|dynamic-images/{requestWidth}) 1x)';
+			display:none;
+			border-left:4px solid yellow;
+		}
+
+	</style>
+
+	<script src="foresight-debugger.js"></script>
+	<script src="../foresight.js"></script>
+
+</head>
+<body>
+
+	<section>
+
+		<h2>
+			Parent Percentage with Unknown Image Width
+		</h2>
+
+		<article>
+			<p>
+				This demo shows image-set() CSS can work with percentage css width and an unknown 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 60% of the available width. 
+				The content on the right side containing the image takes 40% 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/px-wright-flyer.jpg" data-aspect-ratio="auto" class="fs-img">
+			<noscript>
+				<img src="http://foresightjs.appspot.com/dynamic-images/1024px-wright-flyer.jpg">
+			</noscript>
+			<p>
+				Photo by <a href="http://commons.wikimedia.org/wiki/File:Wrightflyer.jpg">John T. Daniels</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
@@ -38,6 +38,7 @@
 	DIMENSION_HEIGHT = 'height',
 	WIDTH_UNITS = 'widthUnits',
 	HEIGHT_UNITS = 'heightUnits',
+	ASPECT_RATIO = 'aspectRatio',
 	APPLIED_IMAGE_SET_ITEM = 'appliedImageSetItem',
 	SCALE = 'scale',
 	SCALE_ROUNDED = 'scaleRounded',
@@ -99,9 +100,15 @@
 			// always set the img's data-width & data-height attributes so we always know its aspect ratio
 			img[ WIDTH_UNITS ] = getDataAttribute( img, DIMENSION_WIDTH, TRUE );
 			img[ HEIGHT_UNITS ] = getDataAttribute( img, DIMENSION_HEIGHT, TRUE );
+
+			// if the aspect ratio was set then let's use that
+			var tmpAspectRatio = getDataAttribute( img, 'aspect-ratio', FALSE);
+			img[ ASPECT_RATIO ] = tmpAspectRatio === 'auto' 
+				? tmpAspectRatio 
+				: ( !isNaN( tmpAspectRatio ) ? parseInt( tmpAspectRatio, 10 ) : 0 );
 
 			 // missing required info
-			if ( !img[ DEFAULT_SRC ] || !img[ WIDTH_UNITS ] || !img[ HEIGHT_UNITS ] ) continue;
+			if ( !img[ DEFAULT_SRC ] || (( !img[ WIDTH_UNITS ] || !img[ HEIGHT_UNITS ] ) && !img[ ASPECT_RATIO ])) continue;
 
 			img[ HIGH_RES_SRC ] = getDataAttribute( img, 'high-resolution-src' );
 			img.orgClassName = ( img.className ? img.className : '' );
@@ -317,13 +324,13 @@
 
 		if ( img[ APPLIED_IMAGE_SET_ITEM ][ SCALE ] > 1 && img[ APPLIED_IMAGE_SET_ITEM ][ BANDWIDTH ] === 'high' ) {
 			// hi-res is good to go, figure out our request dimensions
-			imgRequestWidth = Math.round( img[ BROWSER_WIDTH ] * img[ APPLIED_IMAGE_SET_ITEM ][ SCALE ] );
-			imgRequestHeight = Math.round( img[ BROWSER_HEIGHT ] * img[ APPLIED_IMAGE_SET_ITEM ][ SCALE ] );
+			imgRequestWidth = img[ BROWSER_WIDTH ] === undefined ? 'auto' : Math.round( img[ BROWSER_WIDTH ] * img[ APPLIED_IMAGE_SET_ITEM ][ SCALE ] );
+			imgRequestHeight = img[ BROWSER_HEIGHT ] === undefined ? 'auto' : Math.round( img[ BROWSER_HEIGHT ] * img[ APPLIED_IMAGE_SET_ITEM ][ SCALE ] );
 			foresight.hiResEnabled = TRUE;
 		} else {
 			// no-go on the hi-res, go with the default size
-			imgRequestWidth = img[ BROWSER_WIDTH ];
-			imgRequestHeight = img[ BROWSER_HEIGHT ];
+			imgRequestWidth = img[ BROWSER_WIDTH ] === undefined ? 'auto' : img[ BROWSER_WIDTH ];
+			imgRequestHeight = img[ BROWSER_HEIGHT ] === undefined ? 'auto' : img[ BROWSER_HEIGHT ];
 			foresight.hiResEnabled = FALSE;
 		}
 
@@ -476,8 +483,21 @@
 				// assign the browser pixels to equal the width and height units
 				// this only needs to happen the first time
 				img.unitType = 'pixel';
-				img[ BROWSER_WIDTH ] = img[ WIDTH_UNITS ];
-				img[ BROWSER_HEIGHT ] = img[ HEIGHT_UNITS ];
+				// If the aspect ratio is set then we will get the other value off the
+				// aspect ratio 'auto' is not a valid aspect ratio for non percent based 
+				// widths so we are going to ignore it if the value is that
+				if( img[ ASPECT_RATIO ] && img[ ASPECT_RATIO ] != 'auto' ) {
+					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 ] ){
+						img[ BROWSER_WIDTH ] = Math.round( img[ HEIGHT_UNTIS ] / img[ ASPECT_RATIO ] );
+						img[ BROWSER_HEIGHT ] = img[ HEIGHT_UNITS ];
+					}
+				} else {
+					img[ BROWSER_WIDTH ] = img[ WIDTH_UNITS ];
+					img[ BROWSER_HEIGHT ] = img[ HEIGHT_UNITS ];
+				}
 			}
 		}
 
@@ -488,14 +508,24 @@
 			// this should be re-ran every time the window width changes
 			img.computedWidth = getComputedPixelWidth( img );
 			img[ BROWSER_WIDTH ] = img.computedWidth;
-			img[ BROWSER_HEIGHT ] = Math.round( img[ HEIGHT_UNITS ] * ( img.computedWidth / img[ WIDTH_UNITS ] ) );
-
-			if ( navigator.appVersion.indexOf( 'MSIE' ) > -1 ) {
+
+
+			if( img[ ASPECT_RATIO ] != 'auto' ){
+				//if aspect ratio is auto then we will not set the height in the request off the width
+				img[ BROWSER_HEIGHT ] = Math.round( img[ BROWSER_WIDTH ] / img[ ASPECT_RATIO ] );
+			} else if(img[ HEIGHT_UNITS ]) {
+				//If we set the height to fixed then use that for the request height
+				img[ BROWSER_HEIGHT ] = Math.round( img[ HEIGHT_UNITS ] * ( img.computedWidth / img[ WIDTH_UNITS ] ) );
+			}
+
+			if( img[ BROWSER_HEIGHT ] && navigator.appVersion.indexOf( 'MSIE' ) > -1 ) {
 				// manually assign what the calculated height pixels should be
 				// do this only for our friend IE, the rest of the browsers can gracefully
 				// resize of the image without manually setting the height in pixels
 				img.style.height = img[ BROWSER_HEIGHT ] + 'px';
 			}
+
+
 		}
 	},