Como crear un dialogo off canvas en Drupal

Usualmente, cuando trabajamos para mejorar la experiencia de usuario, se suele optar por crear un modal para mostrar un formulario o información extra en el mismo. El problema de esto es que nos oculta parte del contenido, bien, para solucionar esto, existen los diálogos off canvas.

Desde hace años podemos disfrutar de esta opción de crear fácilmente tanto modales como los off canvas para ayudar en la experiencia de usuario. Mucha gente desconoce la existencia de estas opciones, pero realmente son muy fáciles de usar, en el pasado ya publicamos un artículo sobre cómo usar los modales, ahora vamos a ver cómo usar los off canvas.

¿Qué es un dialogo off canvas?

Un modal no es más que un popup o dialogo que se muestra en medio de la web. En cambio, el off canvas, se muestra en un lateral y no molesta en ningún momento al usuario ocultándole información, ya que desplaza levemente el cuerpo de la web y no impide al usuario realizar la acción que necesite o ver información extra.

Antes de crear un off canvas

Primero debemos tener en cuenta ciertos puntos, esto está ampliamente explicado en el artículo sobre la creación de modales, pero podemos resumirlo en los siguientes puntos.

Debe existir una url o ruta, no podemos crear un off canvas ocultándolo en el html y mostrándolo con un evento, ya que Drupal cargará usando AJAX la información desde una ruta.

Hay varias maneras de poder crear un dialogo de canvas, el más sencillo es añadiendo unos atributos a la etiqueta <a>, la otra requiere programar un render array. El problema radica en que la primera puede funcionar o no ya que depende de una librería JS, en cambio la segunda siempre funcionará porque podemos añadir esa librería JS.

Creando el modal manualmente

Esto es muy sencillo, tenemos que añadir un enlace con una etiqueta <a> y añadirle unos atributos como podemos ver en el ejemplo siguiente:

<a href="/search/node" class="edit-button use-ajax" data-dialog-type="dialog" data-dialog-renderer="off_canvas">Búsqueda</a>

Como vemos, añadimos un enlace para buscar nodos, la clase "use-ajax" que es necesaria, y a continuación los atributos de "data-dialog-type" y "data-dialog-renderer" los cuales también son necesarios y permiten saber a Drupal que acción realizar al clicar en el enlace.

Como bien se ha avisado previamente, debemos tener en cuenta, que esto puede no funcionar ya que es necesaria una librería que no sabemos si está disponible, de modo que no está asegurado que este método funcione.

Usando un render array

Esta es la mejor opción, pero debemos tener conocimientos avanzados de Drupal ya que es necesario programar un render array que luego tendrá que renderizarse de alguna manera.

Veamos a continuación, el código necesario para poder crear el render array, con todas las dependencias de las librerías.

$elements['link'] = [
  '#title' => 'title of the canvas',
  '#type' => 'link',
  '#url' => Url::fromRoute('ruta.para.el.off_canvas'),
  '#attributes' => [
    'class' => ['use-ajax'],
    'data-dialog-type' => 'dialog',
    'data-dialog-renderer' => 'off_canvas',
    'data-dialog-options' => Json::encode(['width' => 400]),
  ],
  '#attached' => [
    'library' => [
      'core/drupal.dialog.ajax',
    ],
  ],
];

Como vemos, es un render array un poco extenso, pero incluye todo lo necesario para que funcione correctamente. Tenemos el título, la Url generada, todos los atributos requeridos y como no, la librería "core/drupal.dialog.ajax" que es la responsable de hacer que funcione correctamente el off canvas.

Debemos tener en cuenta que la opción de "data-dialog-options" es opcional y podemos eliminarlo, nos permite añadir opciones, pero con la de "width" es más que suficiente para indicar el ancho del off canvas.

Y eso es todo, no necesitamos nada más, realmente parece más complejo de lo que es, pero únicamente tenemos que hacer un copia y pega, y cambiar el titulo y la URL. Si necesitamos más información sobre como generar las URL, podemos ver el artículo sobre las URL.