Cómo compilar un componente de diálogo

Una descripción general fundamental sobre cómo compilar mini y mega modales responsivos, adaptables al color y accesibles con el elemento <dialog>.

Adam Argyle

En esta publicación, quiero compartir mis ideas sobre cómo compilar mini y megamodales adaptables, responsivos y accesibles con el elemento <dialog>. Prueba la demostración y consulta la fuente.

Demostración de los diálogos mega y mini en sus temas claro y oscuro.

Si prefieres ver un video, aquí tienes una versión de esta publicación en YouTube:

Descripción general

El elemento <dialog> es excelente para la acción o información contextual en la página. Considera cuándo la experiencia del usuario puede beneficiarse de una acción de la misma página en lugar de una acción de varias páginas: tal vez porque el formulario es pequeño o porque la única acción requerida por el usuario es confirmar o cancelar.

Recientemente, el elemento <dialog> se volvió estable en todos los navegadores:

Navegadores compatibles

• 37
• 79
• 98
• 15.4

Origen

Creo que al elemento le faltan algunos elementos, así que en este desafío de la GUI agrego los elementos de la experiencia para desarrolladores que espero: eventos adicionales, descarte de luz, animaciones personalizadas, y los tipos mini y mega.

Marca

Los elementos esenciales de un elemento <dialog> son modestos. El elemento se ocultará automáticamente y tendrá diseños incorporados para superponerse a tu contenido.

<dialog>
  …
</dialog>

Podemos mejorar este modelo de referencia.

Tradicionalmente, un elemento de diálogo comparte mucho con un elemento modal y, a menudo, los nombres son intercambiables. Me tomé la libertad de usar el elemento de diálogo para las ventanas emergentes de diálogo pequeñas (mini) y los diálogos de página completa (mega). Los denominé mega y mini, y ambos diálogos se adaptaron ligeramente a diferentes casos de uso. Agregué un atributo modal-mode para permitirte especificar el tipo:

<dialog id="MegaDialog" modal-mode="mega"></dialog>
<dialog id="MiniDialog" modal-mode="mini"></dialog>

No siempre, pero, por lo general, se usarán elementos de diálogo para recopilar información de interacción. Los formularios dentro de los elementos de diálogo están hechos para ir juntos. Es una buena idea tener un elemento de formulario que una el contenido del diálogo para que JavaScript pueda acceder a los datos que ingresó el usuario. Además, los botones dentro de un formulario que usan method="dialog" pueden cerrar un diálogo sin JavaScript y pasar datos.

<dialog id="MegaDialog" modal-mode="mega">
  <form method="dialog">
    …
    <button value="cancel">Cancel</button>
    <button value="confirm">Confirm</button>
  </form>
</dialog>

Diálogo Mega

Un megadiálogo tiene tres elementos dentro del formulario: <header>, <article> y <footer>. Estos sirven como contenedores semánticos, al igual que objetivos de estilo para la presentación del diálogo. El encabezado titula el diálogo modal y ofrece un botón para cerrarlo. El artículo está destinado a las entradas y la información de los formularios. El pie de página contiene un <menu> de botones de acción.

<dialog id="MegaDialog" modal-mode="mega">
  <form method="dialog">
    <header>
      <h3>Dialog title</h3>
      <button onclick="this.closest('dialog').close('close')"></button>
    </header>
    <article>...</article>
    <footer>
      <menu>
        <button autofocus type="reset" onclick="this.closest('dialog').close('cancel')">Cancel</button>
        <button type="submit" value="confirm">Confirm</button>
      </menu>
    </footer>
  </form>
</dialog>

El primer botón de menú tiene autofocus y un controlador de eventos intercalado onclick. El atributo autofocus recibirá el enfoque cuando se abra el diálogo. Creo que se recomienda colocar esto en el botón Cancelar, no en el botón de confirmación. Esto garantiza que la confirmación sea deliberada y no accidental.

Nota: El controlador onclick contiene un código JavaScript que encontrará el elemento de diálogo superior más cercano y lo cerrará, pasando los datos de cadena "cancel", de modo que los controladores de eventos de cierre puedan informar a los desarrolladores en qué botón se hizo clic.

Diálogo pequeño

El diálogo mini es muy similar al diálogo mega, solo le falta un elemento <header>. Esto permite que sea más pequeño y esté más alineado.

