Un plugin jQuery pour générer des plans automatiquement

Par NiKo le dimanche 8 juin 2008, 16:59 - Dev - Lien permanent

Avec un temps pareil, autant coder des plugins jQuery, non ?

Quelques heures de boulot plus tard, jqplanize^[1] est né et permet de générer automatiquement une table des matières extraite de la hiérarchie induite de la séquence des titres d'un document HTML^[2].

La doc est sur la page d'accueil du projet (hébergée chez Google), ou plus exhaustivement sur cette page dédiée du présent site, avec quelques exemples live.

Le code semble fonctionner sous Firefox 3 RC2 et Safari 3.1, mais ça ne marche curieusement pas sous Opera 9, et j'ai pas testé sous IE donc attendez vous à des updates^[3].

Vivement l'été.

Notes

[1] Non mais vous avez déjà vu un nom aussi naze ?

[2] Si tant est que le balisage des titres soit sémantique, hein.

[3] Ou pas, bien entendu.

Dans la même veine (ou pas)

« Nude machines | Humeur »

Commentaires

1. Le dimanche 8 juin 2008, 23:33 par Vinch

Toi aussi tu développes des trucs quand tu t'ennuies alors ? Tu crois qu'on doit se faire soigner ?

2. Le lundi 9 juin 2008, 00:11 par Gilles

Joli. Ca va certainement me servir bientôt. Merci

3. Le lundi 9 juin 2008, 01:28 par TheRec

Merci pour ce plugin, très bonne idée, bon boulot
Petit question, loin de moi l'idée de jouer à l'intégriste, mais dans ce cas l'usage d'une liste ordonnées (<ol>) en lieu et place d'une liste desordonnées (<ul>) ne serait-il pas plus sémantique ? (Bien sûr je ne parle pas du rendu désastreux de la numérotation des liste ordonnées imbriquées que font globalement tous les navigateurs... mais bon c'est "perfectible" en CSS/Javascript, vu que c'est un pré-requis).
Keep up the good work !

4. Le lundi 9 juin 2008, 07:07 par NiKo

TheRec> Toi, tu n'as pas lu la FAQ

5. Le lundi 9 juin 2008, 09:09 par PiTiLeZarD

Sympa comme tout ça ... hop bookmark je suis certain que ça me servira ...

J'ai pas diggé plus que ça, mais si on pouvait l'appliquer qu'a un subset de la page (genre avoir un context en paramètre) ça serait d'enfer !

Jte souhaite de t'ennuyer plus souvent ! Si tu veux j'ai des idées, et j'arrive plus a trouver le temps de m'ennuyer ...

6. Le lundi 9 juin 2008, 09:41 par NiKo

PiTiLeZarD> Tu peux déjà le faire :
$('#mondiv').planize();
Je vais continuer d'agrémenter la documentation, c'est toujours le plus long...

7. Le lundi 9 juin 2008, 10:35 par Nicolas Hoizey

Bonne idée !

Moi j'ai lu la FAQ, et ça m'intéresserait que tu développes un peu ton « because it's lame » !

Sinon, pourquoi ne pas l'avoir mis sur le Trac/svn de jQuery pour lui donner une meilleure visibilité ?

PS : Sinon, hors sujet, pourquoi quand je coche « se souvenir de moi sur ce blog », ce n'est plus coché quand je prévisualise, ce qui fait que je dois recocher si je modifie mon message ?

PS2 : Et enfin, dans le même hors sujet, pourquoi le bouton « envoyer » n'est-il pas après le texte de prévisualisation, plutôt qu'après le formulaire, ce qui oblige à scroller et chercher, ce qui n'est pas bon pour mon ergonomètre ?

8. Le lundi 9 juin 2008, 10:42 par TheRec

Si, si, je l'ai lue la FAQ Je te posais la question si cet élément à l'échelle d'une page est réellement sémantique, que ce soit une liste ordonnée ou non en fait (à vrai dire le patch se résumerai à changer les occurrences de "ul>" en "ol>"). Mon interrogation portait plus sur la logique sémantique derrière l'utilisation d'une liste à l'échelle d'une page, ce n'est pas une critique concernant ton code, je n'oserai pas, je n'en ai jamais codé des plugins jQuery from scratch

