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 : 2312

Afficher un bloc en fonction des permissions d'un membre Empty Afficher un bloc en fonction des permissions d'un membre

le Ven 26 Avr - 14:52

Toutes versions

Afficher un bloc en fonction des permissions d'un membre

Hello hello Smile

Dans ce tutoriel nous allons voir une astuce pour afficher un élement (bloc, texte, liste déroulante,...) pour un utilisateur ou une liste d'utilisateurs.

Dans mon exemple, je vais afficher sur l'index :
• Un bloc d'informations pour les membres présentés ;
Spoiler:
Afficher un bloc en fonction des permissions d'un membre Bloc-e12
• Un bloc d'informations pour les membres du groupe "les râleuses";
Spoiler:
Afficher un bloc en fonction des permissions d'un membre Bloc-e13

Idea Pré-requis :
• avoir accès aux templates du forum ;
• avoir des connaissances de bases en HTML et CSS ;
• Ne pas être effrayé par le javascript

Idea Ce tutoriel fonctionne pour toutes les versions de forum.

Un js bien utile

Pour commencer, nous allons appeler ce script sur notre forum :
Code:
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>

Pour cela, nous allons aller dans "PA > Général > promotion du forum > Les moteurs de recherche". Dans la partie "Balises supplémentaires", on va cliquer sur le "+", "lier un javascript" et on va mettre :
Code:
http://tinyurl.com/var-fa
Puis on enregistre Smile

Idea Ce script provient d'un tutoriel disponible sur le forum d'entraide de FA .

Comme indiqué dans le tuto de FA, il permet d'utiliser les variables du forum n'importe où sur celui-ci.

Nous, celle qui va nous intéresser est : USERLINK qui nous permettra de récupérer l'url vers le profil de notre membre Smile

Une petite modification de template

Ici, on va faire en sorte que ça s'affiche sur toutes les pages. Nous allons donc aller éditer le template "overall_header" (PA > Affichage > Template > Général).

• Je vais ajouter une div cachée qui contiendra ma variable "USERLINK". Juste après la balise "body", je vais ajouter :
Code:
<div style="display: none;"><span class="USERLINK"></span></div>

Ce qui donne :
Code:

<body id="modernbb">
  <div style="display: none;"><span class="USERLINK"></span></div>

Idea Le body a peut-être une classe différente en fonction de la version de ton forum, mais le principe est le même Smile

• Pour finir dans cette partie, on ajoute une div qui réceptionnera ma liste d'informations. On va la mettre après la div cachée qui contient la variable :
Code:
<div id="liste-lien-utile"></div>

Ce qui donne au final :
Code:

<body id="modernbb">
  <div style="display: none;"><span class="USERLINK"></span></div>
  <div id="bloc-informations"></div>

La création de mes listes

Ici, on va utiliser ce tutoriel :
Parade aux iframes

Dans un premier temps, on va créer une page html qui contiendra nos 2 listes :
Pour les membres présentés :
Code:
<div class="bloc-informations" data-permissions="membres">
   <div class="titre1">Infos utiles</div>
   <ul>
      <li><strong>Des formations</strong> sont disponibles</li>
      <li>Nous sommes libres pour réaliser des <strong>commandes</strong></li>
   </ul>
</div>
Pour les râleuses :
Code:
<div class="bloc-informations" data-permissions="raleuses">
   <div class="titre1">TDL</div>
   <ul>
      <li>Penser à la pub</li>
      <li>Faire une fiche de partenariats</li>
      <li>Discord ?</li>
   </ul>
</div>

On sauvegarde et on garde en mémoire le lien de cette page html pour pouvoir utiliser le tuto cité plus haut Smile

Idea Je te laisse gérer la CSS de ces 2 blocs ; ce n'est pas le sujet de ce tutoriel ^^

Encore du js

Maintenant, le truc le plus complexe Smile Voilà ce qu'il va devoir faire :
1) Récupérer l'url du membre et isoler son id utilisateur ;
2) Regarder si l'utilisateur a des permissions particulières ;
3) Charger le bon bloc en fonction des permissions ;

C'est parti !

L'idUser

Dans un premier temps, on va tester si l'utilisateur est connecté (oui, sinon, il n'a pas d'id Wink ). Pour cela, on va tester si la personne peut éditer son profil. On va donc se baser sur l'image qui est censée s'afficher au niveau du profil :
Code:
if( $('.mainmenu #i_icon_mini_profile').length){
    // Notre code sera ici
}
Idea Ici, je pars d'un template par défaut où je n'ai pas changé ma barre de navigation et où les ID sont ceux de base Smile

On va donc stocker dans une variable (= une sorte de case mémoire) le lien remonté par la variable "USERLINK" :
Code:
var idUser = $(".USERLINK").text();

Cette information ressemble à ça :
Code:
http://tambouille-raleuses.forumactif.com/u1
Or, nous ce qui nous intéresse c'est le numéro à la fin. On va donc "découper" cette variable en se basant sur "/u". Pour cela, on va utiliser la méthode javascript .split() :
Code:
var idUser = $(".USERLINK").text().split('/u');

