Questa nuova API, introdotta in Discourse 2.3, ti consentirà di aggiungere pulsanti nella parte inferiore di un argomento come pulsanti in linea o all’interno di {{topic-footer-mobile-dropdown}}, senza dover duplicare la logica.
Utilizzo
api.registerTopicFooterButton({
// ID del pulsante, obbligatorio
id: null,
// Icona visualizzata sul pulsante
icon: null,
// Percorso della chiave locale per l'attributo titolo
title: null,
// Titolo già tradotto
translatedTitle: null,
// Percorso della chiave locale per l'etichetta
label: null,
// Etichetta già tradotta
translatedLabel: null,
// Questo pulsante viene visualizzato nel menu a tendina mobile o come pulsante in linea?
dropdown: false,
// Classe CSS aggiunta al pulsante
classNames: [],
// Proprietà calcolate che devono forzare un aggiornamento dello stato del pulsante
// ad esempio: ["topic.bookmarked", "topic.category_id"]
dependentKeys: [],
// Dobbiamo visualizzare questo pulsante?
displayed: true,
// Questo pulsante è disabilitato?
disabled: false,
// Ordine di visualizzazione, quelli con priorità più alta appaiono per primi
priority: 0
}
);
Tutte le chiavi, tranne id, possono essere un valore o una funzione:
icon: "user"
icon() {
// Qui 'this' è il contesto del componente topic-footer-buttons
// permettendoti di accedere
// al modello dell'argomento o a this.site, ad esempio
return this.get("topic.some_icon_variable");
}
Focus su dependentKeys
Considera dependentKeys come tutte le proprietà calcolate necessarie per costruire il tuo pulsante. I pulsanti verranno ridisegnati quando una di queste chiavi cambia. Fondamentalmente, ogni volta che esegui this.get("something") durante la definizione del tuo pulsante, something dovrebbe essere incluso in dependentKeys.
Focus su dropdown
La chiave dropdown ti permetterà di definire se vuoi che il tuo pulsante venga aggiunto in linea o all’interno di {{topic-footer-mobile-dropdown}}.
Ad esempio, un’implementazione che crea un pulsante in linea su desktop e nel menu a tendina su mobile si comporterebbe così:
dropdown() { return this.site.mobileView; }
Nota: al momento il menu a tendina verrà visualizzato solo su mobile. Quindi questo è probabilmente utile se non vuoi mai mostrarlo nel menu a tendina o se vuoi forzare la visualizzazione desktop in alcuni casi quando si presenta la vista mobile.