Rendre mobile la fenêtre des commentaires

28.11.2011

Dans un blog OB on rédige les commentaires dans un popup (un "diablog" en jargon OB – ô Roland Dubillard !). Ce popup se plante au centre de l'écran et il n'y a pas moyen de le déplacer. Il s'affiche par-dessus une vitre très sombre et on ne peut rien changer à cette vitre.

Alors j'ai pris ma… ma référence JavaScript et mon couteau, et j'ai taillé un petit bout de programme JS pour améliorer tout ça. Tant que j'y étais, le bouzin traite en fait tous les diablogs présents sur un blog. Voilà – mais ça ne vaut que pour les blogs de niveau "Privilège" ou "Premium".

Avertissement honnête avant de poursuivre : ce programme, vous vous en doutez, exploite à fond ce que je sais de la structure d'un blog OB (petite publicité : tout est résumé dans cet article et les suivants). Donc si OB modifie cette structure il ne me demandera pas mon avis et le programme pourra ne plus marcher. Dans un tel cas, résignez-vous à le désactiver en attendant que j'en ponde une version à jour.

Installation

Cliquez sur le bouton et sauvegardez le fichier sur votre ordinateur.
Si vous voulez, changez-y le texte de l'infobulle du diablog ('tip').
Ensuite stockez ce programme dans l'espace Mes Documents/Autres fichiers de votre admin de blog.

Enfin, ajoutez une ligne au pied de page du blog :

 <script type="text/javascript" src="URL_du_programme"></script>

Si vous êtes en configuration avancée, assurez-vous d'ajouter cette ligne dans le pied de blog ARTICLE et ACCUEIL, ainsi que dans celui de PAGES.

Remplacez bien sûr URL_du_programme par l'url effective du fichier.

Voilà pour l'installation.

Fignolage(s) CSS

Le programme fonctionne sans autre ajout. Mais, tant qu'à regarder de près la structure des diablogs, j'en ai profité pour ajouter de quoi présenter plus finement tout le truc.

La vitre fumée

Le div (bien peu) transparent intercalé entre le popup et le blog reçoit la classe vitre. Même si ce div vous agace je vous déconseille formellement de le supprimer en ajoutant à votre CSS

 .vitre {display:none}

… parce que le visiteur pourrait alors cliquer n'importe où dans votre blog tout en écrivant un commentaire : caca-beurk garanti.

Utilisez plutôt quelque chose dans ce goût-là :

 .vitre {opacity:0.3!important;background-color:#272020!important}

Les deux !important sont… importants pour que votre règle ait une chance de marcher, la valeur de l'opacité (opacity) et celle de la couleur de vitre (background-color) sont à votre choix. Évitez tout de même opacity:0 !

Le diablog

Tous les diablog portent la classe diablog, donnant ainsi une première possibilité de mise en forme.

Le programme, quand il se déroule correctement, leur ajoute la classe plus. Cette classe supplémentaire permet de donner une présentation différente aux diablogs déplaçables et à ceux qui ne le sont pas. Par exemple, pour que le curseur change au survol de la barre de titre :

 .plus .title {cursor:move}

Seuls les diablogs mobiles auront ce curseur. Pourquoi un diablog ne serait-il pas mobile ? Parce qu'il y a un raté dans le programme (j'espère que non !), parce qu'il s'agit d'un nouveau type de diablog non encore traité par le programme, parce qu'OB a changé la structure des diablogs, parce que… Dans tous ces cas pas de classe plus et pas de curseur spécial, donc pas de fausses promesses au visiteur du blog. Ça vaut mieux, non ?

Toujours s'il se déroule correctement, le programme ajoute à chaque diablog une classe précisant sa nature : addComment pour le diablog de saisie de commentaire, shortURL pour le diablog affichant l'URL simplifiée, eMail pour les diablogs "Recommander" ce blog ou un article. Vous pouvez ainsi donner un aspect spécifique à chaque diablog.

Le diablog en cours de déplacement

Lorsque le lecteur clique sur la barre de titre du diablog pour le faire glisser à l'écran, celui-ci prend la classe glisse et la perd dès que le lecteur relâche le bouton de la souris. Exemple d'utilisation :

 .glisse{border-style:dotted}

Vous pouvez tout aussi bien choisir de rendre le diablog légèrement transparent, changer la couleur de son texte… À vous de choisir ce que vous préférez !

Démontage

Le présent article vous fournit le programme et son mode d'emploi. Son article jumeau démonte le programme si la tripe de la bête vous intéresse. Sa lecture est totalement facultative, n'y cherchez pas la réponse aux difficultés que vous pourriez rencontrer pour installer ce programme – mieux vaut dans ce cas laisser un commentaire ou m'écrire.

Mises à jour

Novembre 2011 : 1ère publication
Juin 2012 : simplification du programme, mise à disposition du programme sous forme téléchargeable, correction et amélioration de l'article, réécriture de la dissection du programme et report dans un article séparé.