[IMP] First working draft of the OnScreen Keyboard
bzr revid: fva@openerp.com-20120405125843-axg3m7h10g5sg6mx
This commit is contained in:
Frédéric van der Essen
parent
5faa8d6ece
commit
7a54f94ac0
|
|
@ -487,3 +487,149 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Onscreen Keyboard http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/ */
|
||||
|
||||
.point-of-sale .keyboard_frame{
|
||||
display: none;
|
||||
position:absolute;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: 15px;
|
||||
width: 100%;
|
||||
height: 0px; /* 235px, animated via jquery */
|
||||
background-color: #BBB;
|
||||
overflow:hidden;
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0, 0.3);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
.point-of-sale .keyboard_frame .close_button{
|
||||
height:40px;
|
||||
width:60px;
|
||||
text-align:center;
|
||||
background-color: #DDD;
|
||||
font-size: 12px;
|
||||
line-height:40px;
|
||||
border: 1px solid #CCC;
|
||||
-webkit-border-radius: 5px;
|
||||
-webkit-box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.point-of-sale .keyboard li {
|
||||
float: left;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
top:0;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-webkit-box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
|
||||
-webkit-transition-property: top, background-color;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
-webkit-transition-timing-function: linear;
|
||||
}
|
||||
.point-of-sale .keyboard li:hover {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 0px;
|
||||
border-color: #ddd;
|
||||
background-color:#e5e5e5;
|
||||
cursor: pointer;
|
||||
-webkit-transition-property: top, background-color;
|
||||
-webkit-transition-duration: 0.1s;
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
}
|
||||
.point-of-sale .uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.point-of-sale .on {
|
||||
display: none;
|
||||
}
|
||||
.point-of-sale .firstitem{
|
||||
clear: left;
|
||||
}
|
||||
.point-of-sale .keyboard .lastitem {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* ---- full sized keyboard ---- */
|
||||
|
||||
.point-of-sale .full_keyboard {
|
||||
list-style: none;
|
||||
font-size: 14px;
|
||||
width: 680px;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.point-of-sale .full_keyboard li{
|
||||
margin: 0 5px 5px 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .tab, .point-of-sale .full_keyboard .delete {
|
||||
width: 70px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .capslock {
|
||||
width: 80px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .return {
|
||||
width: 77px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .left-shift {
|
||||
width: 95px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .right-shift {
|
||||
width: 109px;
|
||||
}
|
||||
.point-of-sale .full_keyboard .space {
|
||||
clear: left;
|
||||
width: 673px;
|
||||
}
|
||||
|
||||
/* ---- simplified keyboard ---- */
|
||||
|
||||
.point-of-sale .simple_keyboard {
|
||||
list-style: none;
|
||||
font-size: 16px;
|
||||
width: 545px;
|
||||
height: 220px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.point-of-sale .simple_keyboard li{
|
||||
margin: 0 5px 5px 0;
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
line-height: 49px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .firstitem.row_asdf{
|
||||
margin-left:25px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .firstitem.row_zxcv{
|
||||
margin-left:55px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .delete{
|
||||
width: 103px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .return{
|
||||
width: 103px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .space{
|
||||
width:268px;
|
||||
}
|
||||
.point-of-sale .simple_keyboard .numlock{
|
||||
width:103px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1082,6 +1082,198 @@ openerp.point_of_sale = function(db) {
|
|||
}
|
||||
});
|
||||
|
||||
// A Widget that displays an onscreen keyboard.
|
||||
// There are two options when creating the widget :
|
||||
//
|
||||
// * 'keyboard_model' : 'simple' | 'full' (default)
|
||||
// The 'full' emulates a PC keyboard, while 'simple' emulates an 'android' one.
|
||||
//
|
||||
// * 'input_selector : (default: '.searchbox input')
|
||||
// defines the dom element that the keyboard will write to.
|
||||
//
|
||||
// The widget is initally hidden. It can be shown with this.show(), and is
|
||||
// automatically shown when the input_selector gets focused.
|
||||
var OnscreenKeyboardWidget = db.web.Widget.extend({
|
||||
tagName: 'div',
|
||||
|
||||
init: function(parent, options){
|
||||
var self = this;
|
||||
|
||||
function get_option(opt,default_value){
|
||||
if(options){
|
||||
return options[opt] || default_value;
|
||||
}else{
|
||||
return default_value;
|
||||
}
|
||||
}
|
||||
|
||||
this.keyboard_model = get_option('keyboard_model','full');
|
||||
this.template_simple = qweb_template('pos-onscreen-keyboard-simple-template');
|
||||
this.template_full = qweb_template('pos-onscreen-keyboard-full-template');
|
||||
|
||||
this.template_fct = function(){
|
||||
if( this.keyboard_model == 'full' ){
|
||||
return this.template_full.apply(this,arguments);
|
||||
}else{
|
||||
return this.template_simple.apply(this,arguments);
|
||||
}
|
||||
};
|
||||
|
||||
this.input_selector = get_option('input_selector','.searchbox input');
|
||||
|
||||
//show the keyboard when the input zone is clicked.
|
||||
$(this.input_selector).focus(function(){self.show();});
|
||||
|
||||
//Keyboard state
|
||||
this.capslock = false;
|
||||
this.shift = false;
|
||||
this.numlock = false;
|
||||
},
|
||||
|
||||
// Write a character to the input zone
|
||||
writeCharacter: function(character){
|
||||
var $input = $(this.input_selector);
|
||||
$input[0].value += character;
|
||||
$input.keydown();
|
||||
$input.keyup();
|
||||
},
|
||||
|
||||
// Sends a 'return' character to the input zone. TODO
|
||||
sendReturn: function(){
|
||||
},
|
||||
|
||||
// Removes the last character from the input zone.
|
||||
deleteCharacter: function(){
|
||||
var $input = $(this.input_selector);
|
||||
var input_value = $input[0].value;
|
||||
$input[0].value = input_value.substr(0, input_value.length - 1);
|
||||
$input.keydown();
|
||||
$input.keyup();
|
||||
},
|
||||
|
||||
// Clears the content of the input zone.
|
||||
deleteAllCharacters: function(){
|
||||
var $input = $(this.input_selector);
|
||||
$input[0].value = "";
|
||||
$input.keydown();
|
||||
$input.keyup();
|
||||
},
|
||||
renderElement: function(){
|
||||
this.$element.html(this.template_fct());
|
||||
},
|
||||
|
||||
// Makes the keyboard show and slide from the bottom of the screen.
|
||||
show: function(){
|
||||
$('.keyboard_frame').show().animate({'height':'235px'}, 500, 'swing');
|
||||
},
|
||||
|
||||
// Makes the keyboard hide by sliding to the bottom of the screen.
|
||||
hide: function(){
|
||||
var self = this;
|
||||
var frame = $('.keyboard_frame');
|
||||
frame.animate({'height':'0'}, 500, 'swing', function(){ frame.hide(); self.reset(); });
|
||||
},
|
||||
|
||||
//What happens when the shift key is pressed : toggle case, remove capslock
|
||||
toggleShift: function(){
|
||||
$('.letter').toggleClass('uppercase');
|
||||
$('.symbol span').toggle();
|
||||
|
||||
self.shift = (self.shift === true) ? false : true;
|
||||
self.capslock = false;
|
||||
},
|
||||
|
||||
//what happens when capslock is pressed : toggle case, set capslock
|
||||
toggleCapsLock: function(){
|
||||
$('.letter').toggleClass('uppercase');
|
||||
self.capslock = true;
|
||||
},
|
||||
|
||||
//What happens when numlock is pressed : toggle symbols and numlock label
|
||||
toggleNumLock: function(){
|
||||
$('.symbol span').toggle();
|
||||
$('.numlock span').toggle();
|
||||
self.numlock = (self.numlock === true ) ? false : true;
|
||||
},
|
||||
|
||||
//After a key is pressed, shift is disabled.
|
||||
removeShift: function(){
|
||||
if (self.shift === true) {
|
||||
$('.symbol span').toggle();
|
||||
if (this.capslock === false) $('.letter').toggleClass('uppercase');
|
||||
|
||||
self.shift = false;
|
||||
}
|
||||
},
|
||||
|
||||
// Resets the keyboard to its original state; capslock: false, shift: false, numlock: false
|
||||
reset: function(){
|
||||
if(this.shift){
|
||||
this.toggleShift();
|
||||
}
|
||||
if(this.capslock){
|
||||
this.toggleCapsLock();
|
||||
}
|
||||
if(this.numlock){
|
||||
this.toggleNumLock();
|
||||
}
|
||||
},
|
||||
|
||||
//called after the keyboard is in the DOM, sets up the key bindings.
|
||||
start: function(){
|
||||
var self = this;
|
||||
|
||||
//this.show();
|
||||
|
||||
|
||||
$('.close_button').click(function(){
|
||||
self.deleteAllCharacters();
|
||||
self.hide();
|
||||
});
|
||||
|
||||
// Keyboard key click handling
|
||||
$('.keyboard li').click(function(){
|
||||
|
||||
var $this = $(this),
|
||||
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
|
||||
|
||||
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
|
||||
self.toggleShift();
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($this.hasClass('capslock')) {
|
||||
self.toggleCapsLock();
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($this.hasClass('delete')) {
|
||||
self.deleteCharacter();
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($this.hasClass('numlock')){
|
||||
self.toggleNumLock();
|
||||
return false;
|
||||
}
|
||||
|
||||
// Special characters
|
||||
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
|
||||
if ($this.hasClass('space')) character = ' ';
|
||||
if ($this.hasClass('tab')) character = "\t";
|
||||
if ($this.hasClass('return')) character = "\n";
|
||||
|
||||
// Uppercase letter
|
||||
if ($this.hasClass('uppercase')) character = character.toUpperCase();
|
||||
|
||||
// Remove shift once a key is clicked.
|
||||
self.removeShift();
|
||||
|
||||
self.writeCharacter(character);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
var ShopWidget = db.web.OldWidget.extend({
|
||||
init: function(parent, options) {
|
||||
this._super(parent);
|
||||
|
|
@ -1179,6 +1371,9 @@ openerp.point_of_sale = function(db) {
|
|||
this.categoryView = new CategoryWidget(null, 'products-screen-categories');
|
||||
this.categoryView.on_change_category.add_last(_.bind(this.category, this));
|
||||
this.category();
|
||||
|
||||
this.onscreenKeyboard = new OnscreenKeyboardWidget(null,{keyboard_model:'simple'});
|
||||
this.onscreenKeyboard.appendTo($(".point-of-sale #content"));
|
||||
};
|
||||
|
||||
App.prototype.category = function(id) {
|
||||
|
|
|
|||
|
|
@ -294,4 +294,108 @@
|
|||
</table>
|
||||
</div>
|
||||
</t>
|
||||
<!-- Onscreen Keyboard :
|
||||
http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/ -->
|
||||
<t t-name="pos-onscreen-keyboard-full-template">
|
||||
<div class="keyboard_frame">
|
||||
<ul class="keyboard full_keyboard">
|
||||
<li class="symbol"><span class="off">`</span><span class="on">~</span></li>
|
||||
<li class="symbol"><span class="off">1</span><span class="on">!</span></li>
|
||||
<li class="symbol"><span class="off">2</span><span class="on">@</span></li>
|
||||
<li class="symbol"><span class="off">3</span><span class="on">#</span></li>
|
||||
<li class="symbol"><span class="off">4</span><span class="on">$</span></li>
|
||||
<li class="symbol"><span class="off">5</span><span class="on">%</span></li>
|
||||
<li class="symbol"><span class="off">6</span><span class="on">^</span></li>
|
||||
<li class="symbol"><span class="off">7</span><span class="on">&</span></li>
|
||||
<li class="symbol"><span class="off">8</span><span class="on">*</span></li>
|
||||
<li class="symbol"><span class="off">9</span><span class="on">(</span></li>
|
||||
<li class="symbol"><span class="off">0</span><span class="on">)</span></li>
|
||||
<li class="symbol"><span class="off">-</span><span class="on">_</span></li>
|
||||
<li class="symbol"><span class="off">=</span><span class="on">+</span></li>
|
||||
<li class="delete lastitem">delete</li>
|
||||
<li class="tab firstitem">tab</li>
|
||||
<li class="letter">q</li>
|
||||
<li class="letter">w</li>
|
||||
<li class="letter">e</li>
|
||||
<li class="letter">r</li>
|
||||
<li class="letter">t</li>
|
||||
<li class="letter">y</li>
|
||||
<li class="letter">u</li>
|
||||
<li class="letter">i</li>
|
||||
<li class="letter">o</li>
|
||||
<li class="letter">p</li>
|
||||
<li class="symbol"><span class="off">[</span><span class="on">{</span></li>
|
||||
<li class="symbol"><span class="off">]</span><span class="on">}</span></li>
|
||||
<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
|
||||
<li class="capslock firstitem">caps lock</li>
|
||||
<li class="letter">a</li>
|
||||
<li class="letter">s</li>
|
||||
<li class="letter">d</li>
|
||||
<li class="letter">f</li>
|
||||
<li class="letter">g</li>
|
||||
<li class="letter">h</li>
|
||||
<li class="letter">j</li>
|
||||
<li class="letter">k</li>
|
||||
<li class="letter">l</li>
|
||||
<li class="symbol"><span class="off">;</span><span class="on">:</span></li>
|
||||
<li class="symbol"><span class="off">'</span><span class="on">"</span></li>
|
||||
<li class="return lastitem">return</li>
|
||||
<li class="left-shift firstitem">shift</li>
|
||||
<li class="letter">z</li>
|
||||
<li class="letter">x</li>
|
||||
<li class="letter">c</li>
|
||||
<li class="letter">v</li>
|
||||
<li class="letter">b</li>
|
||||
<li class="letter">n</li>
|
||||
<li class="letter">m</li>
|
||||
<li class="symbol"><span class="off">,</span><span class="on"><</span></li>
|
||||
<li class="symbol"><span class="off">.</span><span class="on">></span></li>
|
||||
<li class="symbol"><span class="off">/</span><span class="on">?</span></li>
|
||||
<li class="right-shift lastitem">shift</li>
|
||||
<li class="space firstitem lastitem">&nbsp;</li>
|
||||
</ul>
|
||||
<p class="close_button">close</p>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="pos-onscreen-keyboard-simple-template">
|
||||
<div class="keyboard_frame">
|
||||
<ul class="keyboard simple_keyboard">
|
||||
<li class="symbol firstitem row_qwerty"><span class="off">q</span><span class="on">1</span></li>
|
||||
<li class="symbol"><span class="off">w</span><span class="on">2</span></li>
|
||||
<li class="symbol"><span class="off">e</span><span class="on">3</span></li>
|
||||
<li class="symbol"><span class="off">r</span><span class="on">4</span></li>
|
||||
<li class="symbol"><span class="off">t</span><span class="on">5</span></li>
|
||||
<li class="symbol"><span class="off">y</span><span class="on">6</span></li>
|
||||
<li class="symbol"><span class="off">u</span><span class="on">7</span></li>
|
||||
<li class="symbol"><span class="off">i</span><span class="on">8</span></li>
|
||||
<li class="symbol"><span class="off">o</span><span class="on">9</span></li>
|
||||
<li class="symbol lastitem"><span class="off">p</span><span class="on">0</span></li>
|
||||
|
||||
<li class="symbol firstitem row_asdf"><span class="off">a</span><span class="on">@</span></li>
|
||||
<li class="symbol"><span class="off">s</span><span class="on">#</span></li>
|
||||
<li class="symbol"><span class="off">d</span><span class="on">%</span></li>
|
||||
<li class="symbol"><span class="off">f</span><span class="on">*</span></li>
|
||||
<li class="symbol"><span class="off">g</span><span class="on">/</span></li>
|
||||
<li class="symbol"><span class="off">h</span><span class="on">-</span></li>
|
||||
<li class="symbol"><span class="off">j</span><span class="on">+</span></li>
|
||||
<li class="symbol"><span class="off">k</span><span class="on">(</span></li>
|
||||
<li class="symbol lastitem"><span class="off">l</span><span class="on">)</span></li>
|
||||
|
||||
<li class="symbol firstitem row_zxcv"><span class="off">z</span><span class="on">?</span></li>
|
||||
<li class="symbol"><span class="off">x</span><span class="on">!</span></li>
|
||||
<li class="symbol"><span class="off">c</span><span class="on">"</span></li>
|
||||
<li class="symbol"><span class="off">v</span><span class="on">'</span></li>
|
||||
<li class="symbol"><span class="off">b</span><span class="on">:</span></li>
|
||||
<li class="symbol"><span class="off">n</span><span class="on">;</span></li>
|
||||
<li class="symbol"><span class="off">m</span><span class="on">,</span></li>
|
||||
<li class="delete lastitem">delete</li>
|
||||
|
||||
<li class="numlock firstitem row_space"><span class="off">123</span><span class="on">ABC</span></li>
|
||||
<li class="space">&nbsp;</li>
|
||||
<li class="symbol"><span class="off">.</span><span class="on">.</span></li>
|
||||
<li class="return lastitem">return</li>
|
||||
</ul>
|
||||
<p class="close_button">close</p>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
|
|
|
|||
Loading…
Reference in New Issue