Catégories à fermer


Aller en bas
Miettes
Miettes
Râleuse
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord

Pseudo Discord : Miettes
Messages : 1634

Afficher une liste de badges sur le profil du membre Empty Afficher une liste de badges sur le profil du membre

le Lun 29 Juil - 17:12

 
Toutes versions

 
Afficher une liste de badges sur le profil du membre

 
Hello Smile

Dans ce tutoriel, nous allons voir comment ajouter une liste de badges sur la fiche de personnage d'un membre. Ce dernier pourra modifier cette liste en utilisant un formulaire avec des cases à cocher.

Idea Voici ce dont je parle :
Spoiler:
• Le topic où le membre déposera sa série de badges
Afficher une liste de badges sur le profil du membre Msg-ba10

• Le formulaire pour mettre à jour la liste des badges
Afficher une liste de badges sur le profil du membre Form-b10

• La fiche de personnage
Afficher une liste de badges sur le profil du membre Fiche-10

Et tu as un rendu réél sur mon forum de test, en te connectant avec ces identifiants :
• Login : Tambouille
• Mot de passe : mdpTambouille2019
La fiche de badges
Le formulaire
Ta fiche de personnage

Ça t'intéresse ? Alors mettons ça en place !

Exclamation Ce tutoriel fonctionne pour toutes les versions de forum.

Idea Pré-requis :
• Tu dois avoir accès au panneau d'administration du forum.
• Les fiches de personnage doivent être activées sur ton forum.
• Tu dois connaître les bases du codage de formulaire en HTML.
• Le Javascript ne doit pas t'effrayer.

Un formulaire d'édition

Pour commencer, on va créer un formulaire qui aura 2 fonctions :
• la première sera de permettre aux membres de mettre à jour leur liste de badges,
• la seconde sera de générer un code à copier/coller dans le message.

Tu peux voir le formulaire ici. Voici son code à copier/coller dans Panneau d'administration > Modules > HTML & Javascript > Gestion des pages HTML et en utilisant le haut et le bas de ton forum :
Code:
<style>
    .select-badges{
        margin: 30px auto;
        width: 90%;
    }
    
    .select-badges .btn{
        margin-right: 2%;
        text-align: right;
    }
    
    .select-badges button,
    .select-badges input[type="button"]{
        background: #ddd;
        border: 2px solid #666;
        border-radius: 10px;
        box-sizing: border-box;
        color: #666;
        padding: 4px;
    }
    
    .select-badges button:hover,
    .select-badges input[type="button"]:hover{
        background: #666;
        border: 2px solid #ddd;
        color: #ddd;
    }
    
    .select-badges input[type="text"],
    .select-badges #txt-genere{
        background: #ddd;
        border: 1px solid #666;
        color: #666;
        padding: 4px;
    }

    .select-badges label,
    .select-badges input[type="checkbox"]{
      display: inline-block;
    }
    
    .select-badges #txt-genere{
        height: 250px;
        width: 50%;
    }
    
</style>

<div ng-app="angularApp" ng-controller="appController" ng-cloak>
    <div class="select-badges">
        <form action="#" method="post">
            <p data-ng-show="!loadData">
                <input ng-model="oldCode" type="checkbox" data-ng-click="oldCode != oldCode"/> <label>coche la case si tu as déjà une fiche.</label>
            </p>
            <div data-ng-show="oldCode">
              Indique le lien du message contenant tes badges
              <input type="text" ng-model="ancienCode">
                <br />
                <input data-ng-show="ancienCode != null" type="button" value="valider" ng-click="recupInfos(ancienCode);"/>
            </div>
            <p data-ng-show="loadData"><strong>La liste des bages a bien été récupérée</strong></p>
 
            <div id="blk-cb"><div id="listing-badges"><!--
                    --><h3>Mes badges : </h3><!--
                
                    --><input type="checkbox" id="badge1" value=""><!--
                    --><label for="badge1"> <img src="https://illiweb.com/fa/i/smiles/icon_lol.gif" alt="Laughing" longdesc="7" loading="lazy"> </label><!--

                    --><input type="checkbox" id="badge2" value=""><!--
                    --><label for="badge2"> <img src="https://illiweb.com/fa/i/smiles/icon_flower.png" alt="flower" longdesc="59" loading="lazy"> </label><!--

                    --><input type="checkbox" id="badge3" value=""><!--
                    --><label for="badge3"> <img src="https://illiweb.com/fa/i/smiles/icon_sunny.png" alt="sunny" longdesc="46" loading="lazy"> </label><!--

                --></div></div>

            <div id="rendu-cache" style="display: none;"></div>
            <textarea id="txt-genere" ng-hide="!showCode" readonly></textarea>
      
            <div class="btn">
                <button type="button" ng-click="genererCode()">Générer le code</button>
            </div>
        </form>
        
        <p ng-hide="!showCode">Il ne te reste plus qu'à aller copier/coller ce code dans ton message contenant ta liste de badges, dans <a href="http://miettes.lebonforum.com/f25-les-badges-des-membres" target="_blank">cette zone</a>.</p>
    </div>