<dialog id="MiniDialog" modal-mode="mini">
  <form method="dialog">
    <article>
      <p>Are you sure you want to remove this user?</p>
    </article>
    <footer>
      <menu>
        <button autofocus type="reset" onclick="this.closest('dialog').close('cancel')">Cancel</button>
        <button type="submit" value="confirm">Confirm</button>
      </menu>
    </footer>
  </form>
</dialog>

El elemento de diálogo proporciona una base sólida para un elemento de viewport completo que puede recopilar datos y la interacción del usuario. Estos elementos esenciales pueden generar interacciones muy interesantes y poderosas en tu sitio o aplicación.

Accesibilidad

El elemento de diálogo tiene una accesibilidad integrada muy buena. En lugar de agregar estas funciones como suelo hacer, muchas ya están allí.

Restableciendo el enfoque

Como lo hicimos a mano en Cómo compilar un componente de panel lateral, es importante que abrir y cerrar algo de forma correcta enfoque los botones de apertura y cierre relevantes. Cuando se abre ese panel lateral, el enfoque se coloca en el botón de cierre. Cuando se presiona el botón de cierre, se restablece el enfoque en el botón que lo abrió.

Con el elemento de diálogo, este es el comportamiento predeterminado integrado:

Por desgracia, si deseas animar el diálogo para que aparezca y salga, esta funcionalidad se perderá. En la sección de JavaScript, restableceré esa funcionalidad.

Cómo atrapar el enfoque

El elemento de diálogo administra inert por ti en el documento. Antes de inert, se usaba JavaScript para detectar si el enfoque abandonaba un elemento, en cuyo momento lo interceptaba y lo volvía a colocar.

Navegadores compatibles

• 102
• 102
• 112
• 15.5

Origen

Después de inert, cualquier parte del documento se puede “inmovilizar” de modo que ya no sean objetivos de enfoque ni sean interactivos con el mouse. En lugar de capturar el enfoque, este se guía hacia la única parte interactiva del documento.

Cómo abrir un elemento y enfocarlo automáticamente

De forma predeterminada, el elemento de diálogo asignará el enfoque al primer elemento enfocable en el lenguaje de marcado de diálogo. Si este no es el mejor elemento para que el usuario use de forma predeterminada, usa el atributo autofocus. Como se describió anteriormente, creo que es una práctica recomendada colocar esto en el botón Cancelar y no en el botón Confirmar. Esto garantiza que la confirmación sea deliberada y no accidental.

Cómo cerrar con la tecla Escape

Es importante facilitar el cierre de este elemento potencialmente disruptivo. Por suerte, el elemento de diálogo controlará la tecla de escape por ti, lo que te liberará de la carga de orquestación.

Estilos

Hay una forma sencilla de aplicar diseño al elemento de diálogo y una forma difícil. La ruta de acceso fácil se logra sin cambiar la propiedad de visualización del diálogo y trabajar con sus limitaciones. Elegí la opción más difícil para proporcionar animaciones personalizadas para abrir y cerrar el diálogo, tomar la propiedad display y mucho más.

Cómo dar estilo con objetos abiertos

Para acelerar los colores adaptables y la coherencia general del diseño, usé sin vergüenza mi biblioteca de variables CSS Open Props. Además de las variables proporcionadas de forma gratuita, también importo un archivo normalize y algunos botones, que Open Props proporciona como importaciones opcionales. Estas importaciones me ayudan a enfocarme en personalizar el diálogo y la demo sin necesidad de muchos estilos para admitirlo y que se vea bien.

Cómo aplicar diseño al elemento <dialog>

Propiedad de la propiedad de visualización

El comportamiento predeterminado para mostrar y ocultar de un elemento de diálogo cambia la propiedad de visualización de block a none. Lamentablemente, esto significa que no se puede animar dentro y fuera, solo dentro. Me gustaría animar la entrada y la salida, y el primer paso es configurar mi propia propiedad display:

dialog {
  display: grid;
}

Cuando se cambia el valor de la propiedad de visualización y, por lo tanto, se es propietario de ella, como se muestra en el fragmento de CSS anterior, se debe administrar una cantidad considerable de estilos para facilitar la experiencia del usuario adecuada. Primero, el estado predeterminado de un diálogo es cerrado. Puedes representar este estado visualmente y evitar que el diálogo tenga interacciones con los siguientes estilos:

dialog:not([open]) {
  pointer-events: none;
  opacity: 0;
}

