| 1 |
lars |
1 |
Prado.WebUI.TKeyboard = Class.create();
|
|
|
2 |
Prado.WebUI.TKeyboard.prototype =
|
|
|
3 |
{
|
|
|
4 |
initialize : function(options)
|
|
|
5 |
{
|
|
|
6 |
this.element = $(options.ID);
|
|
|
7 |
this.onInit(options);
|
|
|
8 |
},
|
|
|
9 |
|
|
|
10 |
onInit : function(options)
|
|
|
11 |
{
|
|
|
12 |
this.cssClass = options['CssClass'];
|
|
|
13 |
this.forControl = document.getElementById(options['ForControl']);
|
|
|
14 |
this.autoHide = options['AutoHide'];
|
|
|
15 |
|
|
|
16 |
this.flagShift = false;
|
|
|
17 |
this.flagCaps = false;
|
|
|
18 |
this.flagHover = false;
|
|
|
19 |
this.flagFocus = false;
|
|
|
20 |
|
|
|
21 |
this.keys = new Array
|
|
|
22 |
(
|
|
|
23 |
new Array('` ~ D', '1 ! D', '2 @ D', '3 # D', '4 $ D', '5 % D', '6 ^ D', '7 & D', '8 * D', '9 ( D', '0 ) D', '- _ D', '= + D', 'Bksp Bksp Bksp'),
|
|
|
24 |
new Array('Del Del Del', 'q Q L', 'w W L', 'e E L', 'r R L', 't T L', 'y Y L', 'u U L', 'i I L', 'o O L', 'p P L', '[ { D', '] } D', '\\ | \\'),
|
|
|
25 |
new Array('Caps Caps Caps', 'a A L', 's S L', 'd D L', 'f F L', 'g G L', 'h H L', 'j J L', 'k K L', 'l L L', '; : D', '\' " D', 'Exit Exit Exit'),
|
|
|
26 |
new Array('Shift Shift Shift', 'z Z L', 'x X L', 'c C L', 'v V L', 'b B L', 'n N L', 'm M L', ', < D', '. > D', '/ ? D', 'Shift Shift Shift')
|
|
|
27 |
);
|
|
|
28 |
|
|
|
29 |
if (this.isObject(this.forControl))
|
|
|
30 |
{
|
|
|
31 |
this.forControl.keyboard = this;
|
|
|
32 |
this.forControl.onfocus = function() {this.keyboard.show(); };
|
|
|
33 |
this.forControl.onblur = function() {if (this.keyboard.flagHover == false) this.keyboard.hide();};
|
|
|
34 |
this.forControl.onkeydown = function(e) {if (!e) e = window.event; var key = (e.keyCode)?e.keyCode:e.which; if(key == 9) this.keyboard.hide();;};
|
|
|
35 |
this.forControl.onselect = this.saveSelection;
|
|
|
36 |
this.forControl.onclick = this.saveSelection;
|
|
|
37 |
this.forControl.onkeyup = this.saveSelection;
|
|
|
38 |
}
|
|
|
39 |
|
|
|
40 |
this.render();
|
|
|
41 |
|
|
|
42 |
this.tagKeyboard.onmouseover = function() {this.keyboard.flagHover = true;};
|
|
|
43 |
this.tagKeyboard.onmouseout = function() {this.keyboard.flagHover = false;};
|
|
|
44 |
|
|
|
45 |
if (!this.autoHide) this.show();
|
|
|
46 |
},
|
|
|
47 |
|
|
|
48 |
isObject : function(a)
|
|
|
49 |
{
|
|
|
50 |
return (typeof a == 'object' && !!a) || typeof a == 'function';
|
|
|
51 |
},
|
|
|
52 |
|
|
|
53 |
createElement : function(tagName, attributes, parent)
|
|
|
54 |
{
|
|
|
55 |
var tagElement = document.createElement(tagName);
|
|
|
56 |
if (this.isObject(attributes)) for (attribute in attributes) tagElement[attribute] = attributes[attribute];
|
|
|
57 |
if (this.isObject(parent)) parent.appendChild(tagElement);
|
|
|
58 |
return tagElement;
|
|
|
59 |
},
|
|
|
60 |
|
|
|
61 |
onmouseover : function()
|
|
|
62 |
{
|
|
|
63 |
this.className += ' Hover';
|
|
|
64 |
},
|
|
|
65 |
|
|
|
66 |
onmouseout : function()
|
|
|
67 |
{
|
|
|
68 |
this.className = this.className.replace(/( Hover| Active)/ig, '');
|
|
|
69 |
},
|
|
|
70 |
|
|
|
71 |
onmousedown : function()
|
|
|
72 |
{
|
|
|
73 |
this.className += ' Active';
|
|
|
74 |
},
|
|
|
75 |
|
|
|
76 |
onmouseup : function()
|
|
|
77 |
{
|
|
|
78 |
this.className = this.className.replace(/( Active)/ig, '');
|
|
|
79 |
this.keyboard.type(this.innerHTML);
|
|
|
80 |
},
|
|
|
81 |
|
|
|
82 |
render : function()
|
|
|
83 |
{
|
|
|
84 |
this.tagKeyboard = this.createElement('div', {className: this.cssClass, onselectstart: function() {return false;}}, this.element);
|
|
|
85 |
this.tagKeyboard.keyboard = this;
|
|
|
86 |
|
|
|
87 |
for (var line = 0; line < this.keys.length; line++)
|
|
|
88 |
{
|
|
|
89 |
var tagLine = this.createElement('div', {className: 'Line'}, this.tagKeyboard);
|
|
|
90 |
for (var key = 0; key < this.keys[line].length; key++)
|
|
|
91 |
{
|
|
|
92 |
var split = this.keys[line][key].split(' ');
|
|
|
93 |
var tagKey = this.createElement('div', {className: 'Key ' + split[2]}, tagLine);
|
|
|
94 |
var tagKey1 = this.createElement('div', {className: 'Key1', innerHTML: split[0], keyboard: this, onmouseover: this.onmouseover, onmouseout: this.onmouseout, onmousedown: this.onmousedown, onmouseup: this.onmouseup}, tagKey);
|
|
|
95 |
var tagKey2 = this.createElement('div', {className: 'Key2', innerHTML: split[1], keyboard: this, onmouseover: this.onmouseover, onmouseout: this.onmouseout, onmousedown: this.onmousedown, onmouseup: this.onmouseup}, tagKey);
|
|
|
96 |
}
|
|
|
97 |
}
|
|
|
98 |
},
|
|
|
99 |
|
|
|
100 |
isShown : function()
|
|
|
101 |
{
|
|
|
102 |
return (this.tagKeyboard.style.visibility.toLowerCase() == 'visible');
|
|
|
103 |
},
|
|
|
104 |
|
|
|
105 |
show : function()
|
|
|
106 |
{
|
|
|
107 |
if (this.isShown() == false) this.tagKeyboard.style.visibility = 'visible';
|
|
|
108 |
},
|
|
|
109 |
|
|
|
110 |
hide : function()
|
|
|
111 |
{
|
|
|
112 |
if (this.isShown() == true && this.autoHide) {this.tagKeyboard.style.visibility = 'hidden'; }
|
|
|
113 |
},
|
|
|
114 |
|
|
|
115 |
type : function(key)
|
|
|
116 |
{
|
|
|
117 |
var input = this.forControl;
|
|
|
118 |
var command = key.toLowerCase();
|
|
|
119 |
|
|
|
120 |
if (command == 'exit') {this.hide();}
|
|
|
121 |
else if (input != 'undefined' && input != null && command == 'bksp') {this.insert(input, 'bksp');}
|
|
|
122 |
else if (input != 'undefined' && input != null && command == 'del') {this.insert(input, 'del');}
|
|
|
123 |
else if (command == 'shift') {this.tagKeyboard.className = this.flagShift?'Keyboard Off':'Keyboard Shift';this.flagShift = this.flagShift?false:true;}
|
|
|
124 |
else if (command == 'caps') {this.tagKeyboard.className = this.caps?'Keyboard Off':'Keyboard Caps';this.caps = this.caps?false:true;}
|
|
|
125 |
else if (input != 'undefined' && input != null)
|
|
|
126 |
{
|
|
|
127 |
if (this.flagShift == true) {this.flagShift = false; this.tagKeyboard.className = 'Keyboard Off';}
|
|
|
128 |
key = key.replace(/>/, '>'); key = key.replace(/</, '<'); key = key.replace(/&/, '&');
|
|
|
129 |
this.insert(input, key);
|
|
|
130 |
}
|
|
|
131 |
|
|
|
132 |
if (command != 'exit') input.focus();
|
|
|
133 |
},
|
|
|
134 |
|
|
|
135 |
saveSelection : function()
|
|
|
136 |
{
|
|
|
137 |
if (this.keyboard.forControl.createTextRange)
|
|
|
138 |
{
|
|
|
139 |
this.keyboard.selection = document.selection.createRange().duplicate();
|
|
|
140 |
return;
|
|
|
141 |
}
|
|
|
142 |
},
|
|
|
143 |
|
|
|
144 |
insert : function(field, value)
|
|
|
145 |
{
|
|
|
146 |
if (this.forControl.createTextRange && this.selection)
|
|
|
147 |
{
|
|
|
148 |
if (value == 'bksp') {this.selection.moveStart("character", -1); this.selection.text = '';}
|
|
|
149 |
else if (value == 'del') {this.selection.moveEnd("character", 1); this.selection.text = '';}
|
|
|
150 |
else {this.selection.text = value;}
|
|
|
151 |
this.selection.select();
|
|
|
152 |
}
|
|
|
153 |
else
|
|
|
154 |
{
|
|
|
155 |
var selectStart = this.forControl.selectionStart;
|
|
|
156 |
var selectEnd = this.forControl.selectionEnd;
|
|
|
157 |
var start = (this.forControl.value).substring(0, selectStart);
|
|
|
158 |
var end = (this.forControl.value).substring(selectEnd, this.forControl.textLength);
|
|
|
159 |
|
|
|
160 |
if (value == 'bksp') {start = start.substring(0, start.length - 1); selectStart -= 1; value = '';}
|
|
|
161 |
if (value == 'del') {end = end.substring(1, end.length); value = '';}
|
|
|
162 |
|
|
|
163 |
this.forControl.value = start + value + end;
|
|
|
164 |
this.forControl.selectionStart = selectEnd + value.length;
|
|
|
165 |
this.forControl.selectionEnd = selectStart + value.length;
|
|
|
166 |
}
|
|
|
167 |
}
|
|
|
168 |
};
|