Commit bd521f8ffa56f9ca8ea62c589a50adee1f342e64
Exists in
master
Merge branch 'master' into 'master'
teclado soporta entradas numéricas See merge request modulos-npm/foca-teclado!3
Showing
2 changed files
Show diff stats
package.json
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 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 | "bootstrap": "^4.1.3", | 40 | "bootstrap": "^4.1.3", |
40 | "font-awesome": "^4.7.0", | 41 | "font-awesome": "^4.7.0", |
41 | "gulp": "^3.9.1", | 42 | "gulp": "^3.9.1", |
42 | "angular-on-screen-keyboard": "git+https://github.com/ericf97/angular-on-screen-keyboard.git", | ||
43 | "angular-sanitize": "^1.7.5", | ||
44 | "gulp-angular-templatecache": "^2.2.2", | 43 | "gulp-angular-templatecache": "^2.2.2", |
45 | "gulp-clean": "^0.4.0", | 44 | "gulp-clean": "^0.4.0", |
46 | "gulp-concat": "^2.6.1", | 45 | "gulp-concat": "^2.6.1", |
47 | "gulp-connect": "^5.6.1", | 46 | "gulp-connect": "^5.6.1", |
48 | "gulp-htmlmin": "^5.0.1", | 47 | "gulp-htmlmin": "^5.0.1", |
49 | "gulp-jshint": "^2.1.0", | 48 | "gulp-jshint": "^2.1.0", |
50 | "gulp-rename": "^1.4.0", | 49 | "gulp-rename": "^1.4.0", |
51 | "gulp-replace": "^1.0.0", | 50 | "gulp-replace": "^1.0.0", |
52 | "gulp-sass": "^4.0.2", | 51 | "gulp-sass": "^4.0.2", |
53 | "gulp-uglify-es": "^1.0.4", | 52 | "gulp-uglify-es": "^1.0.4", |
54 | "jasmine-core": "^3.2.1", | 53 | "jasmine-core": "^3.2.1", |
55 | "jquery": "^3.3.1", | 54 | "jquery": "^3.3.1", |
56 | "jshint": "^2.9.6", | 55 | "jshint": "^2.9.6", |
57 | "pre-commit": "^1.2.2", | 56 | "pre-commit": "^1.2.2", |
58 | "pump": "^3.0.0" | 57 | "pump": "^3.0.0" |
59 | } | 58 | } |
60 | } | 59 | } |
src/js/angular-on-screen-keyboard-directive.js
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 | } | 87 | } |
88 | 88 | ||
89 | var htmlKeyVal = angular.element(event.target || event.srcElement).text(); | 89 | var htmlKeyVal = angular.element(event.target || event.srcElement).text(); |
90 | var lastInputCtrl = angular.element(ctrl.lastInputCtrl); | 90 | var lastInputCtrl = angular.element(ctrl.lastInputCtrl); |
91 | var val = lastInputCtrl.val(); | 91 | var val = lastInputCtrl.val(); |
92 | if(lastInputCtrl[0].type === 'number') { | ||
93 | var dato = parseInt(val + htmlKeyVal); | ||
94 | lastInputCtrl.val(dato); | ||
95 | lastInputCtrl.triggerHandler('change'); | ||
96 | ctrl.setKeyboardLayout(); | ||
97 | ctrl.refocus(); | ||
98 | return; | ||
99 | } | ||
92 | var pre = val.substring(0, ctrl.startPos); | 100 | var pre = val.substring(0, ctrl.startPos); |
93 | var post = val.substring(ctrl.endPos, val.length); | 101 | var post = val.substring(ctrl.endPos, val.length); |
94 | lastInputCtrl.val(pre + htmlKeyVal + post); | 102 | lastInputCtrl.val(pre + htmlKeyVal + post); |
95 | lastInputCtrl.triggerHandler('change'); | 103 | lastInputCtrl.triggerHandler('change'); |
96 | 104 | ||
97 | ctrl.startPos += htmlKeyVal.length; | 105 | ctrl.startPos += htmlKeyVal.length; |
98 | ctrl.endPos += htmlKeyVal.length; | 106 | ctrl.endPos += htmlKeyVal.length; |
99 | ctrl.lastInputCtrl.selectionStart = ctrl.startPos; | 107 | ctrl.lastInputCtrl.selectionStart = ctrl.startPos; |
100 | ctrl.lastInputCtrl.selectionEnd = ctrl.startPos; | 108 | ctrl.lastInputCtrl.selectionEnd = ctrl.startPos; |
101 | ctrl.setKeyboardLayout(); | 109 | ctrl.setKeyboardLayout(); |
102 | ctrl.refocus(); | 110 | ctrl.refocus(); |
103 | }; | 111 | }; |
104 | 112 | ||
105 | ctrl.refocus = function() { | 113 | ctrl.refocus = function() { |
106 | ctrl.lastInputCtrl.focus(); | 114 | ctrl.lastInputCtrl.focus(); |
107 | }; | 115 | }; |
108 | 116 | ||
109 | ctrl.eraseKeyStroke = function() { | 117 | ctrl.eraseKeyStroke = function() { |
110 | if (!ctrl.lastInputCtrl) { | 118 | if (!ctrl.lastInputCtrl) { |
111 | return; | 119 | return; |
112 | } | 120 | } |
113 | 121 | ||
114 | var hasSel = ctrl.startPos !== ctrl.endPos; | 122 | var hasSel = ctrl.startPos !== ctrl.endPos; |
115 | 123 | ||
116 | var lastInputCtrl = angular.element(ctrl.lastInputCtrl); | 124 | var lastInputCtrl = angular.element(ctrl.lastInputCtrl); |
117 | var val = lastInputCtrl.val(); | 125 | var val = lastInputCtrl.val(); |
126 | if(lastInputCtrl[0].type === 'number') { | ||
127 | lastInputCtrl.val(val.slice(0, -1)); | ||
128 | lastInputCtrl.triggerHandler('change'); | ||
129 | ctrl.setKeyboardLayout(); | ||
130 | ctrl.refocus(); | ||
131 | return; | ||
132 | } | ||
118 | var pre = val.substring(0, hasSel ? ctrl.startPos : ctrl.startPos - 1); | 133 | var pre = val.substring(0, hasSel ? ctrl.startPos : ctrl.startPos - 1); |
119 | var post = val.substring(ctrl.endPos, val.length); | 134 | var post = val.substring(ctrl.endPos, val.length); |
120 | 135 | ||
121 | lastInputCtrl.val(pre + post); | 136 | lastInputCtrl.val(pre + post); |
122 | lastInputCtrl.triggerHandler('change'); | 137 | lastInputCtrl.triggerHandler('change'); |
123 | 138 | ||
124 | if (hasSel) { | 139 | if (hasSel) { |
125 | ctrl.endPos = ctrl.startPos; | 140 | ctrl.endPos = ctrl.startPos; |
126 | } | 141 | } |
127 | else { | 142 | else { |
128 | ctrl.startPos--; | 143 | ctrl.startPos--; |
129 | ctrl.endPos--; | 144 | ctrl.endPos--; |
130 | } | 145 | } |
131 | ctrl.lastInputCtrl.selectionStart = ctrl.startPos; | 146 | ctrl.lastInputCtrl.selectionStart = ctrl.startPos; |
132 | ctrl.lastInputCtrl.selectionEnd = ctrl.startPos; | 147 | ctrl.lastInputCtrl.selectionEnd = ctrl.startPos; |
133 | ctrl.setKeyboardLayout(); | 148 | ctrl.setKeyboardLayout(); |
134 | ctrl.refocus(); | 149 | ctrl.refocus(); |
135 | }; | 150 | }; |
136 | 151 | ||
137 | ctrl.setKeyboardLayout = function() { | 152 | ctrl.setKeyboardLayout = function() { |
138 | if (!ctrl.lastInputCtrl) { | 153 | if (!ctrl.lastInputCtrl) { |
139 | ctrl.isUpperCase = true; | 154 | ctrl.isUpperCase = true; |
140 | return; | 155 | return; |
141 | } | 156 | } |
142 | else if (ctrl.lastInputCtrl.className && ctrl.isUpperCase) { | 157 | else if (ctrl.lastInputCtrl.className && ctrl.isUpperCase) { |
143 | ctrl.isUpperCase = true; | 158 | ctrl.isUpperCase = true; |
144 | } | 159 | } |
145 | else if (angular.element(ctrl.lastInputCtrl).val().length === 0) { | 160 | else if (angular.element(ctrl.lastInputCtrl).val().length === 0) { |
146 | ctrl.isUpperCase = true; | 161 | ctrl.isUpperCase = true; |
147 | } | 162 | } |
148 | else if ( | 163 | else if ( |
149 | angular.element(ctrl.lastInputCtrl).val().slice(-1) === ' ' && | 164 | angular.element(ctrl.lastInputCtrl).val().slice(-1) === ' ' && |
150 | !ctrl.isUpperCase && attr.uppercaseAllWords !== undefined | 165 | !ctrl.isUpperCase && attr.uppercaseAllWords !== undefined |
151 | ) { | 166 | ) { |
152 | ctrl.isUpperCase = true; | 167 | ctrl.isUpperCase = true; |
153 | } | 168 | } |
154 | else{ | 169 | else{ |
155 | ctrl.isUpperCase = true; | 170 | ctrl.isUpperCase = true; |
156 | } | 171 | } |
157 | }; | 172 | }; |
158 | 173 | ||
159 | var focusin = function(event) { | 174 | var focusin = function(event) { |
160 | var e = event.target || event.srcElement; | 175 | var e = event.target || event.srcElement; |
161 | 176 | ||
162 | if (e.tagName === 'INPUT' || e.tagName === 'TEXTAREA') { | 177 | if (e.tagName === 'INPUT' || e.tagName === 'TEXTAREA') { |
163 | ctrl.lastInputCtrl = e; | 178 | ctrl.lastInputCtrl = e; |
164 | ctrl.setKeyboardLayout(); | 179 | ctrl.setKeyboardLayout(); |
165 | } | 180 | } |
166 | }; | 181 | }; |
167 | 182 | ||
168 | var keyup = function() { | 183 | var keyup = function() { |
169 | if (!ctrl.lastInputCtrl) { | 184 | if (!ctrl.lastInputCtrl) { |
170 | return; | 185 | return; |
171 | } | 186 | } |
172 | 187 | ||
173 | ctrl.startPos = ctrl.lastInputCtrl.selectionStart; | 188 | ctrl.startPos = ctrl.lastInputCtrl.selectionStart; |
174 | ctrl.endPos = ctrl.lastInputCtrl.selectionEnd; | 189 | ctrl.endPos = ctrl.lastInputCtrl.selectionEnd; |
175 | 190 | ||
176 | ctrl.setKeyboardLayout(); | 191 | ctrl.setKeyboardLayout(); |
177 | scope.$digest(); | 192 | scope.$digest(); |
178 | }; | 193 | }; |
179 | 194 | ||
180 | $document.bind('focusin', focusin); | 195 | $document.bind('focusin', focusin); |
181 | $document.bind('keyup', keyup); | 196 | $document.bind('keyup', keyup); |
182 | 197 | ||
183 | scope.$on("$destroy", function() { | 198 | scope.$on('$destroy', function() { |
184 | $document.unbind('focusin', focusin); | 199 | $document.unbind('focusin', focusin); |
185 | $document.unbind('keyup', keyup); | 200 | $document.unbind('keyup', keyup); |
186 | }); | 201 | }); |
187 | 202 | ||
188 | element.bind('contextmenu', function(event) { | 203 | element.bind('contextmenu', function(event) { |
189 | event.preventDefault(); | 204 | event.preventDefault(); |
190 | return false; | 205 | return false; |
191 | }); | 206 | }); |
192 | 207 | ||
193 | $timeout(function() { | 208 | $timeout(function() { |
194 | ctrl.isUpperCase = true; | 209 | ctrl.isUpperCase = true; |
195 | }, 0); | 210 | }, 0); |
196 | }, | 211 | }, |
197 | templateUrl: 'src/views/angular-on-screen-keyboard.html' | 212 | templateUrl: 'src/views/angular-on-screen-keyboard.html' |
198 | }; | 213 | }; |
199 | }]); | 214 | }]); |
200 | 215 |