Marcelo Puebla / foca-teclado

Download as
Browse Code »

Commit 4431c2c8d85175f546d6785d9343da9227725477

Authored by Pablo Marco del Pont
1 parent 9cd8fd0b88
Exists in master and in 1 other branch develop

Cambios según codereview.

Showing 1 changed file with 23 additions and 14 deletions   Show diff stats
src/js/angular-on-screen-keyboard-directive.js
Diff comments   View file @ 4431c2c
1 angular.module('onScreenKeyboard', ['ngSanitize']) 1 angular.module('onScreenKeyboard', ['ngSanitize'])
2 .directive('onScreenKeyboard', ['$timeout', '$document', function($timeout, $document) { 2 .directive('onScreenKeyboard', ['$timeout', '$document', function($timeout, $document) {
3 return { 3 return {
4 restrict: 'E', 4 restrict: 'E',
5 bindToController: true, 5 bindToController: true,
6 controllerAs: 'ctrl', 6 controllerAs: 'ctrl',
7 scope: { 7 scope: {
8 rows : '=?', 8 rows : '=?',
9 uppercaseAllWords : '@', 9 uppercaseAllWords : '@',
10 alfanumeric : '=?', 10 alfanumeric : '=?',
11 numeric : '=?' 11 numeric : '=?'
12 }, 12 },
13 controller: ['$sce', '$scope', function($sce, $scope) { 13 controller: ['$sce', '$scope', function($sce, $scope) {
14 var ctrl = this; 14 var ctrl = this;
15 15
16 if (!ctrl.rows) { 16 if (!ctrl.rows) {
17 ctrl.rows = [ 17 ctrl.rows = [
18 ['1', '2', '3','4','5','6','7','8', '9', '0', { 18 ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', {
19 type: 'erase', colspan: 2, text: '⇐' 19 type: 'erase', colspan: 2, text: '⇐'
20 }], 20 }],
21 ['q','w','e','r','t','y','u','i','o','p','@'], 21 ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '@'],
22 ['a','s','d','f','g','h','j','k','l','-','_', {type: 'margin'}], 22 ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', '-', '_', {type: 'margin'}],
23 [ 23 [
24 {type: 'shift', upperCase: '⇓', lowerCase: '⇑'}, 24 {type: 'shift', upperCase: '⇓', lowerCase: '⇑'},
25 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', 25 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.',
26 {type: 'shift', upperCase: '⇓', lowerCase: '⇑'} 26 {type: 'shift', upperCase: '⇓', lowerCase: '⇑'}
27 ], 27 ],
28 [{type: 'margin'}, {type: 'space', colspan: 9, text: ' '}] 28 [{type: 'margin'}, {type: 'space', colspan: 9, text: ' '}]
29 ]; 29 ];
30 } 30 }
31 31
32 ctrl.getText = function(key) { 32 ctrl.getText = function(key) {
33 if (key.type === 'margin') 33 if (key.type === 'margin') {
34 return ''; 34 return '';
35 }
35 36
36 var val = ''; 37 var val = '';
37 38
38 if (key.text) 39 if (key.text) {
39 val = key.text; 40 val = key.text;
40 else if (key.lowerCase && !ctrl.isUpperCase) 41 }
42 else if (key.lowerCase && !ctrl.isUpperCase) {
41 val = key.lowerCase; 43 val = key.lowerCase;
42 else if (key.upperCase && ctrl.isUpperCase) 44 }
45 else if (key.upperCase && ctrl.isUpperCase) {
43 val = key.upperCase; 46 val = key.upperCase;
47 }
44 else { 48 else {
45 val = ctrl.isUpperCase ? key.toUpperCase() : key.toLowerCase(); 49 val = ctrl.isUpperCase ? key.toUpperCase() : key.toLowerCase();
46 } 50 }
47 51
48 if (val && val.indexOf('&') > -1) 52 if (val && val.indexOf('&') > -1) {
49 return $sce.trustAsHtml(val); 53 return $sce.trustAsHtml(val);
54 }
50 55
51 return val; 56 return val;
52 }; 57 };
53 $scope.fondo = function() { 58 $scope.fondo = function() {
54 $timeout(function() { 59 $timeout(function() {
55 ctrl.lastInputCtrl.focus(); 60 ctrl.lastInputCtrl.focus();
56 $scope.$emit('focus'); 61 $scope.$emit('focus');
57 }); 62 });
58 }; 63 };
59 }], 64 }],
60 link: function(scope, element, attr) { 65 link: function(scope, element, attr) {
61 var ctrl = scope.ctrl; 66 var ctrl = scope.ctrl;
62 ctrl.isUpperCase = false; 67 ctrl.isUpperCase = false;
63 ctrl.lastInputCtrl = null; 68 ctrl.lastInputCtrl = null;
64 ctrl.startPos = null; 69 ctrl.startPos = null;
65 ctrl.endPos = null; 70 ctrl.endPos = null;
66 71
67 ctrl.printKeyStroke = function(key, event) { 72 ctrl.printKeyStroke = function(key, event) {
68 73
69 if (!ctrl.lastInputCtrl) 74 if (!ctrl.lastInputCtrl) {
70 return; 75 return;
76 }
71 77
72 ctrl.startPos = ctrl.lastInputCtrl.selectionStart; 78 ctrl.startPos = ctrl.lastInputCtrl.selectionStart;
73 ctrl.endPos = ctrl.lastInputCtrl.selectionEnd; 79 ctrl.endPos = ctrl.lastInputCtrl.selectionEnd;
74 80
75 if (key.type === 'erase') { 81 if (key.type === 'erase') {
76 ctrl.eraseKeyStroke(); 82 ctrl.eraseKeyStroke();
77 return; 83 return;
78 } else if (key.type === 'shift') { 84 } else if (key.type === 'shift') {
79 ctrl.isUpperCase = !ctrl.isUpperCase; 85 ctrl.isUpperCase = !ctrl.isUpperCase;
80 return; 86 return;
81 } 87 }
82 88
83 var htmlKeyVal = angular.element(event.target || event.srcElement).text(); 89 var htmlKeyVal = angular.element(event.target || event.srcElement).text();
84 var lastInputCtrl = angular.element(ctrl.lastInputCtrl); 90 var lastInputCtrl = angular.element(ctrl.lastInputCtrl);
85 var val = lastInputCtrl.val(); 91 var val = lastInputCtrl.val();
86 var pre = val.substring(0, ctrl.startPos); 92 var pre = val.substring(0, ctrl.startPos);
87 var post = val.substring(ctrl.endPos, val.length); 93 var post = val.substring(ctrl.endPos, val.length);
88 lastInputCtrl.val(pre + htmlKeyVal + post); 94 lastInputCtrl.val(pre + htmlKeyVal + post);
89 lastInputCtrl.triggerHandler('change'); 95 lastInputCtrl.triggerHandler('change');
90 96
91 ctrl.startPos += htmlKeyVal.length; 97 ctrl.startPos += htmlKeyVal.length;
92 ctrl.endPos += htmlKeyVal.length; 98 ctrl.endPos += htmlKeyVal.length;
93 ctrl.lastInputCtrl.selectionStart = ctrl.startPos; 99 ctrl.lastInputCtrl.selectionStart = ctrl.startPos;
94 ctrl.lastInputCtrl.selectionEnd = ctrl.startPos; 100 ctrl.lastInputCtrl.selectionEnd = ctrl.startPos;
95 ctrl.setKeyboardLayout(); 101 ctrl.setKeyboardLayout();
96 ctrl.refocus(); 102 ctrl.refocus();
97 }; 103 };
98 104
99 ctrl.refocus = function() { 105 ctrl.refocus = function() {
100 ctrl.lastInputCtrl.focus(); 106 ctrl.lastInputCtrl.focus();
101 }; 107 };
102 108
103 ctrl.eraseKeyStroke = function() { 109 ctrl.eraseKeyStroke = function() {
104 if (!ctrl.lastInputCtrl) 110 if (!ctrl.lastInputCtrl) {
105 return; 111 return;
112 }
106 113
107 var hasSel = ctrl.startPos !== ctrl.endPos; 114 var hasSel = ctrl.startPos !== ctrl.endPos;
108 115
109 var lastInputCtrl = angular.element(ctrl.lastInputCtrl); 116 var lastInputCtrl = angular.element(ctrl.lastInputCtrl);
110 var val = lastInputCtrl.val(); 117 var val = lastInputCtrl.val();
111 var pre = val.substring(0, hasSel ? ctrl.startPos : ctrl.startPos - 1); 118 var pre = val.substring(0, hasSel ? ctrl.startPos : ctrl.startPos - 1);
112 var post = val.substring(ctrl.endPos, val.length); 119 var post = val.substring(ctrl.endPos, val.length);
113 120
114 lastInputCtrl.val(pre + post); 121 lastInputCtrl.val(pre + post);
115 lastInputCtrl.triggerHandler('change'); 122 lastInputCtrl.triggerHandler('change');
116 123
117 if (hasSel) { 124 if (hasSel) {
118 ctrl.endPos = ctrl.startPos; 125 ctrl.endPos = ctrl.startPos;
119 } 126 }
120 else { 127 else {
121 ctrl.startPos--; 128 ctrl.startPos--;
122 ctrl.endPos--; 129 ctrl.endPos--;
123 } 130 }
124 ctrl.lastInputCtrl.selectionStart = ctrl.startPos; 131 ctrl.lastInputCtrl.selectionStart = ctrl.startPos;
125 ctrl.lastInputCtrl.selectionEnd = ctrl.startPos; 132 ctrl.lastInputCtrl.selectionEnd = ctrl.startPos;
126 ctrl.setKeyboardLayout(); 133 ctrl.setKeyboardLayout();
127 ctrl.refocus(); 134 ctrl.refocus();
128 }; 135 };
129 136
130 ctrl.setKeyboardLayout = function() { 137 ctrl.setKeyboardLayout = function() {
131 if (!ctrl.lastInputCtrl) { 138 if (!ctrl.lastInputCtrl) {
132 ctrl.isUpperCase = true; 139 ctrl.isUpperCase = true;
133 return; 140 return;
134 } 141 }
135 else if (ctrl.lastInputCtrl.className && ctrl.isUpperCase) 142 else if (ctrl.lastInputCtrl.className && ctrl.isUpperCase) {
136 ctrl.isUpperCase = true; 143 ctrl.isUpperCase = true;
144 }
137 else if (angular.element(ctrl.lastInputCtrl).val().length === 0) { 145 else if (angular.element(ctrl.lastInputCtrl).val().length === 0) {
138 ctrl.isUpperCase = true; 146 ctrl.isUpperCase = true;
139 } 147 }
140 else if ( 148 else if (
141 angular.element(ctrl.lastInputCtrl).val().slice(-1) === ' ' && 149 angular.element(ctrl.lastInputCtrl).val().slice(-1) === ' ' &&
142 !ctrl.isUpperCase && attr.uppercaseAllWords !== undefined 150 !ctrl.isUpperCase && attr.uppercaseAllWords !== undefined
143 ) 151 ) {
144 ctrl.isUpperCase = true; 152 ctrl.isUpperCase = true;
153 }
145 else{ 154 else{
146 ctrl.isUpperCase = true; 155 ctrl.isUpperCase = true;
147 } 156 }
148 }; 157 };
149 158
150 var focusin = function(event) { 159 var focusin = function(event) {
151 var e = event.target || event.srcElement; 160 var e = event.target || event.srcElement;
152 161
153 if (e.tagName === 'INPUT' || e.tagName === 'TEXTAREA') { 162 if (e.tagName === 'INPUT' || e.tagName === 'TEXTAREA') {
154 ctrl.lastInputCtrl = e; 163 ctrl.lastInputCtrl = e;
155 ctrl.setKeyboardLayout(); 164 ctrl.setKeyboardLayout();
156 } 165 }
157 }; 166 };
158 167
159 var keyup = function() { 168 var keyup = function() {
160 if (!ctrl.lastInputCtrl) { 169 if (!ctrl.lastInputCtrl) {
161 return; 170 return;
162 } 171 }
163 172
164 ctrl.startPos = ctrl.lastInputCtrl.selectionStart; 173 ctrl.startPos = ctrl.lastInputCtrl.selectionStart;
165 ctrl.endPos = ctrl.lastInputCtrl.selectionEnd; 174 ctrl.endPos = ctrl.lastInputCtrl.selectionEnd;
166 175
167 ctrl.setKeyboardLayout(); 176 ctrl.setKeyboardLayout();
168 scope.$digest(); 177 scope.$digest();
169 }; 178 };
170 179
171 $document.bind('focusin', focusin); 180 $document.bind('focusin', focusin);
172 $document.bind('keyup', keyup); 181 $document.bind('keyup', keyup);
173 182
174 scope.$on("$destroy", function() { 183 scope.$on("$destroy", function() {
175 $document.unbind('focusin', focusin); 184 $document.unbind('focusin', focusin);
176 $document.unbind('keyup', keyup); 185 $document.unbind('keyup', keyup);
177 }); 186 });
178 187
179 element.bind('contextmenu', function(event) { 188 element.bind('contextmenu', function(event) {
180 event.preventDefault(); 189 event.preventDefault();
181 return false; 190 return false;
182 }); 191 });
183 192
184 $timeout(function() { 193 $timeout(function() {
185 ctrl.isUpperCase = true; 194 ctrl.isUpperCase = true;
186 },0); 195 }, 0);
187 }, 196 },
188 templateUrl: 'src/views/angular-on-screen-keyboard.html' 197 templateUrl: 'src/views/angular-on-screen-keyboard.html'
189 }; 198 };
190 }]);
199 }]);