Problème : isoler les champs du profil

[louha]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Problème de personnalisation de code
Lien du forum : [i]http://louha.forumactif.org (forum de test)

Description du problème

Bonjour à tous,

J'ai essayé de suivre ce tutoriel ici et celui-ci là afin de personnaliser les profils de mon forum, mais rien n'y fait. Je suis tombée dans mes recherches sur ce sujet qui semble avoir le même souci que moi, mais la solution apportée ne fonctionne pas.

Globalement, je souhaite déplacer la zone "quartier libre" dans l'onglet "other".

=> Le morceau du template qui est concerné :

Code:

<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <div class="enligne">{postrow.displayed.ONLINE_IMG}</div>
         <div class="fond_profil"><br />
            <center>
            <span class="name"><a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a>
               <div class="pseudoprofil">
                  {postrow.displayed.POSTER_NAME}  
               </div>
            </span>
         <br />
            <div class="contouravat"></div>
            <div class="avatarprofil">{postrow.displayed.POSTER_AVATAR}</div>
            <div class="imgrang">{postrow.displayed.RANK_IMAGE}</div>
            <div class="postdetails_profil mCustomScrollbar" data-mcs-theme="dark">
               <div class="systab">
                  <div class="selected">
                     <span>infos</span>
                     <span class="profil">
                        <!-- BEGIN profile_field -->
                           <div class="infos-posteur">
                              <span class="profil_label"> <!-- Champs du profil  --> {postrow.displayed.profile_field.LABEL}</span>
                              <!-- Contenu/réponses aux champs -->
                              {postrow.displayed.profile_field.CONTENT}
                              {postrow.displayed.profile_field.SEPARATOR}
                           </div>
                        <!-- END profile_field -->
                     </span>
                  </div>
                  <div>
                     <span>Joueur</span>
                     <div class="rpg"><!-- Feuille de personnage -->{postrow.displayed.POSTER_RPG}</div>
                  </div>
                  <div>
                     <span>More</span>
                     <div class="other"><!-- Les champs du profil seront déplacés ici --></div>
                  </div>
                  <div class="DC"> </div>
               </div>
            </div>
            </center>
         <br/><br/>  
         </div>
      </td>
      <td width="100%" valign="top" height="28" colspan="2">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr class="post-TITLE">
               <td colspan="2">
                  <center><span class="posttitle">{postrow.displayed.POST_SUBJECT}</span></center>
               </td>
            </tr>
            <tr class="post-options">
               <td nowrap="nowrap">
                  <div class="posttime">{postrow.displayed.POST_DATE}</div>
               </td>
               <td>
                  <div class="postimg">
                     {postrow.displayed.PROFILE_IMG}
                     {postrow.displayed.PM_IMG}
                     {postrow.displayed.QUOTE_IMG}
                     {postrow.displayed.EDIT_IMG}
                     {postrow.displayed.DELETE_IMG}
                     {postrow.displayed.IP_IMG}
                     {postrow.displayed.REPORT_IMG}
                  </div>
               </td>
            </tr>
            <tr>
               <td colspan="2">
                  <div class="postbody">
                     <div class="wrapmsg">{postrow.displayed.MESSAGE}</div>
                     <div class="clear"></div>
                     <!-- BEGIN switch_signature -->
                        <div class="signature_div">
                           {postrow.displayed.SIGNATURE}
                        </div>
                     <!-- END switch_signature -->
                     <div class="rangprofil">
                        <br /> Les badges de {postrow.displayed.POSTER_NAME} <br />
                        <center>
                           <div {postrow.displayed.AWARDS_SHOW} class="dd_award {postrow.displayed.PROFILE_POSITION}">
                              {postrow.displayed.AWARDS}
                           </div>
                           <div class="award_more"></div>
                           <br />
                        </center>
                     </div>
                  </div>
               </td>
            </tr>
         </table>
      </td>
    </tr>


