Voilà, voilà... Fin de l'aventure...

 

Fermeture de kolossaldrupal.org dans...


Bonjour tout le monde,

Drupal évolue, les versions changent et Kolossaldrupal.org était essentiellement consacré à la version 6 de Drupal.

Autant dire que les infos présentées ici commencent à dater...

Faute de temps, je ne peux plus garder le site Kolossaldrupal à jour...

Je vous aurais bien proposé de reprendre le flambeau mais... c'est tellement simple de nos jours de se faire son propre site à soi...Pourquoi s'embêter alors ? :-)

Ce site restera donc en l'état, tel qu'il était en 2011...

Ah la la ! Cela ne nous rajeunit pas !

Manuel Vila - Avril 2016

Faire disparaître la mention par défaut du bloc « Rechercher », comme par enchantement

Traduction de l'article de Michael Anello : Magically Disappearing Default Search Text


Avoir un design de site aussi propre que possible est quelque chose que tous les designers et développeurs s'efforcent d'obtenir (bon, Ok, peut-être pas «tous»). Une des choses relativement facile dans cette optique est d'ôter le texte d'explication du formulaire de recherche qui n'est pas des plus utiles. Je veux parler du Entrez vos mots-clés : ou du Chercher dans ce site : qui agrémente le formulaire de recherche. Sont-ils vraiment utiles ? Je ne le crois pas.

MDDST-1C.png

Un formulaire de recherche plus épuré pourrait afficher un texte par défaut qui s'effacerait au premier clic de l'utilisateur dans le champ de recherche.

Il y a deux-trois chose à faire pour cela. D'abord, vous devez supprimer le texte par défaut Chercher dans ce site :. Un peu de CSS devrait faire l'affaire :

#search-block-form label {display: none;}

Vous pouvez également utiliser une fonction de pré-traitement pour le formulaire de recherche (c'est nettement plus sûr). Cette deuxième méthode vous permet d'accéder au tableau indicé (array) du formulaire avant qu'il ne soit converti en code HTML. Vous effectuez ainsi vos modifications (supprimer la formule Chercher dans le site) avant de remettre le formulaire dans le circuit de traitement habituel.

Le code-source que vous allez écrire se place dans le fichier template.php de votre thème. J'utilise pour cet exemple le thème Zen Classic mais ça marche quel que soit le thème.

La fonction de pré-traitement est relativement simple à suivre :

<?php
function zen_preprocess_search_block_form(&$vars$hook) {
  
// Supprimer le titre du formulaire de recherche
  
unset($vars['form']['search_block_form']['#title']);
 
  
// Reconstruire la mise en forme du formulaire (seulement le formulaire de recherche, le reste demeure inchangé)
  
unset($vars['form']['search_block_form']['#printed']);
  
$vars['search']['search_block_form'] = drupal_render($vars['form']['search_block_form']);
 
  
// Rassembler tous les éléments du formulaire pour faciliter son affichage
  
$vars['search_form'] = implode($vars['search']);
}
?>

La première ligne de la fonction supprime le texte par défaut. On reconstruit ensuite la mise en forme du formulaire et, dans la dernière partie, on place tous les éléments du formulaire dans une seule variable, qui sera ainsi plus facile à afficher. N'oubliez pas de modifier le nom de la fonction pour qu'il corresponde au nom de votre thème. Par exemple, si votre thème s'appelle lezard, le nom de la fonction sera lezard_preprocess_search_block_form.

Une fois cela fait, supprimez les données du cache et jetez un œil à votre nouveau bloc de recherche sans son texte par défaut. Jusque là, tout va bien.

MDDST-2B.png

La prochaine étape consistera à réellement placer votre propre texte par défaut dans le champ de saisie. Vous devrez télécharger le jQuery Form Example Plugin sur http://plugins.jquery.com/project/example. Ce plugin s'occupera désormais de toutes les taches ingrates.

Décompressez le plugin et copiez le dossier jquery_example dans le dossier de votre thème. J'aime bien placer tout les fichiers JavaScript au même endroit, j'ai donc créé un dossier scripts dans mon dossier de thème. Dans mon cas, j'ai placé le dossier jquery_example dans sen/zen_classic/scripts/.

Ce plugin utilise une seule fonction, .example() qui prend une chaîne de caractères comme argument. Vous aurez donc besoin de créer un nouveau fichier JavaScript qui appellera cette fonction. J'ai créé un fichier searchtext.js dans mon dossier zen/zen_classic/scripts. Il contient le code suivant :

if (Drupal.jsEnabled) {
  $(document).ready(function(){
 
    $('form#search-block-form input.form-text').example('Indiquez les mots à rechercher');

  });
}

Ce code est facile à comprendre. J'utilise simplement un sélecteur jQuery pour sélectionner le champ de saisie du bloc de recherche, puis je lui applique la fonction example en indiquant ce texte par défaut: Indiquez les mots à rechercher.

Une chose reste à faire avant que tout fonctionne : vous devez dire à votre thème de charger le plugin jQuery Form Example et votre fichier searchtext.js. Ajoutez pour cela les lignes suivantes au fichier .info de votre thème :

scripts[] = scripts/jquery_example/jquery.example.min.js
scripts[] = scripts/searchtext.js

Une fois cela fait, supprimez à nouveau les données du cache et épatez-vous. Bien joué !

MDDST-3B.png

Il reste un petit truc sympa à faire pour finir le travail. La fonction .example() du plugin jQuery Form Example peut prendre un deuxième paramètre, une classe CSS qui stylisera le texte. Vous pourrez ainsi, par exemple, afficher votre texte par défaut dans une couleur différente du texte saisi par l'utilisateur. Pour utiliser cette fonctionnalité, modifiez le code-source de votre fichier searchtext.js :

if (Drupal.jsEnabled) {
  $(document).ready(function(){
 
    $('form#search-block-form input.form-text').example('Indiquez les mots à rechercher', {className: 'search_example'});

  });
}

Créez ensuite une classe search_example dans le fichier CSS de votre thème qui spécifiera la façon dont votre texte par défaut devra être affiché. Je l'ai fait en gris :

.search_example {
  color: #CCCCCC;
}

Supprimez les données du cache, rechargez la page et soyez éblouis.

MDDST-4B.png

Placer les plugins jQuery dans le thème n'est pas forcément une bonne idée. Vous pouvez utiliser le module jQuery Plugin Handler, il permet de gérer efficacement vos plugins jQuery en les plaçant dans un seul endroit et en évitant les conflits ou les doublons.

Michael Anello - DrupalEasy.com


Pas trop compliqué ? Eh bien quelques jours après que Michael Anello ait écrit cet article sortait le module Custom Search Box qui vous permet de faire pratiquement tout ce qui a été expliqué ci-dessus, sans mettre les mains dans le cambouis...

Ah la la ! L'informatique va vraiment trop vite mon bon monsieur !