Idea Les Râleuses sont absentes.. Idea
Le forum est en vacances mais toutes nos ressources restent disponibles. (En savoir +)

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4860

Ajouter une barre de progression sur le profil d'un membre Empty Ajouter une barre de progression sur le profil d'un membre

le Jeu 24 Oct 2019 - 9:37

Toutes versions

Ajouter une barre de progression sur le profil d'un membre

Hello !

Parfois, il peut être utile d'avoir une barre de progression sur le profil d'un membre.

Par exemple, ici, on pourrait ajouter une barre de progression de formation pour nos membres en suivant une Wink Ça permettra au membre de savoir où il en est de sa formation, mais aussi aux autres de savoir si une appréciation va bientôt être rendue ^^ (va falloir que j'aille en parler avec mon autre râleuse :p).

Enfin bon, trêve de blabla, voici le rendu dans un message :
Spoiler:
et sur un profil :
Spoiler:

Idea Pré-requis :

  • Avoir accès aux templates.


Idea Cette astuce fonctionne pour toutes les versions de forum.

C'est parti !

Un nouveau champs de profil

Eh bien oui, pour commencer, il faut créer un nouveau champs de profil qu'on ira remplir manuellement en écrivant : l'expérience acquise et l'expérience totale du niveau.

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, on ne le remplit pas obligatoirement et on l'affiche sur le profil et les messages.

Pour le coup, l'expérience ne sera modifiable que par les modérateurs (même si ça n'a pas vraiment d'importance si le membre le modifie aussi Smile ).

Spoiler:
Ajouter une barre de progression sur le profil d'un membre Pa-cha10

Ensuite, dans le profil du membre, il te suffira d'écrire : Expérience Acquises / Expérience du niveau, par exemple :
80/1250

Le js se chargera de calculer la longueur de la barre :p

Exclamation Il faut impérativement respecter cette écriture. Sans quoi, la barre de progression risque de ne pas s'afficher.

Une micro modification de template

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.

Pour AwesomeBB

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>

Exclamation N'oublie pas de sauvegarder et publier.

Pour toutes les autres versions

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 -->

Exclamation N'oublie pas de sauvegarder et publier.

Le style de la barre

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:
/*** --- BARRE EXPERIENCE --- ***/
.label-experience .barre-experience,
.label-experience .barre-experience > div{
 height: 12px; /* Hauteur de la barre */
}

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

/*** La barre pleine ***/
.label-experience .barre-experience > div{
 background: #999; /* Couleur de fond */
}

Pour finir, du javascript

Pour finir, on va aller ajouter le javascript qui va générer la barre d'expérience. 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 intituleExperience = "Expérience";

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

    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(expAcquise, expLevel){
        // On calcule le pourcentage de progression
        // qui représentera la largeur de la barre pleine
        var progression = (expAcquise*100) / (expLevel*1),
            barExp = '<div class="barre-experience"><div style="width: '+ progression + '%"></div></div>';
        return barExp;
    }
    
    // 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(intituleExperience) > -1){
                    // On ajoute une classe à son parent
                    $lbl.parent().addClass('label-experience');

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

                    // On divise cette valeur en 2 variables
                    var expAcquise = experience[0],
                        expLevel = experience[1];

                    // On ajoute la barre sous le label
                    $lbl.parents('.label-experience').append(createBar(expAcquise, expLevel));
                    
                    // 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(intituleExperience) > -1){
                    // On ajoute une classe à son parent
                    $dt.parent().addClass('label-experience');

                    // On va ensuite récupérer les valeurs numériques de l'expérience
                    var experience = $dt.next(contentLblProfil).find('.field_uneditable').text();
                    experience = experience.split('/');

                    // On divise cette valeur en 2 variables
                    var expAcquise = experience[0],
                        expLevel = experience[1];

                    // On ajoute la barre au dessus du label
                    $dt.parents('.label-experience').find(contentLblProfil).prepend(createBar(expAcquise, expLevel));
                    
                    // On arrête de parcourir les labels
                    return false;
                }
            });
            
        });
    }

});

Idea Le javascript est commenté pour que tu puisses le comprendre.

Ce que tu dois modifier

Ici, tu dois modifier 2 choses au début du js :

l'intitulé du champ :
Code:
// Sous quel label se trouve l'expérience ?
    var intituleExperience = "Expérience";

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

Le javascript fait ensuite le reste Smile




Si tu as un souci pour mettre en place les barres de progression, tu peux compter sur nous pour t'aider Smile Rendez-vous ici ^^



_________________
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses