1 files changed, 130 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/_base/test_focusWidget.html b/includes/js/dijit/tests/_base/test_focusWidget.html
new file mode 100644
index 0000000..edc01c1
--- /dev/null
+++ b/includes/js/dijit/tests/_base/test_focusWidget.html
@@ -0,0 +1,130 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+		"http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<title>dijit.focus Test</title>
+	<style type="text/css">
+		@import "../../../dojo/resources/dojo.css";
+		@import "../../themes/tundra/tundra.css";
+		@import "../css/dijitTests.css";
+	</style>
+
+	<script type="text/javascript" src="../../../dojo/dojo.js"
+		djConfig="isDebug: true, parseOnLoad: true"></script>
+	<script type="text/javascript">
+		dojo.require("dijit.form.DateTextBox");
+		dojo.require("dijit.form.ComboBox");
+		dojo.require("dijit.form.NumberSpinner");
+		dojo.require("dijit.form.Button");
+		dojo.require("dijit.Menu");
+		dojo.require("dijit.layout.ContentPane");
+
+		var queue=[];
+		var animation;
+		function animateBorderColor(widget, color, startWidth, endWidth){
+			if(animation){
+				queue.push(arguments);
+				return;
+			}
+			with(widget.domNode.style){
+				borderStyle="solid";
+				outlineStyle="solid";
+
+			}
+			animation = dojo.animateProperty({
+				node: widget.domNode,
+				duration: 400,
+				properties: {
+					// depending on browser and node type, sometimes border or outline is ineffective.
+					// doing both seems to work in all cases though (for at least one of them)
+					borderColor: { end: color },
+					borderWidth: { start: startWidth, end: endWidth },
+					outlineColor: { end: color },
+					outlineWidth: { start: startWidth, end: endWidth }
+				},
+				onEnd: function(){
+					animation=null;
+					if(queue.length){
+						animateBorderColor.apply(null, queue.shift());
+					}
+				}
+			});
+			animation.play();
+		}
+
+		dojo.addOnLoad(function(){
+			dojo.subscribe("widgetFocus", function(widget){
+				console.log("focused on widget " + (widget?widget:"nothing"));
+				animateBorderColor(widget, "#ff0000", 2, 5);
+			});
+			dojo.subscribe("widgetBlur", function(widget){
+				console.log("blurred widget " + (widget?widget:"nothing"));
+				animateBorderColor(widget, "#0000ff", 5, 2);
+			});
+			dojo.subscribe("focusNode", function(node){ console.log("focused on node " + (node?(node.id||node.tagName):"nothing"));});
+		});
+	</script>
+	<style>
+		div, fieldset, form, input {
+			padding: 10px;
+			margin: 10px;
+			border: 2px solid blue;
+		}
+	</style>
+</head>
+<body style="background-color: #fff; color: black; padding: 0; margin: 0" class="tundra">
+
+	<h3>Widget Focus Test</h3>
+	<p>
+		This is for testing code to detect onBlur and onFocus on a widget level.<br>
+		Focused widgets' borders will turn red.<br>
+		Also, heck the console log for focus and blur events on widgets.
+	</p>
+
+	<label for="fieldset1">a form ContentPane widget:</label><br>
+	<form dojoType="dijit.layout.ContentPane">
+		<label for="first">simple input: </label><input id=first><br>
+
+		<label for="fieldset1">a fieldset ContentPane widget:</label><br>
+		<fieldset id=fieldset1 dojoType="dijit.layout.ContentPane">
+			<label for="select">a ComboBox widget:</label>
+			<select id=select dojoType="dijit.form.ComboBox">
+				<option>this</option>
+				<option>is</option>
+				<option>a</option>
+				<option>list</option>
+			</select>
+			<label for="plain">a plain input:</label>
+			<input id=plain value=plain>
+		</fieldset>
+		<br>
+		<label for="fieldset1">another fieldset ContentPane:</label><br>
+		<fieldset id=fieldset2 dojoType="dijit.layout.ContentPane">
+			<label for="date">a DateTextBox widget:</label>
+			<input id=date dojoType="dijit.form.DateTextBox"><br>
+
+			<label for="textarea">a plain textarea:</label><br>
+			<textarea id=textarea>hello there!</textarea><br>
+
+			<label for="spinner">a Spinner widget:</label>
+			<input id=spinner dojoType="dijit.form.NumberSpinner" value=100><br>
+
+			<label for="button">a Combobutton widget:</label>
+			<div id=button dojoType="dijit.form.ComboButton" tabIndex=0>
+				<span>push me</span>
+				<div id=menu dojoType="dijit.Menu">
+					<div id=mi1 dojoType="dijit.MenuItem">menu item 1</div>
+					<div id=mi2 dojoType="dijit.MenuItem">menu item 2</div>
+					<div id=popupMenuItem dojoType="dijit.PopupMenuItem">
+						<span>submenu</span>
+						<div id=submenu dojoType="dijit.Menu">
+							<div id=smi1 dojoType="dijit.MenuItem">submenu item 1</div>
+							<div id=smi2 dojoType="dijit.MenuItem">submenu item 2</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</fieldset>
+	</form>
+</body>
+</html>