Header
Partagez | 

[Xooit] Compteur de mot pour ton forum

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur

Message Sujet: [Xooit] Compteur de mot pour ton forum   Mer 8 Avr - 12:17

Bonjour bonjour Smile

Si tu es ici, c'est probablement parce que tu as un forum RPG, ou, tout simplement, parce que tu aimerais ajouter un compteur de mot sur ton forum.

Nous allons voir ici comment procéder ^^

Pré-requis

Eh bien... pour le coup, il ne faut pas grand chose pour que ça fonctionne :
  • avoir accès à l'admin et surtout, aux templates,
  • appeler la bibliothèque jQuery.

Pour ce dernier point, il te suffit de copier/coller ce code :
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
dans le template OVERALL_HEADER.TPL, juste après :
Code:
<title>{SITENAME} :: {PAGE_TITLE}</title>

Exclamation ne le fais pas si vous avez déjà ajouté cette bibliothèque Wink

Le tutoriel


Notre but va donc de faire ça :

Comme tu peux le voir, la zone de texte indique Nombre de caractères : 369 ; Nombre de mots : 55. Mais si tu regardes bien l'image, nous avons en réalité bien plus de caractères et de mots ! Ici, nous allons voir comment faire en sorte que les mots de deux lettres ou moins ne soient pas considérer comme "des mots" et que tout ce qui se trouvent entre crocher (pour le BBcode) ou entre "fleche" (pour le html) ne soient pas comptabilisés.

Au boulot !

Une fonction à ne faire que dans certains cas

Pour que notre javascript fonctionne, nous allons devoir l'appeler sur toutes les pages du forum (nous y reviendrons en le mettant en place ^^). Cela dit, il va être inutile de l'exécuter sur la page d'index ou dans les sous-forum, bref, là où il n'y a pas d'éditeur de texte.

On va donc commencer par lancer une fonction javascript une fois la page chargée :
Code:
jQuery( function(){

});
Si tu as déjà fait un peu de javascript, tu as peut-être déjà croisé ceci :
Code:
jQuery(document).ready( function(){
   
});
Eh bien sache que le code fourni juste au-dessus et une version raccourcie du "ready()" Smile

Une fois la page chargée, on regarde s'il y a un éditeur de texte :
Code:
jQuery('#bbcodearea1').length

S'il n'y en a pas, on ne lit pas la suite du script. Pour cela, on va utiliser "return" qui signifie : tu t'arrêtes là, ne lis pas la suite.
Code:
if(!jQuery('#bbcodearea1').length){
      return ;
   }

En revanche, s'il y a une zone de saisi de texte, on va continuer à lire. Dans ce cas, on va entrer dans une nouvelle fonction :
Code:
jQuery( function(){
   // si pas de champs texte, on arrête la lecture du script
   if(!jQuery('#bbcodearea1').length){
      return ;
   }

   // Il y a un champs texte
   jQuery(function(){

   });

)};

Ici, on va récupérer la zone "éditeur de texte" et on va stocker cette information dans une variable (une variable est une sorte de case mémoire ^^).
Code:
var champs_msg = jQuery('#bbcodearea1');

Et on va tester si cette information existe ou pas. Si elle n'existe pas, inutile de continuer, cela signifie que l'éditeur de texte n'existe pas :
Code:
if(!champs_msg){
         return ;
      }

Idea Lorsque l'on indique ! cela signifie que l'on prend le contraire de l'information. Autrement dit : champs_msg veut dire "la zone existe" et donc !champs_msg veut dire "la zone n'existe pas".

Pour le moment, nous avons donc ce bout de code :
Code:
jQuery( function(){
   /// si pas de champs texte, on arrête la lecture du script
   if(!jQuery('#bbcodearea1').length){
      return ;
   }

   // Il y a un champs texte
   jQuery(function(){   

      var champs_msg = jQuery('#bbcodearea1');

      // Si on ne trouve pas l'éditeur de texte, on arrete la lecture du script
      if(!champs_msg){
         return ;
      }
   });

});

Une zone d'affichage

Bon ! Continuons un peu notre travail. Pour pouvoir afficher le nombre de caractères et de mots, il va falloir que l'on crée une nouvelle zone. Impossible d'éditer un template pour ça, il va falloir gérer cet affichage et ajout en javascript.

Tout d'abord, on crée une variable qui va contenir une div :
Code:
var champs_infos = document.createElement('div');

