Commit fad17f90cc1f264a37155ab39b35d2be7800659e
Exists in
master
Merge branch 'master' into 'master'
Master (pmarco) See merge request Wrappers/wrapper-demo!33
Showing
4 changed files
Show diff stats
index.html
| ... | ... | @@ -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 | > |
package.json
| ... | ... | @@ -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", |
src/js/controller.js
| ... | ... | @@ -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 | ]); |
src/sass/_teclado.scss
| 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; |