Usando a API DModal para renderizar janelas de Modal (também conhecidas como popups/diálogos) no Discourse

[Discourse]

Discourse 3.1.0.beta6 inclui uma API totalmente nova baseada em componentes \u003cDModal\u003e.

Isso substitui a antiga API baseada em controllers, que agora está obsoleta. Se você tem modais existentes usando as APIs antigas, consulte o guia de migração aqui.

Renderizando um Modal

Modais são renderizados incluindo o componente \u003cDModal\u003e em um template handlebars. Se você ainda não tem um template adequado, consulte Using Plugin Outlet Connectors from a Theme or Plugin.

Um modal simples seria algo assim:

\u003cDButton
  @translatedLabel="Mostrar Modal"
  @action={{fn (mut this.modalIsVisible) true}}
/\u003e

{{#if this.modalIsVisible}}
  \u003cDModal @title="Meu Modal" @closeModal={{fn (mut this.modalIsVisible) false}}\u003e
    Olá mundo, este é algum conteúdo em um modal
  \u003c/DModal\u003e
{{/if}}

O helper mut é usado aqui como uma maneira exclusiva de hbs para definir um valor. Você também pode definir modalIsVisible usando qualquer outro método Ember padrão.

Este exemplo criará um Modal simples como este:

Envolvendo em um componente

Antes de introduzir mais complexidade, geralmente é melhor encapsular seu novo Modal em sua própria definição de Componente. Vamos mover o conteúdo \u003cDModal\u003e para dentro de um novo componente \u003cMyModal /\u003e

{{! components/my-modal.hbs }}
\u003cDModal @title="Meu Modal" @closeModal={{@closeModal}}\u003e
  Olá mundo, este é algum conteúdo em um modal
\u003c/DModal\u003e

A introdução de um arquivo de componente .js complementar permitirá que você introduza lógica e estado mais complexos.

Para usar o novo componente, atualize o local de chamada para referenciá-lo, certificando-se de passar um argumento @closeModal.

\u003cDButton
  @translatedLabel="Mostrar Modal"
  @action={{fn (mut this.modalIsVisible) true}}
/\u003e

{{#if this.modalIsVisible}}
  \u003cMyModal @closeModal={{fn (mut this.modalIsVisible) false}} /\u003e
{{/if}}

Adicionando um rodapé

Muitos modais têm algum tipo de chamada para ação. No Discourse, estes tendem a estar localizados na parte inferior do modal. Para tornar isso possível, DModal tem vários ‘blocos nomeados’ nos quais o conteúdo pode ser renderizado. Aqui está o exemplo atualizado para incluir dois botões no rodapé, um dos quais é nosso botão padrão DModalCancel

\u003cDModal @title="Meu Modal" @closeModal={{@closeModal}}\u003e
  \u003c:body\u003e
    Olá mundo, este é algum conteúdo em um modal
  \u003c/:body\u003e
  \u003c:footer\u003e
    \u003cDButton class="btn-primary" @translatedLabel="Enviar" /\u003e
    \u003cDModalCancel @close={{@closeModal}} /\u003e
  \u003c/:footer\u003e
\u003c/DModal\u003e

Renderizando um modal a partir de um contexto não-hbs

Idealmente, as instâncias \u003cDModal\u003e devem ser renderizadas a partir de um template Ember handlebars usando a técnica declarativa demonstrada acima. Se isso não for viável para o seu caso de uso (por exemplo, você precisa acionar um modal dos sistemas de renderização ‘raw-hbs’ ou ‘widget’ legados do Discourse), isso pode ser feito injetando o serviço modal e chamando modal.show().

Certifique-se de ter encapsulado seu modal em seu próprio componente, conforme descrito acima. Em seguida, acione o modal passando uma referência da sua classe de componente para showModal:

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

// (injete o serviço modal no local relevante)

// Adicione esta chamada sempre que quiser abrir o modal.
// Um argumento `@closeModal` será passado para o seu componente automaticamente.
this.modal.show(MyModal);

// Opcionalmente, passe um parâmetro '`model`'. Passado como `@model` para o seu componente.
// Isso pode incluir dados e também ações/callbacks para o seu Modal usar.
this.modal.show(MyModal, {
  model: { topic: this.topic, someAction: this.someAction },
});

// `modal.show()` retorna uma promise, então você pode esperar que ela seja fechada
// Ela será resolvida com os dados passados para a ação `@closeModal`
const result = await this.modal.show(MyModal);

Mais customização!

\u003cDModal\u003e tem vários blocos nomeados e argumentos. Consulte o guia de estilo interativo para argumentos e a implementação do template d-modal para blocos nomeados.

---

\u003csmall\u003eEste documento é controlado por versão - sugira alterações no github.\u003c/small\u003e

\u003c!-- START DOCS ASSET MAP
[
{
"local_path": "/assets/dmodal-api-1.png",
"local_sha1": "8dfd8ffa18409fdcac56e95e0f37e3b2c81af61e",
"remote_short_url": "upload://9eKVimqNmM9Q4apSPWsWrImfmQt.png"
},
{
"local_path": "/assets/dmodal-api-2.png",
"local_sha1": "9e6b3ae3a40c9934fa89cea18d42a1138e9248d3",
"remote_short_url": "upload://yp2hfxwO9dNjAJtUnGU89azmz63.png"
}
]
END DOCS ASSET MAP –\u003e