Système de badge AwesomeBB dans la signature

Bonjour !

Explication du problème: Je viens poster une demande de personnification d'un code de PhpBB2 en AwesomeBB. En effet, travaillant de nouveau sur le développement d'un thème pour un forum, j'ai voulu intégrer un système de badge plus performant que celui de base. J'ai donc cherchée et je suis tomber sur ce tutoriel écrit par Onyx : https://www.never-utopia.com/t67584-systeme-de-badges?highlight=syst%C3%A8me+de+badge

Voici le lien du forum : https://palace-of-sangeki.forumactif.com/t1-nous-testons-des-textes-long-parce-que-wala

J'ai également suivi pas mal de demande lié à ce système, notamment celui-ci : https://www.never-utopia.com/t64868-succes-et-profil mais malgré tout les efforts du monde pour y arriver, je reste sur une incompréhension totale. J'ai bien tout mis convenablement mais rien ne fonctionne

Voila ce que j'aimerais avoir si possible en terme de rendu: https://zupimages.net/up/21/40/yuao.png


S'il y a besoin des codes, je pourrais les mettre juste après. Comme j'ai suivi le tutoriel et compléter avec des indications postées sur le topic de Cappucino, je peux néanmoins envoyé le code du template :

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}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
    $(function(){
        if(typeof(_atc) == "undefined") {
            _atc = {  };
        }
    });
</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).parent().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>
<script src="https://kit.fontawesome.com/b51d2e6794.js" crossorigin="anonymous"></script>

