iRec inicializacion 2 - CGastrell/phonegap GitHub Wiki

Como dijimos, la inicializacion va a permanecer en el archivo js/index.js.

En una suerte de orden cronologico vamos a ver las inicializaciones de las paginas segun el orden en que podemos acceder a ellas. El arbol de navegacion es algo asi:

#home
- #guia-list
  - #interview
    - #revision
  - #nueva-guia
- #entrevista-list
  - #revision

#guia-list: pagecreate

En #guia-list necesitamos configurar el boton que nos llevara a la pagina #nueva-guia. Es decir, ya existe y funciona, pero necesitamos intervenir el boton para poder acceder a #nueva-guia con un nombre para la guia.

Usamos una llamada a prompt(). prompt() funciona igual que alert() en el sentido de que detiene la ejecucion hasta que se haya resuelto. Entonces al hacer click en #nueva-guia preguntamos el nombre para la guia que vamos a crear. Si el resultado es nulo/false/vacio volvemos a #home. Sino, asignamos el nombre provisto al elemento #titulo-guia y accedemos a la pagina:

$('#guia-list').on('pagecreate', function(){
  //inicializar el boton para crear nuevas guias
  $('a[href="#nueva-guia"]').on('click', function(evt){
    evt.preventDefault();
    var p = prompt("Nombre de la nueva guia","");
    if(!p || !p.trim()) {
      $(':mobile-pagecontainer').pagecontainer('change','#home');
      return false;
    }
    $('#titulo-guia').text(p);
    $(':mobile-pagecontainer').pagecontainer('change','#nueva-guia');
  });
});

#guia-list: pageshow

Esta funcion ya la teniamos, pero tiene leves cambios para dar mas funcionalidad:

$('#guia-list').on('pageshow', function(e, pages){
  console.log('pageshow en guia-list');
  var container = $('#guias', pages.toPage);
  container.empty();
  $.each(guias.lista, function(i,e){
    var stringData = JSON.stringify(e);
    var li = $('<li />').appendTo(container);
    var a = $('<a />')
      .attr('href','#interview')
      .data('guia',e)
      .text(e.nombre)
      .appendTo(li)
      .on('taphold', function(evt){
        var p = confirm('Eliminar la guia "'+e.nombre+'"?');
      })
      .click(function(evt){
        evt.preventDefault();
        var p = prompt("Nombre la entrevista","");
        if(!p || !p.trim()) {
          return;
        }
        $('#titulo-entrevista').text(p);
        $('#interview').data('guia',e);
        $(':mobile-pagecontainer').pagecontainer('change','#interview');
      });
  });
  container.listview('refresh');
});

#entrevista-list: pageshow

Esta funcion de inicializacion tambien tiene minimos cambios. Principalmente usamos la propiedad entrevista.nombre para el listado, que era algo que debiamos corregir:

$('#entrevista-list').on('pageshow', function(e, pages){
  console.log('pageshow en entrevista-list');
  var container = $('#entrevistas', pages.toPage);
  container.empty();
  $.each(entrevistas.lista, function(i,e){
    var stringData = JSON.stringify(e);
    var li = $('<li />').appendTo(container);
    var a = $('<a />')
      .attr('href','#revision')
      .text(e.nombre)
      .appendTo(li)
      .on('taphold', function(evt){
        var p = confirm('Eliminar la entrevista "'+e.nombre+'"?');
      })
      .click(function(evt){
        evt.preventDefault();
        //esta vez pasamos el indice de la entrevista
        $('#revision').data('entrevistaIdx',i);
        $(':mobile-pagecontainer').pagecontainer('change','#revision');
      });
  });
  container.listview('refresh');
});

No necesitamos (por ahora) hacer ninguna llamada a traves de pagecreate en esta pagina.

#interview: pagecreate

Otra funcion que creo que no ha cambiado.

$('#interview').on('pagecreate', function(){
  console.log('pagecreate on interview');

  $('#record').click(function(e){
    e.preventDefault();
    if(recordApi.isRecording) {
      recordApi.stop();
    }else{
      recordApi.record();
    }
  });
});

#interview: pageshow

Utilizamos el evento pageshow para inicializar recordApi llamando a nuevaGrabacion(). Como vamos a llamar una funcion asincronica (nuevaGrabacion(guia.id, callback)) mostramos el spinner con $.mobile.loading('show') y lo ocultamos cuando se completo la llamada a nuevaGrabacion con $.mobile.loading('hide'):

