Usando la API DModal para renderizar ventanas modales (también conocidas como popups/diálogos) en Discourse

[Discourse]

Discourse 3.1.0.beta6 se lanza con una API basada en componentes <DModal> completamente nueva.

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

Renderizar 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 algo de contenido en 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 utilizando 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, generalmente es mejor envolver tu nuevo Modal en su propia definición de Componente. Moveremos el código <DModal> al interior de un nuevo componente <MyModal />

{{! components/my-modal.hbs }}
<DModal @title="Mi Modal" @closeModal={{@closeModal}}>
  Hola mundo, este es algo de contenido en un modal
</DModal>

La introducción de un archivo de componente .js complementario te permitirá introducir lógica y estado más complejos.

Para utilizar el nuevo componente, actualiza el sitio de llamada para que haga referencia a él, 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}}

Añadir un pie de página

Muchos modales tienen algún tipo de llamada a la acción. En Discourse, estos tienden a ubicarse en la parte inferior del modal. Para hacerlo posible, DModal tiene una serie de ‘bloques con nombre’ en los que se puede renderizar contenido. 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 algo de contenido en un modal
  </:body>
  <:footer>
    <DButton class="btn-primary" @translatedLabel="Enviar" />
    <DModalCancel @close={{@closeModal}} />
  </:footer>
</DModal>

Renderizar un modal desde un contexto que no es hbs

Idealmente, las instancias de <DModal> deben renderizarse desde una plantilla handlebars de Ember utilizando la técnica declarativa demostrada anteriormente. Si eso no es factible para tu caso de uso (por ejemplo, necesitas activar un modal desde los sistemas de renderizado ‘raw-hbs’ o ‘widget’ heredados de Discourse), se puede hacer inyectando el servicio modal y llamando a modal.show().

Asegúrate de haber envuelto 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";

// (inyecta el servicio modal en el lugar relevante)

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

// Opcionalmente, pasa un parámetro '`model`'. Se pasa como `@model` a tu componente.
// Esto puede incluir datos y también acciones/callbacks para que los use tu Modal.
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 una serie de bloques y argumentos con nombre. Consulta la guía de estilo interactiva para ver los argumentos, y la implementación de la plantilla d-modal para ver los bloques con nombre.

---

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