Cette nouvelle API, introduite dans Discourse 2.3, vous permettra d’ajouter des boutons en bas d’un sujet, soit sous forme de boutons en ligne, soit dans {{topic-footer-mobile-dropdown}}, sans avoir à dupliquer la logique.
Utilisation
api.registerTopicFooterButton({
// identifiant du bouton, obligatoire
id: null,
// icône affichée sur le bouton
icon: null,
// chemin de clé locale pour l'attribut title
title: null,
// titre déjà traduit
translatedTitle: null,
// chemin de clé locale pour l'étiquette
label: null,
// étiquette déjà traduite
translatedLabel: null,
// ce bouton est-il affiché dans le menu déroulant mobile ou en tant que bouton en ligne ?
dropdown: false,
// classe CSS ajoutée au bouton
classNames: [],
// propriétés calculées qui doivent forcer une actualisation de l'état du bouton
// par exemple : ["topic.bookmarked", "topic.category_id"]
dependentKeys: [],
// devons-nous afficher ce bouton ?
displayed: true,
// ce bouton est-il désactivé ?
disabled: false,
// ordre d'affichage, plus élevé signifie affiché en premier
priority: 0
}
);
Toutes les clés, sauf id, peuvent être soit une valeur, soit une fonction :
icon: "user"
icon() {
// ici, 'this' fait référence au contexte du composant topic-footer-buttons
// vous permettant d'accéder
// au modèle du sujet ou à this.site, par exemple
return this.get("topic.some_icon_variable");
}
Focus sur dependentKeys
Considérez dependentKeys comme l’ensemble des propriétés calculées nécessaires à la construction de votre bouton. Les boutons seront redessinés lorsque l’une de ces clés sera modifiée. Fondamentalement, chaque fois que vous utilisez this.get("quelque chose") lors de la définition de votre bouton, quelque chose doit figurer dans dependentKeys.
Focus sur dropdown
La clé dropdown vous permet de définir si vous souhaitez que votre bouton soit ajouté en ligne ou dans {{topic-footer-mobile-dropdown}}.
Par exemple, une implémentation créant un bouton en ligne sur ordinateur de bureau et dans le menu déroulant sur mobile se comporterait comme suit :
dropdown() { return this.site.mobileView; }
Remarque : pour le moment, le menu déroulant n’est affiché que sur mobile de toute façon. Cela est donc probablement utile si vous ne souhaitez jamais l’afficher dans le menu déroulant, ou si vous voulez forcer l’affichage sur ordinateur de bureau dans quelques cas lors de la présentation de la vue mobile.