<main id="topic">
    <div class="topic-header">
        <h1 style="background-color: var(--color-bgbando); width: 100%; padding: 15px; border-radius: 0; text-align: center;"><a style="color:white;" href="{TOPIC_URL}">{TOPIC_TITLE}</a></h1>
        <div id="breadcrumbs" class="breadcrumbs-topic">
            <a href="{U_INDEX}"><i class="material-icons">home</i> <span>{L_INDEX}</span></a>
            {NAV_CAT_DESC}
        </div>
        <!-- BEGIN switch_user_authpost -->
        <a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="btn btn-default" title="{L_POST_NEW_TOPIC}">
            <i class="material-icons">mode_edit</i>
            <span>{L_POST_NEW_TOPIC}</span>
        </a>
        <!-- END switch_user_authpost -->
        <!-- BEGIN switch_user_authreply -->
        <a href="{U_POST_REPLY_TOPIC}" class="btn btn-default">
            <i class="material-icons">reply</i>
            <span>{L_POST_REPLY_TOPIC}</span>
        </a>
        <!-- END switch_user_authreply -->
        <!-- BEGIN topicpagination -->
        <div class="pagination">
            {PAGINATION}
        </div>
        <!-- END topicpagination -->
    </div>

    {POLL_DISPLAY}

    <!-- BEGIN postrow -->
    <!-- BEGIN hidden -->
    <div class="post-wrap {postrow.hidden.ROW_CLASS}">
        <div class="block">
            <div class="block-content">
                {postrow.hidden.MESSAGE}
                <div class="block-footer" style="display: none;">
                    <!-- END hidden -->

                    <!-- BEGIN displayed -->
                    <div id="post-{postrow.U_POST_ID}" class="post-wrap {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}">
                        <!--<div id="{postrow.U_POST_ID}" class="post-header">-->
                        <div id="{postrow.U_POST_ID}" class="post-author-name" style="height: 90px; padding: 16px 16px 16px 74px; font-size: 2rem; text-transform: uppercase; display:flex; flex-direction:row; border: var(--border-cadreprofil); margin-bottom: 10px;">
             <div style="display:flex; flex-direction: column; width: 70%;">   
                             {postrow.displayed.POSTER_NAME}
                               <div style="border: 1px silver solid; width: 90%;"></div>
                             </div>
                            <div class="post-buttons" style="float: none; font-size: 13px; margin-left: 112px; margin-top: 20px;">
                                <ul>
                                    <li class="btn-quote">
                                        {postrow.displayed.QUOTE_IMG}
                                    </li>
                                    <li class="btn-edit">
                                        {postrow.displayed.EDIT_IMG}
                                    </li>
                                    <li class="btn-delete">
                                        {postrow.displayed.DELETE_IMG}
                                    </li>
                                </ul>
                            </div>
         </div>
                        <div class="post-footer">
                                <span class="post-date">{postrow.displayed.POST_DATE_NEW}</span>
                                  <div class="mobile-show dropdown post-buttons-mobile">
                                      <i class="material-icons">more_horiz</i>
                                      <ul class="dropdown-box">
                                          <li class="btn-quote">
                                              {postrow.displayed.QUOTE_IMG}
                                          </li>
                                          <li class="btn-edit">
                                              {postrow.displayed.EDIT_IMG}
                                          </li>
                                          <li class="btn-delete">
                                              {postrow.displayed.DELETE_IMG}
                                          </li>
                                      </ul>
                                  </div>
                               </div>

                        <div class="post-body" style="background-color: white;">
                            <div class="post" style="border: var(--border-cadreprofil); display: flex; flex-direction: row;">
                                <div class="post-content">
                                    {postrow.displayed.MESSAGE}

                                    {postrow.displayed.EDITED_MESSAGE}

                                    <!-- BEGIN switch_attachments -->
                                    <div class="attachbox">
                                        {postrow.displayed.switch_attachments.L_ATTACHMENTS}
                                        <dl class="attachments">
                                            <!-- BEGIN switch_post_attachments -->
                                            <dt>
                                                <!-- 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>
                                            <dd>
                                                <!-- BEGIN switch_no_comment -->
                                                <p>
                                                    {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}
                                                </p>
                                                <!-- END switch_no_comment -->
                                                <!-- BEGIN switch_no_dl_att -->
                                                <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                                                <!-- END switch_no_dl_att -->
                                                <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p>
                                            </dd>
                                            <!-- END switch_post_attachments -->
                                        </dl>
                                    </div>
                                    <!-- END switch_attachments -->
                                    <!-- BEGIN switch_signature -->
                                    <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">
                                      {postrow.displayed.SIGNATURE_NEW}
                                      <div style="margin: auto; text-align: center;">
                               <span class="title_spoiler blocsucces"><span>▼ Succès ▼</span><span>▲ Succès ▲</span></span>
                               <div style="margin: auto; text-align: center;"></div>
                                </div>
                                    </div>
                                  </div>
                                    <!-- END switch_signature -->
                            </div>
                            <aside class="post-aside" style="border-radius: 0; margin-top: 10px; padding: 3px 14px; border: var(--border-cadreprofil); ">
                             
                              <div class="description_profil_avatar">
                                <div class="post-author-avatar" style="margin: 11px 0 18px; position:relative; display: block; text-align: center; /*width: 200px; height:320px;*/ overflow:visible;">
                                        {postrow.displayed.POSTER_AVATAR}
                                    <div class="details_profil_avatar" style="background-color: #ffffff; margin-top:-344px; width: 207px; height: 334px; margin-left: 6px;">
                                      <div style="overflow: auto; padding: 5px;font-variant:small-caps; text-shadow:1px 1px 1px white; font-size:14px;">
                                        <dl class="post-author-details">
                                            <!-- BEGIN profile_field -->
                                            <span class="profil-label">{postrow.displayed.profile_field.LABEL}</span> <span class="profil-champ">{postrow.displayed.profile_field.CONTENT}</span>
                                            <!-- END profile_field -->
                                        </dl>
                                        <div class="post-author-rpg">
                                            {postrow.displayed.POSTER_RPG}
                                        </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div style="clear:both;"></div>
                              <!--<div class="post-author-status"></div>-->
                              <div class="post-author" style="margin-top:-13px; background-color: white; border: var(--border-cadreprofil); background-color: white; margin-bottom: 7px;">
                                    <span class="post-author-title" style="padding: 12px;">
               {postrow.displayed.POSTER_RANK}
                </span>
                              </div>
                              <!--<div class="messagepost" style="display:flex; flex-direction:row;">
                                <div>
                                 
                                </div>
                                <div>
                                </div>
                              </div>-->
                              <div class="drop-box" style="background-color: #141414; border: 2px solid black; padding: 5px;">
                                 <div style="margin-left: 33px; display: flex;">
                                  <div class="prof" style="display: flex; justify-content: center; align-items: center; background-color: white; height: 38px; width: 38px; margin-right: 40px; border-radius: 20px;"><a href="{memberrow.U_VIEWPROFILE}"><img src="https://2img.net/i/fa/awesomebb/icon_contact_profile.png"/></a></div>
                                  <div class="mp_profil" style="display: flex; justify-content: center; align-items: center; background-color: white; height: 38px; width: 38px; margin-right: 5px; border-radius: 20px;"><i class="material-icons">mode_comment</i></div>
                                  <!--{postrow.displayed.EMAIL_IMG}-->
                                  <!-- BEGIN contact_field -->
                                  {postrow.displayed.contact_field.CONTENT}
                                  <!-- END contact_field -->
                                </div>
                              </div>
                 
                            </aside>
                        </div>
                  </div>
                  <!-- END displayed -->

                  <!-- BEGIN hidden -->
              </div>
        </div>
    </div>
    <!-- END hidden -->
    <!-- END postrow -->
    <!-- BEGIN switch_forum_rules -->
    <div class="block" id="forum_rules">
        <div class="block-header">
            {L_FORUM_RULES}
        </div>
        <div class="block-content">
            <table class="postbody">
                <tr>
                    <!-- BEGIN switch_forum_rule_image -->
                    <td class="logo">
                        <img src="{RULE_IMG_URL}" alt="" />
                    </td>
                    <!-- END switch_forum_rule_image -->
                    <td class="rules content">
                        {RULE_MSG}
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!-- END switch_forum_rules -->

    <div class="topic-actions bottom" style="display:flex; flex-direction: row;">
        <div class="topic-actions-buttons">
            <!-- BEGIN switch_user_logged_in -->
            <!-- BEGIN watchtopic -->
            {S_WATCH_TOPIC}
            <!-- END watchtopic -->
            <!-- END switch_user_logged_in -->
        </div>
         <div style="margin-left: 501px; margin-top: 9px;">
            <a href="{U_POST_REPLY_TOPIC}" style=" border-radius: 0;" class="btn btn-default">
                <i class="material-icons">reply</i>
                <span>{L_POST_REPLY_TOPIC}</span>
            </a>
        </div>
    </div>

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

    {INLINE_MESSAGE}

    {QUICK_REPLY_FORM}

    <form class="jumpbox" style="background-color: #880000; margin-left: 20px; width: 40%; padding: 15px; height: 105px; color: white;" action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
        <label>
            <span>{L_JUMP_TO}:</span>
            <div class="jumpbox-wrap" id="select_sujet">
                {S_JUMPBOX_SELECT}
                <input style=" color:black; border-radius: 0px!important;" type="submit" value="{L_GO}" />
            </div>
        </label>
    </form>

    <!-- BEGIN viewtopic_bottom -->
    <!-- <form class="quickmod" method="get" action="{S_FORM_MOD_ACTION}">
        <input type="hidden" name="t" value="{TOPIC_ID}" />
        <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
        <!-- <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
        <label>
            <span>{L_MOD_TOOLS}:</span>
            <div class="quickmod-wrap">
                {S_SELECT_MOD}
                <input type="submit" value="{L_GO}" />
            </div>
        </label>
    </form> -->

    <div style="align-items: center; justify-content: space-between; padding: 6px 45px;; width: 39.9%; margin-left: 1.9%; background-color: #e9e9e9; " class="topic-admin">{S_TOPIC_ADMIN}</div>
    <!-- END viewtopic_bottom -->

    <!-- BEGIN show_permissions -->
    <div class="block">
        <div style="background-color: #880000; border-radius: 0px;" class="block-header">
            {L_TABS_PERMISSIONS}
        </div>
        <div style="border-radius: 0px; text-align: center;" class="block-content">
            {S_AUTH_LIST}
        </div>
    </div>
    <!-- END show_permissions -->

    <!-- BEGIN switch_user_authreply -->
    <!--<a href="{U_POST_REPLY_TOPIC}" rel="nofollow" class="btn-fixed" title="{L_POST_REPLY_TOPIC}">
        <i class="material-icons">reply</i>
    </a>-->
    <!-- END switch_user_authreply -->
