api.addPostMenuButton com condições

Dev
1

Em primeiro lugar, peço desculpas pelo meu inglês precário.
Quero adicionar um botão “Mostrar mais…”.
A postagem na imagem abaixo consiste em 10 linhas de texto, mas apenas 5 linhas são exibidas.

O usuário pode ver o texto completo clicando em Mostrar mais.

image
image780×200 2.85 KB

Este botão deve ser ramificado para dar ou não um botão, dependendo da altura da parte cozida de cada postagem ou do número de linhas.

image
image789×159 2.13 KB

Não sei como ramificar usando api.addPostMenuButton, então atualmente até mesmo uma pequena postagem com apenas uma linha como a seguinte recebe este botão.

Isso não é muito desejável para mim.

Estou pensando que o ramal condicional deve ser capaz de obter a altura do COZIDO ou o número de linhas (ou caracteres).
Consultei a documentação, mas não encontrei nenhuma opção para api.addPostMenuButton.
Qualquer ajuda seria muito apreciada.

1 curtida
2

O método api.addPostMenuButton se preocupa apenas com o valor que você retorna. Esse valor precisa ser um objeto. Qualquer coisa que você faça antes desse return não importa. O botão será renderizado para cada postagem, e o método lhe dá o objeto post que você pode usar para o seu trabalho.

Por exemplo, digamos que eu queira que o botão apareça apenas em postagens com mais de 300 palavras. Posso fazer algo assim.

common > header

<script type="text/discourse-plugin" version="0.8">
  const MIN_WORD_COUNT = 300;

  api.addPostMenuButton("myButton", (post) => {
    // você pode registrar as propriedades do post para ver com o que você tem para trabalhar
    // console.log(post);

    // exemplo
    const roughWordCount = post.cooked.match(/\S+/g).length;

    if (roughWordCount < MIN_WORD_COUNT) {
      // o botão não será renderizado
      return;
    }

    // o botão será renderizado, crie o objeto de retorno
    const result = {
      action: SOME_ACTION,
      icon: ICON_NAME,
      title: TITLE_TRANSLATION_KEY,
      className: CLASSNAMES,
      position: "first", // pode ser `first`, `last` ou `second-last-hidden`
    };

    // adicione um rótulo se estiver no desktop
    if (!post.mobileView) {
      result.label = LABLE_TRANSLATION_KEY;
    }

    // retorne o objeto
    return result;
  });
</script>

Altere as coisas em maiúsculas para dados reais e experimente em uma postagem com mais de 300 palavras. Você verá que ele é renderizado lá.