Esta nova API que chegará no Discourse 2.3 permitirá que você adicione botões na parte inferior de um tópico como botões inline ou no {{topic-footer-mobile-dropdown}}, sem precisar duplicar a lógica.
Uso
api.registerTopicFooterButton({
// id do botão, obrigatório
id: null,
// ícone exibido no botão
icon: null,
// caminho da chave local para o atributo de título
title: null,
// título já traduzido
translatedTitle: null,
// caminho da chave local para o rótulo
label: null,
// rótulo já traduzido
translatedLabel: null,
// este botão é exibido no menu suspenso móvel ou como um botão inline?
dropdown: false,
// classe CSS adicionada ao botão
classNames: [],
// propriedades computadas que devem forçar uma atualização do estado do botão
// ex: ["topic.bookmarked", "topic.category_id"]
dependentKeys: [],
// devemos exibir este botão?
displayed: true,
// este botão está desabilitado?
disabled: false,
// ordem de exibição, maior vem primeiro
priority: 0
}
);
Todas as chaves, exceto id, podem ser um valor ou uma função:
icon: "user"
icon() {
// aqui o contexto é o componente topic-footer-buttons
// permitindo que você acesse
// o modelo do tópico ou this.site, por exemplo
return this.get("topic.some_icon_variable");
}
Foco em dependentKeys
Pense em dependentKeys como todas as propriedades computadas necessárias para construir seu botão. Os botões serão re-renderizados quando uma dessas chaves for alterada. Basicamente, sempre que você fizer this.get("algo") ao definir seu botão, “algo” deve estar em dependentKeys.
Foco em dropdown
A chave dropdown permitirá definir se você deseja que seu botão seja adicionado inline ou no {{topic-footer-mobile-dropdown}}.
Como exemplo, uma implementação que cria um botão inline no desktop e no menu suspenso no mobile se comportaria assim:
dropdown() { return this.site.mobileView; }
Nota: no momento, o menu suspenso só será exibido no mobile de qualquer forma. Portanto, isso provavelmente será útil se você nunca quiser mostrá-lo no menu suspenso ou se quiser forçar a exibição no desktop em alguns casos ao apresentar a visualização móvel.