</main>

<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        $('.post-author-contact').each(function () {
            $(this).find('a:nth-child(5n)').each(function () {
                $(this).after('<br />');
            });
        });
    });
    //]]>
</script>

<!-- BEGIN switch_plus_menu -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
<!-- END switch_plus_menu -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/railscasts.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-author-contact').on('click', function() {
            if ($(this).parents('.post-body').css('flex-direction') == 'row') {
                $(this).children('.dropdown-box').css({
                    'left': 'auto',
                    'right': '0'
                });
            } else {
                $(this).children('.dropdown-box').css({
                    'left': '0',
                    'right': 'auto'
                });
            }
        });
    });
</script>

Petite précision : Je ne sais pas pouquoi mais sur AwesomeBB on est obliger de mettre manuellement et à chaque post notre signature. Est ce qu'il y aurait un moyen de le faire automatiquement ?

Vila vilou !

Si jamais quelqu'un pouvait m'aider et m'expliquer en même temps pas à pas la démarche, ce serait vraiment adorable çxç
En vous souhaitant une agréable journée !
Merci aux personnes qui m'aideront

Bonjour !

Alors première des choses, ce n'est pas une bonne idée de reprendre des codes directement d'une demande puisqu'il y a souvent des changements entre le LS/Tuto et la demande initiale. Tenter de combiner les deux amène souvent à un échec. De plus, Cappuccino avait fourni son propre code pour montrer/cacher les badges et n'a pas autorisé le partage de cette partie, alors c'est encore pire é_è

