Luigi / foca-teclado

Download as
Browse Code »

Commit 9cd8fd0b8828a238769715162eeb529d69926216

Authored by Pablo Marco del Pont
1 parent 8a94a5b436
Exists in master and in 1 other branch develop

- Agregué código de componente angular-on-screen-keyboard. 

- Agregué watch al gulp.
Showing 4 changed files with 236 additions and 4 deletions   Show diff stats
... ... @@ -89,3 +89,7 @@ gulp.task('clean-post-install', function() {
89 89 });
90 90  
91 91 gulp.task('default', ['webserver']);
  92 +
  93 +gulp.task('watch', function() {
  94 + gulp.watch([paths.srcJS, paths.srcViews], ['uglify']);
  95 +});
src/js/angular-on-screen-keyboard-directive.js
Diff comments   View file @ 9cd8fd0
... ... @@ -0,0 +1,190 @@
  1 +angular.module('onScreenKeyboard', ['ngSanitize'])
  2 + .directive('onScreenKeyboard', ['$timeout', '$document', function($timeout, $document) {
  3 + return {
  4 + restrict: 'E',
  5 + bindToController: true,
  6 + controllerAs: 'ctrl',
  7 + scope: {
  8 + rows : '=?',
  9 + uppercaseAllWords : '@',
  10 + alfanumeric : '=?',
  11 + numeric : '=?'
  12 + },
  13 + controller: ['$sce', '$scope', function($sce, $scope) {
  14 + var ctrl = this;
  15 +
  16 + if (!ctrl.rows) {
  17 + ctrl.rows = [
  18 + ['1', '2', '3','4','5','6','7','8', '9', '0', {
  19 + type: 'erase', colspan: 2, text: '⇐'
  20 + }],
  21 + ['q','w','e','r','t','y','u','i','o','p','@'],
  22 + ['a','s','d','f','g','h','j','k','l','-','_', {type: 'margin'}],
  23 + [
  24 + {type: 'shift', upperCase: '⇓', lowerCase: '⇑'},
  25 + 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.',
  26 + {type: 'shift', upperCase: '⇓', lowerCase: '⇑'}
  27 + ],
  28 + [{type: 'margin'}, {type: 'space', colspan: 9, text: ' '}]
  29 + ];
  30 + }
  31 +
  32 + ctrl.getText = function(key) {
  33 + if (key.type === 'margin')
  34 + return '';
  35 +
  36 + var val = '';
  37 +
  38 + if (key.text)
  39 + val = key.text;
  40 + else if (key.lowerCase && !ctrl.isUpperCase)
  41 + val = key.lowerCase;
  42 + else if (key.upperCase && ctrl.isUpperCase)
  43 + val = key.upperCase;
  44 + else {
  45 + val = ctrl.isUpperCase ? key.toUpperCase() : key.toLowerCase();
  46 + }
  47 +
  48 + if (val && val.indexOf('&') > -1)
  49 + return $sce.trustAsHtml(val);
  50 +
  51 + return val;
  52 + };
  53 + $scope.fondo = function() {
  54 + $timeout(function() {
  55 + ctrl.lastInputCtrl.focus();
  56 + $scope.$emit('focus');
  57 + });
  58 + };
  59 + }],
  60 + link: function(scope, element, attr) {
  61 + var ctrl = scope.ctrl;
  62 + ctrl.isUpperCase = false;
  63 + ctrl.lastInputCtrl = null;
  64 + ctrl.startPos = null;
  65 + ctrl.endPos = null;
  66 +
  67 + ctrl.printKeyStroke = function(key, event) {
  68 +
  69 + if (!ctrl.lastInputCtrl)
  70 + return;
  71 +
  72 + ctrl.startPos = ctrl.lastInputCtrl.selectionStart;
  73 + ctrl.endPos = ctrl.lastInputCtrl.selectionEnd;
  74 +
  75 + if (key.type === 'erase') {
  76 + ctrl.eraseKeyStroke();
  77 + return;
  78 + } else if (key.type === 'shift') {
  79 + ctrl.isUpperCase = !ctrl.isUpperCase;
  80 + return;
  81 + }
  82 +
  83 + var htmlKeyVal = angular.element(event.target || event.srcElement).text();
  84 + var lastInputCtrl = angular.element(ctrl.lastInputCtrl);
  85 + var val = lastInputCtrl.val();
  86 + var pre = val.substring(0, ctrl.startPos);
  87 + var post = val.substring(ctrl.endPos, val.length);
  88 + lastInputCtrl.val(pre + htmlKeyVal + post);
  89 + lastInputCtrl.triggerHandler('change');
  90 +
  91 + ctrl.startPos += htmlKeyVal.length;
  92 + ctrl.endPos += htmlKeyVal.length;
  93 + ctrl.lastInputCtrl.selectionStart = ctrl.startPos;
  94 + ctrl.lastInputCtrl.selectionEnd = ctrl.startPos;
  95 + ctrl.setKeyboardLayout();
  96 + ctrl.refocus();
  97 + };
  98 +
  99 + ctrl.refocus = function() {
  100 + ctrl.lastInputCtrl.focus();
  101 + };
  102 +
  103 + ctrl.eraseKeyStroke = function() {
  104 + if (!ctrl.lastInputCtrl)
  105 + return;
  106 +
  107 + var hasSel = ctrl.startPos !== ctrl.endPos;
  108 +
  109 + var lastInputCtrl = angular.element(ctrl.lastInputCtrl);
  110 + var val = lastInputCtrl.val();
  111 + var pre = val.substring(0, hasSel ? ctrl.startPos : ctrl.startPos - 1);
  112 + var post = val.substring(ctrl.endPos, val.length);
  113 +
  114 + lastInputCtrl.val(pre + post);
  115 + lastInputCtrl.triggerHandler('change');
  116 +
  117 + if (hasSel) {
  118 + ctrl.endPos = ctrl.startPos;
  119 + }
  120 + else {
  121 + ctrl.startPos--;
  122 + ctrl.endPos--;
  123 + }
  124 + ctrl.lastInputCtrl.selectionStart = ctrl.startPos;
  125 + ctrl.lastInputCtrl.selectionEnd = ctrl.startPos;
  126 + ctrl.setKeyboardLayout();
  127 + ctrl.refocus();
  128 + };
  129 +
  130 + ctrl.setKeyboardLayout = function() {
  131 + if (!ctrl.lastInputCtrl) {
  132 + ctrl.isUpperCase = true;
  133 + return;
  134 + }
  135 + else if (ctrl.lastInputCtrl.className && ctrl.isUpperCase)
  136 + ctrl.isUpperCase = true;
  137 + else if (angular.element(ctrl.lastInputCtrl).val().length === 0) {
  138 + ctrl.isUpperCase = true;
  139 + }
  140 + else if (
  141 + angular.element(ctrl.lastInputCtrl).val().slice(-1) === ' ' &&
  142 + !ctrl.isUpperCase && attr.uppercaseAllWords !== undefined
  143 + )
  144 + ctrl.isUpperCase = true;
  145 + else{
  146 + ctrl.isUpperCase = true;
  147 + }
  148 + };
  149 +
  150 + var focusin = function(event) {
  151 + var e = event.target || event.srcElement;
  152 +
  153 + if (e.tagName === 'INPUT' || e.tagName === 'TEXTAREA') {
  154 + ctrl.lastInputCtrl = e;
  155 + ctrl.setKeyboardLayout();
  156 + }
  157 + };
  158 +
  159 + var keyup = function() {
  160 + if (!ctrl.lastInputCtrl) {
  161 + return;
  162 + }
  163 +
  164 + ctrl.startPos = ctrl.lastInputCtrl.selectionStart;
  165 + ctrl.endPos = ctrl.lastInputCtrl.selectionEnd;
  166 +
  167 + ctrl.setKeyboardLayout();
  168 + scope.$digest();
  169 + };
  170 +
  171 + $document.bind('focusin', focusin);
  172 + $document.bind('keyup', keyup);
  173 +
  174 + scope.$on("$destroy", function() {
  175 + $document.unbind('focusin', focusin);
  176 + $document.unbind('keyup', keyup);
  177 + });
  178 +
  179 + element.bind('contextmenu', function(event) {
  180 + event.preventDefault();
  181 + return false;
  182 + });
  183 +
  184 + $timeout(function() {
  185 + ctrl.isUpperCase = true;
  186 + },0);
  187 + },
  188 + templateUrl: 'src/views/angular-on-screen-keyboard.html'
  189 + };
  190 + }]);
