Como posso obter a lista de tags do tópico atualmente aberto?

Dev
1

Olá!

Estou tentando criar um componente de tema que adiciona um botão personalizado aos tópicos marcados. Por exemplo: Tópicos marcados com event-tag terão um botão ao lado da categoria chamado Evento que levará para a página de eventos.

Descobri onde gostaria de adicionar o botão (através do plugin-outlet topic-category) através deste guia: Developing Discourse Themes & Theme Components

e atualmente tenho isto:

<script type="text/x-handlebars" data-template-name="/connectors/topic-category/foobar2">
    <div style="height: 25px; width: 25px;background: red">
      <a href="<events_URL>" target="_blank">Link</a>
    </div>
  </script>

Então, minha pergunta é, como posso verificar a lista de tags do tópico para ver se o script acima deve adicionar um botão ou não?

2

Ok, um pouco de progresso:

Descobri que se eu usar o modifyClass assim:

<script type="text/discourse-plugin" version="0.8">
    api.modifyClass("component:topic-category", {
      didInsertElement: function() {
        this._super();
        console.log("Welcome to the topics page!")
      }
    });
    </script>

Eu consigo chegar à página do tópico e obter uma resposta dizendo “welcome”, mas ainda não tenho certeza de como posso extrair as tags da página atual para ver se devo popular o botão ou não..

3

Ah, encontrei a solução.

Continuei relendo isto: Developing Discourse Themes & Theme Components

e descobri que se eu apenas console.log(this) ele conseguia despejar todos os dados da página, incluindo tags. Acho que posso seguir a partir daqui extraindo os dados das tags na página e verificando se estão nas configurações ou não. Assim que eu polir isso e achar que está pronto para o público, postarei na categoria de componentes de tema. Só pensei em compartilhar minhas descobertas caso mais alguém esteja aprendendo a criar componentes de tema!

4

Apenas para informação, o código para obter a lista de tags neste contexto seria:

<script type="text/discourse-plugin" version="1.4.0">
    api.modifyClass("component:topic-category", {
      pluginId: "returnTags",
      didInsertElement: function() {
        this._super();
        console.log(this.topic.tags)
      }
    });
</script>

Retorna:

image
image210×102 1.7 KB

:information_source: (pluginId é necessário para evitar um aviso)