Alors pour faire fonctionner le tout, on va recommencer presque à 0.

Si tu as créé le champ "Badges obtenus", que tu l'as mis visible sur les messages et que tu y as mis quelque chose, c'est parfait pour cette partie là. J'ai vu ta page HTML et c'est ok aussi.

Normalement, tu as une option dans tes préférences sur son profil pour mettre la signature automatiquement à chaque message pour éviter de devoir l'ajouter chaque fois. Par contre, on ne peut pas forcer les membres à mettre/afficher une signature.

Du coup, je te suggère de déplacer l'espace pour les badges juste sous la signature. Comme ça, que les membres n'en mette pas ne supprimera pas les badges.

Pour cela, on va trouver cette partie dans ton template :

Code:

<!-- BEGIN switch_signature -->
                                    <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">
                                      {postrow.displayed.SIGNATURE_NEW}
                                      <div style="margin: auto; text-align: center;">
                              <span class="title_spoiler blocsucces"><span>▼ Succès ▼</span><span>▲ Succès ▲</span></span>
                              <div style="margin: auto; text-align: center;"></div>
                                </div>
                                    </div>
                                  </div>
                                    <!-- END switch_signature -->

On enlève le code de Cappuccino puisque cela lui appartient et aussi parce qu'il manque un nom de class : js-badges-profil

Comme on le voit un peu dans mon LS, le javascript fonctionne comme suit :
- On commence par télécharger la page des badges.
- Ensuite, on regarde, pour chaque message dans la page, le champ "Badges obtenus".
- On compare les badges de la page des badges aux badges du champ pour extraire juste les badges obtenus, puis on fait une des deux options suivantes :
- - 1. On remplace le contenu du champ Badges obtenus par les badges.
- - 2. On supprime le champ Badges Obtenus et on va mettre les badges là où souhaité dans la page dans un bloc nommé "js-badges-profil".

Donc sans bloc avec une class js-badges-profil, les badges n'iront nul part.

Du coup, on va remplacer la partie du template mentionnée plus haut par :

Code:

<!-- BEGIN switch_signature -->
                                    <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">
                                      {postrow.displayed.SIGNATURE_NEW}
                                    </div>
                                    <!-- END switch_signature -->

                                    <div class="js-badges-profil">
                                      <span>▼ Badges ▼</span>
                                      <div></div>
                                    </div>

Bref, on enlève ce qu'on avait ajouté et on ajoute juste sous la signature un bloc avec la bonne class qui contient un span qui sera le titre du bloc badges (tu pourras changer le nom plus tard, tant que tu le fais dans le javascript aussi), ainsi qu'une div là où on va aller ajouter les badges.

Maintenant, on passe au javascript.

Pour partir sur une bonne base, voilà le javascript du tutoriel :

Code:

/*
 * SYSTEME DE BADGE SUR LES SUJETS
 * LIBRE SERVICE NEVER UTOPIA
 */

var idPage = "1"; /* numéro de la page HTML */

