Manual tests: adding options form to change theme & orientation

glow · Aug 19, 2009 · 05fe67f · 05fe67f
1 parent b4be3e2
commit 05fe67f
Show file tree

Hide file tree

Showing 6 changed files with 209 additions and 195 deletions.
diff --git a/manualtests/template/index.html b/manualtests/template/index.html
@@ -16,12 +16,51 @@
 		);
 	// ]]></script>
 
-	<script type="text/javascript">gloader.load(['glow', '@VERSION@'])</script>
+	<script type="text/javascript">gloader.load(['glow', '@VERSION@', 'glow.data'])</script>
 </head>
 
 <body>
 	<h1>Module Name</h1>
 
+	<h2>Settings</h2>
+
+	<!--
+		You may want to use this to provide a simple way to switch themes
+		and orientation. urlOpts will contain the results of the form
+		
+		Simply delete if you don't need it
+	-->
+
+	<form action="?" id="urlOpts">
+		<p>
+			<label>
+				Orientation:
+				<select name="vertical">
+					<option value="">Horizontal</option>
+					<option value="1">Vertical</option>
+				</select>
+			</label>
+			<label>
+				Theme:
+				<select name="theme">
+					<option value="dark">Dark</option>
+					<option value="light">Light</option>
+				</select>
+			</label>
+			<input type="submit" value="Go" />
+		</p>
+	</form>
+
+	<script type="text/javascript">
+		// get values from url
+		var urlOpts = glow.data.decodeUrl( window.location.search.slice(1) );
+		// set defaults here, eg...
+		urlOpts.theme = urlOpts.theme || "light";
+		urlOpts.vertical = urlOpts.vertical || '';
+		// update the form
+		glow.dom.get('#urlOpts').val(urlOpts);
+	</script>
+
 	<h2>Test Title</h2>
 
 	<p>Brief description</p>

diff --git a/manualtests/widgets/autosuggest/index.html b/manualtests/widgets/autosuggest/index.html
@@ -18,7 +18,7 @@
 
 	<script type="text/javascript">
 		gloader.load(
-			['glow', '@VERSION@', 'glow.events', 'glow.widgets.AutoSuggest', 'glow.widgets.AutoComplete']
+			['glow', '@VERSION@', 'glow.events', 'glow.data', 'glow.widgets.AutoSuggest', 'glow.widgets.AutoComplete']
 		);
 	</script>
 
@@ -36,6 +36,28 @@
 <body>
 	<h1>glow.widgets.AutoSuggest</h1>
 
+	<h2>Settings</h2>
+
+	<form action="?" id="urlOpts">
+		<p>
+			<label>
+				Theme:
+				<select name="theme">
+					<option value="dark">Dark</option>
+					<option value="light">Light</option>
+				</select>
+			</label>
+			<input type="submit" value="Go" />
+		</p>
+	</form>
+
+	<script type="text/javascript">
+		var urlOpts = glow.data.decodeUrl( window.location.search.slice(1) );
+		// set defaults here, eg...
+		urlOpts.theme = urlOpts.theme || "light";
+		glow.dom.get('#urlOpts').val(urlOpts);
+	</script>
+
 	<h2>Autosuggest with minimum input length, and completion</h2>
 
 	<ul>
@@ -74,7 +96,8 @@ <h2>Autosuggest with minimum input length, and completion</h2>
 				},
 				complete: true,
 				activeOnShow: false,
-				delim: " "
+				delim: " ",
+				theme: urlOpts.theme
 			}
 		).loadData();
 
@@ -120,7 +143,8 @@ <h2>Autosuggest with formatItem, no completion</h2>
 					html += '<'+'/div><'+'/div>';
 					html += item.name;
 					return html;
-				}
+				},
+				theme: urlOpts.theme
 			}
 		).loadData();
 
@@ -169,7 +193,8 @@ <h2>Autosuggest with isMatch, and formatItem</h2>
 					var pat = new RegExp(glow.lang.trim(this.getValue()), 'i');
 					return item.name.replace(pat, "<u>$&<"+"/u>");
 				},
-				delim: ","
+				delim: ",",
+				theme: urlOpts.theme
 				// complete: this option makes no sense here!
 			}
 		).loadData();
@@ -208,7 +233,8 @@ <h2>Autosuggest with caseSensitive, maxListLength, onItemSelect, and completion<
 				caseSensitive: true,
 				maxListLength: 10,
 				complete: true,
-				delim: ","
+				delim: ",",
+				theme: urlOpts.theme
 			}
 		).loadData();
 
@@ -222,7 +248,6 @@ <h2>Autosuggest with caseSensitive, maxListLength, onItemSelect, and completion<
 
 
 	<h2>Autosuggest with appearance options</h2>
-	<p>Using the non-default theme of "dark" and changing the dimensions of the suggestion list.</p>
 
 	<div class="sandbox">
 		<form action="#" id="testForm5">
@@ -242,7 +267,7 @@ <h2>Autosuggest with appearance options</h2>
 				},
 				width: 600,
 				height: 100,
-				theme: "dark"
+				theme: urlOpts.theme
 			}
 		).loadData();
 
@@ -271,7 +296,9 @@ <h2>Single-value glow.widgets.AutoComplete</h2>
 		glow.ready(function() {
 			new glow.widgets.AutoComplete(
 				"#complete1",
-				"tags.js"
+				"tags.js", {
+					theme: urlOpts.theme
+				}
 			).autosuggest.loadData();
 		});
 		// ]]>
@@ -295,7 +322,8 @@ <h2>Multi-value glow.widgets.AutoComplete</h2>
 				"#complete2",
 				"tags.js",
 				{
-					delim: ","
+					delim: ",",
+					theme: urlOpts.theme
 				}
 			).autosuggest.loadData();
 		});
@@ -321,7 +349,8 @@ <h2>Same with glow.widgets.AutoSuggest (using array of strings as dataSource)</h
 				"tags.js",
 				{
 					complete: true,
-					delim: ","
+					delim: ",",
+					theme: urlOpts.theme
 				}
 			).loadData();
 		});