Ajouter des éléments du profil dans les widgets/sur la page d'accueil du forum

[Dyingwhispers]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Autre
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Aujourd'hui
Lien du forum : http://verdandi.forumactif.com

Description du problème

Bonjour!

Alors, petit problème : j'ai installé un widget sur mon forum dans l'espoir d'y ajouter plusieurs informations, dont certaines informations propres à chaque membre.

Malheureusement, je n'arrive pas à savoir comment m'y prendre pour faire en sorte d'afficher le nom de l'utilisateur avec sa couleur de groupe et d'apposer ladite couleur de groupe ailleurs sur cette même page. C'est un peu problématique.

La widget en question devrait avoir l'air de ça : https://i.imgur.com/JBNYJAS.png (L'élément à droite, avec l'avatar, la couleur du groupe, etc.)

Je me demandais donc si quelqu'un avait une astuce pour en venir à bout.

Merci beaucoup!

EDIT : whoups j'avais pas la bonne image pour ce que c'est censé avoir l'air. Voilà. 8D

[w00tw00t]

Bonjour Dyingwhispers,

Les variables dans les templates (coté serveur) sont assez limitées de ce coté il me semble. Néanmoins, Forumactif fourni un certain nombre de variables sur l'utilisateur courant, accessibles depuis JavaScript (coté client).

Vous pouvez donc placer quelques spans dans votre sidebar (ou ailleurs dans un premier temps pour simplement tester que le remplissage par JavaScript fonctionne) :

Code:

<span class="verdandi_current_username"></span>
<span class="verdandi_current_avatar"></span>

Puis ajouter un JavaScript sur la page d'accueil qui viendra s'occuper de remplir ce span avec les valeurs adéquates :

Code:

$(function(){

   if( typeof _userdata !== "undefined" ){

      const fa_isanonymous = typeof _userdata["user_id"] !== "undefined" && _userdata["user_id"] <= 0;
      const fa_username = typeof _userdata["username"] !== "undefined" ? _userdata["username"] : '';
      const fa_useravatar = typeof _userdata["avatar"] !== "undefined" ? _userdata["avatar"] : '';
      
      if( !fa_isanonymous ){
         $('.verdandi_current_username').html(fa_username);
         $('.verdandi_current_avatar').html(fa_useravatar);
      }   
      
   }

});

Pour récupérer la couleur, il faut ruser un peu. Puisque votre sidebar ne concerne que la page d'accueil, on peut s'appuyer sur le fait que l'utilisateur même invisible doit être présent dans le QEEL pour en récupérer sa couleur.

Code:

$(function(){

   if( typeof _userdata !== "undefined" ){

      const fa_isanonymous = typeof _userdata["user_id"] !== "undefined" && _userdata["user_id"] <= 0;
      const fa_username = typeof _userdata["username"] !== "undefined" ? _userdata["username"] : '';
      const fa_useravatar = typeof _userdata["avatar"] !== "undefined" ? _userdata["avatar"] : '';
      
      if( !fa_isanonymous ){
         let fa_usercolor = '';
         $(".qeel a[href^='/u']").each(function(){
            const $this = $(this);
            if( $this.html() === fa_username ){
               fa_usercolor = $this.css('color');
            }
         });
         $('.verdandi_current_username').html(fa_username).css('color', fa_usercolor);
         $('.verdandi_current_avatar').html(fa_useravatar);
      }   
      
   }

});

La couleur étant dans la variable fa_usercolor, vous pouvez l'appliquer à n'importe quel élément en modifiant ce script. Pour récupérer d'autres informations c'est également possible, mais il faudra probablement faire une petite requête AJAX.

Ces codes sont assez génériques, mais n'hésitez pas à revenir vers moi si vous avez besoin de plus d'aide pour adresser votre besoin spécifique.

Cordialement,
w00tw00t

[Dyingwhispers]

Bonjour,

C'est super! Merci beaucoup! C'est très utile.

Par contre, étant plutôt mauvaise en javascript en général, je n'arrive pas à comprendre quoi changer (et comment changer) pour faire en sorte que mon bloc jaune devienne de la couleur de l'utilisateur, de même pour son nom.

Pourriez-vous m'éclairer?

Merci!

[w00tw00t]

Bonjour Dyingwhispers,

Vous pouvez ajouter la ligne suivante pour répondre à ce besoin :

Code:

$('#right .barrecouleur').css('background-color',fa_usercolor);

Ce qui donne le code intégral :

Code:


