Can support the multi-medium format JS keyboard _javascript Skills

/*


* JavaScript Virtual keyboard (Atm-style Numpad variant), version 2.3


*


* Copyright (C) 2006-2007 Dmitriy Khudorozhkov


*


* This software is provided "As-is" and without any express or implied warranty.


* In no event would the author be held liable to any damages arising from the


* Use the This software.


*


* Permission is granted to anyone to the use this software for any purpose,


* Including commercial applications, and to alter it and redistribute it


* Freely, subject to the following restrictions:


*


* 1. The origin of this software must is not misrepresented; Must not


* claim that you wrote the original software. If You use this software


* In a product, an acknowledgment in the product documentation would is


* Appreciated but is not required.


*


* 2. Altered source versions must is plainly marked as such, and must not being


* Misrepresented as being the original software.


*


* 3. This notice may is removed or altered from any source distribution.


*


*-Dmitriy Khudorozhkov, kh_dmitry2001@mail.ru


*/





function Vatmpad (container_id, Callback_ref, Font_name, Font_size,


Font_color, Bg_color, Key_color, Border_color,


Show_click, Click_font_color, Click_bg_color,


Click_border_color, do_embed)


{


Return This._construct (container_id, Callback_ref, Font_name, Font_size,


Font_color, Bg_color, Key_color, Border_color,


Show_click, Click_font_color, Click_bg_color,


Click_border_color, do_embed);


}





