Mettre des champs de profil dans un onglet (Javascript)

[Yunie16]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

Encore moi pour encore un onglet profil... Je vous promets j'ai essayé pendant tout le week-end mais le Javascript a un filtre anti-Yunie, c'est juste pas possible de le faire fonctionner TT

J'ai le code javascript ici, qui devrait fonctionner :

Code:

jQuery(function() {
  var versionForum = 'ModernBB',
    $chemin,
    $eltParent = '.topicp';
 
  // On indique le chemin vers la balise qui contient les champs du profil
  switch (versionForum) {
    default:
      $chemin = ".topicprofil .champ_profil";
      break;
  };
 
  $($chemin).each(function(index) {
    var champs = $(this).find('.label').text();
    if (champs == "Pseudo : ") {
      $(this).parents('.topicp').find('.afficher-masquer.infos-supp').append(this);
    }
  });
});

Et mon template + CSS :

Code:

<!-- BEGIN switch_plus_menu -->
<script type="text/javascript">
   //<![CDATA[
   var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id) {
    try {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }

        if( regId > 0) {
            $('.post--' + id).toggle(0, function() {
            if( $(this).is(":visible") ) {
               $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            } else {
               $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
         });
        }
    } catch(e) { }

   return false;
};

//]]>
</script>

<!-- BEGIN switch_push_direct_send -->
<div id="push-answer" class="jqmWindow"></div>
<script src="{JQUERY_DIR}jqmodal/jqmodal.js" type="text/javascript"></script>
<script type="text/javascript">
   $(document).ready(function() {
      $('#push-answer').jqm({toTop: true});

      $('#push-bell').click(function () {
         return sendWebPush({TOPIC_ID});
      });
      function sendWebPush(tId){
         $.get("/ajax_push.php?topicID=" + tId ).done(showPushAnswer);
      }

      function showPushAnswer(data) {
         $('#push-answer').html(data).jqmShow();
         $('.jqmOverlay').bgiframe();
         $('#push-answer').bgiframe();
      }
   });
   //]]>
</script>
<!-- END switch_push_direct_send -->

<div class="sub-header">
   <div class="sub-header-info">
      <div class="sub-header-path">
         <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
         {NAV_CAT_DESC}
      </div>
   </div>

   <div class="sub-header-buttons">
      <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow" {S_POST_NEW_TOPIC} title="{T_POST_NEW_TOPIC}" class="YUbtn">{L_POST_NEW_TOPIC}</a>
      <!-- END switch_user_authpost -->
      <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}" {S_POST_REPLY_TOPIC} title="{T_POST_REPLY_TOPIC}" class="YUbtn" style="margin-left:10px">{L_POST_REPLY_TOPIC}</a>
      <!-- END switch_user_authreply -->
      <!-- BEGIN switch_user_authnoreply -->
         <a href="{U_LOGIN_REPLY_TOPIC}" title="{T_LOGIN_REPLY_TOPIC}" class="login-for button1">
            <img src="{I_LOGIN_REPLY_TOPIC}" alt="{T_LOGIN_REPLY_TOPIC}"/>
            {L_LOGIN_REPLY_TOPIC}
         </a>
      <!-- END switch_user_authnoreply -->
   </div>
</div>

<div class="topic-actions">
   <!-- BEGIN topicpagination -->
      <div class="pagination">
         {PAGINATION}
      </div>
   <!-- END topicpagination -->
   </div>

<table class="forumline" border="0" cellspacing="1" cellpadding="0" style="margin:auto;">
   <tr>
          <div class="topictitre">{TOPIC_TITLE}
                  </div>
      </tr>
      
   {POLL_DISPLAY}
   <!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
   <tr>
      <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
  <tr class="post" style="900px;">
      <td valign="top" class="topicp">
                      <div class="topicprofil">
                      <div class="topichover"><div class="topicava">
                        {postrow.displayed.POSTER_AVATAR}<div class="topichover_inside">
                       
                          <div class="champ_profil"><!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field --></div>
   
                        </div></div></div>
                                    </div>
                                    <div class="topicpseudo">
                                      {postrow.displayed.POSTER_NAME}<br /><div class="topicrank">{postrow.displayed.POSTER_RANK}</div>
                                      <!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
                                      </div>
                       
        <div class="elt-declencheur">
         
