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
|
namespace("WM");
WM.EditBox = (function()
{
var template_html = " \
<div class='EditBoxContainer'> \
<div class='EditBoxLabel'>Label</div> \
<input class='EditBox'> \
</div>";
function EditBox(x, y, w, h, label, text)
{
this.ChangeHandler = null;
// Create node and locate its internal nodes
this.Node = DOM.Node.CreateHTML(template_html);
this.LabelNode = DOM.Node.FindWithClass(this.Node, "EditBoxLabel");
this.EditNode = DOM.Node.FindWithClass(this.Node, "EditBox");
// Set label and value
this.LabelNode.innerHTML = label;
this.SetValue(text);
this.SetPosition(x, y);
this.SetSize(w, h);
// Hook up the event handlers
DOM.Event.AddHandler(this.EditNode, "focus", Bind(OnFocus, this));
DOM.Event.AddHandler(this.EditNode, "keypress", Bind(OnKeyPress, this));
DOM.Event.AddHandler(this.EditNode, "keydown", Bind(OnKeyDown, this));
DOM.Event.AddHandler(this.EditNode, "change", Bind(OnChange, this));
}
EditBox.prototype.SetPosition = function(x, y)
{
this.Position = [ x, y ];
DOM.Node.SetPosition(this.Node, this.Position);
}
EditBox.prototype.SetSize = function(w, h)
{
this.Size = [ w, h ];
DOM.Node.SetSize(this.EditNode, this.Size);
}
EditBox.prototype.SetChangeHandler = function(handler)
{
this.ChangeHandler = handler;
}
EditBox.prototype.SetValue = function(value)
{
if (this.EditNode)
this.EditNode.value = value;
}
EditBox.prototype.GetValue = function()
{
if (this.EditNode)
return this.EditNode.value;
return null;
}
EditBox.prototype.LoseFocus = function()
{
if (this.EditNode)
this.EditNode.blur();
}
function OnFocus(self, evt)
{
// Backup on focus
self.PreviousValue = self.EditNode.value;
}
function OnKeyPress(self, evt)
{
// Allow enter to confirm the text only when there's data
if (evt.keyCode == 13 && self.EditNode.value != "")
{
self.EditNode.blur();
}
}
function OnKeyDown(self, evt)
{
// Allow escape to cancel any text changes
if (evt.keyCode == 27)
{
self.EditNode.value = self.PreviousValue;
self.EditNode.blur();
}
}
function OnChange(self, evt)
{
if (self.ChangeHandler)
self.ChangeHandler(self.EditNode);
}
return EditBox;
})();
|