$('#interview').on('pageshow', function(e, pages){
  // console.log(e);
  $.mobile.loading('show');
  console.log('pageshow on interview');
  var guia = pages.toPage.data('guia');
  var container = $('#guia', pages.toPage);
  container.empty();
  recordApi.nuevaGrabacion(guia.id, function(){
    $.each(guia.preguntas, function(i,e){
      var div = $('<div class="respuesta" />');
      div.append(recordApi.createTagButton(i));
      div.append(e.texto);

      container.append(div);
    });
    $.mobile.loading('hide');
  });
});

#revision: pagecreate

A esta inicializacion le falta la inicializacion del boton para retroceder 10 segundos...
Tampoco estamos utilizando el boton stop, decidamos si lo inicializamos o lo sacamos de la interfaz.

$('#revision').on('pagecreate', function(){
  console.log('pagecreate on revision');

  //inicializacion de botones
  $('#play').click(function(e) {
    e.preventDefault();
    revisionApi.play();
  });

  $('#pausa').click(function(e){
    e.preventDefault();
    revisionApi.pausa();
  });

  //inicializacion de indicadores de tiempo
  revisionApi.currentTime = $('#currentTime').text("00:00");
});

#revision: pageshow

Tienen que recordar en este punto que, cuando navegamos a estas paginas (#revision y #interview), ya les asignamos la guia o entrevista (segun el caso) y cuando recibimos el evento pageshow simplemente reconfiguramos toda la pagina basandonos en la guia o entrevista asignada.
Notar que llamamos a $.mobile.loading('hide') porque esperamos que, en otra parte del proceso, se haya mostrado el spinner y aca queremos sacarlo.

$('#revision').on('pageshow', function(e, pages){
  console.log('pageshow en #revision');

  // var entrevista = crearEntrevista();
  var entrevista = entrevistas.lista[pages.toPage.data('entrevistaIdx')];
  var guia = guias.lista.filter(function(g){
    return g.id == entrevista.interview;
  })[0];
  $('#titulo-entrevista').text(entrevista.nombre);
  var container = $('div#respuestas', pages.toPage);
  container.empty();
  revisionApi.load(pages.toPage.data('entrevistaIdx'));
  $.each(guia.preguntas, function(i,e){
    var div = $('<div class="respuesta" />');
    div.append(revisionApi.createTagButton(i));
    div.append(e.texto);

    var tags = entrevista.tags.filter(function(tag){
      return tag.ref == i;
    });

    $.each(tags, function(ii,ee){
      div.append( revisionApi.createSeekButton(ee.time) );
    });

    container.append(div);
  });
  $.mobile.loading('hide');
});

#nueva-guia: pagecreate

$('#nueva-guia').on('pagecreate', function(){
  console.log('pagecreate on nueva-guia');

  $('#guardar-guia').on('click', function(evt){
    evt.preventDefault();
    if(!$('#titulo-guia').text() || $('li.pregunta').length < 1) {
      alert('Hay un error en la guia');
      return;
    }
    $.mobile.loading('show');
    var guia = {
      nombre: $('#titulo-guia').text(),
      id: guid(),
      preguntas: {}
    };
    $('#preguntas li').each(function(i,e){
      console.log( $(e).children().first().text() );
      guia.preguntas[i+1] = {
        texto: $(e).children().first().text()
      };
    });
    guias.agregarGuia(guia, function(){
      $.mobile.loading('hide');
      $(':mobile-pagecontainer').pagecontainer('change','#guia-list');
    });
  });
  $('#agregarPregunta').on('click', function(evt){
    evt.preventDefault();
    if($('#preguntaInput').val()) {
      var li = $('<li />')
        .attr('data-icon','delete')
        .addClass('pregunta');
      var a = $('<a href="#" />')
        .text($('#preguntaInput').val())
        .click(function(evt2){
          evt2.preventDefault();
          $(this).parent().remove();
          $('body').focus(); //<- para que no caiga el focus directo en el input
        })
        .appendTo(li);
      $('#preguntas').append(li);
      $('#preguntas').listview('refresh');
      $('#preguntaInput').val('').focus();
    }
  });
});

#nueva-guia: pageshow

En el evento pageshow solo nos aseguramos de inicializar la pagina en limpio:

$('#nueva-guia').on('pageshow', function(e, pages){
  $('#preguntaInput').val("");
  $('#preguntas').empty();
  $('#preguntas').listview('refresh');
});

Es tiempo de probar! Porque en la proxima tenemos que resolver el problema de reordenar el listado de preguntas