Ahora, el diálogo es invisible y no se puede interactuar con él cuando no está abierto. Más adelante, agregaré un poco de JavaScript para administrar el atributo inert en el diálogo, lo que garantizará que los usuarios del teclado y el lector de pantalla tampoco puedan acceder al diálogo oculto.

Cómo asignarle un tema de color adaptable al diálogo

Si bien color-scheme elige tu documento en un tema de color adaptable proporcionado por el navegador para las preferencias del sistema claro y oscuro, quería personalizar el elemento de diálogo más que eso. Open Props proporciona algunos colores de superficie que se adaptan automáticamente a las preferencias de luz y oscuridad del sistema, de manera similar al uso de color-scheme. Son excelentes para crear capas en un diseño, y me encanta usar color para ayudar a respaldar visualmente esta apariencia de las superficies de las capas. El color de fondo es var(--surface-1). Para ubicarte sobre esa capa, usa var(--surface-2):

dialog {
  …
  background: var(--surface-2);
  color: var(--text-1);
}

@media (prefers-color-scheme: dark) {
  dialog {
    border-block-start: var(--border-size-1) solid var(--surface-3);
  }
}

Más adelante, se agregarán colores más adaptables para los elementos secundarios, como el encabezado y el pie de página. Los considero un elemento adicional para un diálogo, pero son muy importantes para lograr un diseño de diálogo atractivo y bien diseñado.

Nota: Para obtener información detallada sobre los sistemas de colores adaptables, consulta el desafío de la GUI Cómo crear un esquema de colores.

Tamaño del diálogo responsivo

De forma predeterminada, el diálogo delega su tamaño a su contenido, lo que, por lo general, es una gran ventaja. Mi objetivo aquí es restringir el elemento max-inline-size a un tamaño legible (--size-content-3 = 60ch) o al 90% del ancho del viewport. De esta manera, se garantiza que el diálogo no se extienda de borde a borde en los dispositivos móviles y que no sea tan ancho en la pantalla de una computadora de escritorio que sea difícil de leer. Luego, agrego un max-block-size para que el diálogo no exceda la altura de la página. Esto también significa que necesitaremos especificar dónde está el área desplazable del diálogo, en caso de que sea un elemento de diálogo alto.

dialog {
  …
  max-inline-size: min(90vw, var(--size-content-3));
  max-block-size: min(80vh, 100%);
  max-block-size: min(80dvb, 100%);
  overflow: hidden;
}

¿Observas cómo tengo max-block-size dos veces? El primero usa 80vh, una unidad de viewport físico. Lo que realmente quiero es mantener el diálogo dentro del flujo relativo para los usuarios internacionales, por lo que uso la unidad dvb lógica, más reciente y solo parcialmente compatible en la segunda declaración para cuando se vuelva más estable.

Posicionamiento de los grandes diálogos

Para ayudar a posicionar un elemento de diálogo, vale la pena desglosar sus dos partes: el fondo de pantalla completa y el contenedor de diálogo. El fondo debe cubrir todo y proporcionar un efecto de sombra para ayudar a que este diálogo esté en primer plano y no se pueda acceder al contenido que está detrás. El contenedor de diálogo puede centrarse sobre este fondo y tomar la forma que requiera su contenido.

Los siguientes estilos fijan el elemento de diálogo en la ventana, lo estiran a cada esquina y usan margin: auto para centrar el contenido:

dialog {
  …
  margin: auto;
  padding: 0;
  position: fixed;
  inset: 0;
  z-index: var(--layer-important);
}

Estilos de diálogo mega para dispositivos móviles

En viewports pequeños, le doy un estilo un poco diferente a este mega modal de página completa. Establecí el margen inferior en 0, lo que lleva el contenido del diálogo a la parte inferior de la ventana de visualización. Con un par de ajustes de estilo, puedo convertir el diálogo en una hoja de acciones, más cerca de los pulgares del usuario:

@media (max-width: 768px) {
  dialog[modal-mode="mega"] {
    margin-block-end: 0;
    border-end-end-radius: 0;
    border-end-start-radius: 0;
  }
}

Posicionamiento del diálogo en miniatura

Cuando usas un viewport más grande, como en una computadora de escritorio, elegí posicionar los diálogos en miniatura sobre el elemento que los llamó. Para ello, necesito JavaScript. Puedes encontrar la técnica que uso aquí, pero creo que está fuera del alcance de este artículo. Sin JavaScript, el diálogo mini aparece en el centro de la pantalla, al igual que el diálogo mega.

