Rendre mobile la fenêtre des commentaires

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

1. Cliquez sur le bouton et sauvegardez le fichier sur votre ordinateur.
2. Si vous voulez, changez-y le texte de l'infobulle du diablog ('tip').
3. Ensuite stockez ce programme dans l'espace  Mes Documents/Autres fichiers  de votre admin de blog.
4. 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é.

Comments

[Sagan33]

Comme tu dis au sujet du forum...
je préfère ne rien ajouter, il doit y avoir l’œil de Moscou qui traîne, Il paraît que je parle trop...

Il s'agit d'une version Beta mais à mon avis, la définitive ne va pas évoluer beaucoup.

Déjà qu'OB n'était pas convivial comparé à d'autres plate-formes, à présent, il va falloir ruser pour rajouter des liens. J'ai réussi à mettre des colonnes dans le footer mais reste une place vide
à droite des articles, et rien dedans... si tu as du temps à perdre : http://naturaessentia.overblog.com

Le Miroirauxessences recueille rarement des commentaires ! alors pour reprendre une formule de là-bas : PG dixit superior staff, nous migrerons (à l'économie, tant pis pour le www) sans regret.
Franchement ça ne vaut plus un Premium.

Pour mon second blog, les poules auront des dents quand je le migrerai. Je ne touche pas à Terre&Boissons.

Bonne soirée Bren,
Merci pour ta réponse.

[Sagan33]

Finalement les designs de la nouvelle plateforme sont plus modernes.
Par contre, le css est tout nouveau, Impossible de changer la moindre police de caractère à l'intérieur, de mettre un fond d'image...
quelle frustration.
Si tu as 2 mn à perdre http://naturaessentia.over-blog.com
Bonne soirée Bren.

[Bren du fat !]

Ahhh, les changements de version chez OB... tout un roman ! J'irai créer un blog de test un de ces jours pour jouer un peu. Et puis j'irai lire le forum - ça promet !

[Sagan33]

J'ai oublié de préciser, j'ai ouvert un blog sur la nouvelle plateforme, pourtant les design semblent plus modernes... bizarre alors toutes ces impossibilités.

[Sagan33]

Bonjour Bren,
Je voulais le faire mais avec l'historique de cette nouvelle plate-forme, et les avis peu encourageants postés sur le forum sur le peu de possibilités offert dans les nouveaux design, je me
demandais si cela valait la peine de rajouter un nouveau script.
Parait-il, concertés ou pas, tous les blogs migreront côté cette nouvelle plateforme.
Et, à ce qu'on lit, on ne peut même pas faire de copié-collé de son css. De plus je suppose qu'il en sera bien fini de ces 3 css.
Je me demande ce que tu penses de ce BETA. De toute manière même si on décide de ne pas migrer, à ce que je comprends, ils le feront d'office.
Il paraît qu'on ne peut même pas center une image, ni personnaliser les articles.
A te lire, ton avis m'intéresse beaucoup.
Geneviève.

[Sagan33]

effectivement, je n'avais pas touché à la cl_0
C'est toujours un plaisir de venir ici pour découvrir des arrangements pour son blog.
A +++
Tu es un chef Bren !

[AïmD!]

De mon côté, je sais que tu n'as pas encore tenté d'employer la nouvelle version du programme : j'avais oublié de la mettre en ligne ! ! C'est corrigé :-)

[Sagan33]

Bonsoir Bren,
J'avais déjà essayé ton programme mais j'avais du oublier quelque chose car ça n'avait pas marché.
Demain congé, alors de vais recommencer avec celui-ci.
Mille mercis pour ces programmes, c'est toujours le pincement quand on a tout mis en place et que Ô mystère, on affiche... pour voir...
Bonne soirée à toi.

[AïmD !]

Bonjour,


A tous les coups tu n'avais pas corrigé l'indication de la cellule des articles (cl_1_0 par défaut), et tu n'es pas la seule dans ce cas. C'est pourquoi j'ai retouché le programme : il n'y a plus
besoin de l'ajuster à chaque blog, c'est vraiment du presse-bouton.

[Flo-Avril]

Tu as entièrement raison bren et moi j'aime ça
Tu sais que mon ex est codeur et il déteste le javascript ...
Gros bisous, Flo

[Aïe mes doigts !]

Nobody's perfect :-)

[Flo-Avril]

Tu es un mordu inconditionnel du javascript bren et moi j'aime ça car j'en profite et je t'en remercie.
Gros bisous, Flo :0010:
PS: j'ai déjà passé le script à deux personnes et tout s'est bien déroulé.

[Aïe mes doigts !]

Pas mordu inconditionnel - pas que de ça, non plus ... Mais si on peut fabriquer des choses utiles avec, pourquoi se priver ?