Luigi / wrapper-demo

Download as
Browse Code »

Commit c4126b0933299a6f2efc774a1d28d2cd3c911cdd

Authored by Eric Fernandez
1 parent a67ea2279a
Exists in master

***emito broadcast's cuando el teclado se activa o se desactiva***

Showing 2 changed files with 13 additions and 11 deletions   Show diff stats
1 <html ng-app="appWrapperDemo"> 1 <html ng-app="appWrapperDemo">
2 <head> 2 <head>
3 <meta charset="UTF-8"/> 3 <meta charset="UTF-8"/>
4 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 4 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5 <base href="./"> 5 <base href="./">
6 6
7 <!--CSS--> 7 <!--CSS-->
8 <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/> 8 <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
9 <link href="./node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"/> 9 <link href="./node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
10 <link rel="stylesheet" href="node_modules/angular-ui-swiper/dist/angular-ui-swiper.css"> 10 <link rel="stylesheet" href="node_modules/angular-ui-swiper/dist/angular-ui-swiper.css">
11 <link href="./node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet"> 11 <link href="./node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet">
12 <link href="./node_modules/leaflet/dist/leaflet.css" rel="stylesheet"/> 12 <link href="./node_modules/leaflet/dist/leaflet.css" rel="stylesheet"/>
13 <link href="css/general.css" rel="stylesheet"/> 13 <link href="css/general.css" rel="stylesheet"/>
14 14
15 <!--VENDOR JS--> 15 <!--VENDOR JS-->
16 <script src="./node_modules/jquery/dist/jquery.min.js"></script> 16 <script src="./node_modules/jquery/dist/jquery.min.js"></script>
17 <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 17 <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
18 <script src="./node_modules/angular/angular.min.js"></script> 18 <script src="./node_modules/angular/angular.min.js"></script>
19 <script src="./node_modules/angular-cookies/angular-cookies.min.js"></script> 19 <script src="./node_modules/angular-cookies/angular-cookies.min.js"></script>
20 <script src="./node_modules/angular-i18n/angular-locale_es-ar.js"></script> 20 <script src="./node_modules/angular-i18n/angular-locale_es-ar.js"></script>
21 <script src="./node_modules/angular-route/angular-route.min.js"></script> 21 <script src="./node_modules/angular-route/angular-route.min.js"></script>
22 <script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script> 22 <script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script>
23 <script src="./node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script> 23 <script src="./node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
24 <script src="./node_modules/angular-ui-swiper/dist/angular-ui-swiper.js"></script> 24 <script src="./node_modules/angular-ui-swiper/dist/angular-ui-swiper.js"></script>
25 <script src="./node_modules/ladda/dist/spin.min.js"></script> 25 <script src="./node_modules/ladda/dist/spin.min.js"></script>
26 <script src="./node_modules/ladda/dist/ladda.min.js"></script> 26 <script src="./node_modules/ladda/dist/ladda.min.js"></script>
27 <script src="./node_modules/angular-ladda/dist/angular-ladda.min.js"></script> 27 <script src="./node_modules/angular-ladda/dist/angular-ladda.min.js"></script>
28 <script src="./node_modules/leaflet/dist/leaflet.js"></script> 28 <script src="./node_modules/leaflet/dist/leaflet.js"></script>
29 <script src="./vendor/cordovaGeolocationModule.min.js"></script> 29 <script src="./vendor/cordovaGeolocationModule.min.js"></script>
30 30
31 <script src="./node_modules/foca-admin-seguimiento/dist/foca-admin-seguimiento.min.js"></script> 31 <script src="./node_modules/foca-admin-seguimiento/dist/foca-admin-seguimiento.min.js"></script>
32 <script src="./node_modules/foca-abm-plazo-pago/dist/foca-abm-plazo-pago.min.js"></script> 32 <script src="./node_modules/foca-abm-plazo-pago/dist/foca-abm-plazo-pago.min.js"></script>
33 <script src="./node_modules/foca-abm-precios-condiciones/dist/foca-abm-precios-condiciones.min.js"></script> 33 <script src="./node_modules/foca-abm-precios-condiciones/dist/foca-abm-precios-condiciones.min.js"></script>
34 <script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script> 34 <script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script>
35 <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script> 35 <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script>
36 <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script> 36 <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script>
37 <script src="./node_modules/foca-configuracion/dist/foca-configuracion.min.js"></script> 37 <script src="./node_modules/foca-configuracion/dist/foca-configuracion.min.js"></script>
38 <script src="./node_modules/foca-crear-nota-pedido/dist/foca-crear-nota-pedido.min.js"></script> 38 <script src="./node_modules/foca-crear-nota-pedido/dist/foca-crear-nota-pedido.min.js"></script>
39 <script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script> 39 <script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
40 <script src="./node_modules/foca-login/dist/foca-login.min.js"></script> 40 <script src="./node_modules/foca-login/dist/foca-login.min.js"></script>
41 <script src="./node_modules/foca-modal/dist/foca-modal.min.js"></script> 41 <script src="./node_modules/foca-modal/dist/foca-modal.min.js"></script>
42 <script src="./node_modules/foca-modal-busqueda-productos/dist/foca-busqueda-productos.min.js"></script> 42 <script src="./node_modules/foca-modal-busqueda-productos/dist/foca-busqueda-productos.min.js"></script>
43 <script src="./node_modules/foca-modal-cotizacion/dist/foca-modal-cotizacion.min.js"></script> 43 <script src="./node_modules/foca-modal-cotizacion/dist/foca-modal-cotizacion.min.js"></script>
44 <script src="./node_modules/foca-modal-domicilio/dist/foca-modal-domicilios.min.js"></script> 44 <script src="./node_modules/foca-modal-domicilio/dist/foca-modal-domicilios.min.js"></script>
45 <script src="./node_modules/foca-modal-flete/dist/foca-modal-flete.min.js"></script> 45 <script src="./node_modules/foca-modal-flete/dist/foca-modal-flete.min.js"></script>
46 <script src="./node_modules/foca-modal-moneda/dist/foca-modal-moneda.min.js"></script> 46 <script src="./node_modules/foca-modal-moneda/dist/foca-modal-moneda.min.js"></script>
47 <script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script> 47 <script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script>
48 <script src="./node_modules/foca-modal-proveedor/dist/foca-modal-proveedor.min.js"></script> 48 <script src="./node_modules/foca-modal-proveedor/dist/foca-modal-proveedor.min.js"></script>
49 <script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script> 49 <script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script>
50 <script src="./node_modules/foca-seguimiento/dist/foca-seguimiento.min.js"></script> 50 <script src="./node_modules/foca-seguimiento/dist/foca-seguimiento.min.js"></script>
51 <script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script> 51 <script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script>
52 <script src="./node_modules/foca-turno-apertura/dist/foca-turno-apertura.min.js"></script> 52 <script src="./node_modules/foca-turno-apertura/dist/foca-turno-apertura.min.js"></script>
53 <!-- <script src="cordova.js"></script> --> 53 <!-- <script src="cordova.js"></script> -->
54 54
55 <!-- <script src="./dist/wrapper-demo.min.js"></script> --> 55 <!-- <script src="./dist/wrapper-demo.min.js"></script> -->
56 <script src="./src/js/app.js"></script> 56 <script src="./src/js/app.js"></script>
57 <script src="./src/js/controller.js"></script> 57 <script src="./src/js/controller.js"></script>
58 <script src="./src/etc/develop.js"></script> 58 <script src="./src/etc/develop.js"></script>
59 </head> 59 </head>
60 <body> 60 <body>
61 <style> 61 <style>
62 </style> 62 </style>
63 <botonera-horizontal></botonera-horizontal> 63 <botonera-horizontal></botonera-horizontal>
64 <div ng-view class="container contenedor"></div> 64 <div ng-view class="container contenedor"></div>
65 <div ng-controller="appWrapperDemoController" class="container d-none d-md-block"> 65 <div ng-controller="appWrapperDemoController" class="container d-none d-md-block">
66 <div 66 <div
67 class="btn-group-toggle" 67 class="btn-group-toggle"
68 data-toggle="buttons" 68 data-toggle="buttons"
69 ng-click="usarTeclado = !usarTeclado"> 69 ng-click="cambioUsoTeclado()">
70 <label 70 <label
71 class="btn btn-secondary active boton-activar-teclado" 71 class="btn btn-secondary active boton-activar-teclado"
72 ng-class="{'teclado-activar': usarTeclado}"> 72 ng-class="{'teclado-activar': usarTeclado}">
73 <input 73 <input
74 type="checkbox" 74 type="checkbox"
75 autocomplete="off" 75 autocomplete="off"
76 > 76 >
77 <i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i> 77 <i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i>
78 </label> 78 </label>
79 </div> 79 </div>
80 <foca-teclado 80 <foca-teclado
81 ng-show="usarTeclado && mostrarTeclado" 81 ng-show="usarTeclado && mostrarTeclado"
82 alfanumeric="true" 82 alfanumeric="true"
83 numeric="true" 83 numeric="true"
84 > 84 >
85 </foca-teclado> 85 </foca-teclado>
86 </div> 86 </div>
87 </body> 87 </body>
88 </html> 88 </html>
89 89
src/js/controller.js
Diff comments   View file @ c4126b0
1 angular.module('appWrapperDemo') 1 angular.module('appWrapperDemo')
2 .controller('appWrapperDemoController', [ 2 .controller('appWrapperDemoController', [
3 '$scope', 3 '$scope',
4 '$rootScope', 4 '$rootScope',
5 '$timeout', 5 '$timeout',
6 function($scope, $rootScope, $timeout) { 6 function($scope, $rootScope, $timeout) {
7 $scope.usarTeclado = false; 7 $scope.usarTeclado = false;
8 $rootScope.$broadcast('usarTeclado', false);
8 $scope.mostrarTeclado = false; 9 $scope.mostrarTeclado = false;
9 //Envía broadcast para avisar que el teclado está en funcionamiento o no 10 //Envía broadcast para avisar que el teclado está en funcionamiento o no
10 //para su uso cambiar ng-click del boton por esta función 11 //para su uso cambiar ng-click del boton por esta función
11 // $scope.cambioUsoTeclado = function() { 12 $scope.cambioUsoTeclado = function() {
12 // if($scope.usarTeclado) { 13 if($scope.usarTeclado) {
13 // $scope.usarTeclado = false; 14 $scope.usarTeclado = false;
14 // $rootScope.$broadcast('usarTeclado', false); 15 $rootScope.$broadcast('usarTeclado', false);
15 // return 16 return
16 // } 17 }
17 // $scope.usarTeclado = true; 18 $scope.usarTeclado = true;
18 // $rootScope.$broadcast('usarTeclado', true); 19 $rootScope.$broadcast('usarTeclado', true);
19 // } 20 };
21
20 $rootScope.$on('focus', function(event) { 22 $rootScope.$on('focus', function(event) {
21 if(!$scope.usarTeclado) { 23 if(!$scope.usarTeclado) {
22 return; 24 return;
23 } 25 }
24 $scope.mostrarTeclado = true; 26 $scope.mostrarTeclado = true;
25 $timeout.cancel($scope.timeout); 27 $timeout.cancel($scope.timeout);
26 if(!$scope.$$phase) { 28 if(!$scope.$$phase) {
27 $scope.$apply(); 29 $scope.$apply();
28 } 30 }
29 }); 31 });
30 $rootScope.$on('blur', function(event) { 32 $rootScope.$on('blur', function(event) {
31 $scope.timeout = $timeout(function() { 33 $scope.timeout = $timeout(function() {
32 $scope.mostrarTeclado = false; 34 $scope.mostrarTeclado = false;
33 if(!$scope.$$phase) { 35 if(!$scope.$$phase) {
34 $scope.$apply(); 36 $scope.$apply();
35 } 37 }
36 }, 150); 38 }, 150);
37 }); 39 });
38 } 40 }
39 ]); 41 ]);
40 42