Luigi / wrapper-demo

Commit 23743461458373081d45722959fa4e6b7b6fdee0

Authored by Pablo Marco del Pont 2018-11-06 15:49:04 -0300

Exists in master

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

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

Showing 4 changed files with 26 additions and 20 deletions Show diff stats

index.html

Diff comments View file @ 2374346

 <html ng-app="appWrapperDemo">
     <head>
         <meta charset="UTF-8"/>
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <base href="./">
         <!--CSS-->
         <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
         <link href="./node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
         <link rel="stylesheet" href="node_modules/angular-ui-swiper/dist/angular-ui-swiper.css">
         <link href="./node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet">
         <link href="./node_modules/leaflet/dist/leaflet.css" rel="stylesheet"/>
         <link href="css/general.css" rel="stylesheet"/>
         <!--VENDOR JS-->
         <script src="./node_modules/jquery/dist/jquery.min.js"></script>
         <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
         <script src="./node_modules/angular/angular.min.js"></script>
         <script src="./node_modules/angular-cookies/angular-cookies.min.js"></script>
         <script src="./node_modules/angular-i18n/angular-locale_es-ar.js"></script>
         <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>
         <script src="./node_modules/angular-ladda/dist/angular-ladda.min.js"></script>
         <script src="./node_modules/leaflet/dist/leaflet.js"></script>
         <script src="./vendor/cordovaGeolocationModule.min.js"></script>
         <script src="./node_modules/foca-admin-seguimiento/dist/foca-admin-seguimiento.min.js"></script>
         <script src="./node_modules/foca-abm-plazo-pago/dist/foca-abm-plazo-pago.min.js"></script>
         <script src="./node_modules/foca-abm-precios-condiciones/dist/foca-abm-precios-condiciones.min.js"></script>
         <script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script>
         <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script>
         <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script>
         <script src="./node_modules/foca-configuracion/dist/foca-configuracion.min.js"></script>
         <script src="./node_modules/foca-crear-nota-pedido/dist/foca-crear-nota-pedido.min.js"></script>
         <script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
         <script src="./node_modules/foca-login/dist/foca-login.min.js"></script>
         <script src="./node_modules/foca-modal/dist/foca-modal.min.js"></script>
         <script src="./node_modules/foca-modal-busqueda-productos/dist/foca-busqueda-productos.min.js"></script>
         <script src="./node_modules/foca-modal-cotizacion/dist/foca-modal-cotizacion.min.js"></script>
         <script src="./node_modules/foca-modal-domicilio/dist/foca-modal-domicilios.min.js"></script>
         <script src="./node_modules/foca-modal-flete/dist/foca-modal-flete.min.js"></script>
         <script src="./node_modules/foca-modal-moneda/dist/foca-modal-moneda.min.js"></script>
         <script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script>
         <script src="./node_modules/foca-modal-proveedor/dist/foca-modal-proveedor.min.js"></script>
         <script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script>
         <script src="./node_modules/foca-seguimiento/dist/foca-seguimiento.min.js"></script>
         <script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script>
         <script src="./node_modules/foca-turno-apertura/dist/foca-turno-apertura.min.js"></script>
         <!-- <script src="cordova.js"></script> -->
         <!-- <script src="./dist/wrapper-demo.min.js"></script> -->
         <script src="./src/js/app.js"></script>
         <script src="./src/js/controller.js"></script>
         <script src="./src/etc/develop.js"></script>
     </head>
     <body>
         <style>
         </style>
         <botonera-horizontal></botonera-horizontal>
         <div ng-view class="container contenedor"></div>
         <div ng-controller="appWrapperDemoController" class="container d-none d-md-block">
             <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"
                         >
                         <i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i>
                 </label>
             </div>
             <foca-teclado
-                ng-show="mostrarTeclado && hasFocus"
+                ng-show="usarTeclado && mostrarTeclado"
                 alfanumeric="true"
                 numeric="true"
                 >
             </foca-teclado>
         </div>
     </body>
 </html>

package.json

