Botões de rodapé do item da lista de tópicos - conteúdo da linha do tempo

Dev
1

Olá! Estou trabalhando no conceito de conteúdo “timeline” em uma comunidade com o Discourse.

Screen Shot 2020-09-21 at 14.56.13
Screen Shot 2020-09-21 at 14.56.13858×878 41.2 KB

Ambos os botões “Responder a” e “Compartilhar” são para teste. Criei um componente como topic-footer-buttons.hbs (#ember) com algumas alterações

<div class="topic-list-item-footer-buttons">
  {{#each inlineButtons as |button|}}
    {{d-button
      class=(concat "btn-default topic-list-item-footer-buttons " button.classNames)
      action=button.action
      icon=button.icon
      translatedLabel=button.label
      translatedTitle=button.title
      translatedAriaLabel=button.ariaLabel
      disabled=button.disabled}}
  {{/each}}
</div>

Se eu inserir este componente no topic-list.hbs abaixo do template topic-list-item, ele funciona! Mas isso é ruim para futuras atualizações do Discourse ou implementação de plugins. Então, estou tentando manipular via Admin → Personalizar → Geral → Cabeçalho (HTML), alterando topic-list-item.raw.

<script type="text/x-handlebars" data-template-name="list/topic-list-item.raw">

Mas outro problema surgiu: não estou conseguindo chamar o componente a partir do template text/x-handlebars. Existe alguma maneira de chamar meu componente de botões de rodapé dentro do template topic-list-item.raw? Como um helper ou widget que pudesse chamar o componente internamente?

Eu agradeceria sua ajuda para que eu possa eliminar minhas dúvidas de uma vez por todas.

2

A maneira como lidei com isso no passado foi encapsulando os botões em um helper de HTML, que renderiza o HTML bruto nos templates brutos, os quais você pode então inserir por meio de um plugin outlet bruto. Aqui está um exemplo:

https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/helpers/preview-helpers.js.es6#L8

O clique no botão é tratado no componente topic-list-item, por exemplo:

https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/initializers/preview-edits.js.es6#L332

@merefield também pode ter algumas ideias :slight_smile:

Além disso, você provavelmente deverá usar a estrutura de pastas de JavaScript do tema em vez de adicionar scripts ao header.html. Veja:

3

Percebi que o commit mais recente em preview-edits removeu esse evento de clique FIX: remove topic list item click event to prevent transition conflict · merefield/discourse-topic-previews-sidecar@6064a59 · GitHub. Ainda há alguma maneira de fazer com que o clique no botão seja tratado pelo componente topic-list-item?

4

Sim, @angus, isso não é mais recomendado, na minha opinião — estava causando um pequeno susto no Ember, então eu removi do TLP. Quando você tem dois eventos de clique simultâneos, por exemplo, ao clicar no título do tópico que, por sua vez, possui um link, o navegador acaba realizando uma atualização completa da página, o que claramente não é o que se deseja em uma OPA. Isso foi relatado por vários usuários.

No TLP, por enquanto, você precisa clicar no Título, no Resumo ou na Miniatura.

Você deve garantir que haja apenas uma área clicável de cada vez — áreas sobrepostas vão causar problemas.