</div>

<!-- Bibliothèque Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" language="Javascript" type="text/javascript"></script>
 
<script type="text/javascript">
    // On crée l'application angular et on appelle les modules supplémentaires
    var app = angular.module("angularApp", []);

    // On associe le js à exécuter dans l'application angular
    app.controller("appController", function($scope, $sce, $timeout){
        // on indique la version du forum
        // attention de bien respecter les écritures ci-dessous
        // invision, phpbb2, phpbb3, punbb, modernbb, awesomebb
        var versionForum = 'modernbb';
        
        var contentMsg,
            cibleIdMsg;
        
        switch (versionForum) {
            case 'phpbb2':
              contentMsg = ".postbody > div:first-child";
              cibleIdMsg ='#p';
              break;

            case 'phpbb3':
              contentMsg = ".postbody > .content > div";
              cibleIdMsg ='#p';
              break;

            case 'punbb':
              contentMsg = "+ .postbody > .post-entry > .entry-content > div > div:first-child";
              cibleIdMsg ='#p';
              break;

            case 'invision':
              contentMsg = ".postbody > .post-entry > div:first-child";
              cibleIdMsg ='#p';
              break;

            case 'awesomebb':
              contentMsg = "+ .post-body > .post > .post-content";
              cibleIdMsg ='#';
              break;

            /* modernbb */
            default:
              contentMsg = ".postbody > .content > div:first-child";
              cibleIdMsg ='#p';
              break;
            }

        
        // Par défaut, on cache la zone du texte généré
        $scope.showCode = false;

        // On cache le texte de fiche chargée
        $scope.loadData = false;

        // on récupère le code
        $scope.genererCode = function(){

            // On récupère le contenu html de la div #rendu
            var codeMsg = document.getElementById('blk-cb').innerHTML;
            $('#rendu-cache').html(codeMsg);

            // On empêche l'édition des cases à cocher
            $('#rendu-cache input[type="checkbox"]').each( function(){
                $(this).attr('disabled', true);
            });

            // On resauvegarde le nouveau code modifié
            codeMsg = document.getElementById('rendu-cache').innerHTML;

            // On l'injecte dans notre champ html
            document.getElementById('txt-genere').value = codeMsg ;

            // On affiche la zone
            $scope.showCode = true;
        };

        // Récupérer info
        $scope.recupInfos = function(data){
            // On récupère l'id du message
            var msg = data,
                lienMsg = msg.split('#')[0],
                idMsg = msg.split('#')[1];

            // On met le contenu du message dans une balise html cachée
            $('#rendu-cache').load(''+ lienMsg +' '+ cibleIdMsg +''+ idMsg +' '+ contentMsg +'');

            $timeout( function(){
                // On permet l'édition de chaque case à cocher
                $('#rendu-cache input[type="checkbox"]').each( function(){
                    $(this).removeAttr('disabled');
                });

                // On sauvegarde tout le nouveau contenu
                var htmlToCopy = $('#rendu-cache > div:first-child').html();

                // On copie le html dans la zone visible pour que le membre puisse éditer
                $('#blk-cb').html(htmlToCopy);

                // On cache le champs et la case "j'ai déjà une fiche"
                $scope.oldCode = false;

                // On affiche un message pour dire que la fiche a bien été récupérée
                $scope.loadData = true;

                // Au bout de 2sec, on cache ce message.
                 $timeout( function(){
                    $scope.loadData = false;
                }, 2000);

            }, 800);

        };
    });

    $('body')
        // Au clic sur le champ de texte généré, il se sélectionne
        .on("click", "#txt-genere", function(){
            if (!window.getSelection().toString()) {
            // Required for mobile Safari
            this.setSelectionRange(0, this.value.length);
            }
        })
        // On met à jour le html des cases en fonction de leur état (cochée, décochée)
        .on("change", '#blk-cb input[type="checkbox"]', function(){
            if($(this).is(':checked')){
                $(this).attr('checked', true);
            }else{
                $(this).removeAttr('checked');
            }
        });

</script>

Idea Pense à bien le créer en mode avancé.

