The ASW - javascript

Nouveau blog de développeur

cgo2 — Mon, 16 Jul 2007 19:07:00 +0200

Ma nouvelle boite, BSO Communication, vient d'ouvrir son blog répondant au doux nom de BSO HQ. Je vais m'occuper de la partie développement, en racontant de temps en temps mes péripéties quotidiennes avec PHP, Javascript, Ruby et tout un tas d'autres langages qui font le web 2.0 (et peut être même plus). Il y a(ura) également 3 rubriques Hébergement, Système et Réseaux, pour ceux qui s'interressent au métier d'opérateur Internet et d'hébergeur. Si avec ça je ne vous ait pas donné envie de l'ajouter immédiatement à votre aggrégateur RSS favori, je sais pas ce qu'il faut. Non, pas des femmes dénudées, c'est pas l'E3 ici.

Une version optimisée pour PHP de JSMin

cgo2 — Wed, 28 Mar 2007 18:23:00 +0200

Les Javascripts permettent de faire tout pleins de choses sur un site web, c'est cool. Mais à force d'empiler les librairies, les frameworks et autres fonctions, on peut vite se retrouver avec deux kilo-tonnes de script, ce qui n'est ni très agréable à charger et ni très léger pour la bande passante.

Heureusement, plusieurs librairies (plus ou mois efficaces) existent et permettent de compresser les scripts. JSMin est l'une d'entre elle.

A l'origine, JSMin est un petit programme écrit en C par Douglas Crokford. Il prend un fichier Javascript et supprime tout ce qui n'est strictement nécessaire, c'est-à-dire :

les commentaires (/* */ et //),
les lignes vides et retour à la ligne,
les espaces (sauf dans les chaines de caractères et les expressions régulières).

Contrairement à d'autres packer, JSMin ne brouille pas le code, c'est-à-dire que le fichier compressé reste lisible, débuggable et modifiable (même si une petite ré-indentation est nécessaire), ce qui est quand même un avantage très appréciable.

Il existe une version PHP de JSMin, mais, comme son auteur l'indique, il s'agit d'une « conversion simple et brutale du C vers le PHP », entendez par là qu'elle n'est pas du tout optimisée et donc super lente. Evidemment, la version C est théoriquement utilisable en PHP via la fonction shell_exec, mais c'est totalement impensable sur un hébergement mutualisé.

Récemment, j'ai dû mettre en place un système de compression et de concaténation des javascripts « à la volée » ; c'est-à-dire que les javascripts sont compressés la première fois qu'un utilisateur les demande, puis mis en cache (vaguement inspiré de ce post). Dès qu'un fichier est mis à jour, le cache est regénéré. Ainsi, je conserve les versions commentées et indentées pour développer, et je n'ai pas à me soucier de les compresser avant de les mettre en ligne. C'est magique.

Mais, la version originale de JSMin en PHP met parfois plus de 3 secondes à compresser certains fichiers, ce qui est bien trop long. Donc je n'ai pas pû m'empêcher de faire un tour dans le code pour l'optimiser. J'ai remplacé toutes les boucles de lecture caractère par caractère (typique du C) par des fonctions natives PHP comme strpos et strlen.

J'ai également viré toute la partie qui concernait les fichiers (dans la version originale, il est possible de passer un nom de fichier à JSMin pour qu'il le lise directement), parceque en PHP c'est beaucoup plus rapide de lire d'abord le fichier (par une fonction comme file_get_contents) et de travailler sur la chaine de caractère représentant le contenu.

Le gain en vitesse dépend fortement de la taille et du contenu du fichier ; dans mon cas c'est entre 10% et 50% plus rapide.

Utilisation

Le constructeur prend 2 paramètres : le code à compresser (string) et, si besoin, un tableau de commentaires à ajouter en début de fichier (array ou rien). Ensuite il suffit d'appeller la fonction minify().

Exemple :

$code = file_get_contents('foo.js');
$compressor = new MyJsMin($code, array('Hello', 'World'));
echo $compressor->minify();

Le fichier foo.js contient :

function foo(bar)
{
bar += 1;
alert('hello world !');
}

Le résultat sera :

// hello
// world

function foo(bar)
{bar+=1;alert('hello world !');}

Sources

