Commit 560a78335a5a5d06c28ebcd3d0442fa2f3c42684
1 parent
ecae4a075c
Exists in
develop
Agregado nuevo componente
Showing
3 changed files
with
72 additions
and
0 deletions
Show diff stats
src/js/app.js
| ... | ... | @@ -6,4 +6,12 @@ angular.module('focaBotoneraFacturador', []) |
| 6 | 6 | botones: '<', |
| 7 | 7 | max: '<' |
| 8 | 8 | } |
| 9 | + }) | |
| 10 | + .component('focaBotoneraTarjetas', { | |
| 11 | + templateUrl: 'src/views/botonera-tarjetas.html', | |
| 12 | + controller: 'focaBotoneraTarjetasController', | |
| 13 | + bindings: { | |
| 14 | + botones: '<', | |
| 15 | + max: '<' | |
| 16 | + } | |
| 9 | 17 | }); |
src/js/controllerTarjetas.js
| ... | ... | @@ -0,0 +1,43 @@ |
| 1 | +angular.module('focaBotoneraFacturador') | |
| 2 | + .controller('focaBotoneraTarjetasController', [ | |
| 3 | + '$scope', | |
| 4 | + '$window', | |
| 5 | + 'APP', | |
| 6 | + function($scope, $window, APP) { | |
| 7 | + this.$onInit = function() { | |
| 8 | + $scope.botones = $scope.$ctrl.botones; | |
| 9 | + //TODO: controlar que no se estiren los botones | |
| 10 | + if(APP) return; | |
| 11 | + var max = ($scope.$ctrl.max) ? $scope.$ctrl.max : 12; | |
| 12 | + if($window.innerWidth > 576) { | |
| 13 | + while(($scope.botones.length % max) !== 0) { | |
| 14 | + $scope.botones.push(''); | |
| 15 | + } | |
| 16 | + }else { | |
| 17 | + while(($scope.botones.length % 4) !== 0) { | |
| 18 | + $scope.botones.push(''); | |
| 19 | + } | |
| 20 | + } | |
| 21 | + }; | |
| 22 | + | |
| 23 | + function nombreFuncion(string) { | |
| 24 | + var texto = 'seleccionar'; | |
| 25 | + var arr = string.split(' '); | |
| 26 | + arr.forEach(function(palabra) { | |
| 27 | + palabra = palabra.charAt(0).toUpperCase() + palabra.slice(1); | |
| 28 | + texto += palabra; | |
| 29 | + }); | |
| 30 | + return texto; | |
| 31 | + } | |
| 32 | + | |
| 33 | + $scope.ejecutarFuncion = function(nombre) { | |
| 34 | + $scope.$parent[nombreFuncion(nombre)](); | |
| 35 | + }; | |
| 36 | + | |
| 37 | + $scope.activarBoton = function (boton){ | |
| 38 | + $scope.botones.forEach(boton => { | |
| 39 | + boton.active = false; | |
| 40 | + }); | |
| 41 | + boton.active = true; | |
| 42 | + }; | |
| 43 | + }]); |
src/views/botonera-tarjetas.html
| ... | ... | @@ -0,0 +1,21 @@ |
| 1 | +<div | |
| 2 | + class="col-4 col-lg-2 pb-3" | |
| 3 | + ng-repeat="boton in botones track by $index" | |
| 4 | + ng-class="{'d-md-grid': boton == ''}"> | |
| 5 | + <button | |
| 6 | + type="button" | |
| 7 | + class="btn btn-block btn-tarjeta rounded border p-1" | |
| 8 | + ng-click=" | |
| 9 | + (boton != '') ? ejecutarFuncion(boton.label) : null; | |
| 10 | + activarBoton(boton);" | |
| 11 | + ng-class=" | |
| 12 | + { | |
| 13 | + 'd-sm-block h-100': boton == '', | |
| 14 | + 'border-light': !boton.active, | |
| 15 | + 'border-warning': boton.active | |
| 16 | + }" | |
| 17 | + ng-disabled="boton.disable" | |
| 18 | + > | |
| 19 | + <img ng-src="./img/{{boton.image}}" alt=""> | |
| 20 | + </button> | |
| 21 | +</div> |