Commit 7f268427f4abe30f09551b112bb0a1805dd0d256
1 parent
fa68786aaa
Exists in
master
and in
1 other branch
correcciones tipeo
Showing
1 changed file
with
4 additions
and
4 deletions
Show diff stats
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 | } else if (key.type === 'enter'){ | 87 | } else if (key.type === 'enter') { |
| 88 | ctrl.pressEnterKey(); | 88 | ctrl.pressEnterKey(); |
| 89 | return; | 89 | return; |
| 90 | } | 90 | } |
| 91 | 91 | ||
| 92 | var htmlKeyVal = angular.element(event.target || event.srcElement).text(); | 92 | var htmlKeyVal = angular.element(event.target || event.srcElement).text(); |
| 93 | var lastInputCtrl = angular.element(ctrl.lastInputCtrl); | 93 | var lastInputCtrl = angular.element(ctrl.lastInputCtrl); |
| 94 | var val = lastInputCtrl.val(); | 94 | var val = lastInputCtrl.val(); |
| 95 | if(lastInputCtrl[0].type === 'number') { | 95 | if(lastInputCtrl[0].type === 'number') { |
| 96 | var dato = parseInt(val + htmlKeyVal); | 96 | var dato = parseInt(val + htmlKeyVal); |
| 97 | lastInputCtrl.val(dato); | 97 | lastInputCtrl.val(dato); |
| 98 | lastInputCtrl.triggerHandler('change'); | 98 | lastInputCtrl.triggerHandler('change'); |
| 99 | ctrl.setKeyboardLayout(); | 99 | ctrl.setKeyboardLayout(); |
| 100 | ctrl.refocus(); | 100 | ctrl.refocus(); |
| 101 | return; | 101 | return; |
| 102 | } | 102 | } |
| 103 | var pre = val.substring(0, ctrl.startPos); | 103 | var pre = val.substring(0, ctrl.startPos); |
| 104 | var post = val.substring(ctrl.endPos, val.length); | 104 | var post = val.substring(ctrl.endPos, val.length); |
| 105 | lastInputCtrl.val(pre + htmlKeyVal + post); | 105 | lastInputCtrl.val(pre + htmlKeyVal + post); |
| 106 | lastInputCtrl.triggerHandler('change'); | 106 | lastInputCtrl.triggerHandler('change'); |
| 107 | 107 | ||
| 108 | ctrl.startPos += htmlKeyVal.length; | 108 | ctrl.startPos += htmlKeyVal.length; |
| 109 | ctrl.endPos += htmlKeyVal.length; | 109 | ctrl.endPos += htmlKeyVal.length; |
| 110 | ctrl.lastInputCtrl.selectionStart = ctrl.startPos; | 110 | ctrl.lastInputCtrl.selectionStart = ctrl.startPos; |
| 111 | ctrl.lastInputCtrl.selectionEnd = ctrl.startPos; | 111 | ctrl.lastInputCtrl.selectionEnd = ctrl.startPos; |
| 112 | ctrl.setKeyboardLayout(); | 112 | ctrl.setKeyboardLayout(); |
| 113 | ctrl.refocus(); | 113 | ctrl.refocus(); |
| 114 | }; | 114 | }; |
| 115 | 115 | ||
| 116 | ctrl.refocus = function() { | 116 | ctrl.refocus = function() { |
| 117 | ctrl.lastInputCtrl.focus(); | 117 | ctrl.lastInputCtrl.focus(); |
| 118 | }; | 118 | }; |
| 119 | 119 | ||
| 120 | ctrl.eraseKeyStroke = function() { | 120 | ctrl.eraseKeyStroke = function() { |
| 121 | if (!ctrl.lastInputCtrl) { | 121 | if (!ctrl.lastInputCtrl) { |
| 122 | return; | 122 | return; |
| 123 | } | 123 | } |
| 124 | 124 | ||
| 125 | var hasSel = ctrl.startPos !== ctrl.endPos; | 125 | var hasSel = ctrl.startPos !== ctrl.endPos; |
| 126 | 126 | ||
| 127 | var lastInputCtrl = angular.element(ctrl.lastInputCtrl); | 127 | var lastInputCtrl = angular.element(ctrl.lastInputCtrl); |
| 128 | var val = lastInputCtrl.val(); | 128 | var val = lastInputCtrl.val(); |
| 129 | if(lastInputCtrl[0].type === 'number') { | 129 | if(lastInputCtrl[0].type === 'number') { |
| 130 | lastInputCtrl.val(val.slice(0, -1)); | 130 | lastInputCtrl.val(val.slice(0, -1)); |
| 131 | lastInputCtrl.triggerHandler('change'); | 131 | lastInputCtrl.triggerHandler('change'); |
| 132 | ctrl.setKeyboardLayout(); | 132 | ctrl.setKeyboardLayout(); |
| 133 | ctrl.refocus(); | 133 | ctrl.refocus(); |
| 134 | return; | 134 | return; |
| 135 | } | 135 | } |
| 136 | var pre = val.substring(0, hasSel ? ctrl.startPos : ctrl.startPos - 1); | 136 | var pre = val.substring(0, hasSel ? ctrl.startPos : ctrl.startPos - 1); |
| 137 | var post = val.substring(ctrl.endPos, val.length); | 137 | var post = val.substring(ctrl.endPos, val.length); |
| 138 | 138 | ||
| 139 | lastInputCtrl.val(pre + post); | 139 | lastInputCtrl.val(pre + post); |
| 140 | lastInputCtrl.triggerHandler('change'); | 140 | lastInputCtrl.triggerHandler('change'); |
| 141 | 141 | ||
| 142 | if (hasSel) { | 142 | if (hasSel) { |
| 143 | ctrl.endPos = ctrl.startPos; | 143 | ctrl.endPos = ctrl.startPos; |
| 144 | } | 144 | } |
| 145 | else { | 145 | else { |
| 146 | ctrl.startPos--; | 146 | ctrl.startPos--; |
| 147 | ctrl.endPos--; | 147 | ctrl.endPos--; |
| 148 | } | 148 | } |
| 149 | ctrl.lastInputCtrl.selectionStart = ctrl.startPos; | 149 | ctrl.lastInputCtrl.selectionStart = ctrl.startPos; |
| 150 | ctrl.lastInputCtrl.selectionEnd = ctrl.startPos; | 150 | ctrl.lastInputCtrl.selectionEnd = ctrl.startPos; |
| 151 | ctrl.setKeyboardLayout(); | 151 | ctrl.setKeyboardLayout(); |
| 152 | ctrl.refocus(); | 152 | ctrl.refocus(); |
| 153 | }; | 153 | }; |
| 154 | 154 | ||
| 155 | ctrl.setKeyboardLayout = function() { | 155 | ctrl.setKeyboardLayout = function() { |
| 156 | if (!ctrl.lastInputCtrl) { | 156 | if (!ctrl.lastInputCtrl) { |
| 157 | ctrl.isUpperCase = true; | 157 | ctrl.isUpperCase = true; |
| 158 | return; | 158 | return; |
| 159 | } | 159 | } |
| 160 | else if (ctrl.lastInputCtrl.className && ctrl.isUpperCase) { | 160 | else if (ctrl.lastInputCtrl.className && ctrl.isUpperCase) { |
| 161 | ctrl.isUpperCase = true; | 161 | ctrl.isUpperCase = true; |
| 162 | } | 162 | } |
| 163 | else if (angular.element(ctrl.lastInputCtrl).val().length === 0) { | 163 | else if (angular.element(ctrl.lastInputCtrl).val().length === 0) { |
| 164 | ctrl.isUpperCase = true; | 164 | ctrl.isUpperCase = true; |
| 165 | } | 165 | } |
| 166 | else if ( | 166 | else if ( |
| 167 | angular.element(ctrl.lastInputCtrl).val().slice(-1) === ' ' && | 167 | angular.element(ctrl.lastInputCtrl).val().slice(-1) === ' ' && |
| 168 | !ctrl.isUpperCase && attr.uppercaseAllWords !== undefined | 168 | !ctrl.isUpperCase && attr.uppercaseAllWords !== undefined |
| 169 | ) { | 169 | ) { |
| 170 | ctrl.isUpperCase = true; | 170 | ctrl.isUpperCase = true; |
| 171 | } | 171 | } |
| 172 | else{ | 172 | else{ |
| 173 | ctrl.isUpperCase = true; | 173 | ctrl.isUpperCase = true; |
| 174 | } | 174 | } |
| 175 | }; | 175 | }; |
| 176 | 176 | ||
| 177 | ctrl.pressEnterKey = function () { | 177 | ctrl.pressEnterKey = function() { |
| 178 | 178 | ||
| 179 | $timeout(function () { | 179 | $timeout(function() { |
| 180 | if (angular.element(':focus').length > 0) { | 180 | if (angular.element(':focus').length > 0) { |
| 181 | 181 | ||
| 182 | let el = angular.element(':focus')[0], | 182 | var el = angular.element(':focus')[0], |
| 183 | down = new KeyboardEvent('keydown', | 183 | down = new KeyboardEvent('keydown', |
| 184 | { | 184 | { |
| 185 | which: 13, | 185 | which: 13, |
| 186 | keyCode: 13, | 186 | keyCode: 13, |
| 187 | bubbles: true, | 187 | bubbles: true, |
| 188 | cancelable: true, | 188 | cancelable: true, |
| 189 | }), | 189 | }), |
| 190 | press = new KeyboardEvent('keypress', | 190 | press = new KeyboardEvent('keypress', |
| 191 | { | 191 | { |
| 192 | which: 13, | 192 | which: 13, |
| 193 | keyCode: 13, | 193 | keyCode: 13, |
| 194 | bubbles: true, | 194 | bubbles: true, |
| 195 | cancelable: true, | 195 | cancelable: true, |
| 196 | }), | 196 | }), |
| 197 | up = new KeyboardEvent('keyup', | 197 | up = new KeyboardEvent('keyup', |
| 198 | { | 198 | { |
| 199 | which: 13, | 199 | which: 13, |
| 200 | keyCode: 13, | 200 | keyCode: 13, |
| 201 | bubbles: true, | 201 | bubbles: true, |
| 202 | cancelable: true, | 202 | cancelable: true, |
| 203 | }); | 203 | }); |
| 204 | 204 | ||
| 205 | el.dispatchEvent(down); | 205 | el.dispatchEvent(down); |
| 206 | el.dispatchEvent(press); | 206 | el.dispatchEvent(press); |
| 207 | el.dispatchEvent(up); | 207 | el.dispatchEvent(up); |
| 208 | } | 208 | } |
| 209 | }); | 209 | }); |
| 210 | 210 | ||
| 211 | }; | 211 | }; |
| 212 | 212 | ||
| 213 | var focusin = function(event) { | 213 | var focusin = function(event) { |
| 214 | var e = event.target || event.srcElement; | 214 | var e = event.target || event.srcElement; |
| 215 | 215 | ||
| 216 | if (e.tagName === 'INPUT' || e.tagName === 'TEXTAREA') { | 216 | if (e.tagName === 'INPUT' || e.tagName === 'TEXTAREA') { |
| 217 | ctrl.lastInputCtrl = e; | 217 | ctrl.lastInputCtrl = e; |
| 218 | ctrl.setKeyboardLayout(); | 218 | ctrl.setKeyboardLayout(); |
| 219 | } | 219 | } |
| 220 | }; | 220 | }; |
| 221 | 221 | ||
| 222 | var keyup = function() { | 222 | var keyup = function() { |
| 223 | if (!ctrl.lastInputCtrl) { | 223 | if (!ctrl.lastInputCtrl) { |
| 224 | return; | 224 | return; |
| 225 | } | 225 | } |
| 226 | 226 | ||
| 227 | ctrl.startPos = ctrl.lastInputCtrl.selectionStart; | 227 | ctrl.startPos = ctrl.lastInputCtrl.selectionStart; |
| 228 | ctrl.endPos = ctrl.lastInputCtrl.selectionEnd; | 228 | ctrl.endPos = ctrl.lastInputCtrl.selectionEnd; |
| 229 | 229 | ||
| 230 | ctrl.setKeyboardLayout(); | 230 | ctrl.setKeyboardLayout(); |
| 231 | scope.$digest(); | 231 | scope.$digest(); |
| 232 | }; | 232 | }; |
| 233 | 233 | ||
| 234 | $document.bind('focusin', focusin); | 234 | $document.bind('focusin', focusin); |
| 235 | $document.bind('keyup', keyup); | 235 | $document.bind('keyup', keyup); |
| 236 | 236 | ||
| 237 | scope.$on('$destroy', function() { | 237 | scope.$on('$destroy', function() { |
| 238 | $document.unbind('focusin', focusin); | 238 | $document.unbind('focusin', focusin); |
| 239 | $document.unbind('keyup', keyup); | 239 | $document.unbind('keyup', keyup); |
| 240 | }); | 240 | }); |
| 241 | 241 | ||
| 242 | element.bind('contextmenu', function(event) { | 242 | element.bind('contextmenu', function(event) { |
| 243 | event.preventDefault(); | 243 | event.preventDefault(); |
| 244 | return false; | 244 | return false; |
| 245 | }); | 245 | }); |
| 246 | 246 | ||
| 247 | $timeout(function() { | 247 | $timeout(function() { |
| 248 | ctrl.isUpperCase = true; | 248 | ctrl.isUpperCase = true; |
| 249 | }, 0); | 249 | }, 0); |
| 250 | }, | 250 | }, |
| 251 | templateUrl: 'src/views/angular-on-screen-keyboard.html' | 251 | templateUrl: 'src/views/angular-on-screen-keyboard.html' |
| 252 | }; | 252 | }; |
| 253 | }]); | 253 | }]); |
| 254 | 254 |