9. Le lundi 9 juin 2008, 10:43 par NiKo

NicoH :

Moi j'ai lu la FAQ, et ça m'intéresserait que tu développes un peu ton « because it's lame » !

Impossible avec des liste ordonnées imbriquées de gérer les numéros composites, par exemple 1.2.3., 1.2.4, 1.2.5, etc... Où alors y'a une astuce qui me manque ?

Sinon, pourquoi ne pas l'avoir mis sur le Trac/svn de jQuery pour lui donner une meilleure visibilité ?

Parce que je suis timide

pourquoi quand je coche « se souvenir de moi sur ce blog », ce n'est plus coché quand je prévisualise, ce qui fait que je dois recocher si je modifie mon message ?

Faudrait demander à monsieur Dotclear...

pourquoi le bouton « envoyer » n'est-il pas après le texte de prévisualisation, plutôt qu'après le formulaire, ce qui oblige à scroller et chercher ?

Voir réponse précédente

TheRec :

Comme mentionné plus haut les listes ordonnées ne me permettent pas de gérer les numérotations complexes, sauf si vous avez un tuyau...

10. Le lundi 9 juin 2008, 10:52 par Nicolas Hoizey

Allez, tu vas dire que je le fais exprès, que je squatte ton blog, etc., mais bon, c'est constructif, ce que je dis, hein, faut pas le prendre mal...

Tout d'abord, j'ai eu beau cocher et recocher la case « Se souvenir de moi sur ce blog », il ne se souvient jamais de moi.

Et surtout, le texte des commentaires n'est pas repris dans le suivi que j'essaie de faire avec http://co.mments.com/ et c'est bien dommage. Ce serait top que tu mettes un <div id="comment-12">...</div> autour de tes commentaires (le 12 ici, dans mon exemple) constitués d'un <p> et d'un <blockquote> non liés... cf http://blog.co.mments.com/2007/02/0...

11. Le lundi 9 juin 2008, 11:01 par Nicolas Hoizey

« Impossible avec des liste ordonnées imbriquées de gérer les numéros composites »

Oserais-je le RTFM ?

http://www.w3.org/TR/REC-CSS2/gener...

J'avoue que c'est pas simple, mais ça existe...

12. Le lundi 9 juin 2008, 11:01 par NiKo

NicoH : ah oui ben tu vois j'avais pas trouvé Bon, de ce que je vois ça risque de pas être implémenté sur tous les browsers, et la mise en oeuvre m'a l'air un peu complexe effectivement. Je regarderai à l'occasion pour l'implémenter pour les plateformes supportant cette spec. Mais va falloir que je me réennuie sévère

Sinon j'ai bougé l'id comme tu me l'as préconisé, tu me diras si ça fonctionne mieux de ton côté

13. Le lundi 9 juin 2008, 11:06 par Nicolas Hoizey

Ce n'est pas qu'une question d'emplacement -- mais c'est déjà plus propre comme ça pour la structure -- il faut malheureusement que l'id ait pour valeur "comment-#". Je ne sais pas quel impact ça peut avoir sur dotClear...

14. Le lundi 9 juin 2008, 11:40 par NiKo

NicoH : Les standards de co.mments.com ne sont pas les miens, je ne vais pas changer les urls de mes commentaires pour eux (parce que cool URIs don't change et que j'ai pas envie d'avoir deux types d'id différents pour leur faire plaisir).

15. Le lundi 9 juin 2008, 11:55 par Nicolas Hoizey

Non, non, il ne s'agissait pas de l'URL, mais de l'id du <div>, donc tu aurais pu avoir les deux...

... mais en fait pas besoin, contrairement à ce qui est dit sur leur site (mal foutu), ils ont reconnu l'id de valeur "c13325", ça marche !!!

16. Le lundi 9 juin 2008, 11:57 par Niko

Nico, l'id détermine l'ancre nommée et donc les urls pointant vers les commentaires, comme par exemple : http://prendreuncafe.com/blog/post/...

Bon sinon, ravi que ça marche comme ça

17. Le lundi 9 juin 2008, 14:40 par Nicolas Hoizey