</div>
        <div class="afficher-masquer infos-supp" style="display: none; height:125px;overflow:auto!important;background:var(--less-white);padding:10px;margin-top:5px;object-fit:cover;color:var(--couleur_texte);"></div>
       
      </td>
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="100%" style="background:none!important;">
         <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
            <td colspan="2"><tr height="100%" valign="top">
                                  <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -70px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                                  <div class="topicbody">
                                      <span class="postdetails">{postrow.displayed.POST_DATE}</span>
                                    <div class="postboutons">
               <a href="{postrow.displayed.QUOTE_URL}">citer</a> <a href="{postrow.displayed.EDIT_URL}">éditer</a> <a href="{postrow.displayed.DELETE_URL}">supprimer</a><br />
                                    </div><div class="boutons-sujet"><!-- BEGIN switch_likes_active -->
            <div class="fa_like_div">
                  
               <button style="color:var(--btn_texte);" class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
                  
                  <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
               </button>
               <!-- BEGIN switch_dislike_button -->
               <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">

                  <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
               </button>
               <!-- END switch_dislike_button -->
            </div>
            <!-- END switch_likes_active -->
                                      </div>
                     <div style="margin-top:15px;padding:10px;text-align:justify;min-height:424px;">{postrow.displayed.MESSAGE}</div>

                     <!-- BEGIN switch_attachments -->
                     <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                           <!-- BEGIN switch_post_attachments -->
                           <dl class="file">
                              <dt>
                                 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                 <!-- BEGIN switch_dl_att -->
                                 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_dl_att -->

                                 <!-- BEGIN switch_no_dl_att -->
                                 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_no_dl_att -->
                              </dt>

                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->

                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->

                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                           </dl>
                           <!-- END switch_post_attachments -->
                        </dd>
                     </dl>
                     <!-- END switch_attachments -->

                     <div class="clear"></div>
                     <!-- BEGIN switch_signature -->
                     <div class="signature_div" style="margin-top:-20px;">
                        {postrow.displayed.SIGNATURE}
                     </div>
                     <!-- END switch_signature -->
                                  <!-- BEGIN switch_likes_active -->
                                    <!-- BEGIN switch_like_list -->
            {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
            <!-- END switch_like_list -->
                                    <!-- END switch_likes_active -->
                  </div></td></tr></table></td>
   </tr>
   <!-- BEGIN first_post_br -->
</table>
<hr />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
   </tr>
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <tr align="center">
      <td class="row1" colspan="2" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
   </table>

<div class="sub-header">
   <div class="sub-header-info">
      <div class="sub-header-path">
         <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
         {NAV_CAT_DESC}
      </div>
   </div>

   <div class="sub-header-buttons">
          <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow" {S_POST_NEW_TOPIC} title="{T_POST_NEW_TOPIC}" class="YUbtn">{L_POST_NEW_TOPIC}</a>
      <!-- END switch_user_authpost -->
      <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}" {S_POST_REPLY_TOPIC} title="{T_POST_REPLY_TOPIC}" class="YUbtn" style="margin-left:10px">{L_POST_REPLY_TOPIC}</a>
      <!-- END switch_user_authreply -->
      <!-- BEGIN switch_user_authnoreply -->
         <a href="{U_LOGIN_REPLY_TOPIC}" title="{T_LOGIN_REPLY_TOPIC}" class="login-for button1">
            <img src="{I_LOGIN_REPLY_TOPIC}" alt="{T_LOGIN_REPLY_TOPIC}"/>
            {L_LOGIN_REPLY_TOPIC}
         </a>
      <!-- END switch_user_authnoreply -->
          <br /><br /><!-- BEGIN switch_user_logged_in -->
         <!-- BEGIN watchtopic -->
          <div class="YUbtn">{S_WATCH_TOPIC}</div>
         <!-- END watchtopic -->
      <!-- END switch_user_logged_in -->
   </div>
</div>

<div class="topic-actions bottom">
   <!-- BEGIN topicpagination -->
      <div class="pagination">
         {PAGINATION}
      </div>
   <!-- END topicpagination -->

   </div>

