Cómo compilar un componente de diálogo

Una descripción general fundamental de cómo compilar mini y megamodales adaptables, responsivas y accesibles con el elemento <dialog>.

Adam Argyle

En esta publicación, compartiré mis pensamientos sobre cómo crear colores adaptables, mini y megamodales responsivos y accesibles con el elemento <dialog>. Prueba la demostración y mira la fuente.

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

Descripción general

El <dialog> es ideal para la acción o la información contextual de los anuncios in-page. Ten en cuenta cuándo la experiencia del usuario puede beneficiarse de una misma acción de página en lugar de de varias páginas acción: quizás porque el formulario es pequeño o la única acción requerida de la el usuario es confirmar o cancelar.

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

Creo que al elemento le faltan algunos elementos, así que en esta GUI Desafío Agrego la experiencia del desarrollador elementos que espero: eventos adicionales, descarte ligero, animaciones personalizadas y una y megatipo.

Marca

Los elementos esenciales de un elemento <dialog> son sencillos. El elemento ocultarse automáticamente y tiene estilos incorporados para superponer el contenido.

<dialog>
  …
</dialog>

Podemos mejorar este modelo de referencia.

Tradicionalmente, un elemento de diálogo comparte mucho con un modal y, a menudo, los nombres son intercambiables. Aquí me tomé la libertad de usar el elemento de diálogo para los diálogos pequeños (mini) y los de página completa (mega). Nombré mega y mini, con diálogos apenas adaptados para diferentes casos de uso. Agregué un atributo modal-mode para que puedas especificar el tipo:

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

No siempre, pero, por lo general, los elementos de diálogo se usarán para recopilar algunos información de interacción. Los formularios dentro de los elementos de diálogo están hechos para usarse de aprendizaje automático. Es recomendable que un elemento de formulario envuelva el contenido del diálogo JavaScript puede acceder a los datos que ingresó el usuario. Además, los botones dentro un formulario que usa method="dialog" puede cerrar un diálogo sin JavaScript y pasar de datos no estructurados.

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

Megadiálogo

Un diálogo combinado tiene tres elementos dentro del formulario: <header>: <article>, y <footer> Estos sirven como contenedores semánticos y como objetivos de estilo para las presentación del diálogo. El encabezado titula la ventana modal y ofrece un cierre . Este artículo contiene información y entradas de 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 intercalados onclick. El atributo autofocus recibirá enfoque cuando se abre el cuadro de diálogo, y creo que es una buena práctica colocar esto el botón Cancelar, no el botón Confirmar. Esto garantiza que la confirmación esté deliberada y no accidental.

Minidiálogo

El minidiálogo es muy similar al megadiálogo, solo le falta un <header>. Esto permite que sea más pequeño y esté más intercalado.

<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 del viewport completo que para recopilar datos e interacción del usuario. Estos elementos esenciales pueden hacer que algunos interacciones interesantes y eficaces en su sitio o aplicación.

Accesibilidad

El elemento de diálogo tiene una muy buena accesibilidad integrada. En lugar de agregar estos como suelo hacerlo, muchos ya están ahí.

Restableciendo el enfoque

Como lo hicimos manualmente en Cómo crear una navegación lateral , es importante que abrir y cerrar algo de forma correcta se enfoca en la apertura y el cierre relevantes botones. Cuando se abre ese panel de navegación lateral, se enfoca el botón de cierre. Cuando si presionas el botón Cerrar, el enfoque se restablece al botón que lo abrió.

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

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

Enfoque de captura

El elemento de diálogo administra inert en el documento. Antes del inert, se usaba JavaScript para detectar el foco dejando un elemento, y en ese momento lo intercepta y lo vuelve a colocar.

Después del inert, se puede "inmovilizar" cualquier parte del documento en tanto que son dejan de enfocar los objetivos o son interactivos con el mouse. En lugar de atrapar el enfoque, se guía hacia la única parte interactiva del documento.

Cómo abrir y enfocar automáticamente un elemento

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

Cómo cerrar con la tecla Escape

Es importante facilitar el cierre de este elemento potencialmente disruptivo. Afortunadamente, el elemento de diálogo controlará la tecla Escape por ti, lo que te liberará de la carga de la organización.

Estilos

