Fils de discussion dans Dotclear

Comme il ne faut pas s’arrêter en si bon chemin (et que ma boîte fait le pont de l’ascension…), je me suis attelé à un nouveau plugin Dotclear. Il s’agit d’une fonctionnalité que j’aimais bien dans SPIP : la possibilité de voir les commentaires par fils de discussion.

Bundles of cotton thread par Unhindered by Talent

L’avantage des fils de discussion

En effet, quand un article commence à avoir beaucoup de commentaires (par exemple celui-là), il devient difficile de savoir qui répond à qui. Une convention est née : préfixer sa réponse par le signe “@” suivi du nom de la personne à qui on veut répondre. Il existe même un plugin Dotclear appelé @Reply pour pré-remplir la fenêtre d’ajout de commentaire avec ce préfixe, simplement en cliquant sur un bouton.

C’est très bien, mais ça n’aide pas beaucoup à la visualisation. Le mieux serait, selon moi bien sûr, de placer les réponses sous les commentaires auxquels elle répondent, en les indentant de quelques pixels.

La méthode

Malheureusement, comme la réponse à un commentaire n’est pas prévue par le moteur de Dotclear, on ne peut pas trouver dans la base de données la référence au commentaire auquel répond un autre commentaire. Pour recréer les fils de discussion, j’ai donc décidé de m’appuyer sur la convention “@”, et notamment sur le lien qui est généré par le plugin @Reply. Cette méthode est la meilleure que j’ai trouvée, mais elle a tout de même deux inconvénients :

• le commentaire ne se retrouvera pas au bon endroit dans les fils de discussion si le visiteur n’utilise pas le bouton @Reply
• on ne peut pas répondre à deux commentaires dans le même commentaire (mais ça je vois pas bien comment faire autrement…)

Donc ce n’est pas parfait, mais c’est déjà “suffisamment bien” pour moi.

La réalisation

Ce plugin fonctionne à 100% en javascript, à l’aide de jQuery. Le principe est simple : on ajoute un bouton pour activer la vue en fils de discussion, et en arrière-plan on prépare une liste des commentaires dans laquelle chaque élément a comme attribut supplémentaire le numéro du commentaire auquel il répond.

À l’activation de la vue par fils de discussion, on vide complètement la zone de commentaires, et on les réinsère les uns après les autres. Si un commentaire répond à un autre commentaire, il est inséré après celui-ci, et on lui ajoute une marge à gauche pour l’indenter.

Comme toujours, la complication est dans les détails :

• quand on insère une réponse, il faut l’insérer après les autres réponses au commentaire.
• il faut ajouter une marge de plus en plus grande au fur et à mesure des réponses, mais pas trop grande pour ne pas écraser le commentaire à droite

Enfin voilà, vu de chez moi, ça marche. J’avais peur que ce soit extrêmement lent, mais en testant sur un de mes articles qui a eu beaucoup de commentaires, je n’ai pas constaté de lenteur excessive.

Je n’ai qu’un bug à déplorer : l’indentation du commentaire fait perdre les deux angles arrondis de droite. C’est dû à l’image de fond utilisée pour simuler les bords arrondis, peut-être que si j’ai le courage je corrigerai ça.

Le code

Si vous voulez l’essayer chez vous, j’attache le code packagé à cet article. Le fichier Zip est prêt à installer, et contient toute la plomberie Dotclear qui va bien (interface d’administration, aide en ligne, traductions, etc). Le code est sous licence AGPL (qui est plus ou moins la GPL des applications web).

Je vais le laisser tourner ici quelques jours, voire semaines, avant de le proposer au “lab”. Comme toujours, si vous ou l’un de vos collaborateurs étaient pris ou tués, le Département d’État nierait avoir eu connaissance de vos agissements. Euh, non, remontez-moi les bugs, quoi. Bonne chance Jim.