Ajouter une "jauge" aux champs de profil

Bonjour !

Grâce à Miettes, tu sais comment ajouter une jolie barre de progression à tes champs de profil, même plusieurs. Aujourd'hui, je viens t'expliquer comment en faire une variante : une jauge. Et comme je suis nulle en description, une image pour nous aider =)

Ca t'intéresse ? Alors c'est parti.

Pré-requis :
• Avoir accès aux templates.

Cette astuce fonctionne pour toutes les versions de forum.

Je me suis basée à 90% sur le tutoriel de Miettes, le code est donc quasiment le même, il est normal que vous y voyiez une ressemblance


On va commencer par créer un nouveau champs de profil qu'on ira remplir manuellement pour chaque membre.

Pour ça, on va donc aller dans Panneau d'administration > Utilisateurs & Groupes > Utilisateurs > Profil. On va ensuite créer un nouveau champ qui sera un champ texte. On lui donne le nom qu'on veut en respectant cette écriture :

Code:

Nom du champs de gauche / nom du champs de droite /

Les / sont très importants. Pour mon exemple mon champs s'appelle donc :

Code:

gentil / méchant /

On ne le remplit pas obligatoirement et on l'affiche sur le profil et les messages. A toi de voir s'il est modifiable par le membre ou non

Ensuite, dans le profil du membre, il suffira d'écrire : Taux de gentillesse / taux total, par exemple ici je suis gentille à 40% :

40/100

Le js se chargera de tout le reste (Merci Miettes ! )

