Nombreux sont les forums qui imposent un nombre de lignes minimal pour les rp; et encore plus nombreux sont les membres qui détournent la règle avec une vingtaine de sauts à la ligne!
Mais dans ce tuto on va apprendre à emme... euh... embêter ces vilaines gens.
Je m'explique: lors de la rédaction d'un post, le membre va voir un petit message qui lui dit combien de mots il a écrit. On pourra également avec un peu de customisation changer ce message à partir d'un certain seuil et afficher par exemple: "Vous avez écrit plus de 700 mots. Vous pouvez poster!".
Testez!
Javascript est mon ami!
Nan je plaisante évidemment, mais ne vous inquiétez pas je vais vous guider pas à pas. =)
On va partir d'un script donné ici:
http://www.editeurjavascript.com/scripts/scripts_textes_3_231.php (si vous n'arrivez pas à le voir, il est affiché plus bas)
Bon les explications n'étant pas donné on décortiquera le code ensemble.
Deux choix s'offre à vous:
- Soit on crée une page Javascript (PA> Modules > Gestion des codes Javascript)
Donnez un titre à votre page et cochez placement: "toutes les pages".
- Soit on crée une page HTML (PA > Modules > Gestion des pages HTML)
Cocher "Non" les deux fois.
Dans les deux cas,
Copiez le script que je redonne ci dessous:
| Code: |
function Compter(chaine, formulaire) {
var exp=new RegExp("[a-zA-Z0-9éèêëàáâäóòôöíìîïçÉÈÊËÀÁÂÄÒÓÔÖÌÍÎÏÇ-]+","g");
var tabNom=chaine.match(exp);
if (tabNom==null) {formulaire.compte.value = "Nombre de mots = 0";}
else {
var affichage="Nombre de mots = " + tabNom.length + "";
formulaire.compte.value = affichage;
}
}
|
| Code: |
function Compter(chaine, formulaire) { |
Ici on déclare donc une fonction qu'on appelle Compter et ses deux arguments qui vont rapporter des éléments html du template dans le javascript.
| Code: |
var exp=new RegExp("[a-zA-Z0-9éèêëàáâäóòôöíìîïçÉÈÊËÀÁÂÄÒÓÔÖÌÍÎÏÇ-]+","g"); |
On déclare une variable exp qui "désigne" nos mots. Je ne vais pas m'étendre sur les expressions sinon on va s'embrouiller. Donc pas Touche!
| Code: |
var tabNom=chaine.match(exp); |
Là on déclare une variable tabNom qui va chercher dans la chaîne de caractères la variable "exp".
Maintenant on rentre dans les conditions.
| Code: |
if (tabNom==null) {formulaire.compte.value = "Nombre de mots = 0";} |
Si la variable tabNom est nulle il n'y a pas de mots et on affiche "Nombre de mots= 0".
Sauf que dit comme ça c'est un peu moche pour un forum RP on va donc changer cette phrase en modifiant ce qui se trouve entre "".
Attention! Il faut faire gaffe aux caractères spéciaux! Pour Javascript il faut utiliser l'équivalent en octal qu'on trouve dans des tableaux tel que celui ci. Voilà ce que ça donne pour moi:
| Code: |
if (tabNom==null) {formulaire.compte.value = "Vous avez n'avez rien \351crit";} |
On va donc changer le code de manière à avoir "Vous avez écrit X mots" au lieu de "Nombre de mots = X". Cela va juste engendrer une faute de français que l'on corrigera plus tard avec une ligne de code en plus. 
Maiis dans l'immédiat on suit simplement le code ligne à ligne.
| Code: |
else {
var affichage="Nombre de mots = " + tabNom.length + "";
|
Sinon on déclare une variable nommée affichage qui est égale à "Nombre de mots =" suivie du nombre de mots trouvés par notre variable tabNom. Avec nos modifications de phrase on a donc:
| Code: |
else {
var affichage= "Vous avez \351crit " + tabNom.length + " mots"; |
On termine en affichant la variable affichage dans un formulaire destiné.
| Code: |
formulaire.compte.value = affichage; |
Et ferme avec des accolades.
Si vous avez changé les phrases comme moi vous verrez qu'on a une jolie faute pour 1 mot qui s'affiche "1 mots". On va donc rajouter une ligne de code après la condition if pour le cas où tabNom trouve 1 mot:
| Code: |
else if (tabNom.length==1) {formulaire.compte.value = "Vous avez \351crit 1 mot";} |
Maintenant qu'on sait changer les phrases on va ajouter un seuil de mots. Ca se fait sur le même principe que la phrase précédente sauf que qu'au lieu == on va utiliser >= (comprenez supérieur ou égal).
Donc après la ligne ci dessus on écrit:
| Code: |
else if (tabNom.length>=10) {formulaire.compte.value = "Vous avez \351crit plus de 10 mots soit " + tabNom.length +" mots. Vous pouvez postez!";} |
Ici j'ai utilisé 10 mais vous mettez la valeur que vous voulez. ^^
Le code de fin:
| Code: |
function Compter(chaine, formulaire) {
var exp=new RegExp("[a-zA-Z0-9éèêëàáâäóòôöíìîïçÉÈÊËÀÁÂÄÒÓÔÖÌÍÎÏÇ-]+","g");
var tabNom=chaine.match(exp);
if (tabNom==null) {formulaire.compte.value = "Vous n'avez encore rien \351crit.";}
else if (tabNom.length==1) {formulaire.compte.value = "Vous avez \351crit 1 mot";}
else if (tabNom.length>=10) {formulaire.compte.value = "Vous avez \351crit plus de 10 mots soit " + tabNom.length +" mots. Vous pouvez postez!";}
else {
var affichage= "Vous avez \351crit " + tabNom.length + " mots";
formulaire.compte.value = affichage;
}
} |
Maintenant on peut souffler, on enregistre et dans la gestion des pages HTML on copie le lien de la page.
Partie HTML
SI vous avez créé une page HTML et Seulement SI:
- Allez dans le PA> Affichage> Templates > Général
On modifie alors le template overall_header. Ici on insère le javascript comme ceci:
| Code: |
<script type="text/javascript" src="LIEN DE LA PAGE HTML"></script> |
en plaçant ce code au dessus de la balise:
Enregistrer et surtout VALIDEZ.
Il faut ensuite installer le compteur au dessus de la zone de saisie qui vous sert à poster.
PA > Affichage > Templates > Poster & Messages Privés> posting_body
Repérez la partie qui nous intéresse:
| Code: |
<button class="button2" id="text_editor_cmd_switchmode" type="button" title="{SWITCH_EDITOR_MODE}"><img src="{PATH_IMG_FA}i/switch_wysiwyg.gif" alt="{SWITCH_EDITOR_MODE}" /></button>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="9"><span class="gensmall" style="width:450px;font-size:10px" id="helpbox"></span></td>
</tr>
<tr>
<td colspan="9">
<span class="gen" style="width:100%; height:250px">
<textarea id="text_editor_textarea" class="post" style="width:100%;height:250px" name="message" rows="15" cols="35" tabindex="3" wrap="virtual">{MESSAGE}</textarea> |
Ci dessous le champ de saisie d'un message:
| Code: |
<textarea id="text_editor_textarea" class="post" style="width:100%;height:250px" name="message" rows="15" cols="35" tabindex="3" wrap="virtual">{MESSAGE}</textarea> |
Il faut signaler à notre fonction Compter de faire son boulot dans ce formulaire ci.
| Code: |
<textarea id="text_editor_textarea" class="post" style="width:100%;height:250px" name="message" rows="15" cols="35" tabindex="3" wrap="virtual" onkeyup="Compter(this.form.message.value, this.form)">{MESSAGE}</textarea> |
Ensuite on ajoute un formlaire qui affichera le nombre de mots comme ceci:
| Code: |
<input style="border: none; background-color: transparent;" name="compte" value="" size="80" readonly /> |
Au final on obtient:
| Code: |
<button class="button2" id="text_editor_cmd_switchmode" type="button" title="{SWITCH_EDITOR_MODE}"><img src="{PATH_IMG_FA}i/switch_wysiwyg.gif" alt="{SWITCH_EDITOR_MODE}" /></button>
</div><input style="border: none; background-color: transparent;" name="compte" value="" size="80" readonly /></textarea>
</div>
</td>
</tr>
<tr>
<td colspan="9"><span class="gensmall" style="width:450px;font-size:10px" id="helpbox"></span></td>
</tr>
<tr>
<td colspan="9">
<span class="gen" style="width:100%; height:250px">
<textarea id="text_editor_textarea" class="post" style="width:100%;height:250px" name="message" rows="15" cols="35" tabindex="3" wrap="virtual" onkeyup="Compter(this.form.message.value, this.form)">{MESSAGE}</textarea> |
Le mot de la Fin
/!\ Pensez à vérifier vos codes si ça ne marche pas, les caractères spéciaux comme ">" peuvent être remplacés par leur équivalent HTML (ex: pour > "& gt")
J'espère ne pas avoir perdu trop de gens en cours de route et je félicite les courageux qui sont allés jusqu'au bout! Si vous avez quelques soucis avec le tuto, n'hésitez pas à demander.
Et je me dégage de toute responsabilité en cas de suicide à cause de javascript. 
Viel Glück! 
Pour toutes questions concernant le tuto, c'est par [
ici]
