Sélecteur CSS pour séparer les publications par l'utilisateur actuel

Dev
1

Je cherche un moyen simple pour qu’un sélecteur CSS corresponde aux publications faites par l’utilisateur actuel (mais pas à celles des autres utilisateurs). Autant que je sache, aucune classe CSS n’est ajoutée à ces publications que je pourrais utiliser. Mais peut-être que j’ai manqué quelque chose ?

S’il n’existe pas de telle classe pour le moment, je serais très reconnaissant si l’une était ajoutée !

Ma suggestion serait d’ajouter une classe à l’élément topic-post, similaire aux classes existantes liées à l’utilisateur qui publie, par exemple topic-owner. La nouvelle classe pourrait s’appeler current-user ou my-post ou tout autre nom qui correspond à la nomenclature existante de Discourse.

Cliquez ici pour une explication de pourquoi je veux faire cela...

Il y a quelque temps, des utilisateurs de mon forum se sont plaints d’être devenus dépendants du fait de vérifier combien de likes leurs publications avaient reçus. Ils retournaient constamment à leurs publications juste pour vérifier leurs likes, et ce comportement leur rappelait les aspects les plus toxiques des plateformes de médias sociaux grand public.

Ma solution a été de créer un thème à utiliser où j’ai simplement ajouté une règle CSS pour masquer le compteur de likes sur leurs publications. Le bouton de like sur les publications créées par l’utilisateur actuel a une classe appelée .my-likes, ce qui le rend facile à sélectionner avec CSS. Cela a bien fonctionné et les utilisateurs étaient satisfaits de la solution.

Cependant, plus tôt aujourd’hui, on m’a fait remarquer que si vous cliquez sur le bouton « … », c’est-à-dire « afficher plus » sur une publication, les utilisateurs qui ont liké cette publication sont listés. Un utilisateur a signalé qu’il était retombé dans ses habitudes de « junkie de la dopamine » à cause de cela, cliquant à plusieurs reprises sur « … » pour contourner le thème spécial et vérifier ses likes.

Mais contrairement au cas mentionné ci-dessus du bouton de like, je ne parviens pas à trouver de sélecteur CSS qui me permette de faire cela. La seule solution que j’ai trouvée est de masquer la liste des personnes ayant liké pour toutes les publications, c’est-à-dire rendre impossible aux utilisateurs du thème de voir cette liste pour n’importe quelle publication.

Ce que je peux faire maintenant, c’est ceci :

.who-liked { display: none;}

Ce que j’espérais faire, c’était quelque chose comme ceci :

.topic-post.current-user .who-liked { display: none;}

(Mais cela ne fonctionne pas, car la classe .current-user n’existe pas.)

2

Peut-être pouvez-vous utiliser l’attribut data-user-id dans la balise .topic-post article ?

3

Une chose que vous pouvez faire est de rechercher dans la liste des sujets ceux dont l’utilisateur actuel est l’auteur, ce qui peut être réalisé avec jQuery. Si c’est le cas, appliquez un style à cette ligne. L’inconvénient pourrait être que l’utilisateur est également identifié comme l’auteur du sujet original (OP).

Une autre méthode consiste à remplacer complètement le composant de la liste des sujets et à y effectuer les opérations nécessaires. Vous trouverez plus d’informations sur la personnalisation des modèles ici :

4

Désolé, voulez-vous dire décorer les messages des utilisateurs dans la liste des sujets ou dans le sujet lui-même ?
Vous pourriez dans ce cas vous raccrocher à l’avatar de l’utilisateur actuel, trouver l’élément racine du message parent et lui ajouter une classe avec jQuery.

5

Merci pour vos réponses !

Je suis tout à fait conscient que je pourrais le faire avec JavaScript. J’aurais dû le mentionner dès le début. Cependant, l’objectif de mon message est de trouver un moyen beaucoup plus simple, en utilisant un tout petit peu de CSS (voir la partie extensible de mon message original).

Outre le fait que ce soit une solution plus simple et plus naturelle, cela me permettrait de gérer les choses grâce au système intégré excellent pour les thèmes et les composants de thème.

Et ce n’est pas comme si cela devait être une chose exotique et étrange. Comme je l’ai mentionné initialement, Discourse a déjà des attributs de classe sur le même élément (le message sur la page du sujet) pour indiquer les propriétés de l’utilisateur qui a publié (propriétaire du sujet, niveau de confiance, appartenance à des groupes, etc.). Et dans un sous-élément de cet élément (le bouton J’aime), il existe déjà un attribut de classe indiquant que le message a été publié par l’utilisateur qui consulte actuellement la page.

Pour ces raisons, je pense que l’ajout de cet unique attribut sur l’élément topic-post est une bien meilleure solution qu’un hack JavaScript quelconque.

6

Ah, je suis justement venu ici pour poster la solution JS. J’ai créé un groupe appelé hidelikes et ce script JS masque la liste des personnes ayant liké pour tous les membres du groupe sur leurs propres publications.

<script type="text/discourse-plugin" version="0.8">
    $( document ).ready(function() {
        let currentUser = api.getCurrentUser();
        var groups = currentUser.groups;
        var userID = currentUser.id;
        const hidelikes = groups.some(g => g.name === 'hidelikes');
        if (hidelikes) { 
               $('<style>').text('.boxed.onscreen-post[data-user-id="' + userID + '"] .who-liked{display: none;}').appendTo(document.head)
         }
    });
</script>

Évidemment, si vous voulez le faire pour tous les utilisateurs, supprimez simplement la partie relative aux groupes.

7

Merci beaucoup d’avoir publié le code réel, cela est en effet très utile !

8

Après avoir un peu fouillé dans plugin-api, je pense avoir trouvé une solution à votre problème ainsi que la bonne façon de procéder comme vous l’avez suggéré

<script type="text/discourse-plugin" version="0.8">
  api.addPostClassesCallback((attrs) => {
    const user = api.getCurrentUser();
    if (attrs.user_id === user.id)  {
      return ['current-user-post']
    }
  });
</script>

Consultez ceci :
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js#L712

Cela ajoutera current-user-post à chaque message publié par un utilisateur actuellement connecté.

9

C’est génial, merci beaucoup !

10

Où ajouter ce code ? Je l’ai ajouté à la fin de la balise , mais cela ne fonctionne pas correctement.