Diese neue API, die in Discourse 2.3 eingeführt wird, ermöglicht es Ihnen, am Ende eines Themas Schaltflächen entweder als Inline-Schaltflächen oder in {{topic-footer-mobile-dropdown}} hinzuzufügen, ohne die Logik duplizieren zu müssen.
Verwendung
api.registerTopicFooterButton({
// ID der Schaltfläche (erforderlich)
id: null,
// Auf der Schaltfläche angezeigtes Symbol
icon: null,
// Lokaler Schlüssel-Pfad für das Titel-Attribut
title: null,
// Bereits übersetzter Titel
translatedTitle: null,
// Lokaler Schlüssel-Pfad für die Beschriftung
label: null,
// Bereits übersetzte Beschriftung
translatedLabel: null,
// Wird diese Schaltfläche im mobilen Dropdown-Menü oder als Inline-Schaltfläche angezeigt?
dropdown: false,
// CSS-Klasse, die an die Schaltfläche angehängt wird
classNames: [],
// Abgeleitete Eigenschaften, die eine Aktualisierung des Schaltflächenzustands erzwingen
// z. B. ["topic.bookmarked", "topic.category_id"]
dependentKeys: [],
// Sollen wir diese Schaltfläche anzeigen?
displayed: true,
// Ist diese Schaltfläche deaktiviert?
disabled: false,
// Anzeigereihenfolge: Höhere Werte werden zuerst angezeigt
priority: 0
}
);
Alle Schlüssel außer id können entweder ein Wert oder eine Funktion sein:
icon: "user"
icon() {
// Hier ist dies der Kontext der Komponente topic-footer-buttons
// sodass Sie beispielsweise auf das Topic-Modell oder this.site zugreifen können
return this.get("topic.some_icon_variable");
}
Fokus auf dependentKeys
Betrachten Sie dependentKeys als alle abgeleiteten Eigenschaften, die Sie zum Erstellen Ihrer Schaltfläche benötigen. Die Schaltflächen werden neu gerendert, wenn einer dieser Schlüssel geändert wird. Grundsätzlich sollte jedes Mal, wenn Sie beim Definieren Ihrer Schaltfläche this.get("something") ausführen, something in dependentKeys enthalten sein.
Fokus auf dropdown
Der Schlüssel dropdown ermöglicht es Ihnen zu definieren, ob Ihre Schaltfläche inline oder in {{topic-footer-mobile-dropdown}} hinzugefügt werden soll.
Als Beispiel würde eine Implementierung, die eine Schaltfläche auf dem Desktop inline und im Dropdown-Menü auf mobilen Geräten erstellt, wie folgt funktionieren:
dropdown() { return this.site.mobileView; }
Hinweis: Derzeit wird das Dropdown-Menü ohnehin nur auf mobilen Geräten angezeigt. Dies ist daher höchstwahrscheinlich nützlich, wenn Sie es niemals im Dropdown-Menü anzeigen möchten, oder wenn Sie in einigen Fällen die Desktop-Ansicht erzwingen wollen, während die mobile Ansicht dargestellt wird.