Jose Pinto / foca-teclado

Browse Code »

Commit 7bd376d6355524899dc6bc059f2796cfafd2c4ab

Authored by Jose Pinto 2018-12-04 16:01:16 -0300

1 parent 32f00bd612

Exists in master

Agrego boton enter

Showing 3 changed files with 64 additions and 21 deletions Show diff stats

package.json

Diff comments View file @ 7bd376d

 {
     "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": "1.7.5",
         "angular-route": "^1.7.5",
-        "angular-sanitize": "^1.7.5",
+        "angular-sanitize": "1.7.5",
-        "bootstrap": "^4.1.3",
+        "bootstrap": "4.1.3",
-        "font-awesome": "^4.7.0",
+        "font-awesome": "4.7.0",
-        "gulp": "^3.9.1",
+        "gulp": "3.9.1",
-        "gulp-angular-templatecache": "^2.2.2",
+        "gulp-angular-templatecache": "2.2.5",
-        "gulp-clean": "^0.4.0",
+        "gulp-clean": "0.4.0",
-        "gulp-concat": "^2.6.1",
+        "gulp-concat": "2.6.1",
-        "gulp-connect": "^5.6.1",
+        "gulp-connect": "5.6.1",
-        "gulp-htmlmin": "^5.0.1",
+        "gulp-htmlmin": "5.0.1",
-        "gulp-jshint": "^2.1.0",
+        "gulp-jshint": "2.1.0",
-        "gulp-rename": "^1.4.0",
+        "gulp-rename": "1.4.0",
-        "gulp-replace": "^1.0.0",
+        "gulp-replace": "1.0.0",
-        "gulp-sass": "^4.0.2",
+        "gulp-sass": "4.0.2",
-        "gulp-uglify-es": "^1.0.4",
+        "gulp-uglify-es": "1.0.4",
-        "jasmine-core": "^3.2.1",
+        "jasmine-core": "3.3.0",
-        "jquery": "^3.3.1",
+        "jquery": "3.3.1",
-        "jshint": "^2.9.6",
+        "jshint": "2.9.6",
-        "pre-commit": "^1.2.2",
+        "pre-commit": "1.2.2",
-        "pump": "^3.0.0"
+        "pump": "3.0.0"
+    },
+    "dependencies": {
+        "angular-on-screen-keyboard": "git+https://github.com/ericf97/angular-on-screen-keyboard.git"
     }
 }

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

Diff comments View file @ 7bd376d

 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;
+                    } else if (key.type === 'enter'){
+                        ctrl.pressEnterKey();
+                        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;
                     }
                 };
+                ctrl.pressEnterKey = function () {
+                    $timeout(function () {
+                        if (angular.element(':focus').length > 0) {
+                            let el = angular.element(':focus')[0],
+                                down = new KeyboardEvent('keydown',
+                                {
+                                    which: 13,
+                                    keyCode: 13,
+                                    bubbles: true,
+                                    cancelable: true,
+                                }),
+                                press = new KeyboardEvent('keypress',
+                                    {
+                                        which: 13,
+                                        keyCode: 13,
+                                        bubbles: true,
+                                        cancelable: true,
+                                    }),
+                                up = new KeyboardEvent('keyup',
+                                    {
+                                        which: 13,
+                                        keyCode: 13,
+                                        bubbles: true,
+                                        cancelable: true,
+                                    });
+                            el.dispatchEvent(down);
+                            el.dispatchEvent(press);
+                            el.dispatchEvent(up);
+                        }
+                    });
+                };
                 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() {
                     $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'
         };
     }]);

src/js/controller.js

Diff comments View file @ 7bd376d

 angular.module('focaTeclado')
     .controller('focaTecladoController', [
         '$scope',
         function($scope) {
             $scope.rows = {};
             $scope.rows.alfa = [
                 ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
                 ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'ñ'],
                 ['z', 'x', 'c', 'v', 'b', 'n', 'm',
                     {type: 'erase', colspan: 3, text: 'spr'}
                 ],
                 [
                     {type: 'margin', colspan: 1},
-                    {type: 'button', colspan: 6, text: ' '}
+                    {type: 'button', colspan: 6, text: ' '},
+                    {type: 'enter', colspan: 3, text: 'Enter'}
                 ]
             ];
             $scope.rows.numeric = [
                 [
                     {type: 'number', text: '7'},
                     {type: 'number', text: '8'},
                     {type: 'number', text: '9'}
                 ],
                 [
                     {type: 'number', text: '4'},
                     {type: 'number', text: '5'},
                     {type: 'number', text: '6'}
                 ],
                 [
                     {type: 'number', text: '1'},
                     {type: 'number', text: '2'},
                     {type: 'number', text: '3'}
                 ],
                 [
                     {type: 'number', text: '0', colspan: 2},
                     {type: 'number', text: '/'}
                 ],
                 [
                     {type: 'number', text: '.'},
                     {type: 'number', text: '*'},
                     {type: 'number', text: '+'}
                 ]
             ];
     }]);