L’été sera ajax ou ne sera pas

Je profite de la trève estivale pour rajouter des fonctionnalités au barbabablog et puisque le sujet principal de ce blog c’est webdesign, le moins que je puisse faire, c’est d’être un peu à la mode et d’y ajouter des fonctionnalités (attention gros mot) ajax

Passage de la lightbox à la Slimbox

Pour les images, j’utilisais un script archi connu : la lightbox. Le principe : vous mettez une vignette d’une image dans votre billet et lorsque l’utilisateur clique dessus, il obtient la version agrandie de l’image, tout ça sans chargement, sans fenêtres surgissantes, rien qu’avec du javascript et de l’xmlHttpRequest. C’est beau comme Claudia Cardinale dans les années 60 et c’est utile comme un épluche patate dans une cuisine.

Seulement voilà, lightbox repose sur scriptaculous et prototype. Ah oui, je vous ai pas dit : je suis fainéant. Pour tout ce qui est javascript j’utilise donc une bibliothèque (un framework en anglais). Récemment, je suis passé du couple prototype + scriptaculous à mootools, parce que cette dernière est plus légère et surtout parce que je l’utilise dans mon travail quotidien [1]. Il m’a donc fallu trouver un équivalent à la lightbox, reposant sur mootools. Et miracle, je l’ai trouvé : la slimbox. Tous les détails sont dans le billet sur l’implantation implémentation de la lightbox, que j’ai mis à jour pour évoquer le cas slimbox.

Contrôle de formulaire

J’ai rajouté des contrôles sur le formulaire de saisie de commentaire. Après plusieurs tests de scripts se basant sur mootools

• validat de Patfusion, pas assez paramétrable,
• form validator de Aaron Newton from CNET, trop compliqué,

j’ai opté pour pour le script fvalidator de Fabio Zendhi. Souple, paramétrable – vous pouvez rajouter vos propres tests sur expressions régulière par exemple. Pour personnaliser les messages de validation, tout se fait via un objet JSON. La classe quoi. Pour tester, c’est par ici.

Juste pour info, la validation client est doublée d’une validation serveur car évidemment, une validation js seule, ça ne sert à rien.

Smooth attitude

Il y a une grosse mode en ce moment sur le web : les sites One Page. Comme leur nom l’indique, les sites One Page présentent tout leur contenu sur une seule page et utilisent de bon vieux trucs de 1998 comme les ancres nommées ou les iframes en guise de système de navigation. Seulement pour habiller le tout, et c’est ça la nouveauté, on ajoute quelques effets javascripts web2.0 bien sentis tel que le smooth scroll.

Le smoooth sroll vous permet d’atteindre une ancre dans la page non plus brutalement comme en 1998 en mais avec souplesse et délicatesse comme en 2007 grâce à un script élégant qui fera glisser en douceur votre barre de défilement vers la dite ancre. Pour tester c’est ici.

Comme je suis de bonne humeur en ce moment et que je suis un peu communiste sur les bords, je vous donne les sources de mon script smooth scroll pour que vous aussi vous puissiez épater votre grand mère quand elle ira sur votre site ouèbe :

// main function
function smoothScroll(e) {
var event = new Event(e);
var target = (!event.target.href) ? event.target.parentNode : event.target;
var divToScrollTo = target.href.split('#')[1];
new Fx.Scroll(window).toElement(divToScrollTo);
}
// Initialisation
function initSmoothScroll() {
var smooth_links = $$("#content .postcontent a"); // tous les liens dans le div .postcontent
for (i = 0; i < smooth_links.length; i++) {
if(!(smooth_links[i].getProperty('href').split('#')[0])) { // parmis tous les liens, on regarde ceux qui renvoient vers une ancre uniquement
smooth_links[i].addEvent("click", smoothScroll); // on leur ajoute le comportement
}
}
}
// Au chargement de la page on lance les fonctions d'initialisation
var load_method = (window.ie ? 'load' : 'domready'); // ie fix
window.addEvent(load_method, initSmoothScroll);

initSmoothScroll

1. au chargement de la page, la fonction parcourt le div content et range tous les liens dans le tableau « smooth_links » ;
2. Pour chaque lien du tableau, initSmoothScroll récupère l’attribut href et coupe en 2 la chaine ainsi obtenue avec le caractère « # » comme séparateur ;
3. si la première partie de la chaine est vide, cela signifie que c’est un lien vers une ancre nommée et intiSmoothScroll ajoute sur le lien un event listener qui appelera la fonction smoothscroll lors de l’évènement clic ;

smoothScroll

1. la fonction smoothscroll prend en paramètre l’évènement clic ;
2. à partir de évènement, la fonction identifie la source (le lien) ;
3. smoothscroll récupère l’attribut href et on le scinde en 2 avec le caractère « # » comme séparateur ;
4. la fonction récupère la deuxième partie de la chaine et appelle l’effet Fx.Scrool de mootools avec en paramètre le nom de l’ancre ainsi récupéré.

Au chargement de la page

window.addEvent(load_method, initSmoothScroll);

Le script éxécute la fonction d’initilaisation initSmoothScroll. Malheureusement Internet explorer ne comprend pas l’évènement domready qui est pourtant bien pratique. Il faut donc tester le navigateur avec une méthode mootools :

var load_method = (window.ie ? 'load' : 'domready')

Selon le navigateur, on utilise la méthode domready ou onload. C’est à peu près la même chose sauf que domready est bien plus rapide (j’en reparlerai dans l’épisode 3 de la refonte de ZDNet).

Voilà, c’est fini pour aujourd’hui !

1. Prototype reste d’excellente facture, ne me faites pas dire ce que je n’ai pas dit. C’est juste un peu surdimensionné pour ce que je souhaite faire ici.

Technorati Tags: Ajax, mootools