Un plugin pour une édition directe sur le site public

Cet outil fabuleux permet de modifier simplement une page du site, (lorsque l’on y est autorisé), en double-cliquant directement sur la page plutôt que d’aller systématiquement en espace d’administration. Cette fonction ressemble à celle d’un wiki, l’outil de Wikipedia qui permet de faire de la rédaction collective, rapide et facile.

Fonctionnement

Fabrication de la page coté serveur

Lors du chargement d’une page, le plugin agit dans le pipeline affichage_final.

Il vérifie alors :

- si l’utilisateur est identifié,
- si la page contient au moins une chaîne de caractères “crayon xxxx-yyyy-nn”,
- et si l’utilisateur possède des droits sur au moins un des éléments ainsi marqués

Le cas échéant, il insère dans le de la page le script externe crayons.js ainsi que des données de configuration comprenant notamment la liste des éléments autorisés pour cet utilisateur.

Le corps de la page n’est pas modifié, et le script a un impact négligeable sur les performances si l’utilisateur n’est pas connecté.

Chargement par le navigateur

Lorsque la page finit de se charger (et si le visiteur a des droits d’édition sur les crayons présents dans la page), le script crayons.js sélectionne tous les éléments possédant la classe crayon type-champ-id, et si ils sont autorisés pour l’utilisateur inscrit, leur adjoint une image clicable (un crayon) et leur ajoute la classe crayon-autorise pour indiquer qu’ils sont « éditables ».

Un clic sur cette image, mais aussi un double-clic sur l’élément lui-même, provoquent l’activation du formulaire d’édition.

Activation du crayon

Un click sur le « crayon » (ou un double-clic sur l’élément) déclenche une requête vers le serveur, qui renvoie le formulaire de modification qui va « remplacer » l’élément affiché.

La requête spécifie au serveur le « type », le « champ » et l’« id » pour lesquels le formulaire est demandé.

Après vérification de l’existence des données et des droits sur celles-ci, le serveur renvoie le formulaire (sous forme de données javascript, au format JSON). Le type et les dimensions du champs sont déterminés d’après sa nature et la place réservée à l’élément. Il contient le source brut du texte, comme lorsque on édite depuis l’espace privé ; la police, la taille et la couleur des cararctères sont préservés.

crayon.js associe ce formulaire à l’élément puis « cache » ce dernier.

L’utilisateur peut maintenant modifier les données.

Attention : l’affichage final ne peut être réalisé que par le serveur, un click en dehors de la zone d’entrée après des modifications affichera à nouveau le contenu originel. Dans ce cas, une roue dentée vous signale que vous avez introduit une modification. Click sur le bouton ou double-click sur l’élément vous y ramène, elles ne sont pas perdues. Si vous abandonnez cependant la page, un dernier rappel vous propose de sauvegarder.

Sauvegarde

Le formulaire possède une série de boutons/touches associées :

- OK (ainsi que la touche Entrée [1]) permet de sauvegarder,
- Annuler (ainsi que la touche Escape) abandonne toute mise à jour,
- Un clic en dehors des zones de saisie cache ces zones et revient à l’affichage initial.

Il contient aussi des identificateurs et des clés associés au données.

Le formulaire est soumis en POST par ajaxForm donc asynchrone. Sur réception, le serveur :

- analyse les données soumises, leur cohérence et leur actualité (afin d’annuler l’envoi si les données ont été entre-temps modifiées par ailleurs).
- vérifie une nouvelle fois les droits d’édition.
- appelle les procédures internes de SPIP pour mettre à jour les données.

Le système alimente notamment l’historique des modifications, de la même façon que l’espace privé.


P.-S.

source : Spip-contrib

, le 23/06/2008 (dernière modif : 23/06/2008)