Juste pour pinailler, rien ne t'empêchait de mettre l'id que je demandais sur le div, et celui que tu utilises déjà sur le lien du numéro...

Mais ce n'est pas utile, donc co.mments a progressé, c'est cool !

18. Le lundi 9 juin 2008, 17:08 par NiKo

Je te répondrai en me citant (trois commentaires plus haut) :

[...] et que j'ai pas envie d'avoir deux types d'id différents pour leur faire plaisir

19. Le lundi 9 juin 2008, 18:06 par Nicolas Hoizey

Certes, mais « leur » faire plaisir, c'est surtout faire plaisir à tes lecteurs qui sont potentiellement utilisateurs de leur solution, faisant partie des meilleures du genre...

Tu utilises quoi pour suivre les discussions auxquelles sur participes sur d'autres blogs, toi ?

20. Le lundi 9 juin 2008, 18:28 par NiKo

J'utilise des flux RSS de commentaires, quand ils existent. Mais je commente relativement peu, donc ça reste gérable.

J'avais joué avec cocomments mais j'ai lâché l'affaire... trop bling bling pour être réellement util(isabl)e. J'ai rejoué récemment avec co.mments, pour voir, et ma foi ça fait le boulot. À voir sur la durée

21. Le lundi 9 juin 2008, 21:46 par NiCoS

Ca m'a l'air chouette ça, congrats

Bon moi va falloir que je m'organise un peu, j'ai le temps de rien faire en ce moment

22. Le mardi 10 juin 2008, 01:39 par Bast

Excellent code. J'ai eu la même besoin il y a de cela quelques mois et je m'étais aperçu que ça n'existait pas encore. J'avais codé à l'arrache un code de 10 lignes qui faisait la même chose... Mais il était tellement laid que je ne l'ai jamais publié, par manque de temps;

Je suis ravi de lui avoir trouvé un remplaçant qui je l'espère sera mieux maintenu que le miens. En tout cas les options ont l'air sympa.

23. Le lundi 16 juin 2008, 11:09 par remouk

Marrant ce plug-in, surtout la partie Sommaire : c'est un des exercices que je donne à faire lors des formations Javascript (sauf qu'ils le font avec DOM directement).

24. Le mardi 17 juin 2008, 03:29 par steveballmer

Hola' again!

25. Le mercredi 18 juin 2008, 07:11 par Niouton

Bon alors salut et bravo et merci!
Voilà pour les politesses comme il se doit...

Et sinon, vous croyez que ce sera possible d'en faire un plugin pour Wordpress?
Voilà pour les "réclamations" comme il ne se doit pas mais que je fais quand même, nah!

Non mais, je rigole, en plus tu es sous Dotclear donc je sens que je vais me faire taper, enfin peut-être ^^ Mais tout ça pour dire que je pense que transformer ton code en plugin Dotclear et/ou Wordpress ne devrait être ni compliqué ni long (enfin je dis ça mais c'est pas moi qui vais le coder c'est sûr ! ^^) et je pense qu'ils se diffuseraient bien.
Ca c'était pour l'explication un peu plus constructive ^^

Si ça se fait, prévenez moi, je signe tout de suite! Sinon je sens que je vais être trop feignant de l'implanter sur mon blog ^^

Voilà merci à bientôt
Ca c'était pour...ah bon ok pas besoin de mentionner que c'était les salutations?

26. Le mercredi 18 juin 2008, 11:51 par NiKo

Niouton> En fait tu n'as pas besoin de faire de jqplanize un "plugin" pour ton gestionnaire de blog, il suffit juste d'appeller jQuery et le script dans ta balise head et d'appeller la méthode qui va bien.

Pour la petite histoire, jqplanize est en javascript, donc executée côté client ; pas besoin de php ni rien du tout côté serveur

La discussion continue ailleurs

1. Le mardi 10 juin 2008 à 01:50 par BastNic's Blog

Les grands esprits se rencontrent

Je viens de regarder dans mes mails, le 3 mars j'ai développé un petit script jQuery qui génère une table des matières en JS. Je me rappelle avoir passé plus de temps à chercher une solution existante qu'à développer ma propre solution....