Não consigo adicionar nova classe aos elementos da página de tópico usando jQuery?

Dev
1

Estou com dificuldade para entender melhor como o Discourse funciona e ainda estou confuso após ler isto. Estou tentando adicionar um título dinâmico ao nome de usuário do administrador na página do post usando jQuery, mas não está funcionando.

Porém, se eu apontar, digamos, para a tag body e adicionar uma classe, funciona.
Então, alguém poderia explicar por que não está funcionando?
O código é inserido na aba de cabeçalho, a propósito.

<script>
  $(".names span.admin a").attr('title', 'Community Admin');
</script>

Preciso injetar isso em uma saída de plugin ou algo assim?

2

Provavelmente porque, neste caso, o jQuery não está se integrando bem ao pipeline de renderização do Ember e dos Widgets.

Veja, neste script, você não tem controle sobre quando isso é acionado e em relação ao estágio em que o aplicativo JavaScript está enquanto desenha a tela.

No entanto, existe um método da API de JavaScript para isso; veja mais aqui:

decorateWidget()

E este widget específico:

No entanto, antes de entrar nesse labirinto, vamos recuar um pouco: você só quer que um título seja exibido?

Por exemplo, nas postagens do Jeff:

image
image367×114 7.42 KB

Ele tem o título: “co-founder” (cofundador).

Basta criar um novo Grupo, adicionar os administradores, ir em Gerenciar → Associação e editar o Título Padrão.

Agora, eles podem selecionar esse título nas configurações da conta, em Preferências (ou você pode fazer isso por eles).

image
image994×551 14.4 KB

Você também pode usar isso para exibir um destaque especial no avatar (também demonstrado pela captura de tela acima).

Obviamente, se você não quiser que isso fique tão “fixo”, terá que seguir o caminho da programação, mas isso, tenho certeza de que você concorda, exige muito menos esforço.

5 curtidas
3

Obrigado pela sua ajuda. Não é o título real do fórum que estou procurando, mas para exibir um título ao passar o mouse sobre este ícone de coroa que criei (visível apenas para administradores):

image
image450×178 72.4 KB

Aliás, o código CSS para isso é:

.names span.admin a::after {
content: "";
width: 17px;
height: 14px;
margin-left: 5px;
background-image: url(https://www.dropbox.com/s/0oi0y3ex3rtfvk5/cd-crown.svg?raw=1);
background-repeat: none;
display: inline-block;
position: relative;
4

Legal.

Parece que você pode querer considerar o caminho do widget.

Considere também este método da API:

api.reopenWidget("poster-name", {

      html() {
          <<seu-código-aqui-mas-considere-usar-o-original-como-modelo>>
      }
}

Recomendo que você consulte: A tour of how the Widget (Virtual DOM) code in Discourse works

Fazer esse tipo de coisa no Discourse exige significativamente mais esforço, pois ele é um aplicativo web automático e mágico, mas, uma vez que você faça da maneira correta, a solução pode ser muito robusta.

5 curtidas
5

Sensacional, muito obrigado. Vou dar uma olhada e postar a solução se conseguir. À primeira vista, o Discourse parece assustador quando se trata de personalização, e eu achava que o WordPress era difícil :smile:. Mas, com certeza, assim que eu me familiarizar com toda essa coisa de plugins e templates, imagino que ficará mais fácil.

6

Na verdade, boom, pode haver uma solução ainda mais fácil:

Considere este método da API para substituir o escudo normal de moderador:

 api.replaceIcon('shield-alt', 'crown');

e, em seguida, altere o texto da dica de ferramenta aqui:

image
image1152×402 10.7 KB

A partir desse ponto, seu CSS original pode ser redundante (embora você possa re-colorir o ícone).

3 curtidas
7

Mas isso vai remover o ícone de escudo para os moderadores, certo? Porque eu não quero isso. Preciso adicionar o ícone de coroa e o texto flutuante apenas para os administradores, já que eles não têm nenhum no momento na página de posts.

1 curtida
8

Ah, sim, estou muito acostumado com meus sites onde sou tanto moderador quanto administrador. Se você separar esses papéis, isso não funcionará (ou seja, administradores nunca serão moderadores). Você precisaria conceder direitos de moderador aos administradores.

Então, explore as outras opções.

1 curtida
9

Tente isto:

api.reopenWidget("poster-name", {
  posterGlyph(attrs) {
    if (attrs.moderator || attrs.groupModerator) {
      return iconNode("shield-alt", {
        title: I18n.t("user.moderator_tooltip"),
      });
    }
    if (attrs.admin) {
      return iconNode("crown", {
        title: I18n.t("user.admin_tooltip"),
      });
    }
  }
})

E

image
image1129×388 10.3 KB

funciona para mim:

image
image736×305 14.6 KB

Neste caso, o primeiro usuário é tanto administrador quanto moderador, e o segundo é apenas administrador. Você pode aprimorar essa lógica; faça a coroa ter precedência alterando a ordem das instruções if.

1 curtida
10

Parece uma solução, mas como disse, sou novo na personalização do Discourse… você poderia explicar exatamente onde preciso colar seu código, já que ainda não tentei nenhum método de API?

11

Me dê um segundo, vou construir isso corretamente para você

12

Ok, agora isso é um Componente de Tema:

(Installing a theme or theme component)

O cargo de administrador tem precedência — por padrão, uma coroa será exibida para um administrador que também tenha o cargo de moderador.

Agora você pode configurar o ícone por tipo de membro da equipe.

image
image569×174 3.2 KB

Certifique-se apenas de adicionar os nomes dos ícones à configuração do subconjunto de ícones SVG (caso contrário, eles não serão exibidos):

image
image1141×242 9.07 KB

Personalize seu texto de título aqui:

image
image1129×388 10.3 KB

dez mesmo para o moderador.

5 curtidas
13

Incrível :slightly_smiling_face:. Muito obrigado pela sua ajuda!

14

prazer (essa foi bem divertida!)

2 curtidas
15

Atualizei o TC para que agora ele também altere os ícones de equipe no Cartão do Usuário (e possivelmente em outros lugares, já que modifiquei o helper).

Os ícones agora são configuráveis tanto para o administrador quanto para o moderador, embora a coroa seja o padrão para o administrador, enquanto o escudo padrão do jogo (vanilla shield) seja o padrão para o moderador.

Renomeei o TC.

Com certeza haverá lugares onde os ícones não foram convertidos; talvez eu encontre mais casos no futuro.

3 curtidas
16

Muito obrigado! Isso me ajudou com o que eu queria fazer para o meu Fórum! Acho que seu comentário deveria ser fixado para outros usuários que estão tendo problemas com um ícone sendo exibido ao lado do nome deles como Administrador. Usei seu recurso para exibir o ícone de escudo que é mostrado publicamente no perfil dos Moderadores para os Administradores. Agora, posso ter o Ícone de Escudo sem ter Permissões de Moderador e ele tem a Correta Dica de Ferramenta de Administrador quando eu só tenho as Permissões de Administrador. Muito obrigado pelo seu tempo para criar este Componente Incrível para os fóruns das pessoas!

Editar: Ele não é exibido publicamente no perfil. Atualmente, está funcionando apenas nas postagens.

1 curtida
17

De nada. Sinta-se à vontade para fazer fork, estender e enviar um PR!

2 curtidas