On va ajouter à cet élement un id afin de pouvoir le styliser plus tard avec un peu de CSS (cependant, nous n'en parlerons pas dans ce tutoriel) :
Code:
champs_infos.setAttribute('id', 'compteur-mots');

Et finalement, on injecte cette div dans la zone de l'éditeur de texte :
Code:
var zone = jQuery(champs_msg).parent();
jQuery(champs_infos).appendTo(zone);

Notre code avance, nous en sommes ici :
Code:
jQuery( function(){
   /// si pas de champs texte, on arrête la lecture du script
   if(!jQuery('#bbcodearea1').length){
      return ;
   }

   // Il y a un champs texte
   jQuery(function(){   

      var champs_msg = jQuery('#bbcodearea1');

      // Si on ne trouve pas l'éditeur de texte, on arrete la lecture du script
      if(!champs_msg){
         return ;
      }

      // On crée une zone pour afficher le nombre de mots et de caractères
      var champs_infos = document.createElement('div');
      champs_infos.setAttribute('id', 'compteur-mots');
      var zone = jQuery(champs_msg).parent();
      jQuery(champs_infos).appendTo(zone);
   });

});

Notre fonction

Ahhh ! Attaquons le point essentiel de notre javascript : la petite fonction qui va compter pour nous ^^ Première étape : déclarer la variable :
Code:
function compteur(champs_msg){

}

Tout d'abord, on va stocker dans une nouvelle variable le contenu de notre champs texte :
Code:
var nb = champs_msg.val() ;

Idea val() permet de récupérer le contenu de l'attribut value d'une balise html.

Problème : si on ne fait que ça, il va également compter les balises bbcode et html. Or, nous ne voulons ni les crochets, ni les "flèches", ni ce qui se trouvent entre les 2. On va donc remplacer ces caractères et contenus par du vide Smile
Code:
var nb = champs_msg.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ');
Idea replace(/\[.*?\]/g,' ') signifie "on remplace les crochets et ce qu'ils contiennent par du vide"
replace(/<.*?>/g,' ') signifie "on remplace les "flèches" et ce qu'elles contiennent par du vide"

Cette fois, on a donc bien uniquement le texte et pas de BBcode ou HTML.

Ensuite, dans ce champs, on va regarder les caractères et les compter :
Code:
var nb_carac = (nb.match(/\S/g)||[]).length;
Idea la méthode match() nous permet de ne prendre en compte que les caractères (et caractères spéciaux) mais pas les espaces vides ou retour à la ligne Smile

Puis, on va compter le nombre de mots d'au minimum 3 caractères :
Code:
var nb_mots = (nb.match(/\S{3,}/g)||[]).length ;
Idea {3, } signifie "élements de 3 caractères au moins".

On a nos deux comptes, il ne reste plus que les afficher dans notre champs_infos
Code:
champs_infos.innerHTML = "Nombre de caractères : "+nb_carac+" ; Nombre de mots : "+nb_mots+" ";

Au final, notre fonction ressemble à ça :
Code:
function compteur(champs_msg){
         // On ne prend pas en compte les mots entre [] ou <>
         var nb = champs_msg.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ');

         // On compte le nombre de caractères, sans les espaces
         var nb_carac = (nb.match(/\S/g)||[]).length;

         // On compte le nombre de mot de 3 lettres ou plus
         var nb_mots = (nb.match(/\S{3,}/g)||[]).length ;

         // On affiche les infos
         champs_infos.innerHTML = "Nombre de caractères : "+nb_carac+" ; Nombre de mots : "+nb_mots+" ";

      }

Et on va la placer au début du javascript (après les tests) :
Code:
jQuery( function(){
   /// si pas de champs texte, on arrête la lecture du script
   if(!jQuery('#bbcodearea1').length){
      return ;
   }

   // Il y a un champs texte
   jQuery(function(){   
      
      var champs_msg = jQuery('#bbcodearea1');

      // Si on ne trouve pas l'éditeur de texte, on arrete la lecture du script
      if(!champs_msg){
         return ;
      }

      function compteur(champs_msg){
         // On ne prend pas en compte les mots entre [] ou <>
         var nb = champs_msg.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ');

         // On compte le nombre de caractères, sans les espaces
         var nb_carac = (nb.match(/\S/g)||[]).length;

         // On compte le nombre de mot de 3 lettres ou plus
         var nb_mots = (nb.match(/\S{3,}/g)||[]).length ;

         // On affiche les infos
         champs_infos.innerHTML = "Nombre de caractères : "+nb_carac+" ; Nombre de mots : "+nb_mots+" ";

      }
      

      // On crée une zone pour afficher le nombre de mots et de caractères
      var champs_infos = document.createElement('div');
      champs_infos.setAttribute('id', 'compteur-mots');
      var zone = jQuery(champs_msg).parent();
      jQuery(champs_infos).appendTo(zone);
      

   });
   
});

Et si on comptait ?

On a quasi terminé ; cela dit, tu ne penses pas qu'il manque le plus important : quand compter ? Eh bien, nous allons executer la fonction à chaque fois qu'on a cliqué sur une touche.
Code:
jjQuery('body').on('keyup', zone, function(){
   compteur(champs_msg) ;
}
On a donc ce code :
Code:
jQuery( function(){
   /// si pas de champs texte, on arrête la lecture du script
   if(!jQuery('#bbcodearea1').length){
      return ;
   }

   // Il y a un champs texte
   jQuery(function(){   
      
      var champs_msg = jQuery('#bbcodearea1');

      // Si on ne trouve pas l'éditeur de texte, on arrete la lecture du script
      if(!champs_msg){
         return ;
      }

      function compteur(champs_msg){
         // On ne prend pas en compte les mots entre [] ou <>
         var nb = champs_msg.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ');

         // On compte le nombre de caractères, sans les espaces
         var nb_carac = (nb.match(/\S/g)||[]).length;

         // On compte le nombre de mot de 3 lettres ou plus
         var nb_mots = (nb.match(/\S{3,}/g)||[]).length ;

         // On affiche les infos
         champs_infos.innerHTML = "Nombre de caractères : "+nb_carac+" ; Nombre de mots : "+nb_mots+" ";

      }
      

      // On crée une zone pour afficher le nombre de mots et de caractères
      var champs_infos = document.createElement('div');
      champs_infos.setAttribute('id', 'compteur-mots');
      var zone = jQuery(champs_msg).parent();
         jQuery(champs_infos).appendTo(zone);
      
      // Quand on a appuyé sur un bouton du clavier dans la zone de saisi,
      // on fait une fonction.
      jQuery('body').on('keyup', zone, function(){
            compteur(champs_msg) ;
         }

      });

   });
   
});

Exclamation Pour économiser des ressources, on peut aussi à ajouter un timer et n'exécuter la fonction que toutes les N secondes Smile

Pour cela, il suffit :
- de déclarer une variable "compte" au debut de la fonction et de lui donner la valeur "false"
Code:
var compte = false ;
- de la passer également à "false" une fois qu'on a compté :
Code:
function compteur(champs_msg){
         // On ne prend pas en compte les mots entre [] ou <>
         var nb = champs_msg.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ');

         // On compte le nombre de caractères, sans les espaces
         var nb_carac = (nb.match(/\S/g)||[]).length;

         // On compte le nombre de mot de 3 lettres ou plus
         var nb_mots = (nb.match(/\S{3,}/g)||[]).length ;

         // On affiche les infos
         champs_infos.innerHTML = "Nombre de caractères : "+nb_carac+" ; Nombre de mots : "+nb_mots+" ";

         compte = false ;
      }
- de faire un test dès qu'on clique sur une touche du clavier dans la zone de saisie afin de vérifier s'il faut ou non compter Smile :
Code:
jQuery('body').on('keyup', zone, function(){
         if(compte){
            return ;
         }else{
            compte = true ;
            // On compte toutes les 20 secondes
            setTimeout(
               function(){
                  compteur(champs_msg)
               }, 2000
            );
            
         }
      });

Idea 2000 est le temps en milliseconde entre le moment où l'on clique et le moment où l'on calcule.
et voilà le code final avec le timer :
Code:
jQuery( function(){
   /// si pas de champs texte, on arrête la lecture du script
   if(!jQuery('#bbcodearea1').length){
      return ;
   }

   // Il y a un champs texte
   jQuery(function(){   
      
      var compte = false ;

      var champs_msg = jQuery('#bbcodearea1');

      // Si on ne trouve pas l'éditeur de texte, on arrete la lecture du script
      if(!champs_msg){
         return ;
      }

      function compteur(champs_msg){
         // On ne prend pas en compte les mots entre [] ou <>
         var nb = champs_msg.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ');

         // On compte le nombre de caractères, sans les espaces
         var nb_carac = (nb.match(/\S/g)||[]).length;

         // On compte le nombre de mot de 3 lettres ou plus
         var nb_mots = (nb.match(/\S{3,}/g)||[]).length ;

         // On affiche les infos
         champs_infos.innerHTML = "Nombre de caractères : "+nb_carac+" ; Nombre de mots : "+nb_mots+" ";

         compte = false ;
      }
      
      // On crée une zone pour afficher le nombre de mots et de caractères
      var champs_infos = document.createElement('div');
      champs_infos.setAttribute('id', 'compteur-mots');
      var zone = jQuery(champs_msg).parent();
      jQuery(champs_infos).appendTo(zone);

      // Quand on a appuyé sur un bouton du clavier dans la zone de saisi,
      // on fait une fonction.
      jQuery('body').on('keyup', zone, function(){
         if(compte){
            return ;
         }else{
            compte = true ;
            // On compte toutes les 20 secondes
            setTimeout(
               function(){
                  compteur(champs_msg)
               }, 2000
            );
            
         }
      });

   });
   
});

Edition d'un message ou nouveau message ?

Si on laisse comme ça, notre champs n'apparait pas au chargement de la page. On va donc l'initialiser en lui indiquant :
Code:
champs_infos.innerHTML = "Nombre de caractères : 0 ; Nombre de mots : 0 ";
Cependant, si on s'arrête là, même à l'édition d'un message, on va afficher :
Citation :
Nombre de caractères : 0 ; Nombre de mots : 0
Ce n'est pas ce qu'on veut ^^

On va donc tester si la zone de texte est vide (= cas d'un nouveau message) : dans ce cas, on initialise la div ; sinon, on compte pour mettre à jour les infos :

Ce qui nous donne pour le test :
Code:
// On teste si on édite un message ou si on en écrit un nouveau
      // Si nouveau message : on met les infos à "0"
      if(champs_msg.val() == ""){
         champs_infos.innerHTML = "Nombre de caractères : 0 ; Nombre de mots : 0 ";
      }else{
         // Sinon, on compte ^^
         compteur(champs_msg);
      }

Le code final

Au final, voilà le code de notre javascript :
Code:
jQuery( function(){
   /// si pas de champs texte, on arrête la lecture du script
   if(!jQuery('#bbcodearea1').length){
      return ;
   }

   // Il y a un champs texte
   jQuery(function(){   
      
      var compte = false ;

      var champs_msg = jQuery('#bbcodearea1');

      // Si on ne trouve pas l'éditeur de texte, on arrete la lecture du script
      if(!champs_msg){
         return ;
      }

      function compteur(champs_msg){
         // On ne prend pas en compte les mots entre [] ou <>
         var nb = champs_msg.val().replace(/\[.*?\]/g,' ').replace(/<.*?>/g,' ');

         // On compte le nombre de caractères, sans les espaces
         var nb_carac = (nb.match(/\S/g)||[]).length;

         // On compte le nombre de mot de 3 lettres ou plus
         var nb_mots = (nb.match(/\S{3,}/g)||[]).length ;

         // On affiche les infos
         champs_infos.innerHTML = "Nombre de caractères : "+nb_carac+" ; Nombre de mots : "+nb_mots+" ";

         compte = false ;
      }
      
      // On crée une zone pour afficher le nombre de mots et de caractères
      var champs_infos = document.createElement('div');
      champs_infos.setAttribute('id', 'compteur-mots');
      var zone = jQuery(champs_msg).parent();
      jQuery(champs_infos).appendTo(zone);

      // On teste si on édite un message ou si on en écrit un nouveau
      // Si nouveau message : on met les infos à "0"
      if(champs_msg.val() == ""){
         champs_infos.innerHTML = "Nombre de caractères : 0 ; Nombre de mots : 0 ";
      }else{
         // Sinon, on compte ^^
         compteur(champs_msg);
      }
      
      // Quand on a appuyé sur un bouton du clavier dans la zone de saisi,
      // on fait une fonction.
      jQuery('body').on('keyup', zone, function(){
         if(compte){
            return ;
         }else{
            compte = true ;
            // On compte toutes les 20 secondes
            setTimeout(
               function(){
                  compteur(champs_msg)
               }, 2000
            );
            
         }
      });

   });
   
});

L'installation

Tout est prêt, il n'y a plus qu'à installer notre compteur ^^

Pour cela, il te suffit d'aller dans le template : OVERALL_FOOTER.TPL et de coller juste avant :
Code:
</body>
le javascript entouré des balises suivantes :
Code:
<script language="Javascript" type="text/javascript">
<!--
   /* Le code est ici ^^ */
//-->
</script>


Et zioup ! Le tour est joué, ton forum possède désormais un compteur de mots qu'il ne te reste plus qu'à styliser dans la CSS Smile
Exemple:
 




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussignée, Miettes, accepte qu'un directeur reposte le tutoriel "[Xooit] Compteur de mot pour ton forum" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[Xooit] Compteur de mot pour ton forum
Page 1 sur 1
 Sujets similaires
-
» Mon fofo tout neuf :3-->Pub pour mon forum mode et ados
» [ le forum gagnant est ....]pour le forum de la semaine no 245
» [le forum gagnant est .....]pour le forum de la semaine no 246
» Commande de thème pour un forum.
» pb d'installation de webcam
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+