Diff comments View file @ 2374346

 {
     "name": "wrapper-demo",
     "version": "0.0.1",
     "description": "",
     "main": "main.js",
     "scripts": {
         "initdev": "npm install gulp --global && npm install && npm install -g jshint",
         "gulp-pre-commit": "gulp pre-commit",
         "compile": "gulp uglify && gulp sass",
         "electron": "electron .",
         "electron-build": "gulp uglify && gulp html && gulp sass && electron ."
     },
     "pre-commit": [
         "gulp-pre-commit"
     ],
     "repository": {
         "type": "git",
         "url": "https://debo.suite.repo/Wrappers/wrapper-demo.git"
     },
     "author": "Foca Software",
     "license": "ISC",
     "dependencies": {
         "angular": "^1.7.5",
         "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",
         "bootstrap": "^4.1.3",
         "foca-abm-plazo-pago": "git+https://debo.suite.repo/modulos-npm/foca-abm-plazo-pago.git",
         "foca-abm-precios-condiciones": "git+https://debo.suite.repo/modulos-npm/foca-abm-precios-condiciones.git",
         "foca-abm-sectores": "git+https://debo.suite.repo/modulos-npm/foca-abm-sectores",
         "foca-admin-seguimiento": "git+https://debo.suite.repo/modulos-npm/foca-admin-seguimiento.git",
         "foca-botonera-principal": "git+https://debo.suite.repo/modulos-npm/foca-botonera-principal.git",
         "foca-busqueda-cliente": "git+https://debo.suite.repo/modulos-npm/foca-busqueda-cliente.git",
         "foca-configuracion": "git+https://debo.suite.repo/modulos-npm/foca-configuracion.git",
         "foca-crear-nota-pedido": "git+https://debo.suite.repo/modulos-npm/foca-crear-nota-pedido.git",
         "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas.git",
         "foca-login": "git+https://debo.suite.repo/modulos-npm/foca-login.git",
         "foca-modal": "git+https://debo.suite.repo/modulos-npm/foca-modal",
         "foca-modal-busqueda-productos": "git+https://debo.suite.repo/modulos-npm/foca-modal-busqueda-productos",
         "foca-modal-cotizacion": "git+https://debo.suite.repo/modulos-npm/foca-modal-cotizacion.git",
         "foca-modal-domicilio": "git+https://debo.suite.repo/modulos-npm/foca-modal-domicilio.git",
         "foca-modal-flete": "git+https://debo.suite.repo/modulos-npm/foca-modal-flete.git",
         "foca-modal-moneda": "git+https://debo.suite.repo/modulos-npm/foca-modal-moneda.git",
         "foca-modal-precio-condiciones": "git+https://debo.suite.repo/modulos-npm/foca-modal-precio-condiciones.git",
         "foca-modal-proveedor": "git+https://debo.suite.repo/modulos-npm/foca-modal-proveedor.git",
         "foca-modal-vendedores": "git+https://debo.suite.repo/modulos-npm/foca-modal-vendedores.git",
         "foca-seguimiento": "git+https://debo.suite.repo/modulos-npm/foca-seguimiento.git",
         "foca-teclado": "git+https://debo.suite.repo/modulos-npm/foca-teclado.git",
         "foca-turno-apertura": "git+https://debo.suite.repo/modulos-npm/foca-turno-apertura.git",
         "font-awesome": "^4.7.0",
         "gulp-angular-templatecache": "^2.2.1",
         "gulp-htmlmin": "^5.0.1",
         "gulp-uglify": "^3.0.1",
         "gulp-uglify-es": "^1.0.4",
         "jquery": "^3.3.1",
         "ladda": "1.0.6",
         "leaflet": "1.3.4",
         "node-sass": "^4.9.4",
         "uglify": "^0.1.5",
         "ui-bootstrap4": "^3.0.5"
     },
     "devDependencies": {
         "electron": "^3.0.2",
         "gulp": "^3.9.1",
         "gulp-clean": "^0.4.0",
         "gulp-concat": "^2.6.1",
         "gulp-connect": "^5.6.1",
         "gulp-jshint": "^2.1.0",
         "gulp-rename": "^1.4.0",
         "gulp-replace": "^1.0.0",
         "gulp-sass": "^4.0.1",
         "gulp-uglify": "^1.0.4",
         "gulp-watch": "^5.0.1",
         "jasmine-core": "^3.2.1",
         "jshint": "^2.9.6",
         "pre-commit": "^1.2.2",
         "pump": "^3.0.0"
     }
 }

src/js/controller.js

Diff comments View file @ 2374346

 angular.module('appWrapperDemo')
     .controller('appWrapperDemoController', [
         '$scope',
         '$rootScope',
         '$timeout',
         function($scope, $rootScope, $timeout) {
-            $scope.hasFocus = false;
+            $scope.usarTeclado = false;
-            var estado;
+            $scope.mostrarTeclado = false;
-            $rootScope.$on('focus', function(event, data) {
+            $rootScope.$on('focus', function(event) {
-                estado = data;
+                if(!$scope.usarTeclado) {
-                if(!data) {
+                    return;
-                    $timeout(function() {
-                        if(!estado) {
-                            $scope.hasFocus = data;
-                        }
-                    },200)
-                } else {
-                    $scope.hasFocus = data;
                 }
+                $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) {

src/sass/_teclado.scss

Diff comments View file @ 2374346

 .keyboard {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     width: 62%;
-    height: 60%;
+    height: auto;
     margin-left: 13%;
     margin-top: -19%;
     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;
         z-index: 100000;
         td {
             touch-action: none;
         }
     }
     .letter {
         background-color: #bdbdbd;
         box-shadow: 2px 2px 3px #555555;
         width: 47px;
         height: 50px;
         text-align: center;
         font-family: "arial";
         cursor: pointer;
         color: #000;
         font-size: 22px;
         &:hover {
             background-color: #fafafa;
         }
         &:active {
             background-color: #999;
             color: #fff;
         }
     }
     .number {
         background-color: #bdbdbd;
         box-shadow: 2px 2px 3px #555555;
         width: 47px;
         height: 35px;
         text-align: center;
         font-family: "arial";
         cursor: pointer;
         color: #000;
         font-size: 22px;
         &:hover {
             background-color: #fafafa;
         }
         &:active {
             background-color: #999;
             color: #fff;
         }
     }
     .margin {
         width: 40px;
         height: 50px;
     }
 }
 .teclado-activar {
     background-color: #17d236;
 }
 .boton-activar-teclado {
     margin-top: -10%;
     position: absolute;
     z-index: 100000;
 }