/public/javascripts/dojo/dojox/image/tests/test_ThumbnailPicker.html

http://enginey.googlecode.com/ · HTML · 146 lines · 120 code · 22 blank · 4 comment · 0 complexity · 9e03b6161b7af844bd0849a491892c45 MD5 · raw file 

    

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. 

  5. 	<title>Testing the ThumbnailPicker</title>
    6. 

  6. 	
    7. 

  7. 	<!-- required: a default theme file -->
    8. 

  8. 	<link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/tundra/tundra.css">
    9. 

  9. 	<link rel="stylesheet" href="../resources/image.css">
    10. 

  10. 	
    11. 

  11. 	<style type="text/css">
    12. 

  12. 		@import "../../../dijit/tests/css/dijitTests.css";
    13. 

  13. 	</style>
    14. 

  14. 	
    15. 

  15. 	<!-- required: dojo.js -->
    16. 

  16. 	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: false"></script>
    17. 

  17. 

  18. 	<!-- do not use! only for testing dynamic themes -->
    19. 

  19. 	<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
    20. 

  20. 

  21. 	<!-- for debugging: -->
    22. 

  22. 	<script type="text/javascript" src="../ThumbnailPicker.js"></script>
    23. 

  23. 	
    24. 

  24. 	<script type="text/javascript">
    25. 

  25. 		dojo.require("dojox.image.ThumbnailPicker");
    26. 

  26. 		dojo.require("dojox.data.FlickrRestStore"); 
    27. 

  27. 		dojo.require("dojo.data.ItemFileReadStore"); 
    28. 

  28. 		dojo.require("dojo.parser");
    29. 

  29. 		
    30. 

  30. 		/*
    31. 

  31. 			Initializes the ThumbnailPicker with a data store that
    32. 

  32. 			reads from the Flickr REST APIs.
    33. 

  33. 		*/
    34. 

  34. 		function initFlickrGallery() {
    35. 

  35. 			var flickrRestStore = new dojox.data.FlickrRestStore();
    36. 

  36. 			var req = {
    37. 

  37. 				query: {
    38. 

  38. 					userid: "44153025@N00",//The Flickr user id to use
    39. 

  39. 					apikey: "8c6803164dbc395fb7131c9d54843627",//An API key is required.
    40. 

  40. 					sort: [
    41. 

  41. 						   {
    42. 

  42. 							descending: true //Use descending sort order, ascending is default.
    43. 

  43. 							}
    44. 

  44. 						   ],
    45. 

  45. 					tags: ["superhorse", "redbones", "beachvolleyball","dublin","croatia"],
    46. 

  46. 					tag_mode: "any" //Match any of the tags
    47. 

  47. 				},
    48. 

  48. 				count: 20
    49. 

  49. 			};
    50. 

  50. 			
    51. 

  51. 			//Set the flickr data store on two of the dojox.image.ThumbnailPicker widgets
    52. 

  52. 			dijit.byId('thumbPicker1').setDataStore(flickrRestStore, req);
    53. 

  53. 			dijit.byId('thumbPicker3').setDataStore(flickrRestStore, req);
    54. 

  54. 		}
    55. 

  55. 		
    56. 

  56. 		/*
    57. 

  57. 			Initializes the second ThumbnailPicker widget with a data store that
    58. 

  58. 			reads information from a JSON URL.  This also tells the ThumbnailPicker
    59. 

  59. 			the name of the JSON attributes to read from each data item retrieved
    60. 

  60. 			from the JSON URL.
    61. 

  61. 		*/
    62. 

  62. 		function initItemStoreGallery(){
    63. 

  63. 			var itemRequest = {
    64. 

  64. 				query: {},
    65. 

  65. 				count: 20
    66. 

  66. 			};
    67. 

  67. 			var itemNameMap = {
    68. 

  68. 				imageThumbAttr: "thumb",
    69. 

  69. 				imageLargeAttr: "large"
    70. 

  70. 			};
    71. 

  71. 			
    72. 

  72. 			//Set the dojo.data.ItemFileReadStore on two of the dojox.image.ThumbnailPicker widgets
    73. 

  73. 			//Note the use of the 'itemNameMap', which tells the widget what attributes to
    74. 

  74. 			//read from the store.  Look in the 'images.json' file in the same folder as this
    75. 

  75. 			//file to see the data being read by the widget.
    76. 

  76. 			dijit.byId('thumbPicker2').setDataStore(imageItemStore, itemRequest, itemNameMap);
    77. 

  77. 			dijit.byId('thumbPicker4').setDataStore(imageItemStore, itemRequest, itemNameMap);
    78. 

  78. 		}
    79. 

  79. 		
    80. 

  80. 		//Subscribe to clicks on the thumbnails, and print out the information provided
    81. 

  81. 		function doSubscribe(){
    82. 

  82. 			function updateDiv(packet){
    83. 

  83. 				dojo.byId('PublishedData').innerHTML = "You selected the thumbnail:"
    84. 

  84. 						+ "<br/><b>Index:</b> " + packet.index
    85. 

  85. 						+ "<br/><b>Url:</b> " + packet.url
    86. 

  86. 						+ "<br/><b>Large Url:</b> " + packet.largeUrl
    87. 

  87. 						+ "<br/><b>Title:</b> " + packet.title
    88. 

  88. 						+ "<br/><b>Link:</b> " + packet.link
    89. 

  89. 						;
    90. 

  90. 			};
    91. 

  91. 			
    92. 

  92. 			//When an image in the ThumbnailPicker is clicked on, it publishes
    93. 

  93. 			//information on the image to a topic, whose name is found by calling
    94. 

  94. 			//the 'getTopicName' function on the widget.
    95. 

  95. 			dojo.subscribe(dijit.byId('thumbPicker1').getClickTopicName(), updateDiv);
    96. 

  96. 			dojo.subscribe(dijit.byId('thumbPicker2').getClickTopicName(), updateDiv);
    97. 

  97. 		}
    98. 

  98. 		
    99. 

  99. 		dojo.addOnLoad(function(){
    100. 

  100. 			dojo.parser.parse();
    101. 

  101. 			initFlickrGallery();
    102. 

  102. 			initItemStoreGallery();
    103. 

  103. 			doSubscribe();
    104. 

  104. 		});
    105. 

  105. 

  106. 	</script>
    107. 

  107. </head>
    108. 

  108. <body>
    109. 

  109. 	<h1 class="testTitle">dojox.image.ThumbnailPicker</h1>
    110. 

  110. 

  111. 	<div id="PublishedData" style="background-color:light-grey">
    112. 

  112. 		When you click on a thumbnail image, it's information is placed here
    113. 

  113. 	</div>
    114. 

  114. 

  115. 	<h2>From FlickrRestStore:</h2>
    116. 

  116. 	This ThumbnailPicker should have 8 thumbnails, with each of them linking
    117. 

  117. 	to a URL when clicked on.  The cursor should also change when over an image.
    118. 

  118. 	<div id="thumbPicker1" dojoType="dojox.image.ThumbnailPicker" size="500"
    119. 

  119. 			useHyperlink="true" ></div>
    120. 

  120. 

  121.     <h2>From ItemFileReadStore:</h2>
    122. 

  122. 	This ThumbnailPicker should have 5 thumbnails. Clicking on a thumbnail should NOT
    123. 

  123. 	open a URL, and the cursor should not change when over an image that is not an arrow.
    124. 

  124. 	
    125. 

  125.     <div id="thumbPicker2" dojoType="dojox.image.ThumbnailPicker" size="400"
    126. 

  126. 		isClickable="false"></div>
    127. 

  127. 	<div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore" url="images.json"></div>
    128. 

  128. 	
    129. 

  129. 	<h2>From FlickrRestStore:</h2>
    130. 

  130. 	This ThumbnailPicker should have 6 thumbnails, with each of them linking
    131. 

  131. 	to a URL when clicked on.  The cursor should also change when over an image.
    132. 

  132. 	Unlike the ThumbnailPicker above, when these links are clicked on, this page
    133. 

  133. 	changes, instead of a popup window.
    134. 

  134. 	
    135. 

  135. 	<div id="thumbPicker3" dojoType="dojox.image.ThumbnailPicker" size="600"
    136. 

  136. 		useHyperLink="true" hyperlinkTarget="this"></div>
    137. 

  137. 

  138. 	<h2>From ItemFileReadStore, and vertical:</h2>
    139. 

  139. 	This ThumbnailPicker should have 5 thumbnails. Clicking on a thumbnail should NOT
    140. 

  140. 	open a URL, and the cursor should not change when over an image that is not an arrow.
    141. 

  141. 	The thumbnails should also be aligned vertically.
    142. 

  142.     <div id="thumbPicker4" dojoType="dojox.image.ThumbnailPicker" size="300"
    143. 

  143. 		isClickable="false" isHorizontal="false"></div>
    144. 

  144. 

  145. </body>
    146. 

  146. </html>
    147.