Haz que se destaque

Por último, agrega un poco de estilo al diálogo para que se vea como una superficie suave que se encuentra por sobre la página. La suavidad se logra redondeando las esquinas del diálogo. La profundidad se logra con uno de los props de sombra cuidadosamente elaborados de Open Props:

dialog {
  …
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-6);
}

Cómo personalizar el seudoelemento del fondo

Elegí trabajar muy bien con el fondo y agregar un efecto de desenfoque con backdrop-filter al megadiálogo:

Navegadores compatibles

• 76
• 79
• 103
• 18

Origen

dialog[modal-mode="mega"]::backdrop {
  backdrop-filter: blur(25px);
}

También decidí colocar una transición en backdrop-filter, con la esperanza de que los navegadores permitan la transición del elemento de fondo en el futuro:

dialog::backdrop {
  transition: backdrop-filter .5s ease;
}

Elementos adicionales de diseño

A esta sección la llamo "extras" porque tiene más que ver con la demostración de mi elemento de diálogo que con el elemento de diálogo en general.

Contención de desplazamiento

Cuando se muestra el diálogo, el usuario aún puede desplazarse por la página detrás de él, lo que no quiero:

Por lo general, overscroll-behavior sería mi solución habitual, pero según las especificaciones, no tiene efecto en el diálogo porque no es un puerto de desplazamiento, es decir, no es un control deslizante, por lo que no hay nada que evitar. Podría usar JavaScript para detectar los eventos nuevos de esta guía, como “cerrado” y “abierto”, y activar o desactivar overflow: hidden en el documento, o bien podría esperar a que :has() sea estable en todos los navegadores:

Navegadores compatibles

• 105
• 105
• 121
• 15.4

Origen

html:has(dialog[open][modal-mode="mega"]) {
  overflow: hidden;
}

Ahora, cuando se abre un diálogo mega, el documento HTML tiene overflow: hidden.

El diseño <form>

Además de ser un elemento muy importante para recopilar la información de interacción del usuario, lo uso aquí para diseñar los elementos del encabezado, el pie de página y el artículo. Con este diseño, mi intención es articular el artículo secundario como un área desplazable. Lo logro con grid-template-rows. El elemento artículo tiene 1fr y el formulario tiene la misma altura máxima que el elemento de diálogo. Establecer esta altura firme y este tamaño de fila firme es lo que permite que el elemento de artículo se restrinja y se desplace cuando se desborda:

dialog > form {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  max-block-size: 80vh;
  max-block-size: 80dvb;
}

Aplica diseño al diálogo <header>

El rol de este elemento es proporcionar un título para el contenido del diálogo y ofrecer un botón para cerrar fácil de encontrar. También se le asigna un color de superficie para que parezca estar detrás del contenido del artículo de diálogo. Estos requisitos generan un contenedor de flexbox, elementos alineados verticalmente que están espaciados hasta sus bordes y algunos padding y espacios para dar espacio al título y a los botones de cierre:

dialog > form > header {
  display: flex;
  gap: var(--size-3);
  justify-content: space-between;
  align-items: flex-start;
  background: var(--surface-2);
  padding-block: var(--size-3);
  padding-inline: var(--size-5);
}

@media (prefers-color-scheme: dark) {
  dialog > form > header {
    background: var(--surface-1);
  }
}

Aplica diseño al botón de cierre del encabezado

Dado que la demostración usa los botones Open Props, el botón de cierre se personaliza en un botón centrado en el ícono redondo de la siguiente manera:

dialog > form > header > button {
  border-radius: var(--radius-round);
  padding: .75ch;
  aspect-ratio: 1;
  flex-shrink: 0;
  place-items: center;
  stroke: currentColor;
  stroke-width: 3px;
}

Cómo aplicar diseño al diálogo <article>

El elemento del artículo tiene una función especial en este diálogo: es un espacio destinado al desplazamiento en caso de que aparezca un diálogo alto o largo.

Para lograrlo, el elemento de formulario superior estableció algunos máximos para sí mismo que proporcionan restricciones para que este elemento de artículo alcance si se hace demasiado alto. Establece overflow-y: auto para que las barras de desplazamiento solo se muestren cuando sea necesario, contengan el desplazamiento dentro de ellas con overscroll-behavior: contain y el resto sean estilos de presentación personalizados:

