La procédure dans son ensemble est relativement simple. Il suffira d’ajouter un script JavaScript à notre forum, d’ajouter une classe spécifique à notre zone de texte, puis de modifier le rendu par CSS.

Installation du script

Le script a besoin de la bibliothèque JQuery pour fonctionner. Fort heureusement, celle-ci est incluse par défaut dans ForumActif, il n'y a rien à faire de ce côté-là !

Pour héberger le script sur votre forum, rendez-vous dans votre Panneau d'Administration > Modules > HTML & Javascript > Gestion des codes Javascript.
Créez un nouveau script. Nommez-le simplement ("Textarea redimensionnable" convient parfaitement). Appliquez-le à l'ensemble des pages de votre forum.
Copiez/Collez le code suivant :

Code:

(function($){var textarea,staticOffset;var iLastMousePos=0;var iMin=32;var grip;$.fn.TextAreaResizer=function(){return this.each(function(){textarea=$(this).addClass('processed'),staticOffset=null;$(this).wrap('<div class="resizable-textarea"><span></span></div>').parent().append($('<div class="grippie"></div>').bind("mousedown",{el:this},startDrag));var grippie=$('div.grippie',$(this).parent())[0];grippie.style.marginRight=(grippie.offsetWidth-$(this)[0].offsetWidth)+'px'})};function startDrag(e){textarea=$(e.data.el);textarea.blur();iLastMousePos=mousePosition(e).y;staticOffset=textarea.height()-iLastMousePos;textarea.css('opacity',0.25);$(document).mousemove(performDrag).mouseup(endDrag);return false}function performDrag(e){var iThisMousePos=mousePosition(e).y;var iMousePos=staticOffset+iThisMousePos;if(iLastMousePos>=(iThisMousePos)){iMousePos-=5}iLastMousePos=iThisMousePos;iMousePos=Math.max(iMin,iMousePos);textarea.height(iMousePos+'px');if(iMousePos<iMin){endDrag(e)}return false}function endDrag(e){$(document).unbind('mousemove',performDrag).unbind('mouseup',endDrag);textarea.css('opacity',1);textarea.focus();textarea=null;staticOffset=null;iLastMousePos=0}function mousePosition(e){return{x:e.clientX+document.documentElement.scrollLeft,y:e.clientY+document.documentElement.scrollTop}}})(jQuery);

Il s'agit du script compressé pour gagner de la place (et donc être chargé plus vite).

Créez à présent un nouveau javascript, que vous appellerez "Général" par exemple (si vous n'en avez pas déjà). Appliquez-le à toutes les pages et insérez-y le code suivant :

Code:

$(document).ready(function() {
    /* Applique le jQuery textarea resizer */
    $('textarea.resizable:not(.processed)').TextAreaResizer();
});

Spoiler:

Le template

Une fois notre script en place, il nous faudra procéder à quelques modifications de notre template posting_body (Panneau d’Administration > Affichage > Template > Poster et Messages privés).



Éditez () le template posting_body et repérez le code suivant (une recherche (Ctrl+F) sur {MESSAGE} devrait aboutir) :

Code:

<textarea id="text_editor_textarea" class="post" style="width:100%;height:250px" onclick="storeCaret(this)" onkeyup="storeCaret(this)" name="message" rows="15" cols="35" tabindex="3" onselect="storeCaret(this)" wrap="virtual">{MESSAGE}</textarea>

De-là, recherchez plus précisément ce paramètre : class="post" et, juste avant post, rajoutez la classe resizable précédée d'un espace, pour obtenir class="post resizable". Ceux qui ont suivi le spoiler l'auront compris : cette classe indique quelle zone de texte sera affectée par le script.

Une fois les modifications effectuées le résultat est le suivant :

Code:

<textarea id="text_editor_textarea" class="post resizable" style="width:100%;height:250px" onclick="storeCaret(this)" onkeyup="storeCaret(this)" name="message" rows="15" cols="35" tabindex="3" onselect="storeCaret(this)" wrap="virtual">{MESSAGE}</textarea>

Enregistrez puis n'oubliez pas de publier () votre template.

Installation/Personnalisation CSS du code

Un code CSS est nécessaire au bon fonctionnement du code, rendez-vous dans la feuille de style (Panneau d'Administration > Affichage > Couleurs > Feuille de Style CSS) de votre forum pour y coller le code suivant :

Code:

div.grippie {
    background:#EEEEEE url(http://img180.imageshack.us/img180/3926/grippie1.png) no-repeat scroll center 2px;
    border-color:#DDDDDD;
    border-style:solid;
    border-width:0pt 1px 1px;
    cursor:s-resize;
    height:9px;
    overflow:hidden;
}

.resizable-textarea textarea {
    display:block;
    margin-bottom:0pt;
    width:95%;
    height: 20%;
}

Une fois ceci fait, le redimensionnement devrait être fonctionnel et nous pouvons passer à la personnalisation du code. Comme je me vois mal répertorier toutes les possibilités et manières de personnaliser le résultat, je vous fournis ci-dessous le code commenté, à vous de modifier comme vous le souhaitez. Sachez que seule la première portion du code peut-être modifiée facilement ; seuls les experts peuvent se risquer à modifier la seconde.

Code:

div.grippie {
    background:#EEEEEE url(http://img180.imageshack.us/img180/3926/grippie1.png) no-repeat scroll center 2px; /* Image/Couleur de fond */
    border-color:#DDDDDD; /* Couleur de la bordure */
    border-style:solid;  /* Type de bordure */
    border-width:0pt 1px 1px; /* Épaisseur des bordures */
    cursor:s-resize; /* Curseur au survol de la barre de redimensionnement */
    height:9px; /* Hauteur de la barre de redimensionnement  */
    overflow:hidden; /* Ne pas modifier */
}

Il ne vous reste plus qu'à faire preuve d'imagination pour modifier cette barre comme bon vous semble. Vous n'êtes pas tenu de garder les mêmes propriétés que celles données par le créateur du code, tant que vous gardez les lignes commentées "Ne pas modifier".

Voilà qui est tout pour ce tutoriel. Bonne chance à tous.