Exibir conteúdo diferente dentro de um tópico com base na associação do usuário a grupos?

Dev
1

Estou trabalhando na hospedagem do discourse.org, então plugins não são possíveis para mim neste caso. Imagine que tenho um tópico postado onde qualquer pessoa pode vê-lo.

Se alguém estiver no grupo “A”, quero que veja este conteúdo. Se NÃO, quero que veja este outro conteúdo. E parte do tópico todos deveriam ver. Esquemático assim…

Este é o conteúdo que todos veem.

{pensamento positivo: apenas para pessoas do grupo A}
Ei, obrigado por estar no grupo especial!
{/pensamento positivo}

{pensamento positivo: apenas para pessoas NÃO do grupo A}
Ei, temos um grupo especial ao qual você pode se juntar. [Leia mais sobre isso](…)
{/pensamento positivo}

Confio (mas esqueço exatamente como fazer isso) que isso pode ser feito com um componente de tema para definir classes CSS no conteúdo que quero “alternar” a exibição. Farei isso se esta for a melhor solução que eu conseguir.

Mas display: none do CSS é uma solução fraca. Gostaria de remover do DOM o que eles não deveriam ver. Removido do lado do servidor, se possível, mas me contentaria em pelo menos remover do lado do navegador com base em j/s. (Isso requer um nível de inteligência muito maior para contornar do que display: none em CSS.)

2 curtidas
2

bump! ninguém? :~(

por que não podemos marcar @team :wink:

3

Não tenho muito tempo para me aprofundar nisso agora, mas este componente de tema pode ajudá-lo porque listará todos os grupos do usuário atual em, eu acho, a tag body. Então você provavelmente poderia usar seletores CSS para mostrar/ocultar com base na existência de determinados nomes de classe de grupo na tag body.

E combine isso com algumas informações deste post sobre quais elementos HTML você pode usar no compositor e como envolver o texto do compositor em classes, e pode funcionar:

Sim, acabei de testar aqui e deve funcionar se você usar esse componente combinado com algo como:

<span data-group-a>Texto apenas para o grupo A</span>
<span data-group-b>Texto apenas para o grupo B</span>

E então ter seletores CSS que fazem algo como:

span[data-group-a] {display: none;}
body.group-a span[data-group-a] {display: block;}

Ou algo assim…

Desculpe por todas as edições. Acabei de testar em uma das minhas instâncias e funciona.

Mas, como você mencionou, talvez não seja o que você queria :slight_smile: …

Isso pode ser possível com um JavaScript de tema, adicionando algo na seção <body> para selecionar os elementos e removê-los. Ainda pode exigir o span e o encapsulamento como acima, mas removê-lo através disso.

3 curtidas
4

Ok, percebi que talvez eu também precise disso, então mergulhei mais fundo nisso :slight_smile:

Este código ainda não funciona e não é muito elegante, mas acho que já é bom o suficiente para ir na parte </head> do tema, só precisa da maneira certa de selecionar os elementos usando JS:

  <script type="text/discourse-plugin" version="0.8.42">

  api.decorateCookedElement(
    element => {
      var hasGroupA = document.body.classList.contains('group-a');

      const group_a_spans = element.querySelectorAll("span[data-group-a]");

      if (!group_a_spans.length) {
        return;
      }

      if (!hasGroupA) {
        group_a_spans.forEach(function (el) {
           el.innerHTML = "";
        });
      }

      },
      { id: "THEME-ID", onlyStream: true }
   );
  </script>

OBSERVAÇÃO: Acho que pode ser difícil ocultar todas as informações de buscas e coisas do tipo, então, embora isso possa ser melhor do que apenas ocultá-las com CSS, não acho que isso impedirá completamente as pessoas de verem as informações.

EDIT: Corrigi para que os seletores CSS funcionem. Repita o código para quantos grupos quiser usar. Altere THEME-ID para um nome exclusivo. Eu acho que isso deve funcionar :slight_smile:

Oops, ainda não peguei esta parte:

3 curtidas
5

Eu realmente aprecio seus esforços nisso… Ainda estou pensando sobre isso e acho que você me deu o pontapé inicial para uma solução viável. Tenho um componente de template que escrevi, o que me faz pensar que eu poderia fazer algo assim funcionar…

Supondo que eu imagine um componente “foobar”. Eu poderia escrever um tópico, adicionando alguns DIVs como este…

<div data-custom="foobar" data-foobar="<groupname>">
</div>

<div data-custom="foobar" data-foobar="!<groupname>">
</div>

O componente então exclui do DOM, um DIV ou outro, com base no grupo do usuário que está visualizando.

Isso me parece mais robusto do que um display: none; do CSS, que é trivial de reativar por meio dos recursos de inspeção de DOM de qualquer navegador da web. Para contornar isso, alguém teria que alterar o j/s que está em execução quando a página é carregada — possível, mas muito mais difícil.

por que eu quero isso?

Para que eu possa fazer uma revelação parcial de conteúdo para pessoas que NÃO estão no grupo. (Porque entrar no grupo requer uma assinatura paga.)

Este é um tópico muito legal. Este primeiro
parágrafo é realmente interessante.

<div data-custom="foobar" data-foobar="<groupname>">
Aqui está o resto do conteúdo.
</div>

<div data-custom="foobar" data-foobar="!<groupname>">
Oi, desculpe interromper!
Há mais conteúdo aqui para nossos membros pagantes...
você gostaria de saber como se tornar um?
</div>

Pessoas no grupo simplesmente veem o tópico inteiro. Não há sinal de qualquer paywall.

Pessoas fora do grupo veem a porção inicial, não em nenhum dos DIVs acima, e um paywall.

Assim, posso usá-lo em uma área completamente pública para que as pessoas possam ver o que elas recebem se se inscreverem, fizerem login e se tornarem membros pagantes.

6

Finalmente consegui montar isso como, GitHub - Umbrella-CAST/discourse-umbrella-groupswitchdisplay: Discourse theme component for manipulating inline content based on group membership. Super simples, apenas remove a DIV alvo do DOM com base se o usuário atual está em um grupo chamado “foobar” ou não no grupo via “!foobar”. Isso me permite ter uma exibição de alternância simples de conteúdo como a imagem abaixo.

Claro, se o componente estiver desativado, todo o conteúdo é exibido (já que sem o componente o DOM não é reduzido.) Mas isso é bom o suficiente para o que eu quero fazer.

Screen Shot 2022-10-21 at 14.45.00
Screen Shot 2022-10-21 at 14.45.001920×1351 224 KB

4 curtidas
7

Você resolveu uma das minhas dores de cabeça muito semelhantes.

1 curtida
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.