Vatmpad.prototype = {





Kbarray: [],





_setup_event:function (Elem, EventType, Handler)


{


Return (elem.attachevent. Elem.attachevent ("on" + EventType, Handler): ((Elem.addeventlistener)? Elem.addeventlistener (EventType, Handler, false): null);


},





_start_flash:function (In_el)


{


function GetColor (str, posone, Postwo)


{


if (/rgb\ (\d+), \s (\d+), \s (\d+) \)/.exec (str))//try to detect Mozilla-style RGB value.


{


Switch (posone)


{


Case 1:return parseint (regexp.$1, 10);


Case 2:return parseint (regexp.$2, 10);


Case 3:return parseint (regexp.$3, 10);


Default:return 0;


}


}


else//Standard (#xxxxxx or #xxx) way


return str.length = = 4? parseint (Str.substr (Posone, 1) + STR.SUBSTR (Posone, 1), parseint (Str.substr (Postwo, 2), 16);


}





function Getr (color_string)


{return GetColor (color_string, 1, 1);}





function Getg (color_string)


{return GetColor (color_string, 2, 3);}





function Getb (color_string)


{return GetColor (color_string, 3, 5);}





var el = in_el.time? In_el: (In_el.company && in_el.company.time? in_el.company:null);


if (EL)


{


El.time = 0;


Clearinterval (El.timer);


}





var vkb = this;


var FTC = Vkb.fontcolor, BGC = vkb.keycolor, BRC = Vkb.bordercolor;





Special fixes for simple/dead/modifier keys:





if (In_el.dead)


FTC = Vkb.deadcolor;





if ((in_el.innerhtml = "Shift") && vkb. Shift) | | ((in_el.innerhtml = = "Caps") && vkb. Caps) | | ((in_el.innerhtml = = "AltGr") && vkb. AltGr))


BGC = Vkb.lic;





Extract Base Color values:


var fr = Getr (FTC), FG = GETG (FTC), FB = GETB (FTC);


var kr = Getr (BGC), kg = GETG (BGC), KB = GETB (BGC);


var br = GETR (BRC), BG = GETG (BRC), BB = Getb (BRC);





Extract Flash Color values:


var f_r = Getr (VKB.CFC), F_g = GETG (VKB.CFC), f_b = Getb (VKB.CFC);


var k_r = Getr (VKB.CBG), K_g = GETG (VKB.CBG), K_b = Getb (VKB.CBG);


var b_r = Getr (VKB.CBR), B_g = GETG (VKB.CBR), B_b = Getb (VKB.CBR);





var _shift_colors = function ()


{


function Dec2hex (DEC)


{


var hexchars = "0123456789ABCDEF";


var a = dec% 16;


var B = (dec-a)/16;





return Hexchars.charat (b) + Hexchars.charat (a) + "";


}





In_el.time =!in_el.time? Ten: (in_el.time-1);





function Calc_color (start, end)


{return (end-(IN_EL.TIME/10) * (End-start));}





var t_f_r = Calc_color (F_r, fr), T_f_g = Calc_color (F_g, FG), T_f_b = Calc_color (F_b, FB);


var t_k_r = Calc_color (K_r, kr), T_k_g = Calc_color (K_g, kg), T_k_b = Calc_color (K_b, KB);


var t_b_r = Calc_color (B_r, br), T_b_g = Calc_color (b_g, bg), T_b_b = Calc_color (B_b, BB);





In_el.style.color = "#" + Dec2hex (t_f_r) + Dec2hex (t_f_g) + Dec2hex (t_f_b);


In_el.style.borderColor = "#" + Dec2hex (t_b_r) + Dec2hex (t_b_g) + Dec2hex (t_b_b);


In_el.style.backgroundColor = "#" + Dec2hex (t_k_r) + Dec2hex (t_k_g) + Dec2hex (T_k_b);





if (!in_el.time)


{


Clearinterval (In_el.timer);


Return


}


};





_shift_colors ();





In_el.timer = Window.setinterval (_shift_colors, 50);


},





_setup_style:function (obj, top, left, width, height, position, Border_color, Bg_color, Line_height, Font_size, Font_weig HT, Padding_left, Padding_right)


{


var os = Obj.style;





if (top) os.top = top;


if (left) Os.left = left;


if (width) os.width = width;


if (height) os.height = height;





if (position) os.position = position;





if (border_color) Os.border = "1px solid" + border_color;


if (bg_color) Os.backgroundcolor = Bg_color;





os.textalign = "center";





if (line_height) os.lineheight = line_height;


if (font_size) os.fontsize = font_size;





Os.fontweight = Font_weight | | "Bold";





if (padding_left) os.paddingleft = Padding_left;


if (padding_right) os.paddingright = padding_right;


},





_setup_key:function (parent, ID, top, left, width, height, border_color, Bg_color, Line_height, Font_size, Font_weight, PA Dding_left, Padding_right)


{


var _id = this. Cntr.id + ID;


var exists = document.getElementById (_id);





var key = exists? Exists.parentNode:document.createElement ("DIV");


This._setup_style (key, top, left, width, height, "absolute");





var key_sub = exists | | Document.createelement ("DIV");


Key.appendchild (key_sub); Parent.appendchild (key);





This._setup_style (Key_sub, "", "", "", Line_height, "relative", Border_color, Bg_color, Line_height, Font_size, Font_ Weight, padding_left, padding_right);


Key_sub.id = _id;





if (!exists) this._setup_event (key_sub, ' MouseDown ', this._generic_callback_proc);





return key_sub;


},





_findx:function (obj)


{return (obj && obj.parentnode) parsefloat (obj.parentNode.offsetLeft): 0;},





_findy:function (obj)


{return (obj && obj.parentnode) parsefloat (OBJ.PARENTNODE.OFFSETTOP): 0;},





_findw:function (obj)


{return (obj && obj.parentnode) parsefloat (obj.parentNode.offsetWidth): 0;},





_findh:function (obj)


{return (obj && obj.parentnode) parsefloat (obj.parentNode.offsetHeight): 0;},





_construct:function (container_id, Callback_ref, Font_name, Font_size, Font_color, Bg_color, Key_color,


Border_color, Show_click, Click_font_color, Click_bg_color, Click_border_color, do_embed)


{


var exists = (this. cntr!= undefined), CT = exists? This. Cntr:document.getElementById (container_id);


var changed = (font_size && (font_size!= this.fontsize));





This._callback = ((typeof (Callback_ref) = "function") && ((callback_ref.length = 1) | | (Callback_ref.length = 2)) ? Callback_ref: (This._callback | | null);





var ff = Font_name | | This.fontname | | "";


var fs = Font_size | | This.fontsize | | "14px";





var fc = Font_color | | This.fontcolor | | "#000";


var bg = Bg_color | | This.bgcolor | | "#FFF";


var kc = Key_color | | This.keycolor | | "#FFF";


var bc = Border_color | | This.bordercolor | | "#777";





THIS.CFC = Click_font_color | | THIS.CFC | | "#CC3300";


THIS.CBG = Click_bg_color | | THIS.CBG | | "#FF9966";


THIS.CBR = Click_border_color | | THIS.CBR | | "#CC3300";





This.sc = (Show_click = = undefined)? ((This.sc = = undefined) False:this.sc): Show_click;





This.fontname = ff, this.fontsize = FS, This.fontcolor = FC;


This.bgcolor = bg, This.keycolor = kc, this.bordercolor = BC;





if (!exists)


{


This. cntr = ct, this. Lastkey = null;





VATMPAD.PROTOTYPE.KBARRAY[CONTAINER_ID] = this;


}





var kb = exists? Ct.childnodes[0]: document.createelement ("DIV");





if (!exists)


{


Ct.appendchild (KB);


Ct.style.display = "block";


Ct.style.zIndex = 999;





if (do_embed)


Ct.style.position = "relative";


Else


{


Ct.style.position = "absolute";





Many to Peter-paul Koch (www.quirksmode.org) for the find-pos-x/find-pos-y code.


var initx = 0, ct_ = ct;


if (ct_.offsetparent)


{


while (ct_.offsetparent)


{


Initx + = Ct_.offsetleft;


Ct_ = ct_.offsetparent;


}


}


else if (ct_.x)


Initx + = ct_.x;





var inity = 0; ct_ = ct;


if (ct_.offsetparent)


{


while (ct_.offsetparent)


{


Inity + = Ct_.offsettop;


Ct_ = ct_.offsetparent;


}


}


else if (CT_.Y)


Inity + = Ct_.y;





Ct.style.top = inity + "px", Ct.style.left = Initx + "px";


}





Kb.style.position = "relative";


Kb.style.top = "0px", kb.style.left = "0px";


}





Kb.style.border = "1px solid" + BC;





var Kb_main = exists? Kb.childnodes[0]: document.createelement ("DIV"), KS = Kb_main.style;


if (!exists)


{


Kb.appendchild (Kb_main);





Ks.position = "relative";


Ks.width = "1px";


Ks.cursor = "Default";


}





Disable Content Selection:


This._setup_event (Kb_main, "Selectstart", function (event) {return false;});


This._setup_event (Kb_main, "MouseDown", function (event) {if (Event.preventdefault) Event.preventdefault (); False });





ks.fontfamily = ff, ks.backgroundcolor = BG;





if (!exists | | changed)


{


Ks.width = This._create_numpad (container_id, Kb_main);


Ks.height = (This._findy (this. Lastkey) + THIS._FINDH (this. Lastkey) + 1) + "px";


}





return this;


},





_create_numpad:function (container_id, parent)


{


var c = "center", n = "normal";


var fs = this.fontsize, KC = this.keycolor, bc = This.bordercolor;





var mag = parsefloat (FS)/14.0, cell = Math.floor (25.0 * mag);


var cp = string (cell) + "px", LH = String (Math.floor (cell-2.0)) + "px";





var edge = "1px";





var kb_pad_7 = This._setup_key (parent, "___pad_7", "1px", Edge, CP, CP, BC, KC, LH, FS);


kb_pad_7.innerhtml = "7";





var edge_1 = String (This._findx (kb_pad_7) + THIS._FINDW (kb_pad_7) + 1) + "px";





var kb_pad_8 = This._setup_key (parent, "___pad_8", "1px", Edge_1, CP, CP, BC, KC, LH, FS);


kb_pad_8.innerhtml = "8";





var edge_2 = String (This._findx (kb_pad_8) + THIS._FINDW (kb_pad_8) + 1) + "px";





var kb_pad_9 = This._setup_key (parent, "___pad_9", "1px", Edge_2, CP, CP, BC, KC, LH, FS);


kb_pad_9.innerhtml = "9";





var PREVH = This._findh (kb_pad_9), edge_y = (This._findy (kb_pad_9) + PREVH + 1) + "px";





Edge_y = (This._findy (kb_pad_7) + PREVH + 1) + "px";





var kb_pad_4 = This._setup_key (parent, "___pad_4", Edge_y, Edge, CP, CP, BC, KC, LH, FS);


kb_pad_4.innerhtml = "4";





var kb_pad_5 = This._setup_key (parent, "___pad_5", Edge_y, Edge_1, CP, CP, BC, KC, LH, FS);


kb_pad_5.innerhtml = "5";





var kb_pad_6 = This._setup_key (parent, "___pad_6", Edge_y, Edge_2, CP, CP, BC, KC, LH, FS);


kb_pad_6.innerhtml = "6";





Edge_y = (This._findy (kb_pad_4) + PREVH + 1) + "px";





var kb_pad_1 = This._setup_key (parent, "___pad_1", Edge_y, Edge, CP, CP, BC, KC, LH, FS);


kb_pad_1.innerhtml = "1";





var kb_pad_2 = This._setup_key (parent, "___pad_2", Edge_y, Edge_1, CP, CP, BC, KC, LH, FS);


kb_pad_2.innerhtml = "2";





var kb_pad_3 = This._setup_key (parent, "___pad_3", Edge_y, Edge_2, CP, CP, BC, KC, LH, FS);


kb_pad_3.innerhtml = "3";





Edge_y = (This._findy (kb_pad_1) + PREVH + 1) + "px";





var kb_pad_0 = This._setup_key (parent, "___pad_0", Edge_y, Edge, CP, CP, BC, KC, LH, FS);


kb_pad_0.innerhtml = "0";





var kb_pad_enter = This._setup_key (parent, "___pad_period", Edge_y, Edge_1, String (2 * cell + 1) + "px", CP, BC, KC, LH, p Arsefloat (FS) * 0.9, N);


kb_pad_enter.innerhtml = "Enter";





This. Lastkey = Kb_pad_enter;





Return String (This._findx (kb_pad_9) + THIS._FINDW (kb_pad_9) + 1) + "px";


},





_generic_callback_proc:function (Event)


{


var e = Event | | window.event;


var in_el = E.srcelement | | E.target;


var container_id = in_el.id.substring (0, In_el.id.indexOf ("___"));





var vpad = vatmpad.prototype.kbarray[container_id];





if (Vpad.sc) Vpad._start_flash (In_el);





if (vpad._callback) vpad._callback (in_el.innerhtml, Vpad. Cntr.id);


},





Setparameters:function ()


{


var L = arguments.length;


if (!l | | (l% 2!= 0)) return false;





var p0, p1, p2, p3, P4, P5, P6, P7, P8, P9, P10;





while (--l > 0)


{


var value = Arguments[l];





Switch (ARGUMENTS[L-1])


{


Case "Callback":


P0 = ((typeof (value) = "function") && ((value.length = 1) | | (Value.length = 2)) ? Value:this._callback;


Break





Case "Font-name": p1 = value; Break


Case "Font-size": P2 = value; Break


Case "Font-color": P3 = value; Break


Case "Base-color": P4 = value; Break


Case "Key-color": P5 = value; Break





Case "Border-color": P6 = value; Break


Case "Show-click": P7 = value; Break





Case "Click-font-color": P8 = value; Break


Case "Click-key-color": p9 = value; Break


Case "Click-border-color": P10 = value; Break





Default:break;


}





L-= 1;


}





This._construct (this. Cntr.id, P0, p1, p2, p3, P4, P5, P6, P7, P8;





return true;


},





Show:function (value)


{


var ct = this. Cntr.style;





Ct.display = ((value = = undefined) | | (value = = True)) ? "Block": ((value = = False)? "None": ct.display);


}


};


Package file Download