Je veux devenir mon propre patron

La version 1.4 de jQuery est sortie le 14/01. De nouvelles méthodes dans l’API, des performances accrues, autant de raisons (plus d’infos chez alsacreations) de migrer, surtout pour un site qui n’est pas en production comme mon projet actuel! C’est donc fait!

Du coup, j’en ai profité pour aussi mettre à jour jQuery UI pour la version 1.7.2 (la 1.8 ne devrait pas tarder pour faire suite à jQuery 1.4), qui fonctionne bien avec la nouvelle version 1.4.

Seul souci, lorsqu’on télécharge la librairie depuis le site jqueryui.com, elle ne contient pas les versions minimisées des fichiers javascript. Bien sûr, on peut le faire soi-même, mais sinon, sachez qu’on peut les trouver sur l’hébergement google code du projet jQuery UI : http://code.google.com/p/jquery-ui/downloads/list. Le zip à télécharger contient un répertoire ui, avec tous les js, et un sous répertoire minified avec tous les mêmes js mais minimisés cette fois.

Ma problématique de ce WE était d’offrir le moyen aux utilisateurs d’associer des informations à des évènements. Ces informations peuvent être du texte ou une carte Google Maps. La saisie de texte, c’est basique : <textarea></textarea>. Mais pour une carte Google Maps, c’est un peu plus subtil.

Je ne peux pas proposer de saisir les coordonnées à la main. Non, il faut que les utilisateurs déplacent eux-mêmes la Google Map et qu’ensuite je récupère les paramètres de cette carte, qui sont dans mon cas la latitude et la longitude du centre de la carte et le niveau de zoom, pour les sauvegarder. Et avec l’API Google Maps, c’est finalement assez simple.

La map se place dans un div, suivi dans champ input hidden, qui contient les paramètres :

<div class="map" id="map_'.$i.'"></div>
<input id="content-'.$i.'" name="content-'.$i.'" type="hidden" value="" />


Puis, j’initialise chaque map de la page par la méthode suivante :

function newMap(rowId, lat, lng, zoom) {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_"+rowId));
map.setCenter(new GLatLng(lat, lng), zoom);
// Ajout des contrôles ou autres paramètres
GEvent.addListener(map, "moveend", function() {
$("#content-"+rowId).val(map.getCenter().lat()+"|"+map.getCenter().lng()+"|"+map.getZoom());
});
}
}


Le listener associé à la map se déclenche en fin de déplacement (‘moveend‘), et récupère alors les paramètres (map.getCenter().lat()) pour les placer dans le champ hidden associé ($(‘#content-’+rowId).val(…)).

Avec un poil de jQuery (qui me séduit de plus en plus), c’est vraiment simple de faire des choses sympas. La preuve.

Dans le cadre de mon projet, j’ai besoin de permettre aux « usagers » (je fais comme à la SNCF, en fait j’espère que ce seront de bons clients qui paient cher!) d’éditer eux-mêmes du texte. Mais comme je veux ce qu’il y’a de mieux pour mes cli… utilisateurs, il faut qu’ils puissent faire un peu de mise en forme sur ces textes et -surtout- qu’ils puissent intégrer facilement des images. Et quand je parle d’images, j’entends des fichiers stockés sur leur disque dur. Et de mon côté j’ai besoin de récupérer ce texte en HTML pour pouvoir le réafficher par la suite.

Il me faut donc un composant de formulaire plus évolué qu’un basique élément textarea, soit un éditeur de texte riche. Après une recherche sur Google de scripts implémentant ce besoin, j’ai éliminé les composants moches, ceux n’étant plus mis à jour depuis trop longtemps et ceux qui ne géraient pas l’upload d’image mais seulement un lien vers une image déjà présent sur le réseau et j’ai retenu une liste de 4 composants :

• Dsrte : avidansoft.com/dsrte
• TinyMce : tinymce.moxiecode.com
• CKEditor : ckeditor.com
• NicEdit : nicedit.com

Lire la suite »