Usando la API de DModal para renderizar ventanas modales (también llamadas popups/dialogos) en Discourse

[Discourse]

Discourse 3.1.0.beta6 incluye una nueva API basada en componentes DModal.

Esto reemplaza a la antigua API basada en controladores, que ahora está obsoleta. Si tienes modales existentes que utilizan las APIs antiguas, consulta la guía de migración aquí.

Renderizado de un modal

Los modales se renderizan incluyendo el componente DModal en una plantilla Handlebars. Si aún no tienes una plantilla adecuada, consulta Using Plugin Outlet Connectors from a Theme or Plugin.

Un modal simple se vería algo así:

<DButton
  @translatedLabel="Mostrar modal"
  @action={{fn (mut this.modalIsVisible) true}}
/>

{{#if this.modalIsVisible}}
  <DModal @title="Mi modal" @closeModal={{fn (mut this.modalIsVisible) false}}>
    Hola mundo, este es un contenido dentro de un modal
  </DModal>
{{/if}}

El helper mut se utiliza aquí como una forma exclusiva de HBS para establecer un valor. También podrías establecer modalIsVisible usando cualquier otro método estándar de Ember.

Este ejemplo creará un modal simple como este:

Envolver en un componente

Antes de introducir más complejidad, lo mejor suele ser encapsular tu nuevo modal en su propia definición de componente. Vamos a mover el contenido de DModal dentro de un nuevo componente MyModal.

// components/my-modal.gjs
<template>
  <DModal @title="Mi modal" @closeModal={{@closeModal}}>
    Hola mundo, este es un contenido dentro de un modal
  </DModal>
</template>

Actualizar este archivo .gjs a un componente basado en clases te permitirá introducir lógica y estado más complejos.

Para aprovechar el nuevo componente, actualiza el sitio de llamada para referenciarlo, asegurándote de pasar un argumento @closeModal.

<DButton
  @translatedLabel="Mostrar modal"
  @action={{fn (mut this.modalIsVisible) true}}
/>

{{#if this.modalIsVisible}}
  <MyModal @closeModal={{fn (mut this.modalIsVisible) false}} />
{{/if}}

Agregar un pie de página

Muchos modales incluyen algún tipo de llamada a la acción. En Discourse, estos suelen ubicarse en la parte inferior del modal. Para hacer esto posible, DModal tiene varios “bloques con nombre” que pueden tener contenido renderizado dentro de ellos. Aquí está el ejemplo actualizado para incluir dos botones en el pie de página, uno de los cuales es nuestro botón estándar DModalCancel.

<DModal @title="Mi modal" @closeModal={{@closeModal}}>
  <:body>
    Hola mundo, este es un contenido dentro de un modal
  </:body>
  <:footer>
    <DButton class="btn-primary" @translatedLabel="Enviar" />
    <DModalCancel @close={{@closeModal}} />
  </:footer>
</DModal>

Renderizado de un modal desde un contexto no HBS

Idealmente, las instancias de DModal deben renderizarse desde dentro de una plantilla de Ember utilizando la técnica declarativa demostrada anteriormente. Si eso no es factible para tu caso de uso, se puede hacer inyectando el servicio modal y llamando a modal.show().

Asegúrate de haber encapsulado tu modal en su propio componente como se describió anteriormente. Luego, activa el modal pasando una referencia de tu clase de componente a showModal:

import MyModal from "discourse/components/my-modal";

// (inyectar el servicio modal en el lugar correspondiente)

// Agrega esta llamada cada vez que quieras abrir el modal.
// Un argumento `@closeModal` se pasará automáticamente a tu componente.
this.modal.show(MyModal);

// Opcionalmente, pasa un parámetro `model`. Se pasará como `@model` a tu componente.
// Esto puede incluir datos, así como acciones/callbacks para que tu modal los use.
this.modal.show(MyModal, {
  model: { topic: this.topic, someAction: this.someAction },
});

// `modal.show()` devuelve una promesa, por lo que puedes esperar a que se cierre.
// Se resolverá con los datos pasados a la acción `@closeModal`.
const result = await this.modal.show(MyModal);

¡Más personalización!

DModal tiene varios bloques con nombre y argumentos. Consulta la guía de estilos interactiva para los argumentos y la implementación de plantilla d-modal para los bloques con nombre.

---

Este documento está controlado por versiones: sugiere cambios en GitHub.