dialog > form > article {
  overflow-y: auto; 
  max-block-size: 100%; /* safari */
  overscroll-behavior-y: contain;
  display: grid;
  justify-items: flex-start;
  gap: var(--size-3);
  box-shadow: var(--shadow-2);
  z-index: var(--layer-1);
  padding-inline: var(--size-5);
  padding-block: var(--size-3);
}

@media (prefers-color-scheme: light) {
  dialog > form > article {
    background: var(--surface-1);
  }
}

Aplica diseño al diálogo <footer>

El pie de página tiene la función de contener menús de botones de acción. Flexbox se usa para alinear el contenido al final del eje intercalado del pie de página y, luego, un poco de espacio para dejar espacio a los botones.

dialog > form > footer {
  background: var(--surface-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-3);
  justify-content: space-between;
  align-items: flex-start;
  padding-inline: var(--size-5);
  padding-block: var(--size-3);
}

@media (prefers-color-scheme: dark) {
  dialog > form > footer {
    background: var(--surface-1);
  }
}

Aplica diseño al menú del pie de página del diálogo

El elemento menu se usa para contener los botones de acción del diálogo. Usa un diseño flexible de unión con gap para proporcionar espacio entre los botones. Los elementos de menú tienen padding, como un <ul>. También quité ese estilo, ya que no lo necesito.

dialog > form > footer > menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-3);
  padding-inline-start: 0;
}

dialog > form > footer > menu:only-child {
  margin-inline-start: auto;
}

Animación

Los elementos de diálogo suelen estar animados porque entran y salen de la ventana. Darles a los diálogos cierto movimiento de apoyo para esta entrada y salida ayuda a los usuarios a orientarse en el flujo.

Normalmente, el elemento de diálogo solo se puede animar hacia adentro, no hacia afuera. Esto se debe a que el navegador activa o desactiva la propiedad display en el elemento. Antes, la guía configuraba la pantalla en cuadrícula y nunca la configuraba en ninguna. Esto desbloquea la capacidad de animar dentro y fuera.

Open Props incluye muchas animaciones de fotogramas clave para usar, lo que facilita y hace legible la orquestación. Estos son los objetivos de animación y el enfoque en capas que adopté:

1. El movimiento reducido es la transición predeterminada, una simple atenuación de opacidad.
2. Si el movimiento es correcto, se agregan animaciones de deslizamiento y escalamiento.
3. El diseño responsivo para dispositivos móviles del diálogo mega se ajusta para deslizarse hacia afuera.

Una transición predeterminada segura y significativa

Si bien Open Props incluye fotogramas clave para el fundido de entrada y salida, prefiero este enfoque de transiciones en capas de forma predeterminada con animaciones de fotogramas clave como posibles actualizaciones. Anteriormente, ya aplicamos diseño a la visibilidad del diálogo con opacidad, orquestando 1 o 0 según el atributo [open]. Para realizar la transición entre el 0% y el 100%, indícale al navegador cuánto tiempo y qué tipo de atenuación deseas:

dialog {
  transition: opacity .5s var(--ease-3);
}

Cómo agregar movimiento a la transición

Si el usuario está de acuerdo con el movimiento, tanto el diálogo mega como el mini deben deslizarse hacia arriba como su entrada y escalar horizontalmente como su salida. Puedes lograr esto con la consulta de medios prefers-reduced-motion y algunas Props abiertas:

@media (prefers-reduced-motion: no-preference) {
  dialog {
    animation: var(--animation-scale-down) forwards;
    animation-timing-function: var(--ease-squish-3);
  }

  dialog[open] {
    animation: var(--animation-slide-in-up) forwards;
  }
}

Nota: animation-timing-function se establece en var(--ease-squish-3), un efecto de suavización expresivo disponible en Open Props. Le da a la animación de salida un aspecto divertido.

Cómo adaptar la animación de salida para dispositivos móviles

Anteriormente, en la sección de diseño, el estilo de diálogo mega se adaptó para que los dispositivos móviles sean más como una hoja de acciones, como si un pequeño papel se deslizara desde la parte inferior de la pantalla y aún estuviera unido a la parte inferior. La animación de salida de escalamiento no se ajusta bien a este nuevo diseño, y podemos adaptarla con algunas consultas de medios y algunos elementos Open Props:

