1 files changed, 148 insertions, 0 deletions
diff --git a/includes/js/dojox/grid/tests/test_yahoo_images.html b/includes/js/dojox/grid/tests/test_yahoo_images.html
new file mode 100644
index 0000000..fbab070
--- /dev/null
+++ b/includes/js/dojox/grid/tests/test_yahoo_images.html
@@ -0,0 +1,148 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+	<title>dojox.Grid - Image Search Test</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
+	<style>
+		@import "../_grid/Grid.css";
+		body {
+			font-size: 0.9em;
+			font-family: Geneva, Arial, Helvetica, sans-serif;
+		}
+		.grid {
+			height: 30em;
+			width: 51em;
+			border: 1px solid silver;
+		}
+		#info { width: 700px; }
+	</style>
+	<script type="text/javascript" src="../../../dojo/dojo.js" 
+		djConfig="debugAtAllCosts: false, isDebug:false, parseOnLoad: true">
+	</script>
+	<script type="text/javascript">
+		dojo.require("dojox.grid.Grid");
+		dojo.require("dojo.parser");
+	</script>
+	<script type="text/javascript" src="yahooSearch.js"></script>	
+	<script type="text/javascript">
+		// model fields
+		imageFields = [
+			{ name: 'Title', na: '' }, 
+			{ name: 'Thumbnail', na: ''},
+			{ name: 'Summary', na: '' },
+			{ name: 'Url', na: '' },
+			{ name: 'FileSize', na: ''},
+			{ name: 'Height', na: ''},
+			{ name: 'Width', na: ''}
+		];
+		// create data model
+		var model = new dojox.grid.data.yahooSearch(imageFields, null, "searchInput");
+		model.url = 'http://search.yahooapis.com/ImageSearchService/V1/imageSearch';
+		model.observer(this);
+		
+		// report some model send/receive status
+		model.onSend = function(inParams){
+			dojo.byId('sendInfo').innerHTML = dojo.string.substitute(
+				'Request rows ${0} to ${1}.&nbsp&nbsp;',
+				[inParams.start, inParams.start + inParams.results -1]
+			);
+		}
+		model.onReceive = function(inData) {
+			dojo.byId('receiveInfo').innerHTML = dojo.string.substitute(
+				'Receive rows ${0} to ${1}.&nbsp&nbsp;', 
+				[
+					inData.firstResultPosition, 
+					inData.firstResultPosition + inData.totalResultsReturned-1
+				]
+			);
+		}
+
+
+		// Define grid structure
+		// remove the height from the header image cell / row cells have a default height so there's less adjustment when thumb comes in.
+		beforeImageRow = function(inRowIndex, inSubRows){
+			inSubRows[0].hidden = (inRowIndex == -1);
+		}
+		
+		var imageLayout = [ 
+			{ onBeforeRow: beforeImageRow,
+				cells: [
+					[	{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, field: 3, extraField: 1, formatter: formatImage },
+						{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, field: 3, extraField: 1, formatter: formatImage },
+						{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, field: 3, extraField: 1, formatter: formatImage },
+						{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, field: 3, extraField: 1, formatter: formatImage }
+					]
+			]}
+		];
+		
+		// Create grid subclass to function as we need to display images only.
+		// adds indirection between model row and grid row.
+		dojo.declare("dojox.ImageGrid", dojox.Grid, {
+			postCreate: function() {
+				this.inherited(arguments);
+				this.modelDatumChange = this.modelRowChange;
+				this.colCount = this.layout.cells.length;
+			},
+			getDataRowIndex: function(inCell, inRowIndex) {
+				var r = inCell.index + Math.floor(inRowIndex * this.colCount);
+				return r;
+			},
+			// called in cell context
+			get: function(inRowIndex) {
+				var r = this.grid.getDataRowIndex(this, inRowIndex);
+				return dojox.Grid.prototype.get.call(this, r);
+			},
+			modelAllChange: function(){
+				this.rowCount = Math.ceil(this.model.getRowCount() / this.colCount);
+				this.updateRowCount(this.rowCount);
+			},
+			modelRowChange: function(inData, inRowIndex) {
+				if(
+					(inRowIndex % this.colCount == this.colCount - 1)||
+					(inRowIndex == this.model.count - 1)
+				){
+					this.updateRow(Math.floor(inRowIndex / this.colCount));
+				}
+			}
+		});
+		
+		getCellData = function(inCell, inRowIndex, inField) {
+			var m = inCell.grid.model, r = inCell.grid.getDataRowIndex(inCell, inRowIndex);
+			return m.getDatum(r, inField);
+		}
+		
+		// execute search
+		doSearch = function(){
+			model.clearData();
+			model.setRowCount(0);
+			grid.render();
+			grid.resize();
+			model.requestRows();
+		}
+		
+		dojo.addOnLoad(function(){
+			dojo.query("#searchInput").onkeypress(function(e){
+				if(e.keyCode == dojo.keys.ENTER){ doSearch(); }
+			});
+			doSearch();
+		});
+		
+	</script>
+</head>
+<body>
+	<div style="font-weight: bold; padding-bottom: 0.25em;">dojox.Grid - Image Search Test</div>
+	<input id="searchInput" type="text" value="apple">
+	<button onclick="doSearch()" style="clear: both;">Search</button>
+	<div jsId="grid" class="grid" structure="imageLayout" dojoType="dojox.ImageGrid" model="model"></div>
+	<br>
+	<div id="info">
+		<div id="rowCount" style="float: left"></div>
+		<div style="float: right">
+			<div id="sendInfo" style="text-align: right"></div>
+			<div id="receiveInfo" style="text-align: right"></div>
+		</div>
+	</div>
+	<br /><br />
+	<p>Note: requires PHP for proxy.</p>
+	</body>
+</html>