Commit 560a78335a5a5d06c28ebcd3d0442fa2f3c42684
1 parent
ecae4a075c
Exists in
master
and in
1 other branch
Agregado nuevo componente
Showing
3 changed files
with
72 additions
and
0 deletions
Show diff stats
src/js/app.js
| 1 | angular.module('focaBotoneraFacturador', []) | 1 | angular.module('focaBotoneraFacturador', []) |
| 2 | .component('focaBotoneraFacturador', { | 2 | .component('focaBotoneraFacturador', { |
| 3 | templateUrl: 'src/views/botonera-facturador.html', | 3 | templateUrl: 'src/views/botonera-facturador.html', |
| 4 | controller: 'focaBotoneraFacturadorController', | 4 | controller: 'focaBotoneraFacturadorController', |
| 5 | bindings: { | 5 | bindings: { |
| 6 | botones: '<', | 6 | botones: '<', |
| 7 | max: '<' | 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 | }); |
| 10 | 18 |
src/js/controllerTarjetas.js
| File was created | 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 | }]); | ||
| 44 |
src/views/botonera-tarjetas.html
| File was created | 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> | ||
| 22 |