Marcelo Puebla / foca-teclado

Browse Code »

Commit 550d1bf822172c068b762c66e55fa37aa6d85756

Authored by Eric Fernandez 2018-11-08 11:38:20 -0300

1 parent f367ed6560

Exists in master and in 1 other branch

teclado soporta entradas numéricas

Showing 2 changed files with 17 additions and 3 deletions Show diff stats

package.json

Diff comments View file @ 550d1bf

 {
     "name": "foca-teclado",
     "version": "0.0.1",
     "description": "Componente teclado",
     "main": "dist/foca-teclado.min.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "compile": "gulp uglify",
         "gulp-pre-commit": "gulp pre-commit",
         "postinstall": "npm run compile && gulp clean-post-install",
         "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"
     },
     "pre-commit": [
         "gulp-pre-commit"
     ],
     "repository": {
         "type": "git",
         "url": "https://debo.suite.repo/modulos-npm/foca-teclado.git"
     },
     "author": "Foca Software",
     "license": "ISC",
     "peerDependencies": {
         "angular": "^1.7.x",
         "bootstrap": "^4.1.x",
         "jquery": "^3.3.x",
         "font-awesome": "^4.7.x",
         "gulp": "^3.9.x",
         "gulp-concat": "2.6.x",
         "gulp-jshint": "^2.1.x",
         "gulp-rename": "^1.4.x",
         "gulp-replace": "^1.0.x",
         "gulp-uglify-es": "^1.0.x",
         "jshint": "^2.9.x",
         "pump": "^3.0.x"
     },
     "devDependencies": {
         "angular": "^1.7.5",
         "angular-route": "^1.7.5",
+        "angular-sanitize": "^1.7.5",
         "bootstrap": "^4.1.3",
         "font-awesome": "^4.7.0",
         "gulp": "^3.9.1",
-        "angular-on-screen-keyboard": "git+https://github.com/ericf97/angular-on-screen-keyboard.git",
-        "angular-sanitize": "^1.7.5",
         "gulp-angular-templatecache": "^2.2.2",
         "gulp-clean": "^0.4.0",
         "gulp-concat": "^2.6.1",
         "gulp-connect": "^5.6.1",
         "gulp-htmlmin": "^5.0.1",
         "gulp-jshint": "^2.1.0",
         "gulp-rename": "^1.4.0",
         "gulp-replace": "^1.0.0",
         "gulp-sass": "^4.0.2",
         "gulp-uglify-es": "^1.0.4",
         "jasmine-core": "^3.2.1",
         "jquery": "^3.3.1",
         "jshint": "^2.9.6",
         "pre-commit": "^1.2.2",
         "pump": "^3.0.0"
     }
 }

src/js/angular-on-screen-keyboard-directive.js

