iRec entrevista backbutton - CGastrell/phonegap GitHub Wiki

Encontrar el boton

De la misma forma que hicimos con la pagina #revision vamos a buscar el boton para volver que tenemos en la pagina #interview, solo debemos cambiar el contexto y ubicarlo dentro del handler del evento pagecreate de #interview. El handler de #interview solo inicializa el boton de grabar/detener y se ve mas o menos asi hasta ahora:

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

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

Inicializacion y funcionalidad

Nuevamente similar al caso de #revision queremos:

  • que no vaya a la pagina #home directamente
  • que frene la grabacion
  • que nos redirija a #home

Vale la pena rever en este punto que recordApi tiene en el onStop codigo que se ejecutara cuando la grabacion se detenga:

  onStop: function(){
    console.log('recordApi.onStop');
    $.mobile.loading('show');
    recordApi.media.release();
    recordApi.media = null;
    recordApi.entrevista.stop = new Date();
    entrevistas.agregar(recordApi.entrevista, function(entrevista){
      $('#revision').data('entrevistaIdx',entrevistas.lista.length - 1);
      $(':mobile-pagecontainer').pagecontainer('change','#revision');
    });
  },

Entre otras cosas, cuando se detiene la grabacion, recordApi se encarga de:

  • mostrar el spinner
  • grabar la entrevista
  • enviarnos a la pagina de revision con la entrevista que acabamos de grabar

A diferencia de la intervencion del boton volver de #revision aca solo debemos detener la grabacion, el resto va a ser manejado por la rutina de recordApi, incluyendo la navegacion hacia la pagina de #revision (cambiando asi efectivamente la funcionalidad del boton volver).

Entonces, en el handler de pagecreate, agregamos este codigo:

  $('a[href="#home"]', '#interview').on('click',function(evt){
    if(recordApi.isRecording) {
      evt.preventDefault(); //prevenimos el efecto por default
      recordApi.stop();
    }
  });

A continuacion vamos a volver sobre la funcionalidad del boton volver de la pagina #revision para extender la funcionalidad y poder guardar cambios (tags) que hayamos hecho durante una revision.