Utilizzo dell'API DModal per rendere finestre Modal (nota anche come pop-up/dialoghi) in Discourse

[Discourse]

Discourse 3.1.0.beta6 include una nuovissima API basata sul componente DModal.

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

Rendering di un Modale

I modali vengono renderizzati includendo il componente DModal in un template handlebars. Se non hai già un template adatto, consulta Using Plugin Outlet Connectors from a Theme or Plugin.

Un modale semplice sarebbe simile a questo:

<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}}

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

Questo esempio creerà un semplice Modale come questo:

Includere in un componente

Prima di introdurre ulteriore complessità, è solitamente meglio racchiudere il tuo nuovo Modale nella sua definizione di Componente. Spostiamo le cose di DModal all’interno di un nuovo componente <MyModal />

{{! components/my-modal.hbs }}
<DModal @title="My Modal" @closeModal={{@closeModal}}>
  Hello world, this is some content in a modal
</DModal>

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

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

<DButton
  @translatedLabel="Show Modal"
  @action={{fn (mut this.modalIsVisible) true}}
/>

{{#if this.modalIsVisible}}
  <MyModal @closeModal={{fn (mut this.modalIsVisible) false}} />
{{/if}}

Aggiungere un piè di pagina

Molti modali hanno un qualche tipo di call-to-action. In Discourse questi tendono ad essere posizionati in fondo al modale. Per rendere ciò possibile, DModal ha un numero di ‘blocchi nominati’ che possono avere contenuto renderizzato al loro interno. Ecco l’esempio aggiornato per includere due pulsanti nel piè di pagina, uno dei quali è il nostro standard pulsante 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>

Rendering di un modale da un contesto non-hbs

Idealmente, le istanze di DModal dovrebbero essere renderizzate da 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 un modale dai sistemi di rendering legacy ‘raw-hbs’ o ‘widget’ di Discourse), allora può essere fatto iniettando il servizio modal e chiamando modal.show().

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

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

// (inject the modal service in the relevant place)

// Add this call whenever you want to open the modal.
// A `@closeModal` argument will be passed to your component automatically.
this.modal.show(MyModal);

// Optionally, pass a '`model`' parameter. Passed as `@model` to your component.
// This can include data, and also actions/callbacks for your Modal to use.
this.modal.show(MyModal, {
  model: { topic: this.topic, someAction: this.someAction },
});

// `modal.show()` returns a promise, so you can wait for it to be closed
// It will resolve with the data passed to the `@closeModal` action
const result = await this.modal.show(MyModal);

Più personalizzazione!

DModal ha un numero di blocchi nominati e argomenti. Consulta la styleguide interattiva per gli argomenti e l’implementazione del template d-modal per i blocchi nominati.

---

Questo documento è controllato in versione - suggerisci modifiche su github.