- Saqué las referencias al módulo externo angular-on-screen-keyboard.

- Modifiqué la lógica para ocultar y mostrar el teclado. - Agregué estilos.

- Saqué las referencias al módulo externo angular-on-screen-keyboard.
- Modifiqué la lógica para ocultar y mostrar el teclado. - Agregué estilos.
Pablo Marco del Pont
1 parent 9fafa03df4
Showing 4 changed files with 26 additions and 20 deletions Show diff stats
index.html
package.json
src/js/controller.js
src/sass/_teclado.scss
@@ -21,7 +21,6 @@
         <script src="./node_modules/angular-route/angular-route.min.js"></script>
         <script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script>
         <script src="./node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
-        <script src="./node_modules/angular-on-screen-keyboard/dist/angular-on-screen-keyboard.min.js"></script>
         <script src="./node_modules/angular-ui-swiper/dist/angular-ui-swiper.js"></script>
         <script src="./node_modules/ladda/dist/spin.min.js"></script>
         <script src="./node_modules/ladda/dist/ladda.min.js"></script>
@@ -67,10 +66,10 @@
             <div
                 class="btn-group-toggle"
                 data-toggle="buttons"
-                ng-click="mostrarTeclado = !mostrarTeclado">
+                ng-click="usarTeclado = !usarTeclado">
                 <label
                     class="btn btn-secondary active boton-activar-teclado"
-                    ng-class="{'teclado-activar': mostrarTeclado}">
+                    ng-class="{'teclado-activar': usarTeclado}">
                     <input
                         type="checkbox"
                         autocomplete="off"
@@ -79,7 +78,7 @@
                 </label>
             </div>
             <foca-teclado
-                ng-show="mostrarTeclado && hasFocus"
+                ng-show="usarTeclado && mostrarTeclado"
                 alfanumeric="true"
                 numeric="true"
                 >
@@ -24,7 +24,6 @@
         "angular-cookies": "^1.7.5",
         "angular-i18n": "^1.7.5",
         "angular-ladda": "^0.4.3",
-        "angular-on-screen-keyboard": "git+https://github.com/ericf97/angular-on-screen-keyboard.git",
         "angular-route": "^1.7.5",
         "angular-sanitize": "^1.7.5",
         "angular-ui-swiper": "^2.3.8",