/* on va sur la page html */
$.get("/h" + idPage + "-", function (data) {
  /* on récupère le bloc des badges dans la page html*/
  var $badges = $(data).filter("#badges-profil");

  /* on attend que notre page soit prête */
  $(function() {
 
    /*pour chaque message*/
    $('tr.post').each(function(){
 
      /* on récupère la zone badge du profil */
      var $profilBadges = $(this).find(".profil-label:contains('Badges'):first");
 
      /*on regarde si la personne a des badges*/
      if ($profilBadges.length > 0) {
 
        /* selection des badges du membre */
        var badgesUser = $profilBadges.next().text().split(";");
 
        /* pour chaque badge dans le champ... */
        $profilBadges.next().html('');
        for (var i = 0, l = badgesUser.length; i < l; i++) {
          if (badgesUser[i].length > 0) {
            try {
           
              /* on copie le badge */
              var lebadge = $badges.find("." + badgesUser[i].trim()).clone(true);
              /* on donne la bonne classe et on l'ajoute sur la page */
              $(this).find('.js-badges-profil').append(lebadge.addClass("obtenu"));
              $profilBadges.next().andSelf().remove();
     
            } catch (e){
              console.log("Système de badge erreur => " + e);
            }
          }
        }
        /* une fois les badges triés, le champ ne sert plus à rien, donc on le supprime*/
        $profilBadges.next().andSelf().remove();
      }
    });
  });
})


On va commencer par ajouter un petit bout de code pour permettre de montrer/cacher les badges. On va commencer par trouver ceci :

Code:

  /* on attend que notre page soit prête */
  $(function() {

Et juste en dessous, on va ajouter le petit bout de code, ce qui donnera :

Code:

  /* on attend que notre page soit prête */
  $(function() {
   
    /* Pour cacher et montrer les badges */
    $('.js-badges-profil > div').slideUp();
    $('.js-badges-profil > span').click(function() {
      if ($(this).text() == '▼ Badges ▼') {
        $(this).html('▲ Badges ▲');
        $(this).next().slideDown();
      }
      else {
        $(this).html('▼ Badges ▼');
        $(this).next().slideUp();
      }
    });

Voilà une chose de faite.

Ensuite, raison numéro 2 pour laquelle cela ne fonctionnait pas (en plus du fait qu'il n'y avait pas de bloc avec js-badges-profil dans le template) : phpBB2 et AwesomeBB sont structurés différemment. Sur phpBB2, chaque message différent est dans une ligne de tableau avec la class "post". Pour AwesomeBB, chaque message différent est dans un bloc avec la class "post-wrap".

Du coup, on va retrouver cette partie dans le javascript :

Code:

    /*pour chaque message*/
    $('tr.post').each(function(){

Qu'on va remplacer par cela :

Code:

    /*pour chaque message*/
    $('.post-wrap').each(function(){

Maintenant, cela devrait fonctionner !

Par contre, le code actuel prend seulement les badges obtenus et les ajoute là où tu veux, il ne prend pas les autres badges.

Du coup, on va chercher cette partie du code :

Code:

        /* pour chaque badge dans le champ... */
        $profilBadges.next().html('');
        for (var i = 0, l = badgesUser.length; i < l; i++) {
          if (badgesUser[i].length > 0) {
            try {
           
              /* on copie le badge */
              var lebadge = $badges.find("." + badgesUser[i].trim()).clone(true);
              /* on donne la bonne classe et on l'ajoute sur la page */
              $(this).find('.js-badges-profil').append(lebadge.addClass("obtenu"));
            } catch (e){
              console.log("Système de badge erreur => " + e);
            }
          }
        }
      /* une fois les badges triés, le champ ne sert plus à rien, donc on le supprime*/
      $profilBadges.next().andSelf().remove();
      }
    });
  });
})

Qu'on va remplacer par ceci :

Code:

        /* on copie le bloc des badges */
        var lesbadges = $badges.clone(true);
   
        /* pour chaque badge dans le champ... */
        for (var i = 0, l = badgesUser.length; i < l; i++) {
          if (badgesUser[i].length > 0) {
            try {
             
              /* on sélectionne les badges obtenus */
              var lebadge = lesbadges.find("." + badgesUser[i].trim());
              /* on ajoute la class obtenu aux badges qui correspondent au champ des Badges obtenus */
              lebadge.addClass("obtenu");
       
            } catch (e){
              console.log("Système de badge erreur => " + e);
            }
          }
        }
        /* une fois les badges triés, le champ ne sert plus à rien, donc on le supprime*/
        $profilBadges.next().andSelf().remove();
        /* on ajoute le bloc des badges complet dans la div à l'intérieur du bloc js-badges-profil */
        $(this).find('.js-badges-profil:first > div:first').append(lesbadges);
      }
    }); 
  });
})