Le JS associé :

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 = 'phpbb2',
        $chemin,
        $eltParent = '.post';

    // On indique le chemin vers la balise qui contient les champs du profil
    switch(versionForum){
        // Si on est sur phpbb2
        case 'phpbb2':
            $chemin = ".post .fond_profil .postdetails_profil .mCustomScrollBox  .mCSB_container .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 = ".post .fond_profil .postdetails_profil .mCustomScrollBox  .mCSB_container .infos-posteur";

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

Globalement, je pense que le souci vient du chemin que je renseigne dans mon JS, mais je n'arrive pas à trouver quel est le bon chemin à renseigner pour que le code fonctionne °0° Il y a une étape que mon cerveau ne doit pas comprendre et qui me manque pour aboutir à ce que je veux.

Si quelqu'un a une explication, ce serait super <3

Je peux fournir un compte de test sur le forum où je fais mes tests au besoin, il suffit de demander

Bonne soirée,

[MlleAlys]

Bonjour,
Oui je pense que c'est un souci de chemin, et peut être de valeur pour récupérer le com du champ ? J'ai tenté de simplifier un peu les codes pour mieux m'y retrouver et corriger : Essayez ainsi, cela semble fonctionner correctement sur mon forum test :

Même morceau du template :

Code:

<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
    <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
      <a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a>
      
      <div class="fond_profil">
        
        <div class="enligne">{postrow.displayed.ONLINE_IMG}</div>
        <div class="pseudoprofil">{postrow.displayed.POSTER_NAME}</div>
        <div class="avatarprofil">{postrow.displayed.POSTER_AVATAR}</div>
        <div class="imgrang">{postrow.displayed.RANK_IMAGE}</div>
        
        <div class="postdetails_profil gensmall mCustomScrollbar" data-mcs-theme="dark">
          <div class="systab">
            <!--l'onglet qui sera d'office affiché en 1er dans le profil est sélectionné grâce au code : class="selected",
            si vous souhaitez que ce soit un autre onglet qui soit sélectionné, déplacez ce bout de code à une autre div-->
            
            <div class="selected">
              <span>Infos</span>
              <div class="infos">
                <!-- BEGIN profile_field -->
                <div class="profil-champ">
                  {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                </div>
                <!-- END profile_field -->
                <div class="profil-rpg">{postrow.displayed.POSTER_RPG}</div>
              </div>
            </div>
            
            <div>
              <span>Joueur</span>
              <div class="joueur">
                <!-- Les champs indiqués dans le javascript seront déplacés ici -->
              </div>
            </div>
            
            <div>
              <span>More</span>
              <div class="more">
                <!-- Les champs indiqués dans le javascript seront déplacés ici -->
              </div>
            </div>
          
          </div>
        </div>
      
      </div>
      
    </td>
    <td width="100%" valign="top" height="28" colspan="2">
      
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr class="post-TITLE">
               <td colspan="2">
                  <center><span class="posttitle">{postrow.displayed.POST_SUBJECT}</span></center>
               </td>
            </tr>
            <tr class="post-options">
               <td nowrap="nowrap">
                  <div class="posttime">{postrow.displayed.POST_DATE}</div>
               </td>
               <td>
                  <div class="postimg">
                     {postrow.displayed.PROFILE_IMG}
                     {postrow.displayed.PM_IMG}
                     {postrow.displayed.QUOTE_IMG}
                     {postrow.displayed.EDIT_IMG}
                     {postrow.displayed.DELETE_IMG}
                     {postrow.displayed.IP_IMG}
                     {postrow.displayed.REPORT_IMG}
                  </div>
               </td>
            </tr>
            <tr>
               <td colspan="2">
                  <div class="postbody">
                     <div class="wrapmsg">{postrow.displayed.MESSAGE}</div>
                     <div class="clear"></div>
                     <!-- BEGIN switch_signature -->
                        <div class="signature_div">
                           {postrow.displayed.SIGNATURE}
                        </div>
                     <!-- END switch_signature -->
                     <div class="rangprofil">
                        <br /> Les badges de {postrow.displayed.POSTER_NAME} <br />
                        <center>
                           <div {postrow.displayed.AWARDS_SHOW} class="dd_award {postrow.displayed.PROFILE_POSITION}">
                              {postrow.displayed.AWARDS}
                           </div>
                           <div class="award_more"></div>
                           <br />
                        </center>
                     </div>
                  </div>
               </td>
            </tr>
         </table>
      </td>
    </tr>

javascript :

Code:

$(function () {
  
  //on parcourt chaque champ des profils
  $( '.profil-champ' ).each(function( index ) {
    
    // On récupère le texte du label du champ
    var label = $(this).find('.label > span:first-child').text();
    
    // si le texte du label correspond à un de ceux indiqués, on le déplace dans le bloc "joueur"
    if( label == "Date d'inscription" || label == "Points" || label == "TEXTE LABEL 3"){
      $(this).parents('.contents').find('.joueur').append(this);
    }
    
    // ou si le texte du label correspond à un de ceux indiqués, on le déplace dans le bloc "more"
    else if( label == "➢ Quartier Libre" || label == "TEXTE LABEL 2"){
      $(this).parents('.contents').find('.more').append(this);
    }
    
  });
});

[louha]

Hello MlleAlys !

Merci du coup de main

Alors, ça ne fonctionne pas chez moi malheureusement. Est ce que par hasard vous avez renommé quelque chose qui s'appellait "contents" dans le template en autre chose avant de poster ? au cas où

Code:

$(this).parents('.contents').find('.more').append(this);

ait besoin d'être éditée ?

On est bien d'accord que le JS fournis doit remplacer la totalité de celui que j'avais initialement ? (le JS c'est un peu ma kryptonite haha)

[MlleAlys]

Le bloc ".contents" est ajouté par l'autre javascript associé à la construction des onglets, ça fonctionne correctement chez moi...
Mais peut être que le timing n'est pas bon entre les deux javascripts, vous pouvez tenter de remplacer '.contents' par '.systab' qui lui est déjà dans le template.
(oui je confirme qu'il le remplace en entier)

[louha]

non ça ne fonctionne pas non plus...

J'ai désactivé tous les autres JS du forum des fois que ça soit un conflit, là il n'y a que celui des onglets et celui que vous m'avez donné.
Les deux JS sont configurés pour ne s'activer que sur les pages de "sujets" .

J'ai testé avec .contents et .systab

je ne comprends pas pourquoi ça ne fonctionne pas chez moi °°

[MlleAlys]

Remplacez "[ i]➢ Quartier Libre[/i ]" par "➢ Quartier Libre" comme c'était dans celui que je vous ai donné pour voir ?

[louha]

Non plus ^^ (je l'avais déjà testé comme ça)

Peut être en retirant le BBcode dans le champs du profil (mais vu que ça doit aussi déplacer la date d'inscription qui elle n'a pas de bbcode, j'ai peu d'espoirs)


edit : non, ça ne fonctionne pas non plus °°

[MlleAlys]

hmmmm j'avoue que je sèche un peu, ça dépasse mes compétences ^^"
Pour ma part sur mon forum test j'ai mis les deux codes javascript sur une seule page, à la suite, comme ça :

Code:

$(function() {
    // clic sur un onglet
    var d = function() {
        // si l'onglet est déjà actif, ne rien faire
        if ($(this).is(".selected")) return;
        // affiche le contenu correspondant et on met l'onglet en sélectionné
        var a = $(this).closest(".systab");
        a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide") ? "slideUp" : a.is(".s_fade") ? "fadeOut" : "hide"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]);
        $(this).addClass("selected").data("content").addClass("selected").stop(!0, !0)[a.is(".s_slide") ? "slideDown" : a.is(".s_fade") ? "fadeIn" : "show"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1])
    };
    // pour chacun des systèmes d'onglets
    $("div.systab").each(function() {
        var a = $("> div", this).detach(),
            c = this,
            b;
        // on ajoute le conteneur d'onglet avant ou après ( si s_bottom )
        $(this).html('<div class="' + ($(this).is(".s_bottom") ? "contents" : "tabs") + '"></div><div class="' + ($(this).is(".s_bottom") ?
            "tabs" : "contents") + '"></div>');
        $(a).each(function() {
            b = $(this).children(":first");
            b.is("span") ? (
                $("> div.tabs", c).append($(b).addClass("tab").data("content", $(this))), $(this).addClass("content").data("tab", b)) : $(this).remove()
        });
        $("> div.contents", this).append(a);
        b = $(".content:first,.content.selected", this).last();
        $(b).addClass("selected").siblings().hide();
        $(b).data("tab").addClass("selected")
    }).on("click", ".tab", d).filter(".s_hover").on("mouseenter", ".tab", d)
});




$(function() {
 
  // on parcourt tous les champs des profils
  $('.profil-champ').each(function(index) {
   
    // on récupère le texte du label du champ
    var label = $(this).find('.label > span:first-child').text();
   
    // si le label est un de ceux indiqués, on déplace le champ dans le bloc "joueur"
    if (label == "Date d\'inscription") {
      $(this).parents('.systab').find('.joueur').append(this);
    }
   
    // ou si le label est un de ceux indiqués, on déplace le champ dans le bloc "more"
    else if (label == "➢ Quartier Libre") {
      $(this).parents('.systab').find('.more').append(this);
    };
  });
});

Vous pouvez essayer de supprimer les deux, créer à nouveau celui-là avec les deux codes en un (sur les sujets) en le collant tel quel sans rien changer et valider, pour voir ?

[louha]

ça ... fonctionne en un seul JS.

alors. La question c'est POURQUOI ? Quelle est la différence entre l'avoir en deux fois et en une fois °° Est ce que les données générées dans .content ne sont récupérables que dans le cadre de la fonction où elles sont générées, et du coup ça ne fonctionne pas si ce sont deux fonctions séparées ?

merci mille fois Mlle Alys, vraiment.

[MlleAlys]

hmmm non, j'aurais plutôt dit que c'était une question de timing dans la succession des scripts : Le script ne peut pas trouver "content" si celui-ci n'a pas encore été créé via l'autre script.
Alors pourquoi ça ne fonctionnait pas non plus quand je vous ai dit de remplacer "content" par "systab" ? aucune idée... Je l'ai remplacé quand même dans cette version au cas où...
Bref... Au moins ça fonctionne à présent !

(quant à la balise [i ], elle n'est pas requise dans ce js, au contraire, le code ne se base que sur le texte, pas sur les balises)

[louha]

C'est noté !

Merci beaucoup