Sources de MyJsMin.
Pour JSMin en PHP, voir le blog de l'auteur.
La page de la version originale de JSMin en C (avec des liens vers d'autres langages)

Test en ligne

Vous pouvez tester les performances du script grace à cette page (en anglais, parceque c'est la classe internationnale).

Position du curseur dans un textarea

cgo2 — Tue, 20 Feb 2007 14:36:00 +0000

Comment détecter, en javascript, la position du curseur dans un textarea ? Comment déplacer le curseur ? Comment récuperer le texte sélectionné, ainsi que les coordonnées de la selection ? Evidemment sous Firefox tout roule, mais pour le navigateur de Microsoft c'est autre chose... Après avoir passé 5 bonnes heures sur Google à lire des solutions aussi farfelue qu'inefficaces (à base de Math.round, de boucles imbriqués, ou de soustraction d'un coeffient alétoire), j'ai fini par chercher ma propre solution. Voici quelques pistes pour soumettre Internet Explorer à votre volonté !

J'ai essayé de faire 5 actions, que je vais décrire dans cet article :

obtenir le texte sélectionné dans un textarea donné ;
obtenir la position du début de la selection du contenu du textarea (en commençant à 0) ;
obtenir la position de la fin de la selection du contenu ;
déplacer le curseur à une position, en précisant éventuellement une position de fin pour créer une selection ;
remplacer le texte sélectionné par un autre.

D'abord, examinons le comportement standard (testé sous Mozilla Firefox >= 1.5).

Chaque textarea sauvegarde sa propre selection.
Chaque textarea contient 2 variables selectionStart et selectionEnd qui contiennent à tout moment les coordonnées de la selection (si rien n'est selectionné, selectionStart est égal à selectionEnd)
Chaque textarea possède une méthode setSelectionRange(start, end) qui permet de créer une selection ou de positionner le curseur (en passant 2 fois la même valeur).
Pour remplacer le texte selectionné, il faut couper le texte en 3 : avant, selection, après, et le remplacer par avant + nouvelle selection + après. Il faut penser à remettre d'indice de scroll afin de conserver la barre de défilement à la même position.

Voyons maintenant le comportement d'Internet Explorer, qui, comme a son habitude, est totalement illogique, incohérent et, disons-le, complètement con.

Internet Explorer ne gère qu'une seule sélection pour toute le document, accessible via document.selection. En conséquence de quoi, il faut toujours penser à faire un focus() sur le textarea à traiter, sans quoi on risque d'avoir des résultats totalement incohérents.
Cependant, il est possible de créer une selection pour chaque textarea. Mais ces selections ne contiendront pas le texte selectionné, elles servent uniquement à déplacer le curseur (!) (j'avais prévenu que c'était complètement con...).
Pour manipuler une selection, il faut créer un objet TextRange, qui permet de faire des tas de choses (y compris des choses documentées comme « opaque » par Microsoft), mais pas de récupèrer la position du curseur.
Il est impossible se spécifier directement la position du curseur.
Il y a une méthode propriétaire pour remplacer la sélection, en mettant à jour l'attribut text de l'objet range (range.text = 'toto').

Voyons maintenant comment dominer IE.

Note : Les fonctions proposées ici sont destinées à être utilisée dans une classe où this représente l'objet textarea. N'hésitez à pas adapter pour votre propre besoin :)

Obtenir la sélection

La fonction suivante permet d'obtenir le texte sélectionné dans un textarea.

getSelection: function ()
{
	if (this.setSelectionRange)
		return this.value.substring(this.selectionStart, this.selectionEnd);
	else if (document.selection) {
		this.focus();
		return document.selection.createRange().text;
	}
}

Obtenir les coordonnées du curseur

Alors là, ça devient rigolo. La solution : récupérer la selection globale, puis la recopier dans une selection locale au textarea. Ensuite, déplacer la fin de la selection le plus possible (la selection locale, contraiement à la selection globale du document, s'arrettera à la fin de texte). Enfin, effectuer une petite soustraction.

getSelectionStart: function()
{
	if ( typeof this.selectionStart != 'undefined' )
		return this.selectionStart;
	
	// IE Support
	this.focus();
	var range = this.createTextRange();
	range.moveToBookmark(document.selection.createRange().getBookmark());
	range.moveEnd('character', this.value.length);
	return this.value.length - range.text.length;
}

Même principe pour la fin.

getSelectionEnd: function()
{
	if ( typeof this.selectionEnd != 'undefined' )
		return this.selectionEnd;

	// IE Support
	this.focus();
	var range = this.createTextRange();
	range.moveToBookmark(document.selection.createRange().getBookmark());
	range.moveStart('character', - this.value.length);
	return range.text.length;
}

Positionner le curseur

Cette fois ci, la technique est de créer une selection vide, de la positionner au bon endroit, de d'utiliser la méthode select() pour la faire apparaitre.

setCaretPos: function(start, end)
{
	end = end || start;
	this.focus();
	if (this.setSelectionRange)
		this.setSelectionRange(start, end);
	else if (document.selection) {
		var range = this.createTextRange();
		range.moveStart('character', start);
		range.moveEnd('character', - this.value.length + end);
		range.select();
	}
}

Remplacer la sélection

Avec toutes ces méthodes cross-browser, la fonction de remplacement est un jeu d'enfant !

J'ai ajouté un paramètre keep indiquant s'il faut garder ou non le texte selectionné après remplacement.

replaceSelection: function (str, keep)
{
	this.focus();
	
	var start = this.getSelectionStart();
	var stop = this.getSelectionEnd();
	var end = start + str.length;
	var scrollPos = this.scrollTop;
		
	this.value = this.value.substring(0, start) + str + this.value.substring(stop);
	if ( keep ) this.setCaretPos(start, end);
	else this.setCaretPos(end);
	this.scrollTop = scrollPos;
}

En esperant que tout ceci vous servira :)

Une interface de formulaire à base de tableaux dynamiques

cgo2 — Sun, 18 Sep 2005 17:25:00 +0000

Oui, je sais, les tableaux de mise en page c'est mal. Mais quand il s'agit de présenter des données en tableau, par exemple : le prix des carottes en fonction de la vitesse du vent et de l'age du capitaine, alors ils sont indispensables. Je dirais même plus, ça serait une erreur de ne pas les utiliser. Maintenant, imaginons que nous ayons à programmer une interface pour saisir le prix des carottes : comment faire simple, léger, accessible, rapide à développer et agréable à utiliser ? L'idéal serait de se rapprocher du fonctionnement d'un tableur : pouvoir ajouter, supprimer ou éditer des lignes, et sauvegarder le document à la fin. Et bien en interface web, c'est possible grace à Javascript et DOM (et un peu de PHP pour le traitement).

Première étape : construire la page

Tout d'abord, il faut faire la page web. Pour cela, on utilise du XHTML tout à fait classique, et on construit un tableau. Je vous invite à lire l'article Habillage de tableaux avec des CSS sur Openweb pour en savoir plus sur la manière de faire un tableau conforme aux standards.

Le tableau que j'ai choisi de dessiner est on-ne-peut-plus simple : il contient 4 colonnes contenants chacunes un champ de type "text", et une dernière colonnes contenant les actions possibles. Pour l'instant, la seule action possible est la suppression d'une ligne.

Le code donne (vous pouvez consulter l'exemple 1) :

<table class="dTable">
	<thead>
		<tr>
			<th>Colonne 1</th>
			<th>Colonne 2</th>
			<th>Colonne 3</th>
			<th>Colonne 4</th>
			<th>Actions</th>
		</tr>
	</thead>
	
	<tfoot>
		<tr>
			<th colspan="5"><a href="http://www.the-asw.com/post/2005/09/18/#">Ajouter une ligne</a></th>
		</tr>
	</tfoot>
	
	<tbody>
		
		<tr>
			<td><input type="text" name="champ1[]" /></td>
			<td><input type="text" name="champ2[]" /></td>
			<td><input type="text" name="champ3[]" /></td>
			<td><input type="text" name="champ4[]" /></td>
			<td><a href="http://www.the-asw.com/post/2005/09/18/#">Supp</a></td>
		</tr>
		
	</tbody>
</table>

Les liens ont tous pour trajet (href) la valeur #. Cela revient à dire qu'ils n'ont pas d'effet... pour l'instant. J'ai appliqué la classe dTable au tableau (comme « Dynamic Table ») afin de pouvoir l'identifier parmis d'autres eventuels tableaux, qui, eux, ne seront pas dynamiques. Enfin, dernier détails, les champs input ont tous un nom finissant par []. Nous verrons dans la troisième partie à quoi ça va servir.

Deuxième étape : rendre le tableau dynamique

Maintenant on rentre dans le vif du sujet. Pour rendre ce tableau dynamique, on va utiliser du Javascript et du DOM, en s'arrageant pour qu'il soit compatible Internet Explorer et Firefox.

Première chose : inclure un script. Pour cela, on rajoute dans le header de la page html la ligne suivante (avec dtable.js le nom du fichier script) :

<script type="text/javascript" src="http://www.the-asw.com/post/2005/09/18/dtable.js"></script>

Bien ensuite, un peu de conception... Comment allons nous procéder ?

Ajout

Pour ajouter une ligne, le plus simple est d'utiliser la méthode DOM cloneNode() qui permet de dupliquer un noeud (par exemple un tr, donc une ligne du tableau) et appendChild() qui permet d'ajouter un noeud à un autre (par exemple le tr cloné au tbody, donc au corps du tableau). Cette méthode est très simple à condition d'avoir une ligne « de référence », c'est à dire une ligne vide que l'on pourra cloner pour simuler l'ajout de ligne. La première ligne du tableau (la seule que j'ai saisis dans le code html ci-dessus) fera office de référence.

Nous allons faire une fonction addLigne qui prend en paramètre l'élément appellant (en l'occurence il s'agira d'un lien, donc d'un element A). A partir du lien, il faudra retrouver le tableau en « remontant » dans l'arbre html à la recherche du parent s'appelant TABLE. A partir du tableau, on pourra retrouver le TBODY et la première ligne, et effectuer l'ajout.

Pour retrouver le parent d'un élément, j'utilise une fonction récursive, getParent(element, parentTagName), dont voici l'implémentation :

/* trouve le tag "parentTagName" parent de "element" */
function getParent(element, parentTagName) {
	if ( ! element )
		return null;
	else if ( element.nodeType == 1 && element.tagName.toLowerCase() == parentTagName.toLowerCase() )
		return element;
	else
		return getParent(element.parentNode, parentTagName);
}

Le code pour ajouter une ligne devient :

/* ajoute une ligne */
function addLigne(link) {
	// 1. récuperer le node "TABLE" à manipuler
	var td = link.parentNode;
	var table = getParent(td,'TABLE');
	
	// 2. on va manipuler le TBODY
	var tbody = table.tBodies[0];
	
	// 3. on clone la ligne de reference
	var newTr = tbody.rows[0].cloneNode(true);
	tbody.appendChild(newTr);
}

Pour appeller cette fonction, on peut transformer le lien « Ajouter une ligne » comme ceci :

<a href="http://www.the-asw.com/post/2005/09/18/#" onclick="addLigne(this); return false;">

Le return false; permet de stopper le traitement normal du lien et donc de ne pas executer le href.

Suppression

Là encore, une fonction DOM nous mache tout le travail : removeChild(). Il suffit de trouver le TR à supprimer en remontant l'arbre html depuis le lien appellant, et de le retirer du TBODY

/* supprimer une ligne */
function delLigne(link) {
	// 1. récuperer le node "TABLE" à manipuler
	var td = link.parentNode;
	var table = getParent(td, 'TABLE');
	
	// 2. récuperer le TBODY
	var tbody = table.tBodies[0];
	
	// 3. Supprimer le TR
	tbody.removeChild(getParent(td, 'TR'));
}

Pareil que pour l'ajout, on peut transformer les liens « Supp » comme ceci :

<a href="http://www.the-asw.com/post/2005/09/18/#" onclick="delLigne(this); return false;">

L'ajout et la suppression donnent l'exemple 2.

Protéger la première ligne

Le problème de l'exemple 2, que vous avez peut-être remarqué en testant, est que la première ligne, la ligne de référence donc, est supprimable comme les autres. Et lorsqu'on supprime tous les lignes, il n'y en a plus aucune à cloner ! On va donc masquer la première ligne avec la propriété CSS display="none" et en ajoute une vide supplémentaire.

On ajoute au code :

window.onload = dtableInit;

/* initialise le script */
function dtableInit() {
	var table = document.getElementsByTagName('TABLE');
	for ( var i = 0; i < table.length; i++ ) {
		// on récupère tous les tableaux dynamiques
		if ( table[i].className == 'dTable' ) {
			
			var tbody = table[i].tBodies[0];
			var newTr = tbody.rows[0].cloneNode(true);
			
			// on masque la première ligne du tbody (la ligne de reference)
			tbody.rows[0].style.display = 'none';
			
			// on en ajoute une
			tbody.appendChild(newTr);
			
		}
	}
}

Un dernier problème subsiste : lorsqu'on clone cette ligne, son style est cloné également. Toutes les lignes sont donc invisibles ! Il faut ajouter à la fin de addLigne de quoi les remettres visibles :

	if ( document.all )
		newTr.style.display = "block"; // pour IE
	else
		newTr.style.display = "table-row"; // pour Gecko

L'utilisation de document.all permet de détecter s'il s'agit d'IE ou pas. En effet, seul ce navigateur implémente cette propriété (non-standard).

Vous pouvez tester ce code dans l'exemple 3.

Troisième étape : traiter les données

Grace à leur nom finissant par [], les valeurs des champs input seront assemblées dans un tableau lors du post du formulaire. Résultat : on se retrouve avec 4 tableaux : champ1, champ2, champ3 et champ4 correspondants aux 4 colonnes du tableaux html. Les lignes de ces tableaux correspondent aux lignes du tableau html (en commençant par 0).

Imaginons qu'il faille mettre à jour une base, le plus rapide est de tout supprimer puis de réinsérer les données directement ! Pas besoin de s'embêter à trouver ce qui a changé puisque tout est renvoyé.

Dernière chose : au moment de traiter ces données, il ne faut pas oublier d'oublier l'index 0, qui correspond à la ligne de référence.

Vous pouvez tester le résultat renvoyé par le serveur grace à l'exemple 4.

Conclusion

Rajouter des fonctions à ce script est extrement simple : il suffit de veiller à ne pas toucher à la première ligne. On peut par exemple imaginer des fonctions permettant de monter une ligne, de la descendre, de la dupliquer, etc. Bref, les possibilités de créer des interfaces web se rapprochant de celles des clients lourds sont de plus en plus nombreuses et de plus en plus simples à mettre en oeuvre grace notamment aux standards du W3C !

Centrer un float en CSS

cgo2 — Tue, 23 Aug 2005 21:32:00 +0000

Une zone - la galerie - doit être constituée de un ou plusieurs éléments - les boites - centrés à l'interieur et sur une seule ligne. En HTML « à la papy » c'est très facile à faire : la galerie est une cellule d'un tableau avec la propriété align="center", et le contenu est un tableau d'une seule ligne dont le nombre de cellules varie de 1 à 5 (le nombre maximum de boites pour tenir sur une seule ligne). Mais comment faire ça en CSS ?

Problématique

L'effet recherché ressemble à ça :

Ma première idée, pour placer les boîtes est d'utiliser le positionnement float avec un hr et la propriété clear : both; comme expliqué dans ce très bon article sur OpenWeb.

Au niveau code ça donne :

<div class="galerie">
	<div class="boîte">boîte 1</div>
	<div class="boîte">boîte 2</div>
	<div class="boîte">boîte 3</div>
	<div class="boîte">boîte 4</div>
	<div class="boîte">boîte 5</div>
	
	<hr class="clear" />
</div>

Appliquons le style suivant :

.galerie {
	background : #ccc;
	width : 360px; /* (50 + (5 * 2) + 10) * 5 + 10 */
}
.boîte {
	background : #69c;
	
	float : left;
	margin : 10px 0 10px 10px;
	padding : 5px;
	width : 50px;
	
	text-align : center;
}
.clear {
	clear : both;
	visibility : hidden;
}

Ça donne :

Avec 3 boîtes uniquement :

Vous pouvez tester ce premier exemple.

Le positionnement est celui recherché lorsque toutes les boîtes sont présentes, mais, malheureusement, dès qu'il manque des boîtes, celles restantes sont calées à gauche. C'est tout à fait logique puisqu'elles sont flottantes à gauche, mais ce n'est pas ce que nous voulons !

Un deuxième conteneur pour le centrage

Au départ, j'ai simplement essayé quelques techniques de centrage css appliquées sur les fiches ou sur le conteneur. Mais rien de tout ça ne fonctionne.

Le problème est qu'on ne peut pas centrer un flottant, à cause de sa conception même. Comme écrit très justement dans l'article d'Openweb : Une boîte flottante est retirée du flux normal, et placée le plus à droite (float: right) ou le plus à gauche (float: left) possible dans son conteneur. Il est donc logique que les techniques de centrage ne puisse pas s'appliquer (centrer par rapport à quoi, puisque la boîte est retirée du flux ?).

Par contre, un élément non-flottant peut, lui, être centré (par exemple avec la technique des marges auto). Imaginons que l'on crée un autre conteneur, qui soit centré par rapport au premier (la galerie), et qui contienne les fiches...

Au niveau code ça donne :

<div class="galerie">
	<div class="conteneur">
		<div class="boîte">boîte 1</div>
		<div class="boîte">boîte 2</div>
		<div class="boîte">boîte 3</div>
		<div class="boîte">boîte 4</div>
		<div class="boîte">boîte 5</div>
		
		<hr class="clear" />
	</div>
</div>

On applique le même style que précédemment. Mais il faut rajouter de quoi centrer le conteneur :

.galerie {
	text-align : center; /* uniquement pour IE */
}
.conteneur {
	margin : 0 auto;
}

Là se pose un problème - LE problème devrais-je dire - : pour que ça fonctionne il faut que le conteneur enveloppe parfaitement les boîtes, et donc soit exactement à la bonne taille. La formule donnant la taille est facile à trouver :

taille = nombre de boîtes * ( width + padding + margin-left ) + margin-right

Mais je n'ai strictement aucune idée de comment faire ça en CSS. C'est théoriquement possible de le fixer dans un style inline (dans la page) appliqué au moment où le script qui génére la page affiche les boîtes. Une autre solution est d'utiliser DOM pour manipuler en Javascript les styles de la page.

Implémentation en Javascript/DOM

Le script doit se charger de calculer la taille en fonction du nombre d'éléments contenus. Pour ça il faut :

Trouver le conteneur à agrandir ; on utilisera la méthode getElementsById
Compter le nombre de boîtes contenues :
- Trouver les éléments div avec la méthode getElementsByTagName
- Eliminer ceux qui ne sont pas directement fils du conteneur (si les boîtes contiennent d'autres divs par exemple
Calculer la taille et agrandir le conteneur

Mon implémentation (qui n'est sûrement pas optimale) :

<script type="text/javascript">
 // <![CDATA[
function setContainerSize(truc) {
	var navroot = document.getElementById(truc);
	if ( navroot ) {
		var lis = navroot.getElementsByTagName("div");
		/* XXX : y a-t-il un moyen plus simple de ne détecter que les divs de rang 1 ?
		 *       ou, détecter selon une classe ? */
		var ok = 0; var nok = 0;
		for ( i = 0; i < lis.length; i++ ) {
			if ( lis[i].parentNode != navroot )
				nok++;
			else 
				ok++;
		}
		navroot.style.width = ok * 70 + 10 + 'px';
	}
}
 // ]]>
</script>

Maintenant, pour utiliser cette fonction, on effectue les modifications suivantes :

<body onload="setContainerSize('c1');">
...
<div class="conteneur" id="c1">

Ça donne :

Vous pouvez consulter cet exemple.

Limites et pistes de reflexions

Cette méthode a été testée avec succès sur IE 6, Firefox 1.x, Safari 1.3 et Camino 0.9.

Une limitation principale de cette méthode est l'impossibilité de centrer sur plusieurs lignes. Par exemple, si la première ligne contient 5 boîtes et la deuxième 2, les 2 seront calées à gauche. Je n'ai pas vraiment cherché comment résoudre ce problème, car ça n'était pas mon besoin.

L'autre amélioration possible concerne l'implémentation du script, et notamment la façon de compter les éléments div qui n'est sûrement pas optimale. Il serait également intéressant de pouvoir ne pas coder en dur les tailles des div dans le script, de manière à avoir du code réutilisable. Mais là ça dépasse mes connaissance en DOM :)

Enfin, étant donné que le centrage se fait par un script, les boîtes ne sont pas centrées tant que la page n'est pas complètement chargée. Dans certains cas ça provoque un petit décalage à l'écran le temps que le chargement se termine...

Quelques liens supplémentaires

Merci à Scara, MrGecko et tout le chan #asw pour la relecture ;)