Tu peux comparer les 2 codes pour voir la différence, mais le gros changement est :
- Avant, dans le try (le tri des badges), on prenait les badges qui correspondaient à ceux du champ, on le copiait, on lui ajoutait la class obtenu, puis on l'ajoutait dans le bloc js-badges-profil.
- Maintenant, on copie le bloc des badges, puis on tri les badges et on ajoute la class obtenu aux badges qui correspondent au champ. Une fois tous les badges triés, on copie le bloc entier des badges, puis on l'ajoute dans la div à l'intérieur du bloc js-badges-profil.

Au final, cela nous donne ce javascript :

Code:

/*
 * SYSTEME DE BADGE
 * LIBRE SERVICE NEVER UTOPIA
 */

var idPage = "1"; /* numéro de la page HTML */

/* on va sur la page html */
$.get("/h" + idPage + "-", function (data) {
  /* on récupère le bloc des badges dans la page html*/
  var $badges = $(data).filter("#badges-profil");

  /* on attend que notre page soit prête */
  $(function() {
   
    /* Pour cacher et montrer les badges */
    $('.js-badges-profil > div').slideUp();
    $('.js-badges-profil > span').click(function() {
      if ($(this).text() == '▼ Badges ▼') {
        $(this).html('▲ Badges ▲');
        $(this).next().slideDown();
      }
      else {
        $(this).html('▼ Badges ▼');
        $(this).next().slideUp();
      }
    });
 
    /*pour chaque message*/
    $('.post-wrap').each(function(){
 
      /* on récupère la zone badge du profil */
      var $profilBadges = $(this).find(".profil-label:contains('Badges'):first");
 
      /*on regarde si la personne a des badges*/
      if ($profilBadges.length > 0) {
   
        /* selection des badges du membre */
        var badgesUser = $profilBadges.next().text().split(";");
       
        /* on copie le bloc des badges */
        var lesbadges = $badges.clone(true);
   
        /* pour chaque badge dans le champ... */
        for (var i = 0, l = badgesUser.length; i < l; i++) {
          if (badgesUser[i].length > 0) {
            try {
             
              /* on sélectionne les badges obtenus */
              var lebadge = lesbadges.find("." + badgesUser[i].trim());
              /* on ajoute la class obtenu aux badges qui correspondent au champ des Badges obtenus */
              lebadge.addClass("obtenu");
       
            } catch (e){
              console.log("Système de badge erreur => " + e);
            }
          }
        }
        /* une fois les badges triés, le champ ne sert plus à rien, donc on le supprime*/
        $profilBadges.next().andSelf().remove();
        /* on ajoute le bloc des badges complet dans la div à l'intérieur du bloc js-badges-profil */
        $(this).find('.js-badges-profil:first > div:first').append(lesbadges);
      }
    }); 
  });
})

Pour ce qui est du CSS, il change un peu, mais pas beaucoup. On aurait quelque chose comme ça :

Code:

/* BADGES DANS LES MESSAGES */
/*Bloc badge incluant le titre*/
.js-badges-profil {
  margin: auto;
  text-align: center;
}
/*Titre du bloc badge*/
.js-badges-profil > span {
}
/*Badges*/
.js-badges-profil .badge {
  display: inline-block;
  vertical-align: middle;
  filter: grayscale(100%);
}
/*Badges obtenus*/
.js-badges-profil .obtenu {
  filter: grayscale(0%);
}

Voilà, cela devrait fonctionner !

Coucou Onyx !

Tout d'abords je suis sincérement désolé pour ce que j'ai fais. Je ne comptais absolument pas prendre son code, je voulais juste voir ce qui fonctionnait pas dans le mien et essayer de l'adapter avec ma propre façon de faire. Je suis encore désolé çxç

Je viens de tout lire et de comprendre les ajouts avant de le copier-coller et j'avoue que c'est super bien expliqué ! Je comprend mieux mon erreur, je n'aurais jamais trouvée pour le JS (#jesuisnulleenJS).

Du coup je l'ai testée et tout fonctionne, je suis tellement la joie çxç Merci beaucoup pour ton aide et apprentissage de ce code ! C'est assez complexe de base mais tu as réussi à l'expliquer super bien !