@media (prefers-reduced-motion: no-preference) and @media (max-width: 768px) {
  dialog[modal-mode="mega"] {
    animation: var(--animation-slide-out-down) forwards;
    animation-timing-function: var(--ease-squish-2);
  }
}

JavaScript

Hay bastantes elementos que se pueden agregar con JavaScript:

// dialog.js
export default async function (dialog) {
  // add light dismiss
  // add closing and closed events
  // add opening and opened events
  // add removed event
  // removing loading attribute
}

Estas adiciones surgen del deseo de descartar la luz (hacer clic en el fondo del diálogo), animación y algunos eventos adicionales para obtener mejores tiempos en la obtención de datos del formulario.

Cómo agregar el rechazo de luz

Esta tarea es sencilla y es una gran adición a un elemento de diálogo que no se anima. La interacción se logra observando los clics en el elemento de diálogo y aprovechando el burbujamiento de eventos para evaluar en qué se hizo clic. Solo se close() si es el elemento más alto:

export default async function (dialog) {
  dialog.addEventListener('click', lightDismiss)
}

const lightDismiss = ({target:dialog}) => {
  if (dialog.nodeName === 'DIALOG')
    dialog.close('dismiss')
}

Observa dialog.close('dismiss'). Se llama al evento y se proporciona una cadena. Otro código JavaScript puede recuperar esta cadena para obtener estadísticas sobre cómo se cerró el diálogo. Verás que también proporcioné cadenas de cierre cada vez que llamo a la función desde varios botones para proporcionar contexto a mi aplicación sobre la interacción del usuario.

Cómo agregar eventos de cierre y cerrados

El elemento de diálogo incluye un evento de cierre: se emite de inmediato cuando se llama a la función close() del diálogo. Como animaremos este elemento, es bueno tener eventos para antes y después de la animación, de modo que un cambio tome los datos o restablezca el formulario de diálogo. Aquí lo uso para administrar la adición del atributo inert en el diálogo cerrado y, en la demostración, los uso para modificar la lista de avatares si el usuario envió una imagen nueva.

Para lograrlo, crea dos eventos nuevos llamados closing y closed. Luego, escucha el evento de cierre integrado en el diálogo. Desde aquí, configura el diálogo en inert y envía el evento closing. La siguiente tarea es esperar a que las animaciones y las transiciones terminen de ejecutarse en el diálogo y, luego, enviar el evento closed.

const dialogClosingEvent = new Event('closing')
const dialogClosedEvent  = new Event('closed')

export default async function (dialog) {
  …
  dialog.addEventListener('close', dialogClose)
}

const dialogClose = async ({target:dialog}) => {
  dialog.setAttribute('inert', '')
  dialog.dispatchEvent(dialogClosingEvent)

  await animationsComplete(dialog)

  dialog.dispatchEvent(dialogClosedEvent)
}

const animationsComplete = element =>
  Promise.allSettled(
    element.getAnimations().map(animation => 
      animation.finished))

La función animationsComplete, que también se usa en Cómo compilar un componente de tostada, muestra una promesa según la finalización de las promesas de animación y transición. Por eso, dialogClose es una función async; luego, puede await la promesa que se muestra y avanzar con confianza al evento cerrado.

Cómo agregar eventos de apertura y apertura

Estos eventos no son tan fáciles de agregar, ya que el elemento de diálogo integrado no proporciona un evento abierto como lo hace con el cierre. Uso un MutationObserver para proporcionar estadísticas sobre los cambios en los atributos del diálogo. En este observador, vigilaré los cambios en el atributo abierto y administraré los eventos personalizados según corresponda.

De manera similar a como comenzamos los eventos de cierre y cierre, crea dos eventos nuevos llamados opening y opened. Donde anteriormente escuchamos el evento de cierre del diálogo, esta vez usa un observador de mutación creado para ver los atributos del diálogo.

…
const dialogOpeningEvent = new Event('opening')
const dialogOpenedEvent  = new Event('opened')

export default async function (dialog) {
  …
  dialogAttrObserver.observe(dialog, { 
    attributes: true,
  })
}

