Marcelo Puebla / foca-teclado

Download as
Browse Code »

Commit ecf7c612ab6cf64da5bb41173a4b9a0704d1a50a

Authored by Jose Pinto
2 parents 32f00bd612 7f268427f4
Exists in master and in 1 other branch develop

Merge branch 'master' into 'master' 

Agrego boton enter

See merge request !1
Showing 3 changed files   Show diff stats
1 { 1 {
2 "name": "foca-teclado", 2 "name": "foca-teclado",
3 "version": "0.0.1", 3 "version": "0.0.1",
4 "description": "Componente teclado", 4 "description": "Componente teclado",
5 "main": "dist/foca-teclado.min.js", 5 "main": "dist/foca-teclado.min.js",
6 "scripts": { 6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1", 7 "test": "echo \"Error: no test specified\" && exit 1",
8 "compile": "gulp uglify", 8 "compile": "gulp uglify",
9 "gulp-pre-commit": "gulp pre-commit", 9 "gulp-pre-commit": "gulp pre-commit",
10 "postinstall": "npm run compile && gulp clean-post-install", 10 "postinstall": "npm run compile && gulp clean-post-install",
11 "install-dev": "npm install -D angular bootstrap font-awesome gulp gulp-angular-templatecache gulp-clean gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify-es jasmine-core jquery jshint pre-commit pump && npm install angular-sanitize git+https://github.com/ericf97/angular-on-screen-keyboard.git" 11 "install-dev": "npm install -D angular bootstrap font-awesome gulp gulp-angular-templatecache gulp-clean gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify-es gulp-sass jasmine-core jquery jshint pre-commit pump && npm install angular-sanitize git+https://github.com/ericf97/angular-on-screen-keyboard.git"
12 }, 12 },
13 "pre-commit": [ 13 "pre-commit": [
14 "gulp-pre-commit" 14 "gulp-pre-commit"
15 ], 15 ],
16 "repository": { 16 "repository": {
17 "type": "git", 17 "type": "git",
18 "url": "https://debo.suite.repo/modulos-npm/foca-teclado.git" 18 "url": "https://debo.suite.repo/modulos-npm/foca-teclado.git"
19 }, 19 },
20 "author": "Foca Software", 20 "author": "Foca Software",
21 "license": "ISC", 21 "license": "ISC",
22 "peerDependencies": { 22 "peerDependencies": {
23 "angular": "^1.7.x", 23 "angular": "^1.7.x",
24 "bootstrap": "^4.1.x", 24 "bootstrap": "^4.1.x",
25 "jquery": "^3.3.x", 25 "jquery": "^3.3.x",
26 "font-awesome": "^4.7.x", 26 "font-awesome": "^4.7.x",
27 "gulp": "^3.9.x", 27 "gulp": "^3.9.x",
28 "gulp-concat": "2.6.x", 28 "gulp-concat": "2.6.x",
29 "gulp-jshint": "^2.1.x", 29 "gulp-jshint": "^2.1.x",
30 "gulp-rename": "^1.4.x", 30 "gulp-rename": "^1.4.x",
31 "gulp-replace": "^1.0.x", 31 "gulp-replace": "^1.0.x",
32 "gulp-uglify-es": "^1.0.x", 32 "gulp-uglify-es": "^1.0.x",
33 "jshint": "^2.9.x", 33 "jshint": "^2.9.x",
34 "pump": "^3.0.x" 34 "pump": "^3.0.x"
35 }, 35 },
36 "devDependencies": { 36 "devDependencies": {
37 "angular": "^1.7.5", 37 "angular": "1.7.5",
38 "angular-route": "^1.7.5", 38 "angular-route": "^1.7.5",
39 "angular-sanitize": "^1.7.5", 39 "angular-sanitize": "1.7.5",
40 "bootstrap": "^4.1.3", 40 "bootstrap": "4.1.3",
41 "font-awesome": "^4.7.0", 41 "font-awesome": "4.7.0",
42 "gulp": "^3.9.1", 42 "gulp": "3.9.1",
43 "gulp-angular-templatecache": "^2.2.2", 43 "gulp-angular-templatecache": "2.2.5",
44 "gulp-clean": "^0.4.0", 44 "gulp-clean": "0.4.0",
45 "gulp-concat": "^2.6.1", 45 "gulp-concat": "2.6.1",
46 "gulp-connect": "^5.6.1", 46 "gulp-connect": "5.6.1",
47 "gulp-htmlmin": "^5.0.1", 47 "gulp-htmlmin": "5.0.1",
48 "gulp-jshint": "^2.1.0", 48 "gulp-jshint": "2.1.0",
49 "gulp-rename": "^1.4.0", 49 "gulp-rename": "1.4.0",
50 "gulp-replace": "^1.0.0", 50 "gulp-replace": "1.0.0",
51 "gulp-sass": "^4.0.2", 51 "gulp-sass": "4.0.2",
52 "gulp-uglify-es": "^1.0.4", 52 "gulp-uglify-es": "1.0.4",
53 "jasmine-core": "^3.2.1", 53 "jasmine-core": "3.3.0",
54 "jquery": "^3.3.1", 54 "jquery": "3.3.1",
55 "jshint": "^2.9.6", 55 "jshint": "2.9.6",
56 "pre-commit": "^1.2.2", 56 "pre-commit": "1.2.2",
57 "pump": "^3.0.0" 57 "pump": "3.0.0"
58 },
59 "dependencies": {
60 "angular-on-screen-keyboard": "git+https://github.com/ericf97/angular-on-screen-keyboard.git"
58 } 61 }
59 } 62 }
60 63
src/js/angular-on-screen-keyboard-directive.js
Diff comments   View file @ ecf7c61
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
37 var val = ''; 37 var val = '';
38 38
39 if (key.text) { 39 if (key.text) {
40 val = key.text; 40 val = key.text;
41 } 41 }
42 else if (key.lowerCase && !ctrl.isUpperCase) { 42 else if (key.lowerCase && !ctrl.isUpperCase) {
43 val = key.lowerCase; 43 val = key.lowerCase;
44 } 44 }
45 else if (key.upperCase && ctrl.isUpperCase) { 45 else if (key.upperCase && ctrl.isUpperCase) {
46 val = key.upperCase; 46 val = key.upperCase;
47 } 47 }
48 else { 48 else {
49 val = ctrl.isUpperCase ? key.toUpperCase() : key.toLowerCase(); 49 val = ctrl.isUpperCase ? key.toUpperCase() : key.toLowerCase();
50 } 50 }
51 51
52 if (val && val.indexOf('&') > -1) { 52 if (val && val.indexOf('&') > -1) {
53 return $sce.trustAsHtml(val); 53 return $sce.trustAsHtml(val);
54 } 54 }
55 55
56 return val; 56 return val;
57 }; 57 };
58 $scope.fondo = function() { 58 $scope.fondo = function() {
59 $timeout(function() { 59 $timeout(function() {
60 ctrl.lastInputCtrl.focus(); 60 ctrl.lastInputCtrl.focus();
61 $scope.$emit('focus'); 61 $scope.$emit('focus');
62 }); 62 });
63 }; 63 };
64 }], 64 }],
65 link: function(scope, element, attr) { 65 link: function(scope, element, attr) {
66 var ctrl = scope.ctrl; 66 var ctrl = scope.ctrl;
67 ctrl.isUpperCase = false; 67 ctrl.isUpperCase = false;
68 ctrl.lastInputCtrl = null; 68 ctrl.lastInputCtrl = null;
69 ctrl.startPos = null; 69 ctrl.startPos = null;
70 ctrl.endPos = null; 70 ctrl.endPos = null;
71 71
72 ctrl.printKeyStroke = function(key, event) { 72 ctrl.printKeyStroke = function(key, event) {
73 73
74 if (!ctrl.lastInputCtrl) { 74 if (!ctrl.lastInputCtrl) {
75 return; 75 return;
76 } 76 }
77 77
78 ctrl.startPos = ctrl.lastInputCtrl.selectionStart; 78 ctrl.startPos = ctrl.lastInputCtrl.selectionStart;
79 ctrl.endPos = ctrl.lastInputCtrl.selectionEnd; 79 ctrl.endPos = ctrl.lastInputCtrl.selectionEnd;
80 80
81 if (key.type === 'erase') { 81 if (key.type === 'erase') {
82 ctrl.eraseKeyStroke(); 82 ctrl.eraseKeyStroke();
83 return; 83 return;
84 } else if (key.type === 'shift') { 84 } else if (key.type === 'shift') {
85 ctrl.isUpperCase = !ctrl.isUpperCase; 85 ctrl.isUpperCase = !ctrl.isUpperCase;
86 return; 86 return;
87 } else if (key.type === 'enter') {
88 ctrl.pressEnterKey();
89 return;
87 } 90 }
88 91
89 var htmlKeyVal = angular.element(event.target || event.srcElement).text(); 92 var htmlKeyVal = angular.element(event.target || event.srcElement).text();
90 var lastInputCtrl = angular.element(ctrl.lastInputCtrl); 93 var lastInputCtrl = angular.element(ctrl.lastInputCtrl);
91 var val = lastInputCtrl.val(); 94 var val = lastInputCtrl.val();
92 if(lastInputCtrl[0].type === 'number') { 95 if(lastInputCtrl[0].type === 'number') {
93 var dato = parseInt(val + htmlKeyVal); 96 var dato = parseInt(val + htmlKeyVal);
94 lastInputCtrl.val(dato); 97 lastInputCtrl.val(dato);
95 lastInputCtrl.triggerHandler('change'); 98 lastInputCtrl.triggerHandler('change');
96 ctrl.setKeyboardLayout(); 99 ctrl.setKeyboardLayout();
97 ctrl.refocus(); 100 ctrl.refocus();
98 return; 101 return;
99 } 102 }
100 var pre = val.substring(0, ctrl.startPos); 103 var pre = val.substring(0, ctrl.startPos);
101 var post = val.substring(ctrl.endPos, val.length); 104 var post = val.substring(ctrl.endPos, val.length);
102 lastInputCtrl.val(pre + htmlKeyVal + post); 105 lastInputCtrl.val(pre + htmlKeyVal + post);
103 lastInputCtrl.triggerHandler('change'); 106 lastInputCtrl.triggerHandler('change');
104 107
105 ctrl.startPos += htmlKeyVal.length; 108 ctrl.startPos += htmlKeyVal.length;
106 ctrl.endPos += htmlKeyVal.length; 109 ctrl.endPos += htmlKeyVal.length;
107 ctrl.lastInputCtrl.selectionStart = ctrl.startPos; 110 ctrl.lastInputCtrl.selectionStart = ctrl.startPos;
108 ctrl.lastInputCtrl.selectionEnd = ctrl.startPos; 111 ctrl.lastInputCtrl.selectionEnd = ctrl.startPos;
109 ctrl.setKeyboardLayout(); 112 ctrl.setKeyboardLayout();
110 ctrl.refocus(); 113 ctrl.refocus();
111 }; 114 };
112 115
113 ctrl.refocus = function() { 116 ctrl.refocus = function() {
114 ctrl.lastInputCtrl.focus(); 117 ctrl.lastInputCtrl.focus();
115 }; 118 };
116 119
117 ctrl.eraseKeyStroke = function() { 120 ctrl.eraseKeyStroke = function() {
118 if (!ctrl.lastInputCtrl) { 121 if (!ctrl.lastInputCtrl) {
119 return; 122 return;
120 } 123 }
121 124
122 var hasSel = ctrl.startPos !== ctrl.endPos; 125 var hasSel = ctrl.startPos !== ctrl.endPos;
123 126
124 var lastInputCtrl = angular.element(ctrl.lastInputCtrl); 127 var lastInputCtrl = angular.element(ctrl.lastInputCtrl);
125 var val = lastInputCtrl.val(); 128 var val = lastInputCtrl.val();
126 if(lastInputCtrl[0].type === 'number') { 129 if(lastInputCtrl[0].type === 'number') {
127 lastInputCtrl.val(val.slice(0, -1)); 130 lastInputCtrl.val(val.slice(0, -1));
128 lastInputCtrl.triggerHandler('change'); 131 lastInputCtrl.triggerHandler('change');
129 ctrl.setKeyboardLayout(); 132 ctrl.setKeyboardLayout();
130 ctrl.refocus(); 133 ctrl.refocus();
131 return; 134 return;
132 } 135 }
133 var pre = val.substring(0, hasSel ? ctrl.startPos : ctrl.startPos - 1); 136 var pre = val.substring(0, hasSel ? ctrl.startPos : ctrl.startPos - 1);
134 var post = val.substring(ctrl.endPos, val.length); 137 var post = val.substring(ctrl.endPos, val.length);
135 138
136 lastInputCtrl.val(pre + post); 139 lastInputCtrl.val(pre + post);
137 lastInputCtrl.triggerHandler('change'); 140 lastInputCtrl.triggerHandler('change');
138 141
139 if (hasSel) { 142 if (hasSel) {
140 ctrl.endPos = ctrl.startPos; 143 ctrl.endPos = ctrl.startPos;
141 } 144 }
142 else { 145 else {
143 ctrl.startPos--; 146 ctrl.startPos--;
144 ctrl.endPos--; 147 ctrl.endPos--;
145 } 148 }
146 ctrl.lastInputCtrl.selectionStart = ctrl.startPos; 149 ctrl.lastInputCtrl.selectionStart = ctrl.startPos;
147 ctrl.lastInputCtrl.selectionEnd = ctrl.startPos; 150 ctrl.lastInputCtrl.selectionEnd = ctrl.startPos;
148 ctrl.setKeyboardLayout(); 151 ctrl.setKeyboardLayout();
149 ctrl.refocus(); 152 ctrl.refocus();
150 }; 153 };
151 154
152 ctrl.setKeyboardLayout = function() { 155 ctrl.setKeyboardLayout = function() {
153 if (!ctrl.lastInputCtrl) { 156 if (!ctrl.lastInputCtrl) {
154 ctrl.isUpperCase = true; 157 ctrl.isUpperCase = true;
155 return; 158 return;
156 } 159 }
157 else if (ctrl.lastInputCtrl.className && ctrl.isUpperCase) { 160 else if (ctrl.lastInputCtrl.className && ctrl.isUpperCase) {
158 ctrl.isUpperCase = true; 161 ctrl.isUpperCase = true;
159 } 162 }
160 else if (angular.element(ctrl.lastInputCtrl).val().length === 0) { 163 else if (angular.element(ctrl.lastInputCtrl).val().length === 0) {
161 ctrl.isUpperCase = true; 164 ctrl.isUpperCase = true;
162 } 165 }
163 else if ( 166 else if (
164 angular.element(ctrl.lastInputCtrl).val().slice(-1) === ' ' && 167 angular.element(ctrl.lastInputCtrl).val().slice(-1) === ' ' &&
165 !ctrl.isUpperCase && attr.uppercaseAllWords !== undefined 168 !ctrl.isUpperCase && attr.uppercaseAllWords !== undefined
166 ) { 169 ) {
167 ctrl.isUpperCase = true; 170 ctrl.isUpperCase = true;
168 } 171 }
169 else{ 172 else{
170 ctrl.isUpperCase = true; 173 ctrl.isUpperCase = true;
171 } 174 }
172 }; 175 };
173 176
177 ctrl.pressEnterKey = function() {
178
179 $timeout(function() {
180 if (angular.element(':focus').length > 0) {
181
182 var el = angular.element(':focus')[0],
183 down = new KeyboardEvent('keydown',
184 {
185 which: 13,
186 keyCode: 13,
187 bubbles: true,
188 cancelable: true,
189 }),
190 press = new KeyboardEvent('keypress',
191 {
192 which: 13,
193 keyCode: 13,
194 bubbles: true,
195 cancelable: true,
196 }),
197 up = new KeyboardEvent('keyup',
198 {
199 which: 13,
200 keyCode: 13,
201 bubbles: true,
202 cancelable: true,
203 });
204
205 el.dispatchEvent(down);
206 el.dispatchEvent(press);
207 el.dispatchEvent(up);
208 }
209 });
210
211 };
212
174 var focusin = function(event) { 213 var focusin = function(event) {
175 var e = event.target || event.srcElement; 214 var e = event.target || event.srcElement;
176 215
177 if (e.tagName === 'INPUT' || e.tagName === 'TEXTAREA') { 216 if (e.tagName === 'INPUT' || e.tagName === 'TEXTAREA') {
178 ctrl.lastInputCtrl = e; 217 ctrl.lastInputCtrl = e;
179 ctrl.setKeyboardLayout(); 218 ctrl.setKeyboardLayout();
180 } 219 }
181 }; 220 };
182 221
183 var keyup = function() { 222 var keyup = function() {
184 if (!ctrl.lastInputCtrl) { 223 if (!ctrl.lastInputCtrl) {
185 return; 224 return;
186 } 225 }
187 226
188 ctrl.startPos = ctrl.lastInputCtrl.selectionStart; 227 ctrl.startPos = ctrl.lastInputCtrl.selectionStart;
189 ctrl.endPos = ctrl.lastInputCtrl.selectionEnd; 228 ctrl.endPos = ctrl.lastInputCtrl.selectionEnd;
190 229
191 ctrl.setKeyboardLayout(); 230 ctrl.setKeyboardLayout();
192 scope.$digest(); 231 scope.$digest();
193 }; 232 };
194 233
195 $document.bind('focusin', focusin); 234 $document.bind('focusin', focusin);
196 $document.bind('keyup', keyup); 235 $document.bind('keyup', keyup);
197 236
198 scope.$on('$destroy', function() { 237 scope.$on('$destroy', function() {
199 $document.unbind('focusin', focusin); 238 $document.unbind('focusin', focusin);
200 $document.unbind('keyup', keyup); 239 $document.unbind('keyup', keyup);
201 }); 240 });
202 241
203 element.bind('contextmenu', function(event) { 242 element.bind('contextmenu', function(event) {
204 event.preventDefault(); 243 event.preventDefault();
205 return false; 244 return false;
206 }); 245 });
207 246
208 $timeout(function() { 247 $timeout(function() {
209 ctrl.isUpperCase = true; 248 ctrl.isUpperCase = true;
210 }, 0); 249 }, 0);
211 }, 250 },
212 templateUrl: 'src/views/angular-on-screen-keyboard.html' 251 templateUrl: 'src/views/angular-on-screen-keyboard.html'
213 }; 252 };
214 }]); 253 }]);
215 254
src/js/controller.js
Diff comments   View file @ ecf7c61
1 angular.module('focaTeclado') 1 angular.module('focaTeclado')
2 .controller('focaTecladoController', [ 2 .controller('focaTecladoController', [
3 '$scope', 3 '$scope',
4 function($scope) { 4 function($scope) {
5 $scope.rows = {}; 5 $scope.rows = {};
6 $scope.rows.alfa = [ 6 $scope.rows.alfa = [
7 ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'], 7 ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
8 ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'ñ'], 8 ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'ñ'],
9 ['z', 'x', 'c', 'v', 'b', 'n', 'm', 9 ['z', 'x', 'c', 'v', 'b', 'n', 'm',
10 {type: 'erase', colspan: 3, text: 'spr'} 10 {type: 'erase', colspan: 3, text: 'Del'}
11 ], 11 ],
12 [ 12 [
13 {type: 'margin', colspan: 1}, 13 {type: 'margin', colspan: 1},
14 {type: 'button', colspan: 6, text: ' '} 14 {type: 'button', colspan: 6, text: ' '},
15 {type: 'enter', colspan: 3, text: 'Enter'}
15 ] 16 ]
16 ]; 17 ];
17 18
18 $scope.rows.numeric = [ 19 $scope.rows.numeric = [
19 [ 20 [
20 {type: 'number', text: '7'}, 21 {type: 'number', text: '7'},
21 {type: 'number', text: '8'}, 22 {type: 'number', text: '8'},
22 {type: 'number', text: '9'} 23 {type: 'number', text: '9'}
23 ], 24 ],
24 [ 25 [
25 {type: 'number', text: '4'}, 26 {type: 'number', text: '4'},
26 {type: 'number', text: '5'}, 27 {type: 'number', text: '5'},
27 {type: 'number', text: '6'} 28 {type: 'number', text: '6'}
28 ], 29 ],
29 [ 30 [
30 {type: 'number', text: '1'}, 31 {type: 'number', text: '1'},
31 {type: 'number', text: '2'}, 32 {type: 'number', text: '2'},
32 {type: 'number', text: '3'} 33 {type: 'number', text: '3'}
33 ], 34 ],
34 [ 35 [
35 {type: 'number', text: '0', colspan: 2}, 36 {type: 'number', text: '0', colspan: 2},
36 {type: 'number', text: '/'} 37 {type: 'number', text: '/'}
37 ], 38 ],
38 [ 39 [
39 {type: 'number', text: '.'}, 40 {type: 'number', text: '.'},
40 {type: 'number', text: '*'}, 41 {type: 'number', text: '*'},
41 {type: 'number', text: '+'} 42 {type: 'number', text: '+'}
42 ] 43 ]
43 ]; 44 ];
44 }]); 45 }]);
45 46