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

[Discourse]

Discourse 3.1.0.beta6 incluye una nueva API basada en el componente <DModal>.

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="Show Modal"
  @action={{fn (mut this.modalIsVisible) true}}
/>

{{#if this.modalIsVisible}}
  <DModal @title="My Modal" @closeModal={{fn (mut this.modalIsVisible) false}}>
    Hello world, this is some content in a modal
  </DModal>
{{/if}}

El mut helper 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 las cosas de <DModal> dentro de un nuevo componente <MyModal />.

{{! components/my-modal.hbs }}
<DModal @title="My Modal" @closeModal={{@closeModal}}>
  Hello world, this is some content in a 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 lo referencie, asegurándote de pasar un argumento @closeModal.

<DButton
  @translatedLabel="Show 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, estas 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í tienes 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="My Modal" @closeModal={{@closeModal}}>
  <:body>
    Hello world, this is some content in a modal
  </:body>
  <:footer>
    <DButton class="btn-primary" @translatedLabel="Submit" />
    <DModalCancel @close={{@closeModal}} />
  </:footer>
</DModal>

Renderizar un modal desde un contexto que no es hbs

Idealmente, las instancias de <DModal> deberían renderizarse desde dentro de 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 heredados ‘raw-hbs’ o ‘widget’ de Discourse), entonces 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 describe anteriormente. Luego, activa el modal pasando una referencia de la clase de tu 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 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 una serie de bloques y argumentos nombrados. Consulta la guía de estilo interactiva para ver los argumentos y la implementación de la plantilla d-modal para los bloques nombrados.

---

Este documento está controlado por versiones. Sugiere cambios en github.