const dialogAttrObserver = new MutationObserver((mutations, observer) => {
  mutations.forEach(async mutation => {
    if (mutation.attributeName === 'open') {
      const dialog = mutation.target

      const isOpen = dialog.hasAttribute('open')
      if (!isOpen) return

      dialog.removeAttribute('inert')

      // set focus
      const focusTarget = dialog.querySelector('[autofocus]')
      focusTarget
        ? focusTarget.focus()
        : dialog.querySelector('button').focus()

      dialog.dispatchEvent(dialogOpeningEvent)
      await animationsComplete(dialog)
      dialog.dispatchEvent(dialogOpenedEvent)
    }
  })
})

Se llamará a la función de devolución de llamada del observador de mutaciones cuando se modifiquen los atributos del diálogo, lo que proporcionará la lista de cambios como un array. Itera los cambios de atributos y busca que attributeName esté abierto. A continuación, verifica si el elemento tiene el atributo o no. Esto indica si el diálogo se abrió o no. Si se abrió, quita el atributo inert y establece el enfoque en un elemento que solicite autofocus o en el primer elemento button que se encuentre en el diálogo. Por último, al igual que con los eventos de cierre y cierre, envía el evento de apertura de inmediato, espera a que finalicen las animaciones y, luego, envía el evento abierto.

Cómo agregar un evento quitado

En las aplicaciones de una sola página, los diálogos a menudo se agregan y quitan según las rutas o las necesidades y el estado de la aplicación. Puede ser útil limpiar eventos o datos cuando se quita un diálogo.

Puedes lograrlo con otro observador de mutaciones. Esta vez, en lugar de observar atributos en un elemento de diálogo, observaremos los elementos secundarios del elemento cuerpo y buscaremos elementos de diálogo que se quiten.

…
const dialogRemovedEvent = new Event('removed')

export default async function (dialog) {
  …
  dialogDeleteObserver.observe(document.body, {
    attributes: false,
    subtree: false,
    childList: true,
  })
}

const dialogDeleteObserver = new MutationObserver((mutations, observer) => {
  mutations.forEach(mutation => {
    mutation.removedNodes.forEach(removedNode => {
      if (removedNode.nodeName === 'DIALOG') {
        removedNode.removeEventListener('click', lightDismiss)
        removedNode.removeEventListener('close', dialogClose)
        removedNode.dispatchEvent(dialogRemovedEvent)
      }
    })
  })
})

Se llama a la devolución de llamada del observador de mutación cada vez que se agregan o quitan elementos secundarios del cuerpo del documento. Las mutaciones específicas que se observan son para removedNodes que tienen el nodeName de un diálogo. Si se quitó un diálogo, se quitan los eventos de clic y cierre para liberar memoria, y se envía el evento personalizado quitado.

Cómo quitar el atributo de carga

Para evitar que la animación de salida reproduzca su animación de salida cuando se la agrega a la página o durante la carga, se agregó un atributo de carga al diálogo. La siguiente secuencia de comandos espera a que las animaciones del diálogo terminen de ejecutarse y, luego, quita el atributo. Ahora, la animación de entrada y salida del diálogo es libre, y ocultamos de manera efectiva una animación que de otra forma podría distraer.

export default async function (dialog) {
  …
  await animationsComplete(dialog)
  dialog.removeAttribute('loading')
}

Obtén más información sobre el problema de evitar animaciones de fotogramas clave en la carga de la página aquí.

Todo junto

Aquí se muestra dialog.js en su totalidad, ahora que explicamos cada sección de forma individual:

// custom events to be added to <dialog>
const dialogClosingEvent = new Event('closing')
const dialogClosedEvent  = new Event('closed')
const dialogOpeningEvent = new Event('opening')
const dialogOpenedEvent  = new Event('opened')
const dialogRemovedEvent = new Event('removed')

// track opening
const dialogAttrObserver = new MutationObserver((mutations, observer) => {
  mutations.forEach(async mutation => {
    if (mutation.attributeName === 'open') {
      const dialog = mutation.target

      const isOpen = dialog.hasAttribute('open')
      if (!isOpen) return

      dialog.removeAttribute('inert')

      // set focus
      const focusTarget = dialog.querySelector('[autofocus]')
      focusTarget
        ? focusTarget.focus()
        : dialog.querySelector('button').focus()

      dialog.dispatchEvent(dialogOpeningEvent)
      await animationsComplete(dialog)
      dialog.dispatchEvent(dialogOpenedEvent)
    }
  })
})