Ce que tu dois modifier

• Ici, c’est cette partie que tu dois modifier :
Code:
--><h3>Mes badges : </h3><!--
                
                    --><input type="checkbox" id="badge1" value=""><!--
                    --><label for="badge1"> <img src="https://illiweb.com/fa/i/smiles/icon_lol.gif" alt="Laughing" longdesc="7" loading="lazy"> </label><!--

                    --><input type="checkbox" id="badge2" value=""><!--
                    --><label for="badge2"> <img src="https://illiweb.com/fa/i/smiles/icon_flower.png" alt="flower" longdesc="59" loading="lazy"> </label><!--

                    --><input type="checkbox" id="badge3" value=""><!--
                    --><label for="badge3"> <img src="https://illiweb.com/fa/i/smiles/icon_sunny.png" alt="sunny" longdesc="46" loading="lazy"> </label><!--

Il s’agit du contenu que le membre devra copier/coller dans le message, et qui correspondra au contenu visible sur sa fiche de personnage (sans les cases à cocher que l’on cachera en CSS).

Exclamation Pense à bien mettre des commentaires pour éviter les retours à la ligne non désirés (En savoir plus).

• Il faut aussi que tu indiques la bonne version de ton forum :
Code:
var versionForum = 'modernbb';

Une zone dédiée

On va ensuite créer une zone où chaque membre pourra poster sa liste. Etant donné qu'il postera lui même le message, il pourra l'éditer comme bon lui semble et les autres membres pourront répondre/le féliciter sans que cela n'impacte sa fiche Smile

Idea Sur mon forum de test, c'est ce topic.

Idea Attention aux permissions ! N'interdis pas la lecture aux invités si tu veux que ces derniers puissent voir la liste sur la fiche d'un membre.

Les feuilles de personnage

Passons maintenant à une partie un peu plus complexe. Ici, je pars du principe que tu as déjà mis en place les feuilles de personnage sur ton forum.

Idea Pour créer un nouveau champ : Panneau d'administration > Modules >  Jeux de rôle > Gestion des champs.
Idea Pour éditer le style d'un champ : Panneau d'administration > Modules >  Jeux de rôle > Styles des champs.

De nouveaux champs

L'url du message de la liste des badges

On va commencer par créer un nouveau champ qui sera modifiable par le membre et qui sera de type "champ texte" :
Afficher une liste de badges sur le profil du membre Champ-10

On va ensuite aller l'éditer en ajoutant une couleur définie à ce champ et en le plaçant à gauche :
Afficher une liste de badges sur le profil du membre Style-14

Un champ pour afficher les badges

Deuxième nouveau champ à créer : celui qui contiendra la liste des badges. Cette fois, ce champ ne sera pas modifiable par le membre et sera de type "champ texte" :
Afficher une liste de badges sur le profil du membre Champ-11

On va ensuite aller l'éditer en ajoutant une images définie à ce champ et en le plaçant à gauche :
Afficher une liste de badges sur le profil du membre Style-15

Idea Voici l'image à utiliser (rassure-toi, on va la cacher ensuite, mais nous en aurons besoin dans le javascript) :
Code:
https://i.servimg.com/u/f71/20/05/19/39/35343010.png

Comment ça marche

Dans l'édition de sa fiche de personnage, le membre doit indiquer dans "Url liste badges"  l'url du message qui contient sa fiche :
Afficher une liste de badges sur le profil du membre Editio11

Ça se met à jour