<!-- BEGIN switch_user_logged_in -->
   <a name="quickreply"></a>
   {QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<!-- BEGIN viewtopic_bottom -->
<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
<script>
$(document).ready(function() {
   $('pre, code').each(function(i, block) {
      hljs.highlightBlock(block);
   });

   $('.post').each(function() {
      if($(this).find('.postprofile-avatar').html() !== undefined) {
         if (!$(this).find('.postprofile-avatar').html().length) {
            $(this).find('.postprofile-rank').css('border-bottom', 'none');
            $(this).find('.postprofile > dl > dt').css('min-height', $(this).find('.post-head').innerHeight());
         }
      }
   });

   let post_menus= document.getElementsByClassName('post-menu');
   Array.prototype.forEach.call(post_menus,function(post_menu) {
      post_menu.addEventListener('click', function (e) {
         if (e.target.classList.contains('expanded')){
            e.target.innerHTML='+';
            e.target.classList.remove('expanded');
         }else{
            let exp_menus = document.querySelectorAll('.post-menu.expanded');
            Array.prototype.forEach.call(exp_menus,function(exp_menu) {
               exp_menu.innerHTML='+';
               exp_menu.classList.remove('expanded');
            });
            e.target.innerHTML='-';
            e.target.classList.add('expanded');
         }
      });
   });

   document.onclick = function(e){
      if ($(e.target).parents('.menu-wrap').length==0) {
         let exp_menus = document.querySelectorAll('.post-menu.expanded');
         Array.prototype.forEach.call(exp_menus,function(exp_menu) {
            exp_menu.innerHTML='+';
            exp_menu.classList.remove('expanded');
         });
      }
   };
});
</script>
 
<style>.sub-header{width:900px;}
.sub-header-buttons a{color:var(--btn_texte)!important;}
a.nav {color:var(--couleur_texte);}
.topictitre {width:900px;font-family: "Julius Sans One", sans-serif;color:white;height:50px;background:var(--couleur_trois);border-radius:10px 10px 0px 0px;padding:10px;font-size:18px;}
.topicprofil {width:200px;background:none;border:none;margin-top:5px;}
.post td:hover{background:none;}
.topichover {width:200px;height:320px;background:var(--degrade2);opacity:1;position:absolute;}
.topicava {width:180px;height:300px;margin-top:10px;margin-left:10px;}
.topicava img {width:180px;height:300px;}
.topichover_inside{background:var(--less-white);overflow:auto;opacity:0;padding:10px;width:180px;height:300px;margin-top:-300px;margin-left:0px;color:var(--couleur_texte);}
.topichover:hover .topichover_inside {opacity:1}
.topichover:hover .topicava img {opacity:0;}
.champ_profil {font-size:12px;color:var(--couleur-texte);}
.topicpseudo {width:200px;height:75px;margin-top:330px;padding:4px;color:var(--couleur_texte);background:var(--less-white);text-align:center;font-size:15px;font-weight:300!important;}
.topicpseudo a{font-weight:300!important;font-family: "Architects Daughter", cursive;color:var(--couleur_texte);}
.topicpseudo img{height:20px;width:auto;margin-left:5px;}
.topicrank {line-height:25px;font-size:14px;font-family:"Noto Serif KR", serif;font-weight: 300;font-style: normal;margin-top:-10px;}
.elt-declencheur {width: 30px;height: 30px;font-size:0px;background: var(--couleur_trois);border-radius:0px 30px 0px 0px;margin-top: -30px;margin-left:0px;font-weight: 900;padding: 5px;box-sizing: border-box;text-transform: uppercase;color: var(--couleur_texte);text-align: center;}
.elt-delcencheur img{width: 17px;height: 17px;object-fit:cover;border-radius:25px;margin-top:10px;margin-left:-5px;}
.afficher-masquer img{object-fit:cover;}
.topicbody {width:695px;min-height:500px;background:var(--less-white);color:var(--couleur_texte);margin-left:5px;margin-top:5px;padding:10px;}
.postboutons {margin-top:-25px;margin-left:495px;}
.postboutons a{color:var(--couleur_texte);margin-left:10px;}
.boutons-sujet {margin-left:275px;margin-top:0px;}
.postdetails {margin-top:10px;font-size:15px;color:var(--yellow);text-transform:uppercase;}
.fa_like_div{}
.fa_like, .fa_liked, .fa_dislike, .fa_disliked {  color: var(--btn_texte)!important;  background:var(--degrade1);  border:none;}
.rep-button, .rep-button:active, .rep-button:focus {    background: var(--degrade1);  text-transform:uppercase;  border: none;    box-shadow: none;    font-family: Trebuchet MS;    font-size: 10px;    height: 30px;  padding:5px; width:70px;text-align:center;}
.fa_like_list {color:var(--couleur_texte);margin-top:20px;}
.fa_like_list a{color:var(--couleur_deux)}
.postbody {padding: 20px;}
.post{border:none;box-shadow:none!important;}
#quick-reply {margin:auto;}
table.forumline tr:hover td {background: none;}
#page-body{overflow:hidden}</style>

Mon objectif ce serait de reprendre certains champs profils de la div ".champ_profil" pour les envoyer dans l'onglet ".afficher-masquer infos-supp". J'ai essayé MILLE chemins possibles, en faisant inspection de la page comme recommandé par MlleAlys récemment pour m'aider mais je galère à mort. J'ai essayé avec juste ".infos-supp" comme c'est noté de base dans mes autres forums, juste ".afficher-masquer", en partant de ".post" en parent... TOUT

... enfin, tout ce à quoi j'ai pensé ^^'

Merci d'avance si vous avez la solution miracle ;;

(soyez fiers de moi, j'ai fait tout le template d'affichage de profil sans devoir vous appeler /fuit)

[Toryudo]

Bonjour !

Bon, malheureusement, le champ "Pseudo" n'est pas visible pour les invités, alors je vais essayer de réfléchir à l'aveugle.
Votre chemin est le suivant :

Code:

$chemin = ".topicprofil .champ_profil";

Vous ciblez donc le bloc ".champ_profil" qui apparait une fois par profil/message, et qui contient x champs.
Si vous faites une boucle foreach sur ce bloc, ça veut dire que vous exécutez le code contenu dans la boucle une fois par profil/message.
Dans la boucle, vous récupérez le(s) label(s), comme ceci :

Code:

var champs = $(this).find('.label').text();

C'est là que vient l'erreur de logique de la boucle.
Vous êtes à l'intérieur de la boucle, sur le premier bloc qui contient tous les champs, et vous récupérez le(s) label(s). C'est un peu comme si vous faisiez ceci :

Code:

$('.topicprofil .champ_profil:first .label').text()

Et ce code ne récupère pas les labels les uns après les autres, il récupère tous les labels contenu dans le bloc ".champ_profil" en même temps.
Chez moi par exemple, en tant qu'invité, j'ai ce résultat : "Age : Métier / Spécialisation : Logement : Keumhwansu : Messages : ".

Si vous voulez faire une boucle sur tous les labels, il faudrait plutôt que le chemin soit le suivant :

Code:

$chemin = ".topicprofil .champ_profil .label";

Avec ce chemin, vous ferez la boucle sur tous les .labels de tous les .champ_profil de tous les .topicprofil, et c'est ce que vous cherchez à faire. Plus qu'à modifier la valorisation de la variable champs et ce sera bon normalement :

Code:

var champs = $(this).text();

[Yunie16]

Bonjour !

Déjà super merci pour ça, je m'arrache les cheveux dessus depuis ce week-end c'est une horreur TT
Avec les modifications le label de pseudo a bien été transféré dans l'onglet comme souhaité, par contre le contenu du champ est resté derrière l'avatar...

J'ai rendu le champ visible (j'y pense jamais en les créant pardon) et il est tout en bas derrière l'avatar, là vous ne devriez voir que "Doyen maek" du coup, et "Pseudo :" dans l'onglet

[Toryudo]

Ah, oui, je n'ai pas réfléchi jusqu'au bout... !
On va plutôt changer le chemin en mettant ".topicprofil .champ_profil dl" alors, et revenir sur les autres modifications, ça donne ceci au final :

Code:

jQuery(function() {
  var versionForum = 'ModernBB',
    $chemin,
    $eltParent = '.topicp';
 
  // On indique le chemin vers la balise qui contient les champs du profil
  switch (versionForum) {
    default:
      $chemin = ".topicprofil .champ_profil dl";
      break;
  };
 
  $($chemin).each(function(index) {
    var champs = $(this).find('.label').text();
    if (champs == "Pseudo : ") {
      $(this).parents('.topicp').find('.afficher-masquer.infos-supp').append(this);
    }
  });
});

Sinon, effectivement, seul le label est déplacé, pas son contenu.
Si on fait la boucle sur les "dl" plutôt que les ".label", c'est beaucoup mieux !

[Yunie16]

C'est super comme ça, merci beaucoup pour votre aide !