Action Sheets

Ya hemos visto que en el caso de las listas (ion-list) es posible utilizar ion-delete-button, ion-reorder-button, ion-option-button.

Ahora vamos a trabajar con un menú emergente denominado Action Sheet que suele aparecer cuando hacemos un gesto de quedar presionando un elemento de usa lista o sencillamente presionamos un botón. Este menú aparece en la parte inferior de la pantalla y ofrece opciones relacionadas con el elemento con el cual se está interactuando, es decir, es un menú contextual, no es general. Es un menú asociado al elemento y suele ofrecer las acciones relacionadas con el elemento con el que se interactua.

Ingrese a play.ionic.io para obtener el código para iniciar el tutorial y haga FORK. No olvide hacer FORK.

El objetivo es:

• Mostrar las opciones del Action Sheet con un gesto on-hold.
• Se define el gesto en el item.
• Se inyecta el servicio $ionicActionSheet en el controlador
• Se implementa el uso del Action Sheet con sus diferentes opciones

En el HTML, se debe definir qué acción o interacción por parte del usuario va a activar el Action Sheet. Hemos decidido utilizar un gesto denominado on-hold que consiste en que el usuario mantiene presionado un elemento o un botón por más de 500ms. La forma de capturarlo es especificar en el elemento la directiva on-hold e indicar la rutina que va a manejar el evento en el controlador.

<ion-item on-hold="showActionSheet(item)" ng-repeat="item in items">

A continuación la rutina que lo maneja

$scope.showActionSheet = function (i) {
  alert('Action Sheet '+i.id);
}

Como puede observar al mantener presionado el elemento de la lista aparece una alerta con el número del item.

Ahora vamos a inyectar el servicio $ionicActionSheet en el controlador. Para fines del ejercicio también vamos a inyectar $timeout

.controller('contentController', 
  function($scope, dataService, $ionicListDelegate, 
    $ionicActionSheet, $timeout){

Ahora vamos a implementar showActionSheet agregando un botón para cancelar, otro para borrar, uno para mover un item arriba y otro para mover un item abajo, aprovechando el código de los tutoriales previos.

$scope.showActionSheet = function (item) {
  $ionicActionSheet.show({
    titleText: 'Manipula elementos de la lista...',
    buttons: [
      { text: 'Subir' },
      { text: 'Bajar' }
    ],
    buttonClicked: function(index, buttonObj) {
      switch(index) {
        case 0:
          dataService.upData(item,$scope.items.indexOf(item));
          return true;
        case 1:
          dataService.downData(item,$scope.items.indexOf(item));
          return true;
      }
    },
    destructiveText: 'Borrar',
    destructiveButtonClicked: function() {
      dataService.deleteData($scope.items.indexOf(item));
      return true;
    },
    cancelText: 'Cancelar',
    cancel: function() {}
  });
}

Para mantener el orden se definió el título con titleText, luego los botones (realmente opciones) con buttons y el manejo del evento con buttonClicked. Luego el texto de la acción “peligrosa” como Borrar usando destructiveText y destructiveButtonClicked y por último la opción de cancelar con cancelText y la función cancel.

Por último leyendo la documentación resulta que $ionicActionSheet.show() retorna una función que cuando la invocas oculta y cancela el ActionSheet.

La rutina showActionSheet queda así:

$scope.showActionSheet = function (item) {
  var functionToHideSheet = $ionicActionSheet.show({
    titleText: 'Manipula elementos de la lista...',
    buttons: [
      { text: 'Subir' },
      { text: 'Bajar' }
    ],
    buttonClicked: function(index, buttonObj) {
      switch(index) {
        case 0:
          dataService.upData(item,$scope.items.indexOf(item));
          return true;
        case 1:
          dataService.downData(item,$scope.items.indexOf(item));
          return true;
      }
    },
    destructiveText: 'Borrar',
    destructiveButtonClicked: function() {
      dataService.deleteData($scope.items.indexOf(item));
      return true;
    },
    cancelText: 'Cancelar',
    cancel: function() {}
  });
  
 $timeout(function() {
   functionToHideSheet();
 }, 3000);
}

Si en tres segundos no se hace nada el ActionSheet se cierra solo ayudado con el servicio $timeout.

Si desea ver el resultado lo puede revisar. Otro ejemplo hecho en clase.