$(function(){
 
  if( typeof _userdata !== "undefined" ){
 
   const fa_isanonymous = typeof _userdata["user_id"] !== "undefined" && _userdata["user_id"] <= 0;
   const fa_username = typeof _userdata["username"] !== "undefined" ? _userdata["username"] : '';
   const fa_useravatar = typeof _userdata["avatar"] !== "undefined" ? _userdata["avatar"] : '';
     
   
    
      if( !fa_isanonymous ){
        let fa_usercolor = '';
        $(".qeel a[href^='/u']").each(function(){
            const $this = $(this);
            if( $this.html() === fa_username ){
              fa_usercolor = $this.css('color');
            }
        });
        $('#right .barrecouleur').css('background-color',fa_usercolor);
        $('.verdandi_current_username').html(fa_username).css('color', fa_usercolor);
        $('.verdandi_current_avatar').html(fa_useravatar);
      } 
     
  }
 
});

Concernant l'utilisateur, il apparaitra déjà dans son SPAN avec la bonne couleur en théorie.

Vous pourrez néanmoins si vous le souhaitez aller plus loin dans les personnalisations au besoin avec JavaScript :
- afficher le nom d'utilisateur en tant que lien hypertexte qui pointe vers son profil.
- si votre sidebar propose uniquement des informations sur un membre connecté, vous pourriez alors la masquer pour les invités.
- si au contraire vous souhaitez proposer du contenu pour les invités sur cette sidebar, vous pourriez masquer/afficher certains DIV selon qu'il s'agisse d'un invité ou non.

Je reste à votre disposition pour plus de détails,

Cordialement,
w00tw00t

[Dyingwhispers]

Bonjour!

J'ai changé le code Javascript, mais il ne semble y avoir aucun changement en ce qui concerne la couleur. Elle n'apparaît d'ailleurs pas sur le nom de l'utilisateur.

Je serais d'ailleurs très intéressée à savoir comment m'y prendre pour avoir des informations différentes pour un invité!

Merci encore!

[w00tw00t]

Bonjour Dyingwhispers,

En effet j'avais oublié un cas, le code intégral suivant devrait donc corriger le soucis :

Code:

$(function(){
 
  if( typeof _userdata !== "undefined" ){
 
   const $fa_parent = $('#right');
   const fa_isanonymous = typeof _userdata["user_id"] !== "undefined" && _userdata["user_id"] <= 0;
   const fa_username = typeof _userdata["username"] !== "undefined" ? _userdata["username"] : '';
   const fa_useravatar = typeof _userdata["avatar"] !== "undefined" ? _userdata["avatar"] : '';
    
      if( !fa_isanonymous ){
        let fa_usercolor = $('body').css('color');
        $(".qeel a[href^='/u']").each(function(){
            const $this = $(this);
            if( $this.html().trim() === fa_username ){
                fa_usercolor = $this.css('color');
            } else {
                const $span = $this.find('span:first');
                const $strong = $this.find('strong:first');
                if( $span.length !== 0 && 0 !== $strong.length && $strong.html().trim() === fa_username ){
                    fa_usercolor = $span.css('color');  
                }
            }
        });
        $('.barrecouleur',$fa_parent).css('background-color',fa_usercolor);
        $('.verdandi_current_username',$fa_parent).html(fa_username).css('color', fa_usercolor);
        $('.verdandi_current_avatar',$fa_parent).html(fa_useravatar);
        $('.remove_if_connected',$fa_parent).remove();
      } else {
        $('.remove_if_anonymous',$fa_parent).remove();
      }
      
  }
 
});

Aussi, les conditionnelles dans les templates n'étant pas autorisées, le code précédent vous permettra d'utiliser les classes "remove_if_connected" et "remove_if_anonymous" dans votre sidebar afin de déterminer quels sont les éléments respectivement à supprimer lorsqu'il s'agit d'un utilisateur connecté, et ceux à supprimer lorsqu'il s'agit d'un utilisateur anonyme.

Exemple, l'élément suivant sera supprimé si l'utilisateur est connecté (il contient donc des informations à destination des anonymes !) :

Code:

<span class="remove_if_connected">Bonjour Anonyme</span>

Et celui-ci sera supprimé si l'utilisateur est anonyme (il contient donc des informations à destination des connectés !) :

Code:

<span class="remove_if_anonymous">Bonjour à vous <span class="verdandi_current_username"></span></span>

Autrement dit, en ajoutant ces deux spans dans votre sidebar, l'un sera activé lorsque l'utilisateur est connecté et l'autre non. Et vice versa. Et vous pouvez utiliser ces classes pour faire apparaitre et disparaitre n'importe quel élément selon l'état de connexion.

Je reste disponible si il y a besoin d'éclaircissements.

Cordialement,
w00tw00t

[Dyingwhispers]

C'est super! Tout fonctionne.

Merci infiniment pour votre aide!