Florencia Cazzola / foca-botonera-lateral

Commit 02446d30207419af489afde866d1207a12f49db2

Authored by Eric Fernandez 2019-01-22 14:42:18 -0300

Merge branch 'master' into 'master'

Master

See merge request !6

Showing 4 changed files Show diff stats

gulpfile.js

Diff comments View file @ 02446d3

 const clean         = require('gulp-clean');
 const concat        = require('gulp-concat');
 const connect       = require('gulp-connect');
 const gulp          = require('gulp');
 const htmlmin       = require('gulp-htmlmin');
 const jshint        = require('gulp-jshint');
 const pump          = require('pump');
 const rename        = require('gulp-rename');
 const replace       = require('gulp-replace');
 const templateCache = require('gulp-angular-templatecache');
 const uglify        = require('gulp-uglify-es').default;
 const sass          = require('gulp-sass');
 var paths = {
     dist:     'dist/',
     srcJS:    'src/js/*.js',
     srcViews: 'src/views/*.html',
     tmp:      'tmp'
 };
 gulp.task('templates', function() {
     return pump(
         [
             gulp.src(paths.srcViews),
             htmlmin(),
             templateCache('views.js', {
                 module: 'focaBotoneraLateral',
                 root: ''
             }),
             gulp.dest(paths.tmp)
         ]
     );
 });
 gulp.task('sass', function() {
     return gulp.src('src/sass/*.scss')
     .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
     .pipe(gulp.dest('css'));
 });
 gulp.task('uglify', ['templates'], function() {
     return pump(
         [
             gulp.src([
                 paths.srcJS,
                 'tmp/views.js'
             ]),
             concat('foca-botonera-lateral.js'),
             replace('src/views/', ''),
+            replace("['angular-ladda']", '[]'),
             gulp.dest(paths.tmp),
             rename('foca-botonera-lateral.min.js'),
             uglify(),
             gulp.dest(paths.dist)
         ]
     );
 });
 gulp.task('clean', function() {
     return gulp.src(['tmp', 'dist'], {read: false})
     .pipe(clean());
 });
 gulp.task('pre-commit', function() {
     pump(
         [
             gulp.src(paths.srcJS),
             jshint('.jshintrc'),
             jshint.reporter('default'),
             jshint.reporter('fail')
         ]
     );
 });
 gulp.task('webserver', function() {
     pump [
         connect.server(
             {
                 port: 3000
             }
         )
     ]
 });
 gulp.task('clean-post-install', function() {
     return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js',
                      'index.html'], {read: false})
     .pipe(clean());
 });
 gulp.task('default', ['webserver']);
 gulp.task('watch', function() {
     gulp.watch([paths.srcJS, paths.srcViews], ['uglify']);
 });

src/js/app.js

Diff comments View file @ 02446d3

1	angular.module('focaBotoneraLateral', [])	1	angular.module('focaBotoneraLateral', ['angular-ladda'])
2	.component('focaBotoneraLateral', {	2	.component('focaBotoneraLateral', {
3	templateUrl: 'src/views/botonera-lateral.html',	3	templateUrl: 'src/views/botonera-lateral.html',
4	controller: 'focaBotoneraLateralController'	4	controller: 'focaBotoneraLateralController'
5	});	5	});
6		6

src/js/service.js

Diff comments View file @ 02446d3

 angular.module('focaBotoneraLateral')
     .service('focaBotoneraLateralService', function() {
         this.botones = {
             salir: false,
             cancelar: false,
             pausar: false,
             guardar: false,
+            guardando: false,
             funcionGuardar: undefined,
             pathCancelar: undefined,
             custom: []
         };
         this.showSalir = function(value) {
             this.botones.custom = [];
             this.botones.salir = value;
         };
         this.showPausar = function(value) {
             this.botones.custom = [];
             this.botones.pausar = value;
         };
         this.showCancelar = function(value, path) {
             this.botones.custom = [];
             this.botones.cancelar = value;
             this.botones.pathCancelar = (path) ? path : undefined;
         };
         this.showGuardar = function(value, funcion) {
             this.botones.custom = [];
             this.botones.guardar = value;
             if(value) this.botones.funcionGuardar = funcion;
         };
         this.addCustomButton = function(title, funcion) {
             this.botones.custom.push({
                 title: title,
                 funcion: funcion
             });
         };
+        this.startGuardar = function() {
+            this.botones.guardando = true;
+        };
+        this.endGuardar = function(guardado) {
+            this.botones.guardando = false;
+            if(guardado) angular.element('#guardar').addClass('guardado');
+        };
     });

src/views/botonera-lateral.html

Diff comments View file @ 02446d3

 <div class="container botonera-lateral">
     <div class="row">
         <div class="col-auto my-2 col-2 offset-10 d-none d-md-flex" style="min-height: 176px">
             <div class="px-2 mt-auto">
                 <div class="container">
                     <div class="row">
-                        <button
+                        <div
-                            ng-click="botones.funcionGuardar()"
+                            ladda="botones.guardando"
-                            ng-show="botones.guardar"
+                            data-spinner-size="30"
-                            type="button"
+                            data-spinner-color="#000000"
-                            title="Guardar"
+                            class="mb-2 border border-dark rounded"
-                            class="btn btn-block border border-dark">
+                            >
-                            <strong>GUARDAR</strong>
+                            <button
-                        </button>
+                                id="guardar"
+                                ng-click="botones.funcionGuardar()"
+                                ng-show="botones.guardar"
+                                ng-disabled="botones.guardando"
+                                type="button"
+                                title="Guardar"
+                                class="btn btn-block">
+                                <strong>GUARDAR</strong>
+                            </button>
+                        </div>
                         <button
                             ng-show="botones.pausar"
                             type="button"
                             title="Pausar"
                             class="btn btn-block border border-dark">
                             <strong>PAUSAR</strong>
                         </button>
                         <button
                             ng-click="cancelar()"
                             ng-show="botones.cancelar"
                             type="button"
                             title="Cancelar"
                             class="btn btn-block border border-dark">
                             <strong>CANCELAR</strong>
                         </button>
                         <button
                             ng-click="salir()"
                             ng-show="botones.salir"
                             type="button"
                             title="Salir"
                             class="btn btn-block border border-dark">
                             <strong>SALIR</strong>
                         </button>
                         <button
                             ng-repeat="boton in botones.custom"
                             ng-click="boton.funcion()"
                             type="button"
                             title="{{boton.title}}"
                             class="btn btn-block border border-dark">
                             <strong
                                 class="text-uppercase"
                                 ng-bind="boton.title">
                             </strong>
                         </button>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
 <div class="container botonera-lateral teclado">
         <div class="row">
             <div class="col-auto my-2 col-2 offset-10 d-none d-md-flex" style="min-height: 176px">
                 <div class="px-2 mt-auto">
                     <div class="container">
                         <div class="row">
                             <div
                                 class="btn-group-toggle btn btn-block btn-default border border-dark"
                                 data-toggle="buttons"
                                 ng-click="cambioUsoTeclado()"
                                 title="Activar/desactivar teclado">
                                 <label
                                     class=" active boton-activar-teclado mb-0"
                                     ng-class="{'teclado-activar': usarTeclado}">
                                     <input
                                         type="checkbox"
                                         autocomplete="off"
                                         >
                                         <strong>TECLADO</strong>
                                 </label>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>