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 apparirà più o meno 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 è un contenuto in una modale
  \u003c/DModal\u003e
{{/if}}

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

Questo esempio creerà una semplice Modale come questa:

Involucro in un componente

Prima di introdurre ulteriore complessità, è solitamente 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 è un contenuto in una modale
\u003c/DModal\u003e

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

Per utilizzare il nuovo componente, aggiorna il punto 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 invito all’azione. In Discourse questi tendono ad essere posizionati nella parte inferiore della modale. Per rendere ciò possibile, DModal ha una serie di ‘blocchi nominati’ (named blocks) in cui può essere renderizzato 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 è un contenuto in 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), allora può essere fatto 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 modal 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 usare 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 una serie 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 tramite 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