Diff comments View file @ 550d1bf

 angular.module('onScreenKeyboard', ['ngSanitize'])
     .directive('onScreenKeyboard', ['$timeout', '$document', function($timeout, $document) {
         return {
             restrict: 'E',
             bindToController: true,
             controllerAs: 'ctrl',
             scope: {
                 rows : '=?',
                 uppercaseAllWords : '@',
                 alfanumeric : '=?',
                 numeric : '=?'
             },
             controller: ['$sce', '$scope', function($sce, $scope) {
                 var ctrl = this;
                 if (!ctrl.rows) {
                     ctrl.rows = [
                         ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', {
                             type: 'erase', colspan: 2, text: '&lArr;'
                         }],
                         ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '@'],
                         ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', '-', '_', {type: 'margin'}],
                         [
                             {type: 'shift', upperCase: '&dArr;', lowerCase: '&uArr;'},
                             'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.',
                             {type: 'shift', upperCase: '&dArr;', lowerCase: '&uArr;'}
                         ],
                         [{type: 'margin'}, {type: 'space', colspan: 9, text: ' '}]
                     ];
                 }
                 ctrl.getText = function(key) {
                     if (key.type === 'margin') {
                         return '';
                     }
                     var val = '';
                     if (key.text) {
                         val = key.text;
                     }
                     else if (key.lowerCase && !ctrl.isUpperCase) {
                         val = key.lowerCase;
                     }
                     else if (key.upperCase && ctrl.isUpperCase) {
                         val = key.upperCase;
                     }
                     else {
                         val = ctrl.isUpperCase ? key.toUpperCase() : key.toLowerCase();
                     }
                     if (val && val.indexOf('&') > -1) {
                         return $sce.trustAsHtml(val);
                     }
                     return val;
                 };
                 $scope.fondo = function() {
                     $timeout(function() {
                         ctrl.lastInputCtrl.focus();
                         $scope.$emit('focus');
                     });
                 };
             }],
             link: function(scope, element, attr) {
                 var ctrl = scope.ctrl;
                 ctrl.isUpperCase = false;
                 ctrl.lastInputCtrl = null;
                 ctrl.startPos = null;
                 ctrl.endPos = null;
                 ctrl.printKeyStroke = function(key, event) {
                     if (!ctrl.lastInputCtrl) {
                         return;
                     }
                     ctrl.startPos = ctrl.lastInputCtrl.selectionStart;
                     ctrl.endPos = ctrl.lastInputCtrl.selectionEnd;
                     if (key.type === 'erase') {
                         ctrl.eraseKeyStroke();
                         return;
                     } else if (key.type === 'shift') {
                         ctrl.isUpperCase = !ctrl.isUpperCase;
                         return;
                     }
                     var htmlKeyVal = angular.element(event.target || event.srcElement).text();
                     var lastInputCtrl = angular.element(ctrl.lastInputCtrl);
                     var val = lastInputCtrl.val();
+                    if(lastInputCtrl[0].type === 'number') {
+                        var dato = parseInt(val + htmlKeyVal);
+                        lastInputCtrl.val(dato);
+                        lastInputCtrl.triggerHandler('change');
+                        ctrl.setKeyboardLayout();
+                        ctrl.refocus();
+                        return;
+                    }
                     var pre = val.substring(0, ctrl.startPos);
                     var post = val.substring(ctrl.endPos, val.length);
                     lastInputCtrl.val(pre + htmlKeyVal + post);
                     lastInputCtrl.triggerHandler('change');
                     ctrl.startPos += htmlKeyVal.length;
                     ctrl.endPos += htmlKeyVal.length;
                     ctrl.lastInputCtrl.selectionStart = ctrl.startPos;
                     ctrl.lastInputCtrl.selectionEnd = ctrl.startPos;
                     ctrl.setKeyboardLayout();
                     ctrl.refocus();
                 };
                 ctrl.refocus = function() {
                     ctrl.lastInputCtrl.focus();
                 };
                 ctrl.eraseKeyStroke = function() {
                     if (!ctrl.lastInputCtrl) {
                         return;
                     }
                     var hasSel = ctrl.startPos !== ctrl.endPos;
                     var lastInputCtrl = angular.element(ctrl.lastInputCtrl);
                     var val = lastInputCtrl.val();
+                    if(lastInputCtrl[0].type === 'number') {
+                        lastInputCtrl.val(val.slice(0, -1));
+                        lastInputCtrl.triggerHandler('change');
+                        ctrl.setKeyboardLayout();
+                        ctrl.refocus();
+                        return;
+                    }
                     var pre = val.substring(0, hasSel ? ctrl.startPos : ctrl.startPos - 1);
                     var post = val.substring(ctrl.endPos, val.length);
                     lastInputCtrl.val(pre + post);
                     lastInputCtrl.triggerHandler('change');
                     if (hasSel) {
                         ctrl.endPos = ctrl.startPos;
                     }
                     else {
                         ctrl.startPos--;
                         ctrl.endPos--;
                     }
                     ctrl.lastInputCtrl.selectionStart = ctrl.startPos;
                     ctrl.lastInputCtrl.selectionEnd = ctrl.startPos;
                     ctrl.setKeyboardLayout();
                     ctrl.refocus();
                 };
                 ctrl.setKeyboardLayout = function() {
                     if (!ctrl.lastInputCtrl) {
                         ctrl.isUpperCase = true;
                         return;
                     }
                     else if (ctrl.lastInputCtrl.className && ctrl.isUpperCase) {
                         ctrl.isUpperCase = true;
                     }
                     else if (angular.element(ctrl.lastInputCtrl).val().length === 0) {
                         ctrl.isUpperCase = true;
                     }
                     else if (
                         angular.element(ctrl.lastInputCtrl).val().slice(-1) === ' ' &&
                         !ctrl.isUpperCase && attr.uppercaseAllWords !== undefined
                     ) {
                         ctrl.isUpperCase = true;
                     }
                     else{
                         ctrl.isUpperCase = true;
                     }
                 };
                 var focusin = function(event) {
                     var e = event.target || event.srcElement;
                     if (e.tagName === 'INPUT' || e.tagName === 'TEXTAREA') {
                         ctrl.lastInputCtrl = e;
                         ctrl.setKeyboardLayout();
                     }
                 };
                 var keyup = function() {
                     if (!ctrl.lastInputCtrl) {
                         return;
                     }
                     ctrl.startPos = ctrl.lastInputCtrl.selectionStart;
                     ctrl.endPos = ctrl.lastInputCtrl.selectionEnd;
                     ctrl.setKeyboardLayout();
                     scope.$digest();
                 };
                 $document.bind('focusin', focusin);
                 $document.bind('keyup', keyup);
-                scope.$on("$destroy", function() {
+                scope.$on('$destroy', function() {
                     $document.unbind('focusin', focusin);
                     $document.unbind('keyup', keyup);
                 });
                 element.bind('contextmenu', function(event) {
                     event.preventDefault();
                     return false;
                 });
                 $timeout(function() {
                     ctrl.isUpperCase = true;
                 }, 0);
             },
             templateUrl: 'src/views/angular-on-screen-keyboard.html'
         };
     }]);