1+ window . SoftwareKeyboardView = Backbone . View . extend ( {
2+
3+ events : {
4+ "click button.key" : "key_pressed" ,
5+ "click button#show-keyboard" : "toggle_keypad"
6+ } ,
7+
8+ initialize : function ( ) {
9+
10+ _ . bindAll ( this ) ;
11+
12+ this . inputs = this . $el . find ( ":input" )
13+ . prop ( "readonly" , true )
14+ . css ( "-webkit-tap-highlight-color" , "rgba(0, 0, 0, 0)" ) ;
15+ this . field = this . inputs . first ( ) ;
16+ this . touch = Modernizr . touch ;
17+ this . enabled = true ;
18+ this . render ( ) ;
19+
20+ } ,
21+
22+ toggle_keypad : function ( ) {
23+ this . enabled = ! this . enabled ;
24+ this . software_keyboard . toggle ( ) ;
25+ this . inputs . prop ( "readonly" , function ( index , value ) {
26+ return ! value ;
27+ } ) ;
28+ this . $el . find ( "#show-keyboard" ) . text ( function ( i , text ) {
29+ // TODO
30+ return text === gettext ( "Show Keypad" ) ? gettext ( "Hide Keypad" ) : gettext ( "Show Keypad" ) ;
31+ } ) ;
32+ return false ;
33+ } ,
34+
35+ key_pressed : function ( ev ) {
36+ if ( ! this . enabled ) {
37+ return false ;
38+ }
39+ var key = $ ( ev . target ) . val ( ) ;
40+ // backspace key
41+ if ( key == "bs" ) {
42+ this . field . val ( this . field . val ( ) . slice ( 0 , - 1 ) ) ;
43+ //clear key
44+ } else if ( key == "c" ) {
45+ this . field . val ( '' ) ;
46+ } else {
47+ //normal key
48+ this . field . val ( this . field . val ( ) + key ) ;
49+ }
50+
51+ this . field . trigger ( "keypress" ) ;
52+
53+ return false ;
54+ } ,
55+
56+ render : function ( ) {
57+ self = this ;
58+
59+ // TODO-BLOCKER (rtibbles): 0.13 - Turn this into a handlebars template, conditionally render templates based on exercise types.
60+
61+ this . $el . append ( "<button id='show-keyboard'>" + gettext ( "Hide Keypad" ) + "</button>" ) ;
62+
63+ this . $el . append ( "<div class='container-fluid' id='software-keyboard'></div>" ) ;
64+
65+ // TODO-BLOCKER (rtibbles): 0.13 - Remove extraneous added here to make styling work without Bootstrap
66+
67+ var keys = [ [ "1" , "2" , "3" ] , [ "4" , "5" , "6" ] , [ "7" , "8" , "9" ] , [ "/ " , "0" , " -" ] , [ "." , "c" , "bs" ] ] ;
68+ var corners = {
69+ "1" : "ui-corner-tl" ,
70+ "3" : "ui-corner-tr" ,
71+ "." : "ui-corner-bl" ,
72+ "bs" : "ui-corner-br"
73+ } ;
74+
75+ this . software_keyboard = this . $el . find ( "#software-keyboard" ) ;
76+
77+ jQuery . each ( keys , function ( i , row ) {
78+ var rowDiv = jQuery ( "<div>" )
79+ . attr ( "class" , "row" )
80+ . appendTo ( self . software_keyboard ) ;
81+
82+ jQuery . each ( row , function ( j , key ) {
83+ var keySpan = $ ( "<div class='.col-xs-4'><button class='key green_button " + ( key === "bs" ? "key-bs" : "" ) + "' value='" + key + "'>" + ( key === "bs" ? "Del" : key ) + "</button></div>" ) . appendTo ( rowDiv ) ;
84+
85+ } ) ;
86+ } ) ;
87+
88+ if ( ! this . touch ) {
89+ this . toggle_keypad ( ) ;
90+ }
91+
92+ }
93+
94+ } ) ;
0 commit comments