aboutsummaryrefslogtreecommitdiff
path: root/includes/js/dojox/image/tests/test_ThumbnailPicker.html
blob: 90cdf2eb90c1fefc753d16fdbd0f430025416787 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Testing the ThumbnailPicker</title>

	<style type="text/css">
		@import "../../../dijit/tests/css/dijitTests.css";
		@import "../resources/image.css";
	</style>
	
	<script type="text/javascript" src="../../../dojo/dojo.js" djconfig="parseOnLoad:true, isDebug: true, defaultTestTheme:'soria'"></script>
	<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
	<script type="text/javascript" src="../ThumbnailPicker.js"></script>
	
	<script type="text/javascript">
		// dojo.require("dojox.image.Gallery");
		dojo.require("dojox.data.FlickrRestStore"); 
		dojo.require("dojo.data.ItemFileReadStore"); 
		dojo.require("dojo.parser");	// find widgets
		
		/*
			Initializes the ThumbnailPicker with a data store that
			reads from the Flickr REST APIs.
		*/
		function initFlickrGallery() {
			var flickrRestStore = new dojox.data.FlickrRestStore();
			var req = {
				query: {
					userid: "44153025@N00",//The Flickr user id to use
					apikey: "8c6803164dbc395fb7131c9d54843627",//An API key is required.
					sort: [
						   {
							descending: true //Use descending sort order, ascending is default.
							}
						   ],
					tags: ["superhorse", "redbones", "beachvolleyball","dublin","croatia"],
					tag_mode: "any" //Match any of the tags
				},
				count: 20
			};
			
			//Set the flickr data store on two of the dojox.image.ThumbnailPicker widgets
			dijit.byId('thumbPicker1').setDataStore(flickrRestStore, req);
			dijit.byId('thumbPicker3').setDataStore(flickrRestStore, req);
		}
		
		/*
			Initializes the second ThumbnailPicker widget with a data store that
			reads information from a JSON URL.  This also tells the ThumbnailPicker
			the name of the JSON attributes to read from each data item retrieved
			from the JSON URL.
		*/
		function initItemStoreGallery(){
			var itemRequest = {
				query: {},
				count: 20
			};
			var itemNameMap = {
				imageThumbAttr: "thumb",
				imageLargeAttr: "large"
			};
			
			//Set the dojo.data.ItemFileReadStore on two of the dojox.image.ThumbnailPicker widgets
			//Note the use of the 'itemNameMap', which tells the widget what attributes to
			//read from the store.  Look in the 'images.json' file in the same folder as this
			//file to see the data being read by the widget.
			dijit.byId('thumbPicker2').setDataStore(imageItemStore, itemRequest, itemNameMap);
			dijit.byId('thumbPicker4').setDataStore(imageItemStore, itemRequest, itemNameMap);
		}
		
		//Subscribe to clicks on the thumbnails, and print out the information provided
		function doSubscribe(){
			function updateDiv(packet){
				dojo.byId('PublishedData').innerHTML = "You selected the thumbnail:"
						+ "<br/><b>Index:</b> " + packet.index
						+ "<br/><b>Url:</b> " + packet.url
						+ "<br/><b>Large Url:</b> " + packet.largeUrl
						+ "<br/><b>Title:</b> " + packet.title
						+ "<br/><b>Link:</b> " + packet.link
						;
			};
			
			//When an image in the ThumbnailPicker is clicked on, it publishes
			//information on the image to a topic, whose name is found by calling
			//the 'getTopicName' function on the widget.
			dojo.subscribe(dijit.byId('thumbPicker1').getClickTopicName(), updateDiv);
			dojo.subscribe(dijit.byId('thumbPicker2').getClickTopicName(), updateDiv);
		}
		
		dojo.addOnLoad(initFlickrGallery);
		dojo.addOnLoad(initItemStoreGallery);
		dojo.addOnLoad(doSubscribe);
	</script>
</head>
<body>
	<h1 class="testTitle">dojox.image.ThumbnailPicker</h1>

	<div id="PublishedData" style="background-color:light-grey">
		When you click on a thumbnail image, it's information is placed here
	</div>

	<h2>From FlickrRestStore:</h2>
	This ThumbnailPicker should have 8 thumbnails, with each of them linking
	to a URL when clicked on.  The cursor should also change when over an image.
	<div id="thumbPicker1" dojoType="dojox.image.ThumbnailPicker" size="500"
			useHyperlink="true" ></div>

    <h2>From ItemFileReadStore:</h2>
	This ThumbnailPicker should have 5 thumbnails. Clicking on a thumbnail should NOT
	open a URL, and the cursor should not change when over an image that is not an arrow.
	
    <div id="thumbPicker2" dojoType="dojox.image.ThumbnailPicker" size="400"
		isClickable="false"></div>
	<div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore" url="images.json"></div>
	
	<h2>From FlickrRestStore:</h2>
	This ThumbnailPicker should have 6 thumbnails, with each of them linking
	to a URL when clicked on.  The cursor should also change when over an image.
	Unlike the ThumbnailPicker above, when these links are clicked on, this page
	changes, instead of a popup window.
	
	<div id="thumbPicker3" dojoType="dojox.image.ThumbnailPicker" size="600"
		useHyperLink="true" hyperlinkTarget="this"></div>

	<h2>From ItemFileReadStore, and vertical:</h2>
	This ThumbnailPicker should have 5 thumbnails. Clicking on a thumbnail should NOT
	open a URL, and the cursor should not change when over an image that is not an arrow.
	The thumbnails should also be aligned vertically.
    <div id="thumbPicker4" dojoType="dojox.image.ThumbnailPicker" size="300"
		isClickable="false" isHorizontal="false"></div>

</body>
</html>