iRec revision backbutton - CGastrell/phonegap GitHub Wiki

En la pagina de revision tenemos un boton para volver:

<div data-role="header">
  <a href="#home" data-role="back" class="ui-nodisc-icon ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline"></a>
  <h1>Revision</h1>
</div>

El boton es el primer <a> que aparece en el <div data-role="header">. No tiene nada que lo identifique, asi que vamos a tener que usar algun tipo de selector que nos devuelva univocamente ese boton. Bien podriamos agregarle un id para poder ubicarlo, pero vamos a aprovechar para ver una manera de seleccionar el elemento con jQuery sin tener que agregarle un id.

Ahora bien, como con todas las inicializaciones de los botones, vamos a asignarle la funcionalidad en el handler del evento pagecreate de la pagina #revision. En este momento debemos tener algo parecido a esto:

$('#revision').on('pagecreate', function(evt){
  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");
});

Tenemos la inicializacion de los botones de play y pausa y la configuracion inicial del reloj. Asi que, dentro de este handler vamos a agregar la inicializacion del boton de volver. Para seleccionarlo correctamente vamos a usar un selector por atributos.

A esta altura sabemos que podemos usar jQuery para seleccionar un elemento:

• por clase: $('.nombre_de_clase') nos devolvera todos los elementos que tengan esa clase
• por id: $('#id_del_elemento') nos devuelve el primer elemento con el id provisto (no deberia haber mas de uno con el mismo id)

Pero en la documentacion de selectores de jQuery vemos tambien que podemos seleccionar un elemento por sus atributos. Como? Veamos nuestro boton para volver en HTML:

<a href="#home" data-role="back" class="ui-nodisc-icon ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline"></a>

El elemento tiene varios atributos:

• class: define las clases CSS que tiene asociadas
• href: a donde apunta el vinculo (en este caso es un <a>)
• data-role: un atributo que usa jQueryMobile para identificar y asignar funcionalidad a los botones

Para seleccionar el elemento a traves de sus atributos la nomenclatura es la siguiente:

//atentos a la apertura y cierre de comillas simples y dobles
$('a[atributo="valor_del_atributo"]');

En nuestro caso vamos a usar el atributo href, entonces nuestro selector se vera asi:

$('a[href="#home"]');

Para que puedan probarlo, vamos a comentar en el archivo js/index.js todas las inicializaciones. Esto es, encuentren donde empiezan las inicializaciones (las llamadas del tipo $('#guia-list')...) y comentenlas anteponiendo un /* y cerrando el comentario cuando terminan estas llamadas con un */. De esta forma van a poder correr la aplicacion en el browser sin que tire errores y podemos ver como seleccionar estos elementos.

Ahora abran index.html en el browser, deberian tener la funcionalidad basica de navegacion con los contenidos de ejemplo. Abran la consola y escriban el selector que pusimos arriba, deberia devolverles un array de 4 elementos que corresponden al selector. Por que 4? Porque tenemos un boton con ese href en 4 de nuestras paginas.

Pero solo queremos que nos devuelva el boton que corresponde a la pagina #revision, entonces podemos usar el segundo parametro de seleccion en jQuery: context. En resumidas palabras, el context es una manera de acotar donde vamos a buscar el elemento, en nuestro caso sera la pagina #revision:

$('a[href="#home"]', '#revision');

Vuelvan a probar este selector ahora y deberia devolverles solo uno de los elementos <a>.

Ahora que tenemos el boton que queriamos entonces podemos intervenirlo para que funcione como queremos:

• que no vaya directamente a la pagina #home
• que verifique el estado de la revision y si esta isPlaying, que detenga la reproduccion
• que resetee el estado de la revision
• finalmente que nos lleve a la pagina #home

Entonces, dentro del handler de pagecreate agregamos primero nuestro selector y usamos on() para capturar el evento click:

$('a[href="#home"]', '#revision').on('click', function(evt) {
  // nuestro codigo aca
});

Dentro vamos a cancelar el funcionamiento normal del evento y agregar la llamada a revisionApi para que detenga el funcionamiento y haga un reset:

$('a[href="#home"]', '#revision').on('click', function(evt) {
  evt.preventDefault(); // cancelar evento

  if(revisionApi.isPlaying) {
    revisionApi.pausa(); // <-- luego cambiaremos por stop
    revisionApi.reset();
  }

  //ir a #home
  $.mobile.navigate('#home');
});

Probar en el browser y luego, descomentando el codigo de inicializacion, en el dispositivo.

Vamos a repetir un procedimiento similar en #interview