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

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