Il faut impérativement respecter cette écriture. Sans quoi, la barre de progression risque de ne pas s'afficher.
A noter que tu ne peux pas mettre de guillemets (") dans ce champs sinon ça ne fonctionnera pas


Les modifications étant les mêmes que pour le tutos de Miettes, l'étape est exactement la même. Je te la remets

Quelle que soit la version de ton forum, on va modifier le template "viewtopic_body". Pour cela, on va aller dans Panneau d'administration > Affichage > Templates > Général.


Il faut remplacer ça :

Code:

<dl class="post-author-details">
    <!-- BEGIN profile_field -->
    <dt>{postrow.displayed.profile_field.LABEL}</dt>
    <dd>{postrow.displayed.profile_field.CONTENT}</dd>
    <!-- END profile_field -->
</dl>


par ça :

Code:

<dl class="post-author-details">
    <!-- BEGIN profile_field -->
    <div>
     {postrow.displayed.profile_field.LABEL}
     <span>{postrow.displayed.profile_field.CONTENT}</span>
    </div>
    <!-- END profile_field -->
</dl>

N'oublie pas de sauvegarder et publier.


Il faut remplacer ça :

Code:

<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->

par ça :

Code:

<!-- BEGIN profile_field -->
<div>
 {postrow.displayed.profile_field.LABEL}
 <span>{postrow.displayed.profile_field.CONTENT}</span>
 {postrow.displayed.profile_field.SEPARATOR}
</div>
<!-- END profile_field -->

N'oublie pas de sauvegarder et publier.


Ici aussi, c'est très très ressemblant à celle de Miettes : c'est normal, j'ai copié !
Ensuite, on va aller remplir la CSS. Pour cela, on va aller dans Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS.

Voici celle par défaut que je te donne. Ce que tu peux modifier est commenté à la fin de ligne (/* commentaire */).

Code:

/*** --- JAUGE --- ***/
.label-jauge .barre-jauge,
.label-jauge .barre-jauge > div{
 height: 12px; /* Hauteur de la barre */
}

/*** La barre tout à gauche***/
.label-jauge .barre-jauge{
 border: 1px solid #666; /* Couleur de la bordure */
 border-radius: 5px; /* Arrondi de la barre */
 box-sizing: border-box;
 background: #731818; /* Couleur de fond */
 margin: 4px 0;
 overflow: hidden;
 width: 100%;
}

/*** La barre tout à droite***/
.label-jauge .barre-jauge > div{
 background: #2a691a; /* Couleur de fond */
}

/****On place les libellés****/
.label-jauge span.labelAfter {
    text-align: right;
}

.label-jauge .labelAfter,
.label-jauge .labelBefore {
    display: inline-block;
    width: 50%;
}
/*** On retire le champs une fois qu'on l'a mis en jauge ****/
.label-jauge .barre-jauge + span,
.label-jauge .barre-jauge + span + span,
.label-jauge .barre-jauge + span + span + br,
.label-jauge .barre-jauge + dt,
.label-jauge .barre-jauge + dt + dd{
  display:none !important;
}

Ici aussi, le JS est quasiment le même, à quelques exceptions prés.

Pour finir, on va aller ajouter le javascript qui va générer la jauge. Pour cela, on va aller dans Panneau d'administration > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.

On va créer un nouveau javascript qu'on va afficher sur toutes les pages et on va y mettre ceci :

Code:

$(function(){
    // Sous quel label se trouve l'expérience ?
    var intituleJauge = ["gentil/méchant"];


    // on indique la version du forum
    // attention de bien respecter les écritures ci-dessous
    // invision, phpbb2, phpbb3, punbb, modernbb, awesomebb
    var versionForum = 'phpbb2';

    var isProfil,
        infoLblProfil,
        lblProfil,
        contentLblProfil,
        isMsg,
        profilMsg;

    switch (versionForum) {
        case 'phpbb2':
            isProfil = "#profile-advanced-details";
            infoLblProfil = '#profile-advanced-details > dl';
            lblProfil = 'dt';
            contentLblProfil = 'dd';
            isMsg = '.post';  
            profilMsg = ".poster-profile";
            break;

        case 'phpbb3':
            isProfil = "#profile-tab-field-profil";
            infoLblProfil = '#profile-tab-field-profil > dl';
            lblProfil = 'dt';
            contentLblProfil = 'dd';
            isMsg = '.post';  
            profilMsg = ".postprofile";
            break;

        case 'punbb':
            isProfil = "#profile-advanced-details";
            infoLblProfil = '#profile-advanced-details .middleline > dl';
            lblProfil = 'dt';
            contentLblProfil = 'dd';
            isMsg = '.post';  
            profilMsg = ".user-info";
            break;

         case 'invision':
            isProfil = "#profile-advanced-details";
            infoLblProfil = '#profile-advanced-details .middleline > dl';
            lblProfil = 'dt';
            contentLblProfil = 'dd';
            isMsg = '.post';  
            profilMsg = ".postprofile-details";
            break;

        case 'awesomebb':
            isProfil = "#profile-tab-field-profil";
            infoLblProfil = '#profile-tab-field-profil > dl';
            lblProfil = 'dt';
            contentLblProfil = 'dd';
            isMsg = '.post';
            profilMsg = ".post-author-details";
            break;
        
        /* modernbb */
        default:
            isProfil = "#profile-tab-field-profil";
            infoLblProfil = '#profile-tab-field-profil > dl';
            lblProfil = 'dt';
            contentLblProfil = 'dd';
            isMsg = '.post';  
            profilMsg = ".postprofile";
            break;
    }
    // On crée le contenu html qui contiendra la barre de progression
    function createBar(labelBefore,jaugeGauche, jaugeDroite,labelAfter){
        // On calcule le pourcentage de progression
        // qui représentera la largeur de la barre pleine
        var progression = (jaugeGauche*100) / (jaugeDroite*1),
            barJauge = '<span class="labelBefore">'+labelBefore+'</span><span class="labelAfter">'+labelAfter+'</span>'+'<div class="barre-jauge"><div style="width: '+ progression + '%"></div></div>';
        return barJauge;
    }
  for(let i = 0;i<intituleJauge.length;i++){
    // Si on est dans un message
    if( $(isMsg).length){
        // On parcourt chaque profil
        $(profilMsg).each( function(){
            var $profil = $(this);

            // On parcourt ensuite chaque label
            $profil.find('.label').each( function(){
                var $lbl = $(this);

                // Si on arrive sur le label concernant notre barre de progression
                if($lbl.text().indexOf(intituleJauge[i]) > -1){
                    // On ajoute une classe à son parent
                    $lbl.parent().addClass('label-jauge');

                    // On va ensuite récupérer les valeurs numériques de l'expérience
                    var jauge = $lbl.next('span').text();
                    jauge = jauge.split('/');

                    // On divise cette valeur en 2 variables
                    var jaugeGauche = jauge[0],
                        jaugeDroite = jauge[1];

                    // On va ensuite récupérer les 2 textes du libellé
                    var label = $lbl.text().split('/');

                    // On divise cette valeur en 2 variables
                    var labelBefore = label[0],
                        labelAfter = label[1];
                  
                    // On ajoute la barre sous le label
                    $lbl.parents('.label-jauge').prepend(createBar(labelBefore,jaugeGauche, jaugeDroite,labelAfter));
                    
                    // On arrête de parcourir les labels
                    return false;
                }
            });
            
        });
      
      // Si on est sur un profil
      if( $(isProfil).length){
          // On parcourt chaque info du profil
          $(infoLblProfil).each( function(){
            var $dl = $(this);
            
              // On cherche ensuite les labels
              $dl.find(lblProfil).each( function(){
                var $dt = $(this);
                
                  // Si on arrive sur le label concernant notre barre de progression
                  if($dt.text().indexOf(intituleJauge[i]) > -1){
                      // On ajoute une classe à son parent
                      $dt.parent().addClass('label-jauge');
                      
                      // On va ensuite récupérer les valeurs numériques de l'expérience
                      var jauge = $dt.next(contentLblProfil).find('.field_uneditable').text();
                      jauge = jauge.split('/');
                      
                      // On divise cette valeur en 2 variables
                      var jaugeGauche = jauge[0],
                      jaugeDroite = jauge[1];
                    
                     // On va ensuite récupérer les 2 textes du libellé
                    var label = $dt.text().split('/');

                    // On divise cette valeur en 2 variables
                    var labelBefore = label[0],
                        labelAfter = label[1];
                      
                      // On ajoute la barre au dessus du label
                      $dt.parents('.label-jauge').prepend(createBar(labelBefore,jaugeGauche, jaugeDroite,labelAfter));
                      
                      // On arrête de parcourir les labels
                      return false;
                    }
                  });
              
            });
        }
    }
}
});