J'aurais peut-être deux petites choses à savoir en terme de petits plus (que je peux faire, c'est juste une question pour assouvir ma soif d'apprendre !)

Quant on clique que le bouton "badges" dans le dessous de signature, c'est pas très fluide en terme de déroulement. Est ce que tu sait si on peu toucher cette transition via du code CSS ? Ou on est obligé de passer par du JS ?

La deuxième c'est pour la partie infobulle. Je voulais faire en sorte que le badge en question apparaisse dans la partie infobulle à coté d'un texte. Pour faire ceci je dois reprendre la classe et l'image de la page HTML ?

Merci beaucoup en tout cas pour tout ceci. J'ai bien compris mon erreur et ne la reproduirait plus !

Bonjour,

Pour rendre le tout plus fluide, on peut toujours ajouter ceci dans le CSS :

Code:

/*Partie des badges cachée*/
.js-badges-profil > div {
  overflow: hidden;
  max-height: 0px;
  transition: 1s;
}

Bref, on met un overflow hidden pour cacher se qui dépasse de la hauteur maximale et un max-height de 0px pour que ladite hauteur soit de 0, cachant tout.

Puis on remplacerait le code pour montrer/cacher dans le javascript par ceci :

Code:

    /* Pour cacher et montrer les badges */
    $('.js-badges-profil > span').click(function() {
      if ($(this).text() == '▼ Trophés ▼') {
        $(this).html('▲ Trophés ▲');
        $(this).next().css('max-height', '500px');
      }
      else {
        $(this).html('▼ Trophés ▼');
        $(this).next().css('max-height', '0px');
      }
    });

Tu peux remplacer le 500px par la hauteur qui correspondrait à la bonne chose pour toi.

Pour l'infobulle, oui.

J'imagine qu'on aurait quelque chose comme ça dans la page HTML :

Code:

    <div class="badge_infobulle">
      <img src="https://2img.net/h/www.aht.li/2946903/morpheus.png" class="badge badge1" />
      <div class="badge_bulle">
        <img src="https://2img.net/h/www.aht.li/2946903/morpheus.png" class="badge badge1" />
        <div>Texte infobulle</div>
      </div>
    </div>

Avec comme CSS, quelque chose comme :

Code:

/* BADGES DANS LES MESSAGES */
/*Bloc badge incluant le titre*/
.js-badges-profil {
  margin: auto;
  text-align: center;
}
/*Titre du bloc badge*/
.js-badges-profil > span {
  cursor: pointer;
}
/*Partie des badges cachée*/
.js-badges-profil > div {
  overflow: hidden;
  max-height: 0px;
  transition: 1s;
}
/*Badges*/
.badge_infobulle > .badge {
  width: 70px;
  height: 70px;
  filter: grayscale(100%);
}
/*Badges obtenus*/
.badge_infobulle > .obtenu {
  filter: grayscale(0%);
}

/*Le bloc incluant l'infobulle*/
.badge_infobulle {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
/*L'infobulle*/
.badge_bulle {
  position: absolute;
  top: 45px;
  left: 45px;
  width: 300px;
  height: 150px;
  background: #efefef;
  padding: 5px;
  display: none;
}
/*Montrer l'infobulle*/
.badge_infobulle:hover .badge_bulle {
  display: flex;
  align-items: center;
}
/*Le texte de l'infobulle*/
.badge_bulle > div {
  width: 200px;
  max-height: 150px;
  padding: 3px;
  overflow: auto;
  box-sizing: border-box;
}
/*Image infobulle*/
.badge_bulle .badge {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 100px;
}
/*Image infobulle si obtenu*/
.badge_bulle .obtenu {
}

Aussi, j'ai oubli un petit truc dans le javascript ><

On remplace ceci :

Code:

/* on ajoute le bloc des badges complet dans la div à l'intérieur du bloc js-badges-profil */
        $(this).find('.js-badges-profil:first > div:first').append(lesbadges);

Par cela :

Code:

/* on ajoute le contenu du bloc des badges complet dans la div à l'intérieur du bloc js-badges-profil */
        $(this).find('.js-badges-profil:first > div:first').append(lesbadges.html());

Voilà !

Bonjour !

Excusez-moi pour cette latence >w<
J'ai bien modifiée ce que vous m'avez indiqué et tout fonctionne parfaitement !
Merci beaucoup pour votre aide et vos conseils, j'ai bien compris comme ce code fonctionné !