Utilizzo dell'API DModal per renderizzare finestre Modali (alias popup/dialoghi) in Discourse

[Discourse]

Discourse 3.1.0.beta6 include una nuovissima API basata su componenti \u003cDModal\u003e.

Questo sostituisce la vecchia API basata su controller, che ora è deprecata. Se hai modali esistenti che utilizzano le vecchie API, consulta la guida alla migrazione qui.

Rendering di una Modale

Le modali vengono renderizzate includendo il componente \u003cDModal\u003e in un template handlebars. Se non hai ancora un template adatto, consulta Using Plugin Outlet Connectors from a Theme or Plugin.

Una modale semplice apparirebbe così:

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

{{#if this.modalIsVisible}}
  \u003cDModal @title="La Mia Modale" @closeModal={{fn (mut this.modalIsVisible) false}}\u003e
    Ciao mondo, questo è il contenuto di una modale
  \u003c/DModal\u003e
{{/if}}

L’helper mut è usato qui come modo esclusivo per hbs per impostare un valore. Potresti anche impostare modalIsVisible utilizzando qualsiasi altro metodo Ember standard.

Questo esempio creerà una modale semplice come questa:

Involucro in un Componente

Prima di introdurre ulteriore complessità, di solito è meglio racchiudere la nuova Modale nella sua definizione di Componente. Spostiamo il codice \u003cDModal\u003e all’interno di un nuovo componente \u003cMyModal /\u003e

{{! components/my-modal.hbs }}
\u003cDModal @title="La Mia Modale" @closeModal={{@closeModal}}\u003e
  Ciao mondo, questo è il contenuto di una modale
\u003c/DModal\u003e

L’introduzione di un file di componente .js di accompagnamento ti consentirà di introdurre logica e stato più complessi.

Per utilizzare il nuovo componente, aggiorna il sito di chiamata per fare riferimento ad esso, assicurandoti di passare un argomento @closeModal.

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

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

Aggiunta di un piè di pagina

Molte modali hanno un qualche tipo di chiamata all’azione. In Discourse, queste tendono a trovarsi nella parte inferiore della modale. Per renderlo possibile, DModal ha un numero di ‘blocchi nominati’ in cui è possibile renderizzare contenuto. Ecco l’esempio aggiornato per includere due pulsanti nel piè di pagina, uno dei quali è il nostro pulsante standard DModalCancel

\u003cDModal @title="La Mia Modale" @closeModal={{@closeModal}}\u003e
  \u003c:body\u003e
    Ciao mondo, questo è il contenuto di una modale
  \u003c/:body\u003e
  \u003c:footer\u003e
    \u003cDButton class="btn-primary" @translatedLabel="Invia" /\u003e
    \u003cDModalCancel @close={{@closeModal}} /\u003e
  \u003c/:footer\u003e
\u003c/DModal\u003e

Rendering di una modale da un contesto non-hbs

Idealmente, le istanze di \u003cDModal\u003e dovrebbero essere renderizzate dall’interno di un template handlebars di Ember utilizzando la tecnica dichiarativa dimostrata sopra. Se ciò non è fattibile per il tuo caso d’uso (ad esempio, devi attivare una modale dai sistemi di rendering ‘raw-hbs’ o ‘widget’ legacy di Discourse), è possibile farlo iniettando il servizio modal e chiamando modal.show().

Assicurati di aver racchiuso la tua modale nel suo componente come descritto sopra. Quindi, attiva la modale passando un riferimento della tua classe componente a showModal:

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

// (inietta il servizio modale nel punto pertinente)

// Aggiungi questa chiamata ogni volta che vuoi aprire la modale.
// Un argomento `@closeModal` verrà passato automaticamente al tuo componente.
this.modal.show(MyModal);

// Opzionalmente, passa un parametro '`model`'. Passato come `@model` al tuo componente.
// Questo può includere dati e anche azioni/callback da utilizzare per la tua Modale.
this.modal.show(MyModal, {
  model: { topic: this.topic, someAction: this.someAction },
});

// `modal.show()` restituisce una promise, quindi puoi aspettare che venga chiusa
// Si risolverà con i dati passati all'azione `@closeModal`
const result = await this.modal.show(MyModal);

Più personalizzazione!

\u003cDModal\u003e ha un certo numero di blocchi nominati e argomenti. Controlla la styleguide interattiva per gli argomenti, e l’implementazione del template d-modal per i blocchi nominati.

---

\u003csmall\u003eQuesto documento è controllato in versione - suggerisci modifiche su 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