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

[Discourse]

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

Esto reemplaza la API anterior 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. 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, generalmente es mejor envolver tu nuevo Modal en su propia definición de Componente. Moveremos las cosas de <DModal> dentro 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>

Introducir 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 hacer esto posible, DModal tiene una serie de ‘bloques nombrados’ 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> deberían 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)

// Añade esta llamada siempre 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 tu Modal los utilice.
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 versión: sugiere cambios en github.