addons/point_of_sale/static/src/js/widget_keyboard.js

   1 openerp.point_of_sale.load_keyboard = function load_keyboard(instance, module){ //module is instance.point_of_sale
   2     "use strict";
   3
   4     // ---------- OnScreen Keyboard Widget ----------
   5     // A Widget that displays an onscreen keyboard.
   6     // There are two options when creating the widget :
   7     //
   8     // * 'keyboard_model' : 'simple' | 'full' (default)
   9     //   The 'full' emulates a PC keyboard, while 'simple' emulates an 'android' one.
  10     //
  11     // * 'input_selector  : (default: '.searchbox input')
  12     //   defines the dom element that the keyboard will write to.
  13     //
  14     // The widget is initially hidden. It can be shown with this.show(), and is
  15     // automatically shown when the input_selector gets focused.
  16
  17     module.OnscreenKeyboardWidget = instance.web.Widget.extend({
  18         template: 'OnscreenKeyboardSimple',
  19         init: function(parent, options){
  20             var self = this;
  21             this._super(parent,options);
  22             options = options || {};
  23
  24             this.keyboard_model = options.keyboard_model || 'full';
  25             if(this.keyboard_model === 'full'){
  26                 this.template = 'OnscreenKeyboardFull';
  27             }
  28
  29             this.input_selector = options.input_selector || '.searchbox input';
  30             this.$target = null;
  31
  32             //Keyboard state
  33             this.capslock = false;
  34             this.shift    = false;
  35             this.numlock  = false;
  36         },
  37
  38         connect : function(target){
  39             var self = this;
  40             this.$target = $(target);
  41             this.$target.focus(function(){self.show();});
  42         },
  43         generateEvent: function(type,key){
  44             var event = document.createEvent("KeyboardEvent");
  45             var initMethod =  event.initKeyboardEvent ? 'initKeyboardEvent' : 'initKeyEvent';
  46             event[initMethod](  type,
  47                                 true, //bubbles
  48                                 true, //cancelable
  49                                 window, //viewArg
  50                                 false, //ctrl
  51                                 false, //alt
  52                                 false, //shift
  53                                 false, //meta
  54                                 ((typeof key.code === 'undefined') ? key.char.charCodeAt(0) : key.code),
  55                                 ((typeof key.char === 'undefined') ? String.fromCharCode(key.code) : key.char)
  56                             );
  57             return event;
  58
  59         },
  60
  61         // Write a character to the input zone
  62         writeCharacter: function(character){
  63             var input = this.$target[0];
  64             input.dispatchEvent(this.generateEvent('keydown',{char: character}));
  65             if(character !== '\n'){
  66                 input.value += character;
  67             }
  68             input.dispatchEvent(this.generateEvent('keyup',{char: character}));
  69         },
  70
  71         // Removes the last character from the input zone.
  72         deleteCharacter: function(){
  73             var input = this.$target[0];
  74             input.dispatchEvent(this.generateEvent('keydown',{code: 8}));
  75             input.value = input.value.substr(0, input.value.length -1);
  76             input.dispatchEvent(this.generateEvent('keyup',{code: 8}));
  77         },
  78
  79         // Clears the content of the input zone.
  80         deleteAllCharacters: function(){
  81             var input = this.$target[0];
  82             if(input.value){
  83                 input.dispatchEvent(this.generateEvent('keydown',{code: 8}));
  84                 input.value = "";
  85                 input.dispatchEvent(this.generateEvent('keyup',{code: 8}));
  86             }
  87         },
  88
  89         // Makes the keyboard show and slide from the bottom of the screen.
  90         show:  function(){
  91             $('.keyboard_frame').show().css({'height':'235px'});
  92         },
  93
  94         // Makes the keyboard hide by sliding to the bottom of the screen.
  95         hide:  function(){
  96             $('.keyboard_frame')
  97                 .css({'height':'0'})
  98                 .hide();
  99             this.reset();
 100         },
 101
 102         //What happens when the shift key is pressed : toggle case, remove capslock
 103         toggleShift: function(){
 104             $('.letter').toggleClass('uppercase');
 105             $('.symbol span').toggle();
 106
 107             self.shift = (self.shift === true) ? false : true;
 108             self.capslock = false;
 109         },
 110
 111         //what happens when capslock is pressed : toggle case, set capslock
 112         toggleCapsLock: function(){
 113             $('.letter').toggleClass('uppercase');
 114             self.capslock = true;
 115         },
 116
 117         //What happens when numlock is pressed : toggle symbols and numlock label
 118         toggleNumLock: function(){
 119             $('.symbol span').toggle();
 120             $('.numlock span').toggle();
 121             self.numlock = (self.numlock === true ) ? false : true;
 122         },
 123
 124         //After a key is pressed, shift is disabled.
 125         removeShift: function(){
 126             if (self.shift === true) {
 127                 $('.symbol span').toggle();
 128                 if (this.capslock === false) $('.letter').toggleClass('uppercase');
 129
 130                 self.shift = false;
 131             }
 132         },
 133
 134         // Resets the keyboard to its original state; capslock: false, shift: false, numlock: false
 135         reset: function(){
 136             if(this.shift){
 137                 this.toggleShift();
 138             }
 139             if(this.capslock){
 140                 this.toggleCapsLock();
 141             }
 142             if(this.numlock){
 143                 this.toggleNumLock();
 144             }
 145         },
 146
 147         //called after the keyboard is in the DOM, sets up the key bindings.
 148         start: function(){
 149             var self = this;
 150
 151             //this.show();
 152
 153
 154             $('.close_button').click(function(){
 155                 self.deleteAllCharacters();
 156                 self.hide();
 157             });
 158
 159             // Keyboard key click handling
 160             $('.keyboard li').click(function(){
 161
 162                 var $this = $(this),
 163                     character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
 164
 165                 if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
 166                     self.toggleShift();
 167                     return false;
 168                 }
 169
 170                 if ($this.hasClass('capslock')) {
 171                     self.toggleCapsLock();
 172                     return false;
 173                 }
 174
 175                 if ($this.hasClass('delete')) {
 176                     self.deleteCharacter();
 177                     return false;
 178                 }
 179
 180                 if ($this.hasClass('numlock')){
 181                     self.toggleNumLock();
 182                     return false;
 183                 }
 184
 185                 // Special characters
 186                 if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
 187                 if ($this.hasClass('space')) character = ' ';
 188                 if ($this.hasClass('tab')) character = "\t";
 189                 if ($this.hasClass('return')) character = "\n";
 190
 191                 // Uppercase letter
 192                 if ($this.hasClass('uppercase')) character = character.toUpperCase();
 193
 194                 // Remove shift once a key is clicked.
 195                 self.removeShift();
 196
 197                 self.writeCharacter(character);
 198             });
 199         },
 200     });
 201 }