Diviser/Séparer les champs du profil

Bonjour bonjour

Dans ce tutoriel, nous allons voir comme séparer les informations du profil dans les messages, c'est-à-dire passer de ça :

Spoiler:

à ça

Spoiler:

Pré-requis :
• Avoir accès aux templates ;
• Avoir des connaissances de base en html & CSS ;
• Ce tutoriel peut s'adapter à toutes les versions.

Pour ce tutoriel, je pars des templates de base de chaque version

---

Dans chacun de mes exemples, je vais déplacer certains champs d'informations du profil dans un bloc qui s'ouvrira / se fermera au clic sur un lien.

Voici le js utilisé pour cet effet (à utiliser sur les "sujets") :

Code:


$( function(){
  $('body')
    .on('click', '.elt-declencheur', function(){
      if($(this).next(".afficher-masquer").is(":hidden")){
        $(this).text("Masquer le profil");
        $(".afficher-masquer").slideUp();  
             $(this).next(".afficher-masquer").slideDown();
        }else{
          $(this).text("Afficher le profil");
          $(this).next(".afficher-masquer").slideUp();
        }
    });
});


Quelle que soit la version de ton forum (sauf AwesomeBB), la modification sera la même et sera à faire dans le template "viewtopic_body".

On va commencer par entourer les champs du profil avec une balise ayant une classe spécifique. On va donc 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 class="infos-posteur">
          {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
        </div>
        <!-- END profile_field -->

Si tu es sous AwesomeBB, voici la modification à faire :

Code:

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

Ensuite, on va aller placer où on le veut le "réceptacle" des infos à bouger. Ce code se présentera sous cette forme :

Code:


<div class="elt-declencheur">
  Afficher le profil
</div>
<div class="afficher-masquer infos-supp" style="display: none;"></div>


à placer où tu veux Par exemple, moi j'ai décidé de le mettre tout à la fin des infos du posteur :

Code:

<!-- BEGIN profile_field -->
                            <div class="infos-posteur">
                                {postrow.displayed.profile_field.LABEL}
                                {postrow.displayed.profile_field.CONTENT}
                                {postrow.displayed.profile_field.SEPARATOR}
                            </div>
                        <!-- END profile_field -->  
                        {postrow.displayed.POSTER_RPG}

                        <div class="elt-declencheur">
                            Afficher le profil
                        </div>
                        <div class="afficher-masquer infos-supp" style="display: none;"></div>

On enregistre et on publie.

C'est tout pour les templates ^^


C'est ici que ça va différer en fonction de la version Mais je le préciserai à chaque fois.

Au chargement de la page :

Code:

jQuery(function () {});

On va définir quelle version de forum on utilise, on initialise une variable (= une sorte de case mémoire) pour le chemin de l'élement qui contient les champs de profil et on définie la variable qui correspond à l'élement html qui contient notre élement déclencheur :

Code:

var versionForum = 'ModernBB',
        $chemin,
        $eltParent = '.post';

       
et on va indiquer, pour chacune des versions, le chemin vers la balise qui contient les champs des profils (et dans le cas de AwesomeBB, on va mettre à jour la balise qui contient notre élement déclencheur) :

Code:

// On indique le chemin vers la balise qui contient les champs du profil
    switch(versionForum){
        // Si on est sur invision
        case 'invision':
            $chemin = ".post .postbody .user-info .infos-posteur";
            break;

        // Si on est sur phpbb2
        case 'phpbb2':
            $chemin = ".post .postdetails.poster-profile .infos-posteur";
            break;

        // Si on est sur punbb
        case 'punbb':
            $chemin = ".post .postbody .user-info .infos-posteur";
            break;

        // Si on est sur AwesomeBB
        case 'AwesomeBB':
            $chemin = ".post-wrap .post-body .post-aside .infos-posteur";
            $eltParent = ".post-aside";
            break;

        // Si on est sur phpbb3, ModernBB, Invision
        default:
            $chemin = ".post .postprofile .infos-posteur";
            break;
    };

Si ta structure n'est pas celle de base : il faut que tu indiques toi-même le chemin de la balise.

Code:

chemin = "ton chemin";

Pour savoir quoi indiquer, ouvre une page de sujet de ton forum et clique sur "F12" dans ton navigateur.
Une fenêtre s'ouvre avec la structure de ta page. Il ne te reste plus qu'à repérer le chemin à suivre. Par exemple, pour moi :

Spoiler:

CHEMIN = .post .postprofile .infos-posteur

On va ensuite parcourir chaque champs des profils :

Code:

$( $chemin ).each(function( index ) {});

Ensuite, on récupère le contenu des champs :

Code:

var champs = $(this).find('.label > span:first-child').html() ;

On teste ensuite si le texte du champs correspond ou non à l'élement qu'on veut isoler. Pour cela, on va devoir noter "à la main" chaque intitulé de champs à déplacer :

Code:

if( champs == "TEXTE 1" || champs == "TEXTE 2"){ };

Ici, à toi de remplacer les intitulés de tes champs ; par exemple, pour moi :

Code:

if( champs == "Localisation" || champs == "Emploi/loisirs"){ };

Enfin, on va déplacer ça dans notre bloc "infos-supp" :

Code:

$(this).parents('.post').find('.infos-supp').append(this);

(ici, parents('.post') = je pars de mon élement, et je vais trouver son parent qui a la classe "post" )

Et c'est tout ^^ Du coup, on a un js qui ressemble à ça à la fin :
Pour t'aider, celui-ci est commenté.

Code:


jQuery(function () {

    // on indique la version du forum
    // attention de bien respecter les écritures ci-dessous
    // invision, phpbb2, phpbb3, punbb, Invision, ModernBB, AwesomeBB
    var versionForum = 'AwesomeBB',
        $chemin,
        $eltParent = '.post';

    // On indique le chemin vers la balise qui contient les champs du profil
    switch(versionForum){
        // Si on est sur invision
        case 'invision':
            $chemin = ".post .postbody .user-info .infos-posteur";
            break;

        // Si on est sur phpbb2
        case 'phpbb2':
            $chemin = ".post .postdetails.poster-profile .infos-posteur";
            break;

        // Si on est sur punbb
        case 'punbb':
            $chemin = ".post .postbody .user-info .infos-posteur";
            break;

        // Si on est sur AwesomeBB
        case 'AwesomeBB':
            $chemin = ".post-wrap .post-body .post-aside .infos-posteur";
            $eltParent = ".post-aside";
            break;

        // Si on est sur phpbb3, ModernBB, Invision
        default:
            $chemin = ".post .postprofile .infos-posteur";
            break;
    };

    // Si la structure est différente de celle de base
    // indiquer le bon chemin et
    // décommenter (en supprimer // ) la ligne ci-dessous
    // chemin = "ton chemin";

    // On parcourt chaque champs des profils
    $( $chemin ).each(function( index ) {
        // On récupére le contenu html de ces champs
        var champs = $(this).find('.label > span:first-child').html() ;
 
        // On teste sur le champs correspond aux blocs qu'on veut isoler
        // pour info || signifie "ou"
        if( champs == "Localisation" || champs == "Emploi/loisirs"){
            // Je déplace le contenu dans le bloc masqué après le bloc "afficher/masquer"
            $(this).parents($eltParent).find('.infos-supp').append(this);
 
        }
 
    });
});

Et qu'on va afficher sur les sujets.

Zioup là ! Le tour est joué ^^