Hay una ruta sencilla para aplicar estilo al elemento del diálogo y una ruta fija. La facilidad ruta se logra sin cambiar la propiedad de visualización del diálogo y funciona con sus limitaciones. Voy por el camino difícil para crear animaciones personalizadas abrir y cerrar el diálogo, tomar el control de 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, abrí mi biblioteca de variables CSS Open Props. En Además de las variables gratuitas que se proporcionan, también importo un normalize y algunos botones, que abren Props proporciona como importaciones opcionales. Estas importaciones me ayudan a enfocarme en personalizar el diálogo y la demostración, y no se necesitan muchos estilos para respaldarlo y hacer que se vea. bien.

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

Cómo ser propietario de la propiedad de visualización

El comportamiento predeterminado mostrar y ocultar de un elemento de diálogo activa o desactiva la pantalla propiedad de block a none. Esto significa que no se puede animar dentro y fuera, solo en la entrada. quiero agregar animaciones, y el primer paso es para establecer una display:

dialog {
  display: grid;
}

Al cambiar y, por lo tanto, poseer, el valor de la propiedad de visualización, como se muestra en el sobre el fragmento de CSS, se debe administrar una cantidad considerable de estilos para y 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 que reciben 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 si no está abierto. Más tarde Agregaré JavaScript para administrar el atributo inert en el diálogo y asegurarme que los usuarios del teclado y lector de pantalla tampoco puedan acceder al diálogo oculto.

Dar al diálogo un tema de color adaptable

Por el contrario, color-scheme habilita tu documento en un archivo proporcionado por el navegador el tema de color adaptable a las preferencias claras y oscuras del sistema, quería personalizar el elemento de diálogo más que eso. Open Props proporciona algunas plataformas de colores que se adaptan automáticamente a preferencias del sistema claro y oscuro, similares al uso de color-scheme. Estos son geniales para crear capas en un diseño y me encanta usar el color para ayudar admiten 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 más colores adaptables para los elementos secundarios, como el encabezado y pie de página. Los considero adicionales para un elemento de diálogo, pero son muy importantes en crear un diseño de diálogo atractivo y bien diseñado.

Tamaño del diálogo responsivo

De forma predeterminada, el diálogo delega su tamaño a su contenido, que generalmente es genial. Mi objetivo aquí es limitar max-inline-size a un tamaño legible (--size-content-3 = 60ch) o el 90% del ancho del viewport. Esta garantiza que el diálogo no se extienda de borde a borde en un dispositivo móvil y tampoco lo sea ancha en una pantalla de escritorio que es difícil de leer. A continuación, agrego un max-block-size para que el diálogo no supere la altura de la página. Esto también significa que debes especificar dónde se encuentra el área desplazable del diálogo, en caso de que sea alta elemento de diálogo.

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

¿Notas que tengo max-block-size dos veces? El primero usa 80vh, una máquina virtual viewport. Quiero que el diálogo se mantenga dentro del flujo relativo para los usuarios internacionales, así que uso la lógica, la más reciente y Se admite la unidad dvb en la segunda declaración para el momento en que 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 cubren todo y proporcionan un efecto de sombreado para ayudar a respaldar que este diálogo al frente y el contenido detrás es inaccesible. El contenedor de diálogo es gratuito centro sobre este fondo y tomar la forma que requiera su contenido.

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

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

Estilos de diálogo combinado para dispositivos móviles

En viewports pequeñas, el estilo de esta megamodal completa de página completa de un modo un poco diferente. me establece el margen inferior en 0, lo que lleva el contenido del diálogo a la parte inferior de el viewport. Con algunos ajustes de estilo, puedo convertir el diálogo en un más cerca del dedo pulgar 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 de minidiálogos

Cuando utilizo una ventana de visualización más grande, como en una computadora de escritorio, elegí ubicar los minidiálogos sobre el elemento que los llamó. Para hacer esto, necesito JavaScript. Puedes encontrar técnica que uso aquí, pero creo que está fuera del alcance de este artículo. Sin JavaScript, el aparece un minidiálogo en el centro de la pantalla, al igual que los megadiálogos.

Haz que se destaque

Por último, agrega estilo al diálogo para que se vea como una superficie suave que está lejos. arriba de la página. La suavidad se logra redondeando las esquinas del diálogo. La profundidad se logra con una de las sombras cuidadosamente elaboradas de Open Props. objetos:

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

Cómo personalizar el seudoelemento del fondo

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

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

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

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

Elementos de diseño adicionales

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

Contención del desplazamiento

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

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

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

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

El diseño de <form>

Además de ser un elemento muy importante para recopilar la interacción información del usuario, lo utilizo aquí para diseñar el encabezado, el pie de página y . Con este diseño, quiero articular el artículo secundario como área desplazable. Lo logro con grid-template-rows El elemento del artículo recibe 1fr y el formulario en sí tiene el mismo máximo altura como elemento del diálogo. ¿Qué es establecer esta altura y un tamaño de fila firmes? Permite restringir el elemento del artículo y desplazarse cuando se desborda:

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

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

La función de este elemento es proporcionar un título para el contenido del diálogo y la oferta. un botón de cierre fácil de encontrar. También se le asigna un color de superficie para que parezca detrás del contenido del artículo de diálogo. Estos requisitos dan lugar a una flexbox contenedores, elementos alineados verticalmente que están espaciados a sus bordes y algunos relleno 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);
  }
}

Cómo aplicar estilo al botón para cerrar el encabezado

Como en la demostración se usa el botón Open Props, el botón de cierre es personalizado. en un botón redondo centrado en el icono 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 "article" tiene un rol especial en este diálogo: es un espacio destinado a desplazarse en el caso de un diálogo alto o largo.

Para ello, el elemento del formulario superior ha establecido algunos máximos para que proporciona restricciones para que alcance este elemento del artículo si se obtiene demasiado alto. Configura overflow-y: auto para que las barras de desplazamiento solo se muestren cuando sea necesario. contienen desplazamiento dentro de ella con overscroll-behavior: contain, y el resto serán 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);
  }
}

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

El rol del pie de página es contener menús de botones de acción. Flexbox se usa para lo siguiente: alinea el contenido con el final del eje intercalado del pie de página y, luego, coloca un espacio para dales 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);
  }
}

Cómo definir el diseño del menú del pie de página del diálogo

La menu se usa para contener los botones de acción del diálogo. Se usa un envoltorio Diseño de Flexbox con gap para proporcionar espacio entre los botones Elementos del menú tienen padding, como <ul>. También quito ese estilo porque 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 un 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. Anteriormente, en la guía configura la pantalla en cuadrícula y nunca la establece en Ninguna. Esto desbloquea la capacidad de animar la entrada y la salida.

Open Props incluye muchos fotogramas clave como animaciones, lo que facilita organización sea sencilla y legible. Estos son los objetivos de la animación enfoque que apliqué:

1. El movimiento reducido es la transición predeterminada, un fundido simple de opacidad de entrada y salida.
2. Si el movimiento es correcto, se agregan animaciones de deslizamiento y escala.
3. El diseño responsivo para dispositivos móviles del megadiálogo se ajusta para deslizarse hacia afuera.

Una transición predeterminada segura y significativa

Aunque Open Props incluye fotogramas clave para fundido de entrada y salida, prefiero esto. enfoque en capas de transiciones de forma predeterminada con animaciones de fotogramas clave, como posibles actualizaciones. Anteriormente, ya diseñamos la visibilidad del diálogo con opacidad, y se organizan 1 o 0 según el atributo [open]. Para entre 0% y 100%, indícale al navegador la duración y el tipo de flexibilización te gusta:

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

Cómo agregar movimiento a la transición

Si el usuario está de acuerdo con el movimiento, los diálogos mega y mini deben deslizarse. escalar como su entrada y escalar horizontalmente como su salida. Puedes lograr esto con el Consulta de medios de prefers-reduced-motion y algunos objetos de Open Props:

@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;
  }
}

Adaptar la animación de salida para dispositivos móviles

Anteriormente en la sección de estilos, el estilo de diálogo combinado se adapta para dispositivos móviles. los dispositivos se asemejan más a una hoja de acciones, como si se deslizara un pequeño trozo de papel hacia arriba desde la parte inferior de la pantalla y sigue conectado a la parte inferior. La escala de salida no se adapta bien a este nuevo diseño, y podemos adaptar esto con algunas consultas de medios y algunas propiedades abiertas:

@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

Existen varias opciones para 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 botón fondo), animaciones y algunos eventos adicionales para mejorar los tiempos. los datos del formulario.

Agregando el descarte claro

Esta tarea es sencilla y un gran complemento para un elemento de diálogo la animación. La interacción se logra observando los clics en el diálogo y aprovechar el evento burbujeante para evaluar qué se hizo clic y solo close() si es el elemento superior:

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 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 la función desde varios botones, para proporcionar contexto a mi aplicación sobre la interacción del usuario.

Agrega eventos de cierre y de cierre

El elemento de diálogo incluye un evento de cierre: se emite inmediatamente cuando el elemento diálogo close(). Como estamos animando este elemento, es tener eventos antes y después de la animación, para que un cambio capte o restablecer el formulario de diálogo. Lo utilizo aquí para administrar la adición de el atributo inert en el diálogo cerrado y, en la demostración, los uso para modificar la lista de avatares si el usuario ha enviado una imagen nueva.

Para lograrlo, crea dos eventos nuevos llamados closing y closed. Después escuchar el evento de cierre integrado en el diálogo. Desde aquí, configura el cuadro de diálogo para inert y envía el evento closing. La siguiente tarea es esperar al animaciones y transiciones para terminar de ejecutarse en el diálogo y, luego, enviar la closed evento.

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 crear un aviso componente, muestra una promesa basada en la la finalización de las promesas de animación y transición. Es por eso que dialogClose es una forma de trabajo asíncrono función; puede entonces await la promesa dio como resultado y avanzar con confianza hacia el evento cerrado.

Cómo agregar eventos abiertos y de apertura

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

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

…
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 el cuadro de diálogo atributos se cambian, lo que proporciona la lista de cambios como un array. Iterar en el atributo cambia y busca que attributeName esté abierto. Luego, verifica si el elemento tiene el atributo o no: esto indica si el diálogo o no se abrió Si se abrió, quita el atributo inert y establece el foco. a un elemento que solicita autofocus o el primer elemento button que se encuentra en el diálogo. Por último, similar a la técnica de cierre cerrado, enviar el evento de apertura de inmediato, esperar las animaciones para finalizar y, luego, despachar el evento abierto.

Cómo agregar un evento quitado

En las aplicaciones de una sola página, a menudo se agregan y quitan diálogos en función de las rutas u otras necesidades y estados de la aplicación. Puede ser útil limpiar eventos o cuando se quita un diálogo.

Puedes lograrlo con otro observador de mutaciones. Esta vez, en lugar de observando atributos en un elemento de diálogo, observaremos los elementos secundarios del cuerpo y observa si se eliminan los elementos de diálogo.

…
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 mutaciones cada vez que se agregan o quitan elementos secundarios en el cuerpo del documento. Las mutaciones específicas que se observan son removedNodes que incluyen nodeName de un diálogo. Si se quitó un diálogo, los eventos de clic y cierre se quitan de liberar memoria, y el evento de eliminación personalizado se despacha.

Quita el atributo de carga

Para evitar que la animación del diálogo reproduzca su animación de salida cuando se la agregue a la página o cuando se carga la página, se agregó un atributo de carga al cuadro de diálogo. El siguiente secuencia de comandos espera a que terminen de ejecutarse las animaciones del diálogo y, luego, quita el atributo. Ahora el diálogo está libre para entrar y salir, y para ocultar de manera efectiva una animación que de otro modo distraería.

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 durante la carga de página aquí.

Todo junto

Ahora que explicamos cada sección, aquí está dialog.js completo. individualmente:

// 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')
}

Cómo usar el módulo dialog.js

Se espera que se llame a la función exportada del módulo y se la pase un diálogo al que se le deben agregar estos nuevos eventos y funcionalidades:

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 descarte claro, animación cargando correcciones y más eventos con los que trabajar.

Escucha los nuevos eventos personalizados

Cada elemento de diálogo actualizado ahora puede escuchar cinco eventos nuevos, como este:

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

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

MegaDialog.addEventListener('removed', dialogRemoved)

A continuación, se incluyen 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 los datos del formulario para agregar un nuevo elemento de avatar a la lista. Es un buen momento que el diálogo completó su animación de salida, y luego se animan algunas secuencias de comandos en el nuevo avatar. Gracias a los nuevos eventos, se organiza la experiencia del usuario puede ser más fluido.

Observa dialog.returnValue, que contiene la cadena de cierre que se pasa cuando el valor diálogo close(). En el evento dialogClosed, es fundamental lograr lo siguiente: saber si el diálogo se cerró, canceló o confirmó. Si está confirmada, el secuencia de comandos toma los valores del formulario y lo restablece. El restablecimiento es útil para 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?‽ 🙂

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

Crear una demostración, twittearme vínculos y la agregaré. a la sección de remixes de la comunidad.

Remixes de la comunidad

• @GrimLink con un 3-in-1 .
• @mikemai2awesome con un un remix que no cambia la propiedad display.
• @geoffrich_ con Elegante y agradable Pulido elegante FLIP.

Recursos

• Código fuente en GitHub
• Avatares de garabatos