Des frimousses dans les formulaires

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Voici un exemple presque tout bête qui utilise la contrib « Un point d’entrée pour les Frimousses (Smileys) » pour ajouter des frimousses dans le formulaire forum.

La contrib Smileys III : Un point d’entrée pour les Frimousses prend déjà en main la conversion des frimousses en images et propose une balise #SMILEY_DISPO pour afficher une liste de frimousses utilisables dans le site. Ici, nous allons juste insérer cette information directement dans le squelette de la balise #FORMULAIRE_FORUM et ajouter la possibilité d’insérer automatiquement une frimousse dans le formulaire (comme pour la barre de typo).

balise #SMILEY_DISPO
Une démo se trouve ici.


Modifier le squelette

Avant toute chose, il faut copier le squelette de base : formulaire_forum.html du répertoire formulaire vers votre dossier squelette.

Ajouter la liste des frimousses dans ce squelette est simple :

  1. Il faut s’assurer que le css proposé dans la contrib est bien dans les feuilles de style du site,
  2. il faut ajouter, ligne 14, la balise qui liste les smileys : #SMILEY_DISPO
</fieldset>
<br />
<fieldset class="spip_encadrer">


devient donc :

</fieldset>
<br />
#SMILEY_DISPO
<fieldset class="spip_encadrer">

Si vous utilisez le style SPIP par défaut, il faut modifier un petit peu le style de la classe spip_encadrer pour que le formulaire ne se superpose pas aux frimousses. Ajouter donc ce style dans votre fichier css (il faut qu’il soit importé après le fichier css de spip) :

.spip_encadrer {
width : auto;
margin-right: 1em;
}

Rendre la liste interactive

La liste de frimousses n’interagit actuellement pas avec le formulaire. Voici les modifications qu’il faut faire pour que cela marche.

Spip utilise le filtre barre_forum pour insérer le formulaire du message avec la barre de typo. Cette barre garde un compteur $num_formulaire pour savoir dans quel formulaire sur cette page la barre doit insérer les raccourcis. Il faut modifier un peu ce filtre pour avoir accès à ce numéros. On va donc en déclarer une copie dans mes_fonctions :

function ma_barre_forum($texte)
{
	include_ecrire('inc_layer.php3');

	if (!$GLOBALS['browser_barre'])
		return "<textarea name='texte' rows='12' class='forml' cols='40'>$texte</textarea>";
	global $num_formulaire;
	$num_formulaire++;
	include_ecrire('inc_barre.php3');
	return afficher_barre("document.getElementById('formulaire_$num_formulaire')", true) .
	  "
<textarea name='texte' rows='12' class='forml' cols='40'
id='formulaire_$num_formulaire'
onselect='storeCaret(this);'
onclick='storeCaret(this);'
onkeyup='storeCaret(this);'
ondbclick='storeCaret(this);'>$texte</textarea>";
}

Elle fait essentiellement la même chose, mais rend le numéros de formulaire global pour que tous puissent y accéder.

Changez aussi l’appel au filtre dans le squelette de formulaire. La ligne 18 devient :
[(#ENV{texte}|ma_barre_forum)]

Il faut maintenant ajouter, sur les smileys, le javascript pour qu’ils soient clicables. On déclare un nouveau filtre dans mes_fonctions qui fait cela :

function ajouter_num_forum($texte) {
  include_ecrire('inc_layer.php3');
  if (!$GLOBALS['browser_barre']) {
	return $texte;
  }
  
  global $num_formulaire;
  while(preg_match('@<li class="un_smiley"><span class="smiley_nom">(.*?)</span>@',$texte,$match)) {
	$fr = ' '. texte_script($match[1]) .' ';
	$texte = str_replace($match[0], '<li class="un_smiley"><a href="javascript:barre_inserer(\''.$fr.'\',document.getElementById(\'formulaire_'.($num_formulaire+1).'\'))" title="Inserer la frimousse: '.$match[1].'"
onMouseOver="helpline(\'Inserer la frimousse: '.$fr.'\',document.getElementById(\'barre_'.($num_formulaire+1).'\'))"
onMouseOut="helpline(\'Utilisez les raccourcis typographiques pour enrichir votre mise en page\', document.getElementById(\'barre_'.($num_formulaire+1).'\'))"><span class="smiley_nom">'.$match[1].'</span>', $texte);
  }
  return str_replace('</span></li>', '</span></a></li>', $texte);
}

On peut alors l’appliquer à la nouvelle balise dans le squelette du formulaire :

[(#SMILEY_DISPO|ajouter_num_forum)]

Vous pouvez aussi ajouter un style à la feuille css des smileys pour que ceux ci n’ai pas une tête de schtroumpf :

ul.listes_smileys  li.un_smiley a {
color: black;
text-decoration: none;
}

Cette méthode est applicable à d’autres formulaires.

Dernière modification de cette page le 8 septembre 2005

Discussion

Une discussion

  • 1

    Merci pour cette contribution, je suis presque arrivé à faire fonctionner les « frimousses » :)
    J’ai l’affichage, les liens aux dessus des frimousses, tout comme il faut...
    Mais j’ai deux difficultés :
    1) J’ai une erreur javascript quand je clique sur le lien qui doit insérer la frimousse et qui ne le fait donc pas.
    2) J’aimerai pouvoir mettre des smileys personnalisés, j’ai modifié la liste dans « mes_fonctions.php3 », mais sans résultat. Comment devrais-je m’y prendre ?

    Merci d’avance pour tout renseignement.

    • 1) J’ai une erreur javascript quand je clique sur le lien qui doit insérer la frimousse et qui ne le fait donc pas.

      Qu’elle est l’erreur javascript ? avec quel navigateur ?

      2) J’aimerai pouvoir mettre des smileys personnalisés, j’ai modifié la liste dans « mes_fonctions.php3 », mais sans résultat. Comment devrais-je m’y prendre ?

      il faut modifier la fonction liste_smileys() et changé les noms de fichier listé là en conséquence.

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom