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

- Agregué watch al gulp.

- Agregué código de componente angular-on-screen-keyboard.
- Agregué watch al gulp.
Pablo Marco del Pont
1 parent 8a94a5b436
Showing 4 changed files with 236 additions and 4 deletions Show diff stats
gulpfile.js
src/js/angular-on-screen-keyboard-directive.js
src/views/angular-on-screen-keyboard.html
src/views/teclado.html
@@ -89,3 +89,7 @@ gulp.task(&#39;clean-post-install&#39;, function() {
 });
  
 gulp.task('default', ['webserver']);
+
+gulp.task('watch', function() {
+    gulp.watch([paths.srcJS, paths.srcViews], ['uglify']);
+});
@@ -0,0 +1,190 @@
+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();
+                    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();
+                    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() {
+                    $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'
+        };
+    }]);
 \ No newline at end of file
@@ -0,0 +1,38 @@
+<div class="keyboard" ng-mousedown="fondo()">
+    <div class="row">
+        <table
+            class="form-group col-12 col-sm-6 col-md-9"
+            ng-show="ctrl.alfanumeric"
+        >
+            <tr ng-repeat="row in ctrl.rows.alfa">
+                <td ng-repeat="key in row"
+                    ng-click="ctrl.printKeyStroke(key, $event)"
+                    colspan="{{key.colspan || 1}}"
+                    ng-class="{
+                        'number': key.type === 'number', 'letter': key.type !== 'margin' &&
+                        key.type !== 'number'
+                    }"
+                    ng-bind-html="ctrl.getText(key)"
+                >
+                </td>
+            </tr>
+        </table>
+        <table
+            class="form-group col-12 col-sm-6 col-md-3" 
+            ng-show="ctrl.numeric" 
+        >
+            <tr ng-repeat="row in ctrl.rows.numeric">
+                <td ng-repeat="key in row"
+                    ng-click="ctrl.printKeyStroke(key, $event)"
+                    colspan="{{key.colspan || 1}}"
+                    ng-class="{
+                        'number': key.type === 'number', 'letter': key.type !== 'margin' &&
+                        key.type !== 'number'
+                    }"
+                    ng-bind-html="ctrl.getText(key)"
+                >
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
 <on-screen-keyboard
-	rows="rows"
-	alfanumeric="$ctrl.alfanumeric"
-	numeric="$ctrl.numeric"
-	></on-screen-keyboard>
+    rows="rows"
+    alfanumeric="$ctrl.alfanumeric"
+    numeric="$ctrl.numeric"
+    ></on-screen-keyboard>
...	...	@@ -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	+});
...	...	@@ -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: '&dArr;', lowerCase: '&uArr;'},
	25	+ 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.',
	26	+ {type: 'shift', upperCase: '&dArr;', lowerCase: '&uArr;'}
	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
...	...	@@ -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>
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>