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
|
<!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>
|
