diff options
| author | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
|---|---|---|
| committer | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
| commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
| tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/grid/tests/test_yahoo_images.html | |
| parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
| download | semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2 | |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojox/grid/tests/test_yahoo_images.html')
| -rw-r--r-- | includes/js/dojox/grid/tests/test_yahoo_images.html | 148 |
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}.  ', + [inParams.start, inParams.start + inParams.results -1] + ); + } + model.onReceive = function(inData) { + dojo.byId('receiveInfo').innerHTML = dojo.string.substitute( + 'Receive rows ${0} to ${1}.  ', + [ + 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> |