Trier des choses sur une page web

Pourquoi ?

Comme d’habitude : pourquoi pas ? En fait, sur plusieurs sites, je me suis aperçu que j’aurais bien aimé avoir la possibilité de trier les résultats par note, vote, date…

Par exemple, si on cherche des recettes de dessert sur 750g, sur marmiton, voire yummly, je vois pas trop comment sont triés les résultats… Pas possible non plus de trier selon le nombre de commentaires sur /. ou MeFi, certains tableaux sur wikipedia ne sont pas triés. Ce n’est clairement pas quelque chose que je veux faire tous les jours, mais ça m’arrive. Du coup j’ai pris mon courage à deux mains, mon clavier dans l’autre, et je me suis mis à coder une petite fonction, qui a ses limites, mais qui marche dans la plupart des cas.

Rapide problème

Je voulais un truc léger (sans jquery), et donc partir de zéro. Puis j’ai été confronté au problème qui fait que, quand on clique sur un span qui se trouve dans un div lui-même dans un li qui est… si on a ajouté une fonction qui écoute les événements pour tous les objets, et bien le span va bien répondre présent, mais aussi le div, le li et tous les autres… Je me suis alors demandé comment avait fait tontof pour kriss pin. Et, comme toute bonne personne qui se respecte, il a mis en commentaire dans son code comment il a résolu ce problème. Ce commentaire c’est « http://www.quirksmode.org/js/events_order.html », et ça explique bien mieux que moi… Et plutôt que de pomper honteusement ses fonctions, je m’suis dit, pourquoi ne pas intégrer ça à kriss pin ?

Intégration dans kriss pin

J’ai donc forké sur github, fait mes modifications, et un pull request.

Allez voir chez tontof pour savoir comment mettre un bookmarklet. Sinon, pour tester sur des exemples à la con, c'est ici.

Si vous cliquez sur un élément, puis sur un second, appuyez sur la touche p pour trier. Cela trie de façon croissante ou décroissante, selon que le premier élément est plus grand que le second ou non. Les entêtes des tableaux sont également sensés restés en tête du tableau.

Limites

Ça marche dans la plupart des cas. Mais je sais que ça peut ne pas marcher. Par exemple, si vous triez une ligne d'entête d'une table, elle ne reste plus en place si vous triez une colonne. Il y a également un bug sur les tables qui contiennent des multilignes. Ce n'est non plus pas possible de trier un tableau « horizontal » (et donc à double entrées). De plus, c'est pas forcément possible non plus de trier suivant des étoiles selon comment est codée la page. Par exemple, ça marche bien sur yummly, mais pas sur marmiton. Ça peut également rendre la page très moche :Þ

À part ça, j'en suis plutôt content.

Autres billets

Date: <2013-02-28>

Generated by Emacs 24.3.1 (Org mode 8.2.4) - Show Org source (htmlized)

CSS inspired by Tontof, colors by Chaotic Soul

Validate