@@ -4,19 +4,25 @@ angular.module(&#39;appWrapperDemo&#39;)
         '$rootScope',
         '$timeout',
         function($scope, $rootScope, $timeout) {
-            $scope.hasFocus = false;
-            var estado;
-            $rootScope.$on('focus', function(event, data) {
-                estado = data;
-                if(!data) {
-                    $timeout(function() {
-                        if(!estado) {
-                            $scope.hasFocus = data;
-                        }
-                    },200)     
-                } else {
-                    $scope.hasFocus = data;
+            $scope.usarTeclado = false;
+            $scope.mostrarTeclado = false;
+            $rootScope.$on('focus', function(event) {
+                if(!$scope.usarTeclado) {
+                    return;
                 }
+                $scope.mostrarTeclado = true;
+                $timeout.cancel($scope.timeout);
+                if(!$scope.$$phase) {
+                    $scope.$apply();
+                }
+            });
+            $rootScope.$on('blur', function(event) {
+                $scope.timeout = $timeout(function(){
+                    $scope.mostrarTeclado = false;
+                    if(!$scope.$$phase) {
+                        $scope.$apply();
+                    }
+                }, 150);
             });
         }
     ]);
-
 .keyboard {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -7,10 +6,13 @@
     -ms-user-select: none;
     user-select: none;
     width: 62%;
-    height: 60%;
+    height: auto;
     margin-left: 13%;
     margin-top: -19%;
-    position: absolute;    
+    position: absolute;
+    border: 1px solid rgba(255, 128, 0, .4);
+    background-color: rgba(0, 0, 0, .3);
+    bottom: 5px;
     table {
         border-spacing: 10px;
         border-collapse: separate;
...	...	@@ -21,7 +21,6 @@
21	21	<script src="./node_modules/angular-route/angular-route.min.js"></script>
22	22	<script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script>
23	23	<script src="./node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
24		- <script src="./node_modules/angular-on-screen-keyboard/dist/angular-on-screen-keyboard.min.js"></script>
25	24	<script src="./node_modules/angular-ui-swiper/dist/angular-ui-swiper.js"></script>
26	25	<script src="./node_modules/ladda/dist/spin.min.js"></script>
27	26	<script src="./node_modules/ladda/dist/ladda.min.js"></script>
...	...	@@ -67,10 +66,10 @@
67	66	<div
68	67	class="btn-group-toggle"
69	68	data-toggle="buttons"
70		- ng-click="mostrarTeclado = !mostrarTeclado">
	69	+ ng-click="usarTeclado = !usarTeclado">
71	70	<label
72	71	class="btn btn-secondary active boton-activar-teclado"
73		- ng-class="{'teclado-activar': mostrarTeclado}">
	72	+ ng-class="{'teclado-activar': usarTeclado}">
74	73	<input
75	74	type="checkbox"
76	75	autocomplete="off"
...	...	@@ -79,7 +78,7 @@
79	78	</label>
80	79	</div>
81	80	<foca-teclado
82		- ng-show="mostrarTeclado && hasFocus"
	81	+ ng-show="usarTeclado && mostrarTeclado"
83	82	alfanumeric="true"
84	83	numeric="true"
85	84	>
...	...	@@ -24,7 +24,6 @@
24	24	"angular-cookies": "^1.7.5",
25	25	"angular-i18n": "^1.7.5",
26	26	"angular-ladda": "^0.4.3",
27		- "angular-on-screen-keyboard": "git+https://github.com/ericf97/angular-on-screen-keyboard.git",
28	27	"angular-route": "^1.7.5",
29	28	"angular-sanitize": "^1.7.5",
30	29	"angular-ui-swiper": "^2.3.8",
...	...	@@ -4,19 +4,25 @@ angular.module('appWrapperDemo')
4	4	'$rootScope',
5	5	'$timeout',
6	6	function($scope, $rootScope, $timeout) {
7		- $scope.hasFocus = false;
8		- var estado;
9		- $rootScope.$on('focus', function(event, data) {
10		- estado = data;
11		- if(!data) {
12		- $timeout(function() {
13		- if(!estado) {
14		- $scope.hasFocus = data;
15		- }
16		- },200)
17		- } else {
18		- $scope.hasFocus = data;
	7	+ $scope.usarTeclado = false;
	8	+ $scope.mostrarTeclado = false;
	9	+ $rootScope.$on('focus', function(event) {
	10	+ if(!$scope.usarTeclado) {
	11	+ return;
19	12	}
	13	+ $scope.mostrarTeclado = true;
	14	+ $timeout.cancel($scope.timeout);
	15	+ if(!$scope.$$phase) {
	16	+ $scope.$apply();
	17	+ }
	18	+ });
	19	+ $rootScope.$on('blur', function(event) {
	20	+ $scope.timeout = $timeout(function(){
	21	+ $scope.mostrarTeclado = false;
	22	+ if(!$scope.$$phase) {
	23	+ $scope.$apply();
	24	+ }
	25	+ }, 150);
20	26	});
21	27	}
22	28	]);
1		-
2	1	.keyboard {
3	2	-webkit-touch-callout: none;
4	3	-webkit-user-select: none;
...	...	@@ -7,10 +6,13 @@
7	6	-ms-user-select: none;
8	7	user-select: none;
9	8	width: 62%;
10		- height: 60%;
	9	+ height: auto;
11	10	margin-left: 13%;
12	11	margin-top: -19%;
13		- position: absolute;
	12	+ position: absolute;
	13	+ border: 1px solid rgba(255, 128, 0, .4);
	14	+ background-color: rgba(0, 0, 0, .3);
	15	+ bottom: 5px;
14	16	table {
15	17	border-spacing: 10px;
16	18	border-collapse: separate;