Afficher un contenu différent dans un sujet en fonction de l'appartenance de l'utilisateur à des groupes ?

Dev
1

Je travaille sur l’hébergement de discourse.org, donc les plugins ne me sont pas possibles dans ce cas. Imaginez que j’ai un sujet publié où tout le monde peut le voir.

Si quelqu’un est dans le groupe « A », je veux qu’il voie ce contenu. Sinon, je veux qu’il voie ce autre contenu. Et une partie du sujet que tout le monde devrait voir. Schématiquement comme ceci…

Ceci est le contenu que tout le monde voit.

{pensée magique : uniquement pour les personnes du groupe A}
Merci d'être dans le groupe spécial !
{/pensée magique}

{pensée magique : uniquement pour les personnes PAS dans le groupe A}
Hé, nous avons un groupe spécial auquel vous pouvez vous joindre. [En savoir plus à ce sujet](…)
{/pensée magique}

Je suis confiant (mais j’ai oublié exactement comment faire) que cela peut être fait avec un composant de thème pour définir des classes CSS sur le contenu que je veux « basculer » l’affichage. Je le ferai si c’est le mieux que je puisse trouver.

Mais display: none de CSS est une solution faible. J’aimerais faire disparaître du DOM ce qu’ils ne devraient pas voir. Disparu côté serveur si possible, mais je me contenterais au moins de le faire disparaître côté navigateur via JavaScript. (Cela nécessite un niveau d’astuce beaucoup plus élevé pour contourner que display: none en CSS.)

2 « J'aime »
2

bump! personne ? :~(

pourquoi ne pouvons-nous pas taguer @team :wink:

3

Je n’ai pas beaucoup de temps pour m’y plonger maintenant, mais ce composant de thème pourrait vous aider car il listera tous les groupes de l’utilisateur actuel dans, je pense, la balise body. Ensuite, vous pourriez probablement utiliser des sélecteurs CSS pour afficher/masquer en fonction de l’existence de certains noms de classes de groupe dans la balise body.

Et combinez cela avec des informations de ce post sur les éléments HTML que vous pouvez utiliser dans le compositeur et comment envelopper le texte du compositeur dans des classes, et cela pourrait fonctionner :

Oui, je viens de le tester ici et cela devrait fonctionner si vous utilisez ce composant combiné avec quelque chose comme :

<span data-group-a>Texte uniquement pour le groupe A</span>
<span data-group-b>Texte uniquement pour le groupe B</span>

Et ensuite, ayez des sélecteurs CSS qui font quelque chose comme :

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

Ou quelque chose comme ça…

Désolé pour toutes les modifications. Je viens de le tester sur une de mes instances et cela fonctionne.

Mais comme vous l’avez mentionné, ce n’est peut-être pas ce que vous vouliez :slight_smile: …

Cela pourrait être possible avec un JavaScript de thème, ajoutant quelque chose dans la section <head> pour sélectionner les éléments et les supprimer. Cela pourrait toujours nécessiter le span et l’enveloppement comme ci-dessus, mais les supprimer via cela.

3 « J'aime »
4

Ok, j’ai réalisé que j’avais peut-être aussi besoin de ça, alors j’ai approfondi :slight_smile:

Ce code ne fonctionne pas encore et n’est pas très joli, mais je pense qu’il est presque assez bon pour être placé dans la partie </head> du thème, il suffit d’avoir la bonne façon de sélectionner les éléments en utilisant 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>

MISE EN GARDE : Je pense qu’il peut être difficile de cacher toutes les informations de la recherche et d’autres choses, donc bien que cela puisse être mieux que de simplement les cacher via CSS, je ne pense pas que cela empêchera complètement les gens de voir les informations.

EDIT : Corrigé pour que les sélecteurs CSS fonctionnent. Répétez le code pour autant de groupes que vous souhaitez utiliser. Changez THEME-ID par un nom unique. Je pense que cela devrait fonctionner :slight_smile:

Oups, je n’ai pas encore eu cette partie :

3 « J'aime »
5

J’apprécie vraiment vos efforts à ce sujet… J’y réfléchis encore et je pense que vous m’avez lancé sur une solution réalisable. J’ai un composant modèle que j’ai écrit, ce qui me fait penser que je pourrais faire fonctionner quelque chose comme ça…

Supposons que j’imagine un composant « foobar ». Je pourrais écrire un sujet, en ajoutant quelques DIVs comme ceci…

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

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

Le composant supprime alors du DOM, l’un ou l’autre DIV, en fonction du groupe de l’utilisateur qui consulte.

Cela me semble plus robuste qu’un display: none; CSS, qu’il est trivial de réactiver via les fonctionnalités d’inspection du DOM de n’importe quel navigateur Web. Pour contourner cela, il faudrait modifier le j/s qui s’exécute au chargement de la page — possible, mais beaucoup plus difficile.

Pourquoi est-ce que je veux ça ?

Pour que je puisse faire une révélation partielle de contenu pour les personnes qui ne font PAS partie du groupe. (Parce que rejoindre le groupe nécessite un abonnement payant.)

C'est un sujet vraiment intéressant. Ce premier
paragraphe est très intéressant.

<div data-custom="foobar" data-foobar="<groupname>">
Voici le reste du contenu.
</div>

<div data-custom="foobar" data-foobar="!<groupname>">
Salut, désolé d'interrompre !
Il y a plus de contenu ici pour nos membres payants...
souhaitez-vous en savoir plus sur comment en devenir un ?
</div>

Les personnes du groupe voient simplement l’intégralité du sujet. Il n’y a aucun signe de mur de paiement.

Les personnes hors du groupe voient la partie initiale, qui ne se trouve dans aucun des DIV ci-dessus, et un mur de paiement.

Je peux donc l’utiliser dans une zone entièrement publique afin que les gens puissent voir ce qu’ils obtiennent s’ils s’inscrivent, se connectent et deviennent un membre payant.

6

Enfin, j’ai pris le temps de réaliser ceci, comme \u003chttps://github.com/Umbrella-CAST/discourse-umbrella-groupswitchdisplay\u003e. Super simple, il supprime simplement la DIV ciblée du DOM en fonction de si l’utilisateur actuel fait partie du groupe nommé « foobar » ou non via « !foobar ». Cela me permet d’avoir un simple affichage basculant du contenu comme dans l’image ci-dessous.

Bien sûr, si le composant est désactivé, alors tout le contenu s’affiche (puisque sans composant, le DOM n’est pas réduit). Mais c’est suffisant pour ce que je veux faire.

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

4 « J'aime »
7

Vous avez résolu un de mes maux de tête très similaires.

1 « J'aime »
8

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