// track deletion
const dialogDeleteObserver = new MutationObserver((mutations, observer) => {
  mutations.forEach(mutation => {
    mutation.removedNodes.forEach(removedNode => {
      if (removedNode.nodeName === 'DIALOG') {
        removedNode.removeEventListener('click', lightDismiss)
        removedNode.removeEventListener('close', dialogClose)
        removedNode.dispatchEvent(dialogRemovedEvent)
      }
    })
  })
})

// wait for all dialog animations to complete their promises
const animationsComplete = element =>
  Promise.allSettled(
    element.getAnimations().map(animation => 
      animation.finished))

// click outside the dialog handler
const lightDismiss = ({target:dialog}) => {
  if (dialog.nodeName === 'DIALOG')
    dialog.close('dismiss')
}

const dialogClose = async ({target:dialog}) => {
  dialog.setAttribute('inert', '')
  dialog.dispatchEvent(dialogClosingEvent)

  await animationsComplete(dialog)

  dialog.dispatchEvent(dialogClosedEvent)
}

// page load dialogs setup
export default async function (dialog) {
  dialog.addEventListener('click', lightDismiss)
  dialog.addEventListener('close', dialogClose)

  dialogAttrObserver.observe(dialog, { 
    attributes: true,
  })

  dialogDeleteObserver.observe(document.body, {
    attributes: false,
    subtree: false,
    childList: true,
  })

  // remove loading attribute
  // prevent page load @keyframes playing
  await animationsComplete(dialog)
  dialog.removeAttribute('loading')
}

Usa el módulo dialog.js

La función exportada del módulo espera que se le llame y se le pase un elemento de diálogo que desee agregar estos eventos y funciones nuevos:

import GuiDialog from './dialog.js'

const MegaDialog = document.querySelector('#MegaDialog')
const MiniDialog = document.querySelector('#MiniDialog')

GuiDialog(MegaDialog)
GuiDialog(MiniDialog)

Así, los dos diálogos se actualizan con el descarte de luz, correcciones de carga de animación y más eventos con los que trabajar.

Cómo escuchar los nuevos eventos personalizados

Cada elemento de diálogo actualizado ahora puede detectar cinco eventos nuevos, de la siguiente manera:

MegaDialog.addEventListener('closing', dialogClosing)
MegaDialog.addEventListener('closed', dialogClosed)

MegaDialog.addEventListener('opening', dialogOpening)
MegaDialog.addEventListener('opened', dialogOpened)

MegaDialog.addEventListener('removed', dialogRemoved)

Estos son dos ejemplos de cómo controlar esos eventos:

const dialogOpening = ({target:dialog}) => {
  console.log('Dialog opening', dialog)
}

const dialogClosed = ({target:dialog}) => {
  console.log('Dialog closed', dialog)
  console.info('Dialog user action:', dialog.returnValue)

  if (dialog.returnValue === 'confirm') {
    // do stuff with the form values
    const dialogFormData = new FormData(dialog.querySelector('form'))
    console.info('Dialog form data', Object.fromEntries(dialogFormData.entries()))

    // then reset the form
    dialog.querySelector('form')?.reset()
  }
}

En la demostración que creé con el elemento de diálogo, uso ese evento cerrado y los datos del formulario para agregar un nuevo elemento de avatar a la lista. El momento adecuado es que se haya completado la animación de salida del diálogo y, luego, se animen algunas secuencias de comandos en el avatar nuevo. Gracias a los eventos nuevos, la orquestación de la experiencia del usuario puede ser más fluida.

Observa dialog.returnValue, que contiene la cadena de cierre que se pasa cuando se llama al evento close() del diálogo. En el evento dialogClosed, es fundamental saber si se cerró, canceló o confirmó el diálogo. Si se confirma, la secuencia de comandos toma los valores del formulario y lo restablece. El restablecimiento es útil para que, cuando se vuelva a mostrar el diálogo, esté en blanco y listo para un nuevo envío.

Conclusión

Ahora que sabes cómo lo hice, ¿cómo lo harías tú? 🙂

Diversifiquemos nuestros enfoques y aprendamos todas las formas de compilar en la Web.

Crea una demo, twittea los vínculos y los agregaré a la sección de remixes de la comunidad a continuación.

Remixes de la comunidad

• @GrimLink con un diálogo 3 en 1
• @mikemai2awesome con un buen remix que no cambia la propiedad display.
• @geoffrich_ con Svelte y un buen acabado de Svelte FLIP.

Recursos

• Código fuente en GitHub
• Avatares de Doodle