0 191 \ No newline at end of file
src/views/angular-on-screen-keyboard.html
Diff comments   View file @ 9cd8fd0
... ... @@ -0,0 +1,38 @@
  1 +<div class="keyboard" ng-mousedown="fondo()">
  2 + <div class="row">
  3 + <table
  4 + class="form-group col-12 col-sm-6 col-md-9"
  5 + ng-show="ctrl.alfanumeric"
  6 + >
  7 + <tr ng-repeat="row in ctrl.rows.alfa">
  8 + <td ng-repeat="key in row"
  9 + ng-click="ctrl.printKeyStroke(key, $event)"
  10 + colspan="{{key.colspan || 1}}"
  11 + ng-class="{
  12 + 'number': key.type === 'number', 'letter': key.type !== 'margin' &&
  13 + key.type !== 'number'
  14 + }"
  15 + ng-bind-html="ctrl.getText(key)"
  16 + >
  17 + </td>
  18 + </tr>
  19 + </table>
  20 + <table
  21 + class="form-group col-12 col-sm-6 col-md-3"
  22 + ng-show="ctrl.numeric"
  23 + >
  24 + <tr ng-repeat="row in ctrl.rows.numeric">
  25 + <td ng-repeat="key in row"
  26 + ng-click="ctrl.printKeyStroke(key, $event)"
  27 + colspan="{{key.colspan || 1}}"
  28 + ng-class="{
  29 + 'number': key.type === 'number', 'letter': key.type !== 'margin' &&
  30 + key.type !== 'number'
  31 + }"
  32 + ng-bind-html="ctrl.getText(key)"
  33 + >
  34 + </td>
  35 + </tr>
  36 + </table>
  37 + </div>
  38 +</div>
src/views/teclado.html
Diff comments   View file @ 9cd8fd0
1 1 <on-screen-keyboard
2   - rows="rows"
3   - alfanumeric="$ctrl.alfanumeric"
4   - numeric="$ctrl.numeric"
5   - ></on-screen-keyboard>
  2 + rows="rows"
  3 + alfanumeric="$ctrl.alfanumeric"
  4 + numeric="$ctrl.numeric"
  5 + ></on-screen-keyboard>