Cette fois, on récupére un tableau à 2 lignes :
Spoiler:
Afficher un bloc en fonction des permissions d'un membre Bloc-e11
On ne veut que la deuxième ligne, on va donc enregistrer ça dans "idUser" :
Code:
idUser = idUser[1];
Cette fois, on récupére bien le numéro.

Pour le moment, on a donc ce code :
Code:

// Je vérifie si le membre est connecté
if( $('.mainmenu #i_icon_mini_profile').length){
    // Je récupére son id
    var idUser = $(".USERLINK").text().split('/u');
    idUser = idUser[1];
}

Voilà une bonne chose de faite Smile

Quelles permissions a-t-il ?

Maintenant, on va créer une variable par liste de permissions. Dans mon exemple, j'en aurai donc 2 :
• les membres présentés (listePermMb) ;
• les râleuses (listePermRaleuses)

Ce qui me donne :
Code:
// Je crée ma liste de membres présentés
var listePermMb = [];

// Je crée ma liste de raleuses
var listePermRaleuses = [];

Ensuite, on va définir nos membres. A chaque fois, ça se déclarera de la même façon :
Code:
AAA.push('BBB');
AAA = la liste de permission à laquelle appartient l'utilisateur ;
BBB = l'id du profil de l'utilisateur ;

Par exemple, pour moi :
Code:
// Miettes
listePermRaleuses.push('1');
// Mäven
listePermRaleuses.push('2');

// Ayael
listePermMb.push('4');
// Djorken
listePermMb.push('5');
// Sören
listePermMb.push('6');
// Fleur'
listePermMb.push('7');
// Cerise
listePermMb.push('8');
Idea J'ai mis en commentaire les pseudos pour m'y retrouver, mais ça n'est pas obligatoire ; en js, un commentaire s'écrit de 2 façons :
Code:
// Je suis un commentaire

/* Je suis un commentaire */
Idea J'ai aussi choisi de les classer "par permission", mais ça c'est mon côté maniaque ; tu peux très bien les mettre les uns à la suite des autres Smile

J'affiche le bon bloc

La dernière partie Smile

Dans un premier temps, on fait un test : est-ce que l'utilisateur fait parti des râleuses ?
Idea Je commence par ce groupe parce que, même par la suite, c'est celui qui contiendra le moins de membres Smile
Code:
if (listePermRaleuses.indexOf(idUser) > -1 ){
   /* Mon code sera ici */
}
Si jamais le membre est une râleuse, je lui affiche le bon bloc :
Code:
$('#bloc-informations').load('/h2-test-bloc-a-afficher [data-permissions="raleuses"]');
Sinon, je teste s'il fait parti des membres présentés et dans ce cas, je lui affiche le bloc adéquate :
Code:
if (listePermMb.indexOf(idUser) > -1 ){
      $('#bloc-informations').load('/h2-test-bloc-a-afficher [data-permissions="membres"]');
    } 

Ce qui donne pour cette partie :
Code:
// Je regarde les permissions du membres
    // On teste si le membre fait partie des raleuses :
    if (listePermRaleuses.indexOf(idUser) > -1 ){
      $('#bloc-informations').load('/h2-test-bloc-a-afficher [data-permissions="raleuses"]');
    }else
    // On teste si le membre ne fait pas partie des raleuses et s'il fait partie des membres présentés
    if (listePermMb.indexOf(idUser) > -1 ){
      $('#bloc-informations').load('/h2-test-bloc-a-afficher [data-permissions="membres"]');
    } 

Le JS final

Et on fait ce js une fois la page chargée. Voici le code final :
Code:
$(function(){

   // Je vérifie si le membre est connecté
   if( $('.mainmenu #i_icon_mini_profile').length){
       // Je récupére son id
       var idUser = $(".USERLINK").text().split('/u');
       idUser = idUser[1];

       // Je crée ma liste de membres présentés 
       var listePermMb = [];
       // Je crée ma liste de raleuses
       var listePermRaleuses = [];

       // Miettes
       listePermRaleuses.push('1');
       // Mäven
       listePermRaleuses.push('2');

       // Ayael
       listePermMb.push('4');
       // Djorken
       listePermMb.push('5');
       // Sören
       listePermMb.push('6');
       // Fleur'
       listePermMb.push('7');
       // Cerise
       listePermMb.push('8');

      
       // Je regarde les permissions du membres
       // On teste si le membre fait partie des raleuses :
       if (listePermRaleuses.indexOf(idUser) > -1 ){
         $('#bloc-informations').load('/h2-test-bloc-a-afficher [data-permissions="raleuses"]');
       }else
       // On teste si le membre ne fait pas partie des raleuses et s'il fait partie des membres présentés
       if (listePermMb.indexOf(idUser) > -1 ){
         $('#bloc-informations').load('/h2-test-bloc-a-afficher [data-permissions="membres"]');
       } 
   }

});

On va ajouter ce code dans nos modules (PA > Modules > HTML & JAVASCRIPT
> Gestion des codes Javascript) et on va afficher sur toutes les pages Smile




C'est fini mon p'tit loup Smile Si tu as un souci, tu sais où nous trouver Razz



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.@@

Post-It des Râleuses