js/vendor/jsKeyboard.js

   1 var $j = jQuery.noConflict();
   2 var jsKeyboard = {
   3     settings: {
   4         buttonClass: "button", // default button class
   5         onclick: "jsKeyboard.write();", // default onclick event for button
   6         keyClass: "key", // default key class used to define style of text of the button
   7         text: {
   8             close: "close"
   9         }
  10     },
  11     "keyboard": [], // different keyboards can be set to this variable in order to switch between keyboards easily.
  12     init: function(elem, keyboard) {
  13         jsKeyboard.keyboard["default"] = jsKeyboard.defaultKeyboard;
  14         jsKeyboard.keyboardLayout = elem;
  15
  16         if (keyboard != null && keyboard != undefined)
  17             jsKeyboard.generateKeyboard(keyboard);
  18         else
  19             jsKeyboard.generateKeyboard("default");
  20
  21         jsKeyboard.addKeyDownEvent();
  22
  23          jsKeyboard.show();
  24          $j(':input').not('[type="reset"]').not('[type="submit"]').on('focus, click', function(e)
  25          {
  26             jsKeyboard.currentElement = $j(this);
  27             jsKeyboard.currentElementCursorPosition = $j(this).getCursorPosition();
  28             console.log('keyboard is now focused on '+jsKeyboard.currentElement.attr('name')+' at pos('+jsKeyboard.currentElementCursorPosition+')');
  29          });
  30     },
  31     focus: function(t) {
  32         jsKeyboard.currentElement = $j(t);
  33         jsKeyboard.show();
  34     },
  35     keyboardLayout: "", // it shows the html element where keyboard is generated
  36     currentKeyboard: "default", // it shows the which keyboard is used. If it's not set default keyboard is used.
  37     currentElement: null,
  38     generateKeyboard: function(keyboard) {
  39         var bClass = "";
  40         var kClass = "";
  41         var onclick = "";
  42         var text = "";
  43
  44         var s = "";
  45         s += "<div id=\"keyboard\">";
  46         s += "<div id=\"keyboardHeader\">";
  47         // s += "<div onclick=\"jsKeyboard.hide();\"><span>" + jsKeyboard.settings.text.close + "</span><span class=\"closex\"> X</span></div>"
  48         s += "</div>";
  49
  50         /*small letter */
  51         s += "<div id=\"keyboardSmallLetter\">";
  52         $j.each(jsKeyboard.keyboard[keyboard].smallLetter, function(i, key) {
  53             generate(key);
  54         });
  55         s += "</div>";
  56
  57         /*capital letter*/
  58         s += "<div id=\"keyboardCapitalLetter\">";
  59         $j.each(jsKeyboard.keyboard[keyboard].capitalLetter, function(i, key) {
  60             generate(key);
  61         });
  62         s += "</div>";
  63
  64         /*number*/
  65         s += "<div id=\"keyboardNumber\">";
  66         $j.each(jsKeyboard.keyboard[keyboard].number, function(i, key) {
  67             generate(key);
  68         });
  69         s += "</div>";
  70
  71         /*symbols*/
  72         s += "<div id=\"keyboardSymbols\">";
  73         $j.each(jsKeyboard.keyboard[keyboard].symbols, function(i, key) {
  74             generate(key);
  75         });
  76         s += "</div>";
  77
  78         function generate(key) {
  79             bClass = key.buttonClass == undefined ? jsKeyboard.settings.buttonClass : key.buttonClass;
  80             kClass = key.keyClass == undefined ? jsKeyboard.settings.keyClass : key.keyClass;
  81             onclick = key.onclick == undefined ? jsKeyboard.settings.onclick.replace("()", "(" + key.value + ")") : key.onclick;
  82
  83             text = (key.isChar != undefined || key.isChar == false) ? key.value : String.fromCharCode(key.value);
  84
  85             s += "<div class=\"" + bClass + "\" onclick=\"" + onclick + "\"><div class=\"" + kClass + "\">" + text + "</div></div>";
  86
  87             bClass = ""; kClass = ""; onclick = ""; text = "";
  88         }
  89
  90         $j("#" + jsKeyboard.keyboardLayout).html(s);
  91     },
  92     addKeyDownEvent: function() {
  93         $j("#keyboardCapitalLetter > div.button, #keyboardSmallLetter > div.button, #keyboardNumber > div.button, #keyboardSymbols > div.button").
  94             bind('mousedown', (function() { $j(this).addClass("buttonDown"); })).
  95             bind('mouseup', (function() { $j(this).removeClass("buttonDown"); })).
  96             bind('mouseout', (function() { $j(this).removeClass("buttonDown"); }));
  97
  98             //key focus down on actual keyboard key presses
  99             //todo:....
 100
 101     },
 102     changeToSmallLetter: function() {
 103         $j("#keyboardCapitalLetter,#keyboardNumber,#keyboardSymbols").css("display", "none");
 104         $j("#keyboardSmallLetter").css("display", "block");
 105     },
 106     changeToCapitalLetter: function() {
 107         $j("#keyboardCapitalLetter").css("display", "block");
 108         $j("#keyboardSmallLetter,#keyboardNumber,#keyboardSymbols").css("display", "none");
 109     },
 110     changeToNumber: function() {
 111         $j("#keyboardNumber").css("display", "block");
 112         $j("#keyboardSymbols,#keyboardCapitalLetter,#keyboardSmallLetter").css("display", "none");
 113     },
 114     changeToSymbols: function() {
 115         $j("#keyboardCapitalLetter,#keyboardNumber,#keyboardSmallLetter").css("display", "none");
 116         $j("#keyboardSymbols").css("display", "block");
 117     },
 118     updateCursor: function()
 119     {
 120         //input cursor focus and position during typing
 121         jsKeyboard.currentElement.setCursorPosition(jsKeyboard.currentElementCursorPosition);
 122     },
 123     write: function(m) {
 124         var a = jsKeyboard.currentElement.val(),
 125             b = String.fromCharCode(m),
 126             pos = jsKeyboard.currentElementCursorPosition,
 127             output = [a.slice(0, pos), b, a.slice(pos)].join('');
 128         jsKeyboard.currentElement.val(output);
 129         jsKeyboard.currentElementCursorPosition++; //+1 cursor
 130         jsKeyboard.updateCursor();
 131     },
 132     del: function() {
 133         var a = jsKeyboard.currentElement.val(),
 134             pos = jsKeyboard.currentElementCursorPosition,
 135             output = [a.slice(0, pos-1), a.slice(pos)].join('');
 136         jsKeyboard.currentElement.val(output);
 137         jsKeyboard.currentElementCursorPosition--; //-1 cursor
 138         jsKeyboard.updateCursor();
 139     },
 140     enter: function() {
 141         var t = jsKeyboard.currentElement.val();
 142         jsKeyboard.currentElement.val(t + "\n");
 143     },
 144     space: function() {
 145         var a = jsKeyboard.currentElement.val(),
 146             b = " ",
 147             pos = jsKeyboard.currentElementCursorPosition,
 148             output = [a.slice(0, pos), b, a.slice(pos)].join('');
 149         jsKeyboard.currentElement.val(output);
 150         jsKeyboard.currentElementCursorPosition++; //+1 cursor
 151         jsKeyboard.updateCursor();
 152     },
 153     writeSpecial: function(m) {
 154         var a = jsKeyboard.currentElement.val(),
 155             b = String.fromCharCode(m),
 156             pos = jsKeyboard.currentElementCursorPosition,
 157             output = [a.slice(0, pos), b, a.slice(pos)].join('');
 158         jsKeyboard.currentElement.val(output);
 159         jsKeyboard.currentElementCursorPosition++; //+1 cursor
 160         jsKeyboard.updateCursor();
 161     },
 162     show: function() {
 163         $j("#keyboard").animate({ "bottom": "0" }, "slow", function() { });
 164     },
 165     hide: function() {
 166         $j("#keyboard").animate({ "bottom": "-350px" }, "slow", function() { });
 167     },
 168     defaultKeyboard: {
 169         capitalLetter:
 170             [
 171         // 1st row
 172                { value: 81 },{ value: 87 },{ value: 69 },{ value: 82 },{ value: 84 },{ value: 89 },
 173                { value: 85 },{ value: 73 },{ value: 79 },{ value: 80 },
 174                { value: "Delete", isChar: "false", onclick: "jsKeyboard.del()", buttonClass: "button button_del", keyClass: "key key_del" },
 175         // 2nd row
 176                { value: 65, buttonClass: "button button_a" },{ value: 83 },{ value: 68 },{ value: 70 },
 177                { value: 71 },{ value: 72 },{ value: 74 },{ value: 75 },{ value: 76 },
 178                { value: "Enter", isChar: "false", buttonClass: "button button_enter", onclick: "jsKeyboard.enter();", keyClass: "key key_enter" },
 179         // 3rd row
 180                { value: "abc", isChar: "false", buttonClass: "button button_smallletter", onclick: "jsKeyboard.changeToSmallLetter();", keyClass: "key key_smallletter" },
 181                { value: 90 },{ value: 88 },{ value: 67 },{ value: 86 },{ value: 66 },{ value: 78 },
 182                { value: 77 },{ value: 44 },{ value: 46 },{ value: 64 },
 183         // 4th row
 184                { value: "123", isChar: "false", buttonClass: "button button_numberleft", onclick: "jsKeyboard.changeToNumber();", keyClass: "key key_number" },
 185                { value: "Space", isChar: "false", buttonClass: "button button_space", onclick: "jsKeyboard.space();", keyClass: "key key_space" },
 186                { value: "#%+", isChar: "false", buttonClass: "button button_symbolsright", onclick: "jsKeyboard.changeToSymbols();", keyClass: "key key_symbols" }
 187             ],
 188         smallLetter: [
 189         // 1st row
 190                 { value: 113 },{ value: 119 },{ value: 101 },{ value: 114 },{ value: 116 },
 191                 { value: 121 },{ value: 117 },{ value: 105 },{ value: 111 },{ value: 112 },
 192                 { value: "Delete", isChar: "false", onclick: "jsKeyboard.del()", buttonClass: "button button_del", keyClass: "key key_del" },
 193         // 2nd row
 194                 { value: 97, buttonClass: "button button_a" },{ value: 115 },{ value: 100 },{ value: 102 },
 195                 { value: 103 },{ value: 104 },{ value: 106 },{ value: 107 },{ value: 108 },
 196                 { value: "Enter", isChar: "false", buttonClass: "button button_enter", onclick: "jsKeyboard.enter();", keyClass: "key key_enter" },
 197         // 3rd row
 198                 { value: "ABC", isChar: "false", buttonClass: "button button_capitalletterleft", onclick: "jsKeyboard.changeToCapitalLetter();", keyClass: "key key_capitalletterleft" },
 199                 { value: 122 },{ value: 120 },{ value: 99 },{ value: 118 },{ value: 98 },
 200                 { value: 110 },{ value: 109 },{ value: 44 },{ value: 46 },{ value: 64 },
 201         // 4th row
 202                 { value: "123", isChar: "false", buttonClass: "button button_numberleft", onclick: "jsKeyboard.changeToNumber();", keyClass: "key key_number" },
 203                 // { value: 32, buttonClass: "button button_space" },
 204                 { value: "Space", isChar: "false", buttonClass: "button button_space", onclick: "jsKeyboard.space();", keyClass: "key key_space" },
 205                 { value: "#%+", isChar: "false", buttonClass: "button button_symbolsright", onclick: "jsKeyboard.changeToSymbols();", keyClass: "key key_symbols" }
 206             ],
 207         number: [
 208         // 1st row
 209                 { value: 49 },{ value: 50 },{ value: 51 },{ value: 52 },{ value: 53 },{ value: 54 },
 210                 { value: 55 },{ value: 56 },{ value: 57 },{ value: 48 },
 211                 { value: "Delete", isChar: "false", onclick: "jsKeyboard.del()", buttonClass: "button button_del", keyClass: "key key_del" },
 212         // 2nd row
 213                 { value: 45, buttonClass: "button button_dash" },{ value: 47 },{ value: 58 },{ value: 59 },
 214                 { value: 40 },{ value: 41 },{ value: 36 },{ value: 38 },{ value: 64 },
 215                 { value: "Enter", isChar: "false", buttonClass: "button button_enter", onclick: "jsKeyboard.enter();", keyClass: "key key_enter" },
 216         //3rd row
 217                 // { value: "ABC", isChar: "false", buttonClass: "button button_capitalletterleft", onclick: "jsKeyboard.changeToCapitalLetter()", keyClass: "key key_capitalletterleft" },
 218                 { value: "", isChar: "false", buttonClass: "button button_capitalletterleft", onclick: "", keyClass: "key" },
 219                 { value: 63 },{ value: 33 },{ value: 34 },{ value: 124 },{ value: 92 },{ value: 42 },{ value: 61 },{ value: 43 },
 220                 // { value: "ABC", isChar: "false", buttonClass: "button button_capitalletterright", onclick: "jsKeyboard.changeToCapitalLetter();", keyClass: "key key_capitalletterright" },
 221                 { value: "", isChar: "false", buttonClass: "button", onclick: "", keyClass: "key" },
 222                 { value: "", isChar: "false", buttonClass: "button", onclick: "", keyClass: "key" },
 223
 224         // 4th row
 225                 { value: "ABC", isChar: "false", buttonClass: "button button_numberleft", onclick: "jsKeyboard.changeToCapitalLetter();", keyClass: "key key_capitalletterleft" },
 226                 { value: "Space", isChar: "false", buttonClass: "button button_space", onclick: "jsKeyboard.space();", keyClass: "key key_space" },
 227                 { value: "#%+", isChar: "false", buttonClass: "button button_symbolsright", onclick: "jsKeyboard.changeToSymbols();", keyClass: "key key_symbols" }
 228             ],
 229         symbols: [
 230         // 1st row
 231             { value: 91 },{ value: 93 },{ value: 123 },{ value: 125 },{ value: 35 },{ value: 37 },
 232             { value: 94 },{ value: 42 },{ value: 43 },{ value: 61 },
 233             { value: "Delete", isChar: "false", onclick: "jsKeyboard.del()", buttonClass: "button button_del", keyClass: "key key_del" },
 234         // 2nd row
 235             { value: 95, buttonClass: "button button_underscore" },{ value: 92 },{ value: 124 },{ value: 126 },
 236             { value: 60 },{ value: 62 },
 237             { value: "&euro;", isChar: "false", onclick: "jsKeyboard.writeSpecial('&euro;');" },
 238             { value: 163 },{ value: 165 },
 239             { value: "Enter", isChar: "false", buttonClass: "button button_enter", onclick: "jsKeyboard.enter();", keyClass: "key key_enter" },
 240         // 3rd row
 241             // { value: "ABC", isChar: "false", buttonClass: "button button_capitalletterleft", onclick: "jsKeyboard.changeToCapitalLetter();", keyClass: "key key_capitalletterleft" },
 242             { value: "", isChar: "false", buttonClass: "button button_capitalletterleft", onclick: "", keyClass: "key" },
 243             { value: 46 },{ value: 44 },{ value: 63 },{ value: 33 },{ value: 39 },{ value: 34 },{ value: 59 },{ value: 92 },
 244             // { value: "ABC", isChar: "false", buttonClass: "button button_capitalletterright", onclick: "jsKeyboard.changeToCapitalLetter();", keyClass: "key key_capitalletterright" },
 245             { value: "", isChar: "false", buttonClass: "button", onclick: "", keyClass: "key" },
 246             { value: "", isChar: "false", buttonClass: "button", onclick: "", keyClass: "key" },
 247         // 4th row
 248             { value: "123", isChar: "false", buttonClass: "button button_numberleft", onclick: "jsKeyboard.changeToNumber();", keyClass: "key key_number" },
 249             { value: "Space", isChar: "false", buttonClass: "button button_space", onclick: "jsKeyboard.space();", keyClass: "key key_space" },
 250             { value: "ABC", isChar: "false", buttonClass: "button button_symbolsright", onclick: "jsKeyboard.changeToCapitalLetter();", keyClass: "key key_capitalletterleft" },
 251          ]
 252     }
 253 }
 254
 255
 256 // GET CURSOR POSITION
 257 jQuery.fn.getCursorPosition = function(){
 258     if(this.length == 0) return -1;
 259     return $j(this).getSelectionStart();
 260 }
 261
 262 jQuery.fn.getSelectionStart = function(){
 263     if(this.length == 0) return -1;
 264     input = this[0];
 265
 266     var pos = input.value.length;
 267
 268     if (input.createTextRange) {
 269         var r = document.selection.createRange().duplicate();
 270         r.moveEnd('character', input.value.length);
 271         if (r.text == '')
 272         pos = input.value.length;
 273         pos = input.value.lastIndexOf(r.text);
 274     } //else if(typeof(input.selectionStart)!="undefined")
 275     //pos = input.selectionStart;
 276
 277     return pos;
 278 }
 279
 280 //SET CURSOR POSITION
 281 jQuery.fn.setCursorPosition = function(pos) {
 282   this.each(function(index, elem) {
 283     if (elem.setSelectionRange) {
 284       elem.setSelectionRange(pos, pos);
 285     } else if (elem.createTextRange) {
 286       var range = elem.createTextRange();
 287       range.collapse(true);
 288       range.moveEnd('character', pos);
 289       range.moveStart('character', pos);
 290       range.select();
 291     }
 292   });
 293   return this;
 294 };