Supports javascript keyboard _ javascript skills in multiple formats

Supports multi-medium format JS keyboards /*
* JavaScript Virtual Keyboard (ATM-style numpad variant), version 2.3
*
* Copyright (C) 2006-2007 Dmitriy Khudorozhkov
*
* This software is provided "as-is", without any express or implied warranty.
* In no event will the author be held liable for any damages arising from
* Use of this software.
*
* Permission is granted to anyone to use this software for any purpose,
* Including cial applications, and to alter it and redistribute it
* Freely, subject to the following restrictions:
*
* 1. The origin of this software must not be misrepresented; you must not
* Claim that you wrote the original software. If you use this software
* In a product, an acknowledgment in the product documentation wocould be
* Appreciated but is not required.
*
* 2. Altered source versions must be plainly marked as such, and must not be
* Misrepresented as being the original software.
*
* 3. This notice may not be 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), 16): 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 = "0123456789 ABCDEF ";
Var a = dec % 16;
Var B = (dec-a)/16;

Return hexChars. charAt (B) + hexChars. charAt (a) + "";
}

In_el.time =! In_el.time? 10: (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_weight, 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, padding_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 ";

// Parse thanks 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 (); return 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 prevl = this. _ findH (kb_pad_9), edge_Y = (this. _ findY (kb_pad_9) + prevl + 1) + "px ";

Edge_Y = (this. _ findY (kb_pad_7) + prevl + 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) + prevl + 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) + prevl + 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, parseFloat (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.tar get;
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, p9, p10 );

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