Context Navigation

source: Dev/branches/rest-dojo-ui/client/dijit/tests/ProgressBar.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago
Reworked project structure based on REST interaction and Dojo library. As soon as this is stable, the old jQueryUI branch can be removed (it's kept for reference).
File size: 12.2 KB

Line
1	<!DOCTYPE html>
2	<html>
3	<head>
4	<title>Dojo Toolkit - ProgressBar test</title>
5
6	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
7
8	<style type="text/css">
9	@import "../themes/claro/document.css";
10	@import "css/dijitTests.css";
11	body {
12	margin: 1em;
13	}
14	.smallred .dijitProgressBarTile {
15	background:red;
16	}
17	.smallred .dijitProgressBarLabel {
18	display:none;
19	}
20	#html5ish, #html5ish2 { width:500px; }
21	</style>
22
23	<!-- required: a default dijit theme: -->
24	<link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css"/>
25
26	<!-- required: dojo.js -->
27	<script type="text/javascript" src="../../dojo/dojo.js"
28	data-dojo-config="isDebug: true"></script>
29
30	<!-- not needed, for testing alternate themes -->
31	<script type="text/javascript" src="_testCommon.js"></script>
32
33	<script type="text/javascript">
34	dojo.require("dijit.dijit"); // optimize: load dijit layer
35	dojo.require("dijit.ProgressBar");
36	dojo.require("dojo.parser"); // scan page for widgets
37	dojo.require("dojo.string");
38	dojo.require("doh.runner");
39
40	dojo.ready(function go(){
41	doh.register("parse", function(){
42	dojo.parser.parse();
43	});
44
45	doh.register("other setup", function(){
46	// Stuff from the original test file. Not sure if this is needed now that
47	// the test is automated.
48
49	// note that programmatic instantiation doesn't pull any parameters from the srcNodeRef, not even id
50	var theBar = new dijit.ProgressBar({id: "testBar", width: 400, maximum: 256, duration: 2000,
51	report:function(percent){
52	return dojo.string.substitute("${0} out of ${1} max chars", [this.get('value'), this.maximum]);
53	}
54	}, dojo.byId("testBar"));
55
56	dojo.byId("test").value="";
57	dojo.byId("progressValue").value = dijit.byId("setTestBar").value;
58	dojo.byId("maximum").value = dijit.byId("setTestBar").maximum;
59	dojo.connect(dojo.byId("test"), "onkeyup", null, keyUpHandler);
60	dojo.connect(dojo.byId("set"), "onclick", null, setParameters);
61	dojo.connect(dojo.byId("startTimer"), "onclick", null,
62	function(){ remoteProgress(dijit.byId("timerBar")); } );
63
64	// test 7
65	new dijit.ProgressBar({
66	style:"width:400px",
67	indeterminate:true
68	}, "pi");
69	});
70
71	doh.register("ProgressBar",[
72	{
73	name: "set valid value",
74	runTest: function(){
75	var progressBar = dijit.byId("setTestBar");
76	progressBar.set({maximum: 100, value: 58});
77
78	doh.is("58", progressBar.progress);
79	doh.is("58%", dojo.byId("setTestBar_label").innerHTML);
80	var visualProgress = dojo.query("div.dijitProgressBarFull", progressBar.domNode)[0];
81
82	var width = visualProgress.style.width;
83	width = width.substring(0, width.length-1);
84	doh.t(57 < width <= 58); //IE thinks the width is 57.99
85	}
86	},
87	{
88	name: "set value too high",
89	runTest: function(){
90	var d = new doh.Deferred();
91
92	var progressBar = dijit.byId("setTestBar");
93	progressBar.set({maximum: 100, value: 101});
94
95	doh.is("100", progressBar.progress);
96	doh.is("100%", dojo.byId("setTestBar_label").innerHTML);
97	var visualProgress = dojo.query("div.dijitProgressBarFull", progressBar.domNode)[0];
98	doh.is("100%", visualProgress.style.width);
99	}
100	},
101	{
102	name: "set zero value",
103	runTest: function(){
104	var d = new doh.Deferred();
105
106	var progressBar = dijit.byId("setTestBar");
107	progressBar.set({maximum: 100, value: 0});
108
109	doh.is("0", progressBar.progress);
110	doh.is("0%", dojo.byId("setTestBar_label").innerHTML);
111	var visualProgress = dojo.query("div.dijitProgressBarFull", progressBar.domNode)[0];
112	doh.is("0%", visualProgress.style.width);
113	}
114	},
115	{
116	name: "set max value",
117	runTest: function(){
118	var d = new doh.Deferred();
119
120	var progressBar = dijit.byId("setTestBar");
121	progressBar.set({maximum: 100, value: 100});
122
123	doh.is("100", progressBar.progress);
124	doh.is("100%", dojo.byId("setTestBar_label").innerHTML);
125	var visualProgress = dojo.query("div.dijitProgressBarFull", progressBar.domNode)[0];
126	doh.is("100%", visualProgress.style.width);
127	}
128	},
129	{
130	name: "report callback",
131	runTest: function(){
132	var progressBar = dijit.byId("testBar");
133	progressBar.set({value: 79});
134	doh.is("79", progressBar.progress);
135	doh.is("79 out of 256 max chars", dojo.byId("testBar_label").innerHTML);
136	var visualProgress = dojo.query("div.dijitProgressBarFull", progressBar.domNode)[0];
137	width = visualProgress.style.width;
138	doh.is("30.8", width.substring(0,4));
139	}
140	},
141	{
142	name: "default maximum",
143	runTest: function(){
144	var progressBar = dijit.byId("implied1");
145	doh.is("50", progressBar.progress);
146	doh.is("50%", dojo.byId("implied1_label").innerHTML);
147	var visualProgress = dojo.query("div.dijitProgressBarFull", progressBar.domNode)[0];
148	doh.is("50%", visualProgress.style.width);
149
150	progressBar = dijit.byId("implied2");
151	doh.is("50", progressBar.progress);
152	doh.is("50%", dojo.byId("implied2_label").innerHTML);
153	visualProgress = dojo.query("div.dijitProgressBarFull", progressBar.domNode)[0];
154	doh.is("50%", visualProgress.style.width);
155	}
156	},
157	{
158	name: "set indeterminate, no label",
159	runTest: function(){
160	var progressBar = dijit.byId("indeterminateBar");
161	progressBar.set({indeterminate: true, label: ''});
162
163	var visualProgress = dojo.query("div.dijitProgressBarFull", progressBar.domNode)[0];
164	doh.is("100%", visualProgress.style.width);
165	doh.t(dojo.hasClass(progressBar.domNode, "dijitProgressBarIndeterminate"), "has class dijitProgressBarIndeterminate");
166	}
167	},
168	{
169	name: "set determinate, no label",
170	runTest: function(){
171	var progressBar = dijit.byId("indeterminateBar");
172	progressBar.set({indeterminate: false, label: ''});
173	doh.is("50%", dojo.byId("indeterminateBar_label").innerHTML);
174
175	var visualProgress = dojo.query("div.dijitProgressBarFull", progressBar.domNode)[0];
176	doh.is("50%", visualProgress.style.width);
177	doh.f(dojo.hasClass(progressBar.domNode, "dijitProgressBarIndeterminate"), "doesn't have class dijitProgressBarIndeterminate");
178	}
179	},
180	{
181	name: "set indeterminate, custom label",
182	runTest: function(){
183	var d = new doh.Deferred();
184
185	var progressBar = dijit.byId("indeterminateBar");
186	progressBar.set({indeterminate: true, label: 'Loading...'});
187
188	doh.is("Loading...", dojo.byId("indeterminateBar_label").innerHTML);
189	var visualProgress = dojo.query("div.dijitProgressBarFull", progressBar.domNode)[0];
190	doh.is("100%", visualProgress.style.width);
191	doh.t(dojo.hasClass(progressBar.domNode, "dijitProgressBarIndeterminate"), "has class dijitProgressBarIndeterminate");
192	}
193	},
194	{
195	name: "set determinate, custom label",
196	runTest: function(){
197	var progressBar = dijit.byId("indeterminateBar");
198	progressBar.set({indeterminate: false, label: 'Loading...'});
199
200	doh.is("Loading...", dojo.byId("indeterminateBar_label").innerHTML);
201	var visualProgress = dojo.query("div.dijitProgressBarFull", progressBar.domNode)[0];
202	doh.is("50%", visualProgress.style.width);
203	doh.f(dojo.hasClass(progressBar.domNode, "dijitProgressBarIndeterminate"), "doesn't have class dijitProgressBarIndeterminate");
204	}
205	},
206	{
207	name: "programmatic indeterminate",
208	runTest: function(){
209	var progressBar = dijit.byId("pi");
210	var visualProgress = dojo.query("div.dijitProgressBarFull", progressBar.domNode)[0];
211	doh.is("100%", visualProgress.style.width);
212
213	doh.t(dojo.hasClass(progressBar.domNode, "dijitProgressBarIndeterminate"), "has class dijitProgressBarIndeterminate");
214
215	progressBar = dijit.byId("timerBar");
216	doh.t(80 < progressBar.progress <= 100, "Timer progress was " + progressBar.progress);
217	}
218	},
219	{
220	name: "set zero maximum",
221	runTest: function(){
222	var d = new doh.Deferred();
223
224	var progressBar = dijit.byId("setTestBar");
225	progressBar.set({maximum: 0, value: 0});
226
227	doh.is("0", progressBar.progress);
228	doh.is("0%", dojo.byId("setTestBar_label").innerHTML);
229	var visualProgress = dojo.query("div.dijitProgressBarFull", progressBar.domNode)[0];
230	doh.is("0%", visualProgress.style.width);
231	}
232	}
233	]);
234
235	doh.run();
236	});
237
238	// An example of polling on a separate (heartbeat) server thread. This is useful when the progress
239	// is entirely server bound and there is no existing interaction with the server to determine status.
240
241	// We don't have a server to run against, but a simple heartbeat implementation might look something
242	// like this:
243
244	// function getProgressReport(){
245	// var dataSource = "http://dojotoolkit.org";
246	// return dojo.xhrGet({url: dataSource, handleAs: "json", content: {key: "progress"}});
247	// }
248
249	// Instead, we'll just tick off intervals of 10
250
251	var fakeProgress = 0;
252	function getProgressReport(){
253	var deferred = new dojo.Deferred();
254	fakeProgress = Math.min(fakeProgress + 10, 100);
255	deferred.callback(fakeProgress+"%");
256	return deferred;
257	}
258
259	function remoteProgress(bar){
260	var _timer = setInterval(function(){
261	var report = getProgressReport();
262	report.addCallback(function(response){
263	bar.set({value: response});
264	if(response == "100%"){
265	clearInterval(_timer);
266	_timer = null;
267	}
268	});
269	}, 3000); // on 3 second intervals
270	}
271
272	function setParameters(){
273	dijit.byId("setTestBar").set({maximum: dojo.byId("maximum").value, value: dojo.byId("progressValue").value});
274	}
275
276	function keyUpHandler(){
277	dijit.byId("testBar").set({value:dojo.byId("test").value.length});
278	dijit.byId("testBarInt").set({value:dojo.byId("test").value.length});
279	dijit.byId("smallTestBar").set({value:dojo.byId("test").value.length});
280	}
281	</script>
282	</head>
283	<body class="claro">
284
285	<h1 class="testTitle">Dijit ProgressBar Tests</h1>
286
287	<h3>Test 1</h3>
288	Progress Value <input type="text" name="progressValue" id="progressValue" />
289	<br>
290	Max Progress Value <input type="text" name="maximum" id="maximum" />
291	<br>
292	<input type="button" name="set" id="set" value="set!" />
293	<br>
294	<div id="setTestBar" data-dojo-type="dijit.ProgressBar" data-dojo-props='style:"width:400px",
295	maximum:200, value:"20" '></div>
296
297	<h3>Test 2</h3>
298	Write here: <input type="text" value="" name="test" maxLength="256" id="test" style="width:300px"/>
299	<br />
300	<br />
301	<div id="testBar" style='width:300px'></div>
302	<br />
303	Small, without text and background image:
304	<br />
305	<div id="smallTestBar" data-dojo-type="dijit.ProgressBar" data-dojo-props='style:"width:400px; height:10px", "class":"smallred", maximum:256'></div>
306	<br />
307	Show decimal place:
308	<div id="testBarInt" data-dojo-type="dijit.ProgressBar" data-dojo-props='places:1, style:"width:400px",
309	maximum:256'></div>
310
311	<h3>Test 3</h3>
312	No explicit maximum (both 50%)
313	<div id="implied1" data-dojo-type="dijit.ProgressBar" data-dojo-props='style:"width:400px",
314	value:"50" '></div>
315	<br />
316	<div id="implied2" data-dojo-type="dijit.ProgressBar" data-dojo-props='style:"width:400px",
317	value:"50%" '></div>
318
319	<h3>Test 4</h3>
320	<input type="button" name="startTimer" id="startTimer" value="Start Timer" />
321	<div id="timerBar" data-dojo-type="dijit.ProgressBar" data-dojo-props='style:"width:400px", maximum:100, value:"0" '></div>
322
323	<h3>Test 5 - indeterminate progess</h3>
324	<input id="indeterminateButton1" type="button" value="Make Indeterminate (default blank label)"
325	onclick="dijit.byId('indeterminateBar').set({indeterminate: true, label: ''});" />
326	<input id="labelButton1" type="button" value="Make Determinate (default percentage label)"
327	onclick="dijit.byId('indeterminateBar').set({indeterminate: false, label: ''});" />
328	<input id="indeterminateButton2" type="button" value="Make Indeterminate With Label"
329	onclick="dijit.byId('indeterminateBar').set({indeterminate: true, label: 'Loading...'});" />
330	<input id="labelButton2" type="button" value="Make Determinate With Label"
331	onclick="dijit.byId('indeterminateBar').set({indeterminate: false, label: 'Loading...'});" />
332
333	<div id="indeterminateBar" data-dojo-type="dijit.ProgressBar" data-dojo-props='style:"width:400px", value:"50" '></div>
334
335	<h3>Test 6 - programatic indeterminate</h3>
336	<div id="pi"></div>
337
338	</body>
339	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: