Petit TP du week end : un effet de loupe en Javascript et CSS3 que vous pouvez essayer ici. Vous pouvez changer le style de la loupe grâce au menu à gauche.

magnifier.jpg

J'ai codé ça à l'aide de YUI3. C'est l'occasion de découvrir ensemble les qualités de ce framework magique de Yahoo. Regardons ça d'un peu plus près.

Head

Dans le header de ma page html, je charge deux scripts : http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js et js/magnifier.js.
Le premier est la base de YUI. Cette classe s'occupera de charger toutes les dépendances des scripts utilisés dans la page.
Le second est mon script dans lequel est déclarée une classe qui hérite de Y.Plugin.Base.

Body

Dans le body, le script suivant :

  1. <script type="text/javascript" charset="utf-8">
  2. //<![CDATA[
  3. 	YUI().use('magnifier', function(Y) {
  4. 		Y.all('img[longdesc]').each(
  5. 			function(img)
  6. 			{
  7. 				img.plug(Y.Magnifier);
  8. 			}
  9. 		);
  10. 	});
  11. //]]>
  12. </script>

On récupère tous les éléments <img /> de la page qui possèdent un attribut longdesc, et pour chacun d'eux, on leur plugue la classe Y.Magnifier, justement décrite dans le fichier js/magnifier.js. Observons la magie de YUI3.
Dans ce bout de script, img n'est pas qu'un simple element. C'est un objet de classe Y.Node construit autour de l'élément <img />. C'est ainsi qu'on peut lui faire exécuter des méthodes, telles que img.one('.selecteur .css p') qui récupère un élément enfant en suivant un sélecteur CSS par exemple, ou lui attacher des plugins, qui sont des classes héritant de Y.Plugin.Base.

C'est donc ce que fait ma classe Y.Magnifier. C'est un plugin qui va rajouter des fonctionnalités à cette pauvre image sans défense. Regardons de quoi elle est faite.

  1. YUI().add('magnifier', function(Y) {
  2. 	…
  3. }, '1.0', {
  4.     requires: ['plugin', 'node', 'overlay']
  5. });

Tout va se passer dans la méthode add() de l'objet global YUI(). Le premier paramètre est le nom du module que nous ajoutons à YUI (différent du nom de la classe). Le second paramètre est la code qui sera éxécuté quand ce module sera chargé. Le troisième indique le numéro de version et ne sert pas à grand chose. Le quatrième est nettement plus intéressant car il permet de spécifier les dépendances. Ma classe aura besoin des modules de YUI : plugin, node et overlay et seront chargés automatiquement sans avoir à les inclure dans mon head : la magie du YUI3 Loader.

Regardons maintenant le code éxécuté par notre module magnifier :

  1. Y.Magnifier = function(config)
  2. {
  3. 	Y.Magnifier.superclass.constructor.apply(this, arguments);
  4. }
  5. Y.Magnifier.NAME = 'Magnifier';
  6. Y.Magnifier.NS = 'magnifier';
  7. Y.Magnifier.ATTRS = {
  8. 	/**
  9. 	 * Original picture's url
  10. 	 */
  11. 	original: {
  12. 		valueFn: function()
  13. 		{
  14. 			…
  15. 		}
  16. 	},
  17. 	/**
  18. 	 * Container where is displayed the magnifier
  19. 	 */
  20. 	container: {
  21. 		valueFn: function()
  22. 		{
  23. 			…
  24. 		}
  25. 	}
  26. };
  27. Y.extend(Y.Magnifier, Y.Plugin.Base, {
  28. 	…
  29. });

La première fonction permet de déclarer le nom de ma classe et de lui faire adopter le même comportement que l'ensemble des classes de YUI : un unique argument sous forme d'objet de paramètres nommés, qui servira pour la gestion des attributs. Je l'ai appellée Y.Magnifier, mais j'aurais aussi pu l'appeler Y.eu.hadrien.Magnifier ou encore Loupe. Cette variable ne sera de toute façon présente que dans la sandbox qui aura demandé à faire usage de ce module (YUI().use('magnifier', function(Y) {})).

Les attributs NAME et NS permettent de nommer notre classe de façon générique. Le plus important pour un plugin est NS car c'est par ce nom que la factory deviendra accessible depuis l'objet hote. Ainsi, dans notre exemple, je pourrais accéder à l'objet Magnifier depuis img.magnifier.
ATTRS est une fonctionnalité particulièrement pratique de YUI. Dans cet objet, nous allons déclarer tous les paramètres que notre classe peut avoir. Nous pouvons pour chacun d'eux spécifier une valeur par défaut, une valeur par défaut calculée par une fonction (c'est le cas ici grâce à valueFn), des méthode de getter, de setter, ou de controle de typage. Tout ces attributs feront partie des arguments que l'ont pourra passer lors de l'instanciation de la classe. Petit exemple :

  1. …
  2. MaClasse.ATTRS = {
  3. 	truc: {
  4. 		value: 1,
  5. 		setter: function(v)
  6. 		{
  7. 			return v * 10;
  8. 		}
  9. 	},
  10. 	machin: {
  11. 		valueFn: function()
  12. 		{
  13. 			return this.get('truc') + 1;
  14. 		}
  15. 	},
  16. 	bidule: {
  17. 		value: null,
  18. 		getter: function()
  19. 		{
  20. 			if (this.get('truc') > 10)
  21. 			{
  22. 				return true;
  23. 			}
  24. 			return false;
  25. 		}
  26. 	},
  27. 	unEntier: {
  28. 		value: 0,
  29. 		setter: function(v)
  30. 		{
  31. 			if (!Y.Lang.isNumber(v))
  32. 			{
  33. 				throw 'unEntier must be a Number';
  34. 			}
  35. 			return v;
  36. 		}
  37. 	}
  38. }
  39. …
  40. var monObj1 = new MaClasse();
  41. // monObj1.get('truc') === 1;
  42. // monObj1.get('machin') === 2;
  43. // monObj1.get('bidule') === false;
  44. monObj1.set('truc', 20);
  45. // monObj1.get('truc') === 200;
  46.  
  47. var monObj2 = new MaClasse({
  48. 	truc: 2,
  49. 	machin: 10,
  50. 	graaaa: 'test'
  51. });
  52. // monObj2.get('truc') === 20
  53. // monObj2.get('machin') === 10
  54. // monObj2.get('bidule') === true
  55. // monObj2.get('graaaa') === undefined
  56. // monObj2.set('unEntier', 'yo') => Exception

Cette façon de déclarer les propriétés d'une classe est particulièrement puissant et permet de ranger plus clairement son code en séparant les méthodes de formatage des variables du code propre à la classe elle même.

La dernière partie concerne la définitions des méthodes de la classe. Cela se passe à travers la méthode Y.extend qui va se charger de faire hériter notre classe d'une précédente, et d'y ajouter ses propres méthodes. Le premier argument est notre classe. Le second est la classe dont elle hérite. Le troisième est le prototype de notre classe : un objet contenant ses méthodes.
Des méthodes spéciales sont proposées : initializer et destructor. initializer est le constructeur et sera appelée automatiquement lors de l'instanciation de la classe. desctructor sera appelé lors la destruction de l'objet grâce à la méthode destroy() dont notre classe a hérité de Y.Base (dont hérite Y.Plugin.Base).

Il ne nous reste plus qu'à coder les méthodes de notre classe, en sachant que nous accédons toujours aux attributs renseignés dans ATTRS grâce à la méthode get() (monObj.get('maPropery'), que nous les modifions grâce à set() (monObj.set('maProperty', 'maValue')). Et spécifiquement aux classes qui héritent de plugin, l'objet auquel nous avons pluggé notre classe est implicitement mis dans la propriété host. Nous accédons dans notre classe Magnifier à notre Node <img /> grâce à this.get('host') à l'intérieur de la classe, ou maLoupe.get('host') depuis l'instance.

  1. Y.extend(Y.Magnifier, Y.Plugin.Base, {
  2. 	initializer: function()
  3. 	{
  4. 		…
  5. 	},
  6. 	/**
  7. 	 * destruct
  8. 	 */
  9. 	destructor: function()
  10. 	{
  11. 		…
  12. 	},
  13. 	/**
  14. 	 * Show and positionate glasse and its background image
  15. 	 */
  16. 	move: function(x, y)
  17. 	{
  18. 		…
  19. 	},
  20. 	/**
  21. 	 * hide glasses
  22. 	 */
  23. 	hide: function(x, y)
  24. 	{
  25. 		…
  26. 	}
  27. });

Concernant la css et la loupe ronde, il s'agit d'une bidouille à l'aide de border-radius qui consiste à spécifier un radius de la même taille que les dimensions du container :

  1. .magnifier {
  2. 	width: 200px;
  3. 	height: 200px;
  4. 	-moz-border-radius: 200px; /* FF1+ */
  5. 	-webkit-border-radius: 200px; /* Saf3+, Chrome */
  6. 	-khtml-border-radius: 200px; /* Konqueror */
  7. 	border-radius: 200px; /* Standard. IE9 */
  8. }

Évidemment, ça marche pas sous IE < 9, mais osef :D