On va ensuite ajouter un javascript à afficher sur toutes les pages (Panneau d'administration > Modules > HTML & Javascript > Gestion des codes Javascript.).

Ce JS va faire les choses suivantes :
- si on est en train de regarder une fiche de personnage d'un membre :
--- il supprimera le champ "Url liste badges"
--- affichera la liste

Le voici commenté :
Code:
;$(function(){

  // On indique la couleur du champs qui contient l'url vers le message
  var couleur = "#E36F26";
  
  // on indique la version du forum
  // attention de bien respecter les écritures ci-dessous
  // invision, phpbb2, phpbb3, punbb, modernbb, awesomebb
  var versionForum = 'modernbb';
    
  var fiche,
      parents,
      contentMsg,
      cibleIdMsg,
      versionSpe = false;
    
  switch (versionForum) {
    case 'phpbb2':
      fiche = "#profile-advanced-details .row1 > table td[nowrap='nowrap'] > span.gen";
      parents = ".row1";
      contentMsg = ".postbody > div:first-child";
      cibleIdMsg ='#p';
      versionSpe = true;
      break;

    case 'phpbb3':
      fiche = ".column1";
      parents = ".details";
      contentMsg = ".postbody > .content > div";
      cibleIdMsg ='#p';
      break;

    case 'punbb':
      fiche = ".frm-set.left.rpg";
      parents = "dl";
      contentMsg = "+ .postbody > .post-entry > .entry-content > div > div:first-child";
      cibleIdMsg ='#p';
      break;

    case 'invision':
      fiche = ".box-content.profile .ipbform2";
      parents = "dl";
      contentMsg = ".postbody > .post-entry > div:first-child";
      cibleIdMsg ='#p';
      break;

    case 'awesomebb':
      fiche = ".block-dl-default";
      parents = ".block-dl-default";
      contentMsg = "+ .post-body > .post > .post-content";
      cibleIdMsg ='#';
      break;

    /* modernbb */
    default:
      fiche = ".column1";
      parents = ".details";
      contentMsg = ".postbody > .content > div:first-child";
      cibleIdMsg ='#p';
      break;
    }

    // si on est sur la fiche de personnage
    if( location.href.indexOf('/u') > -1 && location.href.indexOf('rpg') > -1 ){
          
        if(versionSpe){
           // Si le forum est en phpbb2
           // On récupére l'url du message contenant la liste
            var msgFiche = $(fiche).find('.gen[style="color:'+couleur+';"]').parents('tr').find('td + td .gen[style="color:'+couleur+';"]').html();
          
            // On cache le champs qui contient le lien du message de la liste
            $(fiche).find('dt .gen[style="color:'+couleur+';"]').parents(parents).hide();
          
        }else{
            // Si le forum est dans une autre version que phpbb2
            // On récupére l'url du message contenant la liste
            var msgFiche = $(fiche).find('dt .gen[style="color:'+couleur+';"]').parents(parents).find('dd .gen').html();
          
            // On cache le champs qui contient le lien du message de la liste
            $(fiche).find('dt .gen[style="color:'+couleur+';"]').parents(parents).hide();
        }

        // On isole le lien du message et l'id du message
        var lienMsg = msgFiche.split('#')[0],
        idMsg = msgFiche.split('#')[1];

        // On ajoute une classe pour pouvoir styliser
        $(fiche).find('img[src="https://i.servimg.com/u/f71/20/05/19/39/35343010.png"]').parents(parents).addClass('liste-badges');

        // On affiche sa liste
        $(fiche).find('img[src="https://i.servimg.com/u/f71/20/05/19/39/35343010.png"]').parents(parents).load(''+ lienMsg +' '+ cibleIdMsg +''+ idMsg +' '+ contentMsg +'');

    }

});

Ici, tu as 2 choses à modifier :
• la version de ton forum
Code:
var versionForum = 'modernbb';
• la couleur du champ "Url liste badges"
Code:
var couleur = "#E36F26";

Un soupçon de CSS

Pour finir, on va faire en sorte que sur la fiche de personnage :
• les checkbox soient cachées,
• les images soient en noir et blanc,
• si une checkbox est cochée, l'image associée soit colorée.

Pour cela, tu as juste à copier cette CSS dans Panneau d’administration > Affichage >  Images et Couleurs > Couleurs > Feuille de style CSS :
Code:
/*** [TUTO] Badges sur fiche perso ***/
/* Le cadre qui contient les badges */
#listing-badges{
    background: #ddd;
    border: 2px solid #666;
    border-radius: 20px;
    box-sizing: border-box;
    margin: 10px auto;
    padding: 10px;
    text-align: center;
    width: 96%;
}
    
/* Titre "Mes badges" */
#listing-badges h3{
    border-bottom: 2px solid #666;
    color: #666;
    font-size: 18px;
    font-weight: bold;
    line-height: 25px;
    margin-bottom: 5px;
}

#listing-badges label,
#listing-badges input[type="checkbox"]{
  display: inline-block;
}

/* On cache les cases à cocher */
.liste-badges #listing-badges input{
  display: none;
}

/* Image en noir & blanc */
.liste-badges #listing-badges input + label{
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}

/* Image en couleur qui la case est cochée */
.liste-badges #listing-badges input[checked="checked"] + label{
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}





Et voilà ! Si tu as bien suivi tout le tutoriel, tu devrais voir sur la fiche de personnage de ton membre :
• les badges qu'il a gagné en couleurs,
• ceux qu'il doit encore gagné en noir et blanc.





Si tu as un souci pour mettre en place ça sur ton forum, n'hésite pas à nous demander un coup de pouce Smile

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



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne à nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

  • ► Les groupes :
  • @groupes$
  • @