Hu

C'est vraiment un titre idiot, mais si je ne l'utilise pas j'aurai des ennuis. Et puis ça donne une gueule d'enfer à la liste des derniers articles…

---

Le petit truc à découvrir dans le précédent article est tout simple (à décrire, pas à fabriquer) : en saisissant un commentaire vous pouvez désormais déplacer le popup en cliquant sur sa barre de titre.

Comme ce truc est un peu complexe, touche de très près à la tripe du blog, et enfin n'est pas testé à fond, je le supprimerai au premier accroc s'il s'en produit. C'est aussi pour cela que je ne souhaite pas encore le mettre à disposition – mieux vaudrait qu'OB se charge de l'ajouter en standard. M'enfin bon…

(nota : depuis j'ai écrit l'article correspondant)

Je vais tout de même vous raconter un peu l'histoire parce que je me suis senti très malin en confectionnant ça.

---

Lorsqu'on clique sur un lien  ajouter un commentaire , un bout de JavaScript (gestionnaire d'événement onclick) réalisé par OB produit à la volée tout le code HTML du popup ainsi que celui de la  vitre fumée  couvrant le blog, et insère ces deux éléments dans la page. On saisit le commentaire, on clique, un autre bout de JavaScript l'envoie au serveur puis ferme le popup.

Sur mon blog, lorsque la page s'est complètement chargée, un premier programme trouve tous les liens  ajouter un commentaire  et leur ajoute un gestionnaire d'événement onclick, en sus du gestionnaire normal fourni par OB (qu'il n'était pas question de trafiquer, bien sûr).

Lorsqu'on clique sur un de ces liens les deux gestionnaires s'exécutent, mais dans un ordre imprévisible. Celui d'OB crée le popup, rien de changé. Le mien recherche dans la page ce popup. Comme il n'est pas certain de le trouver du premier coup, il se relance après quelques millisecondes en cas d'absence du popup. Par sécurité le nombre de tentatives est limité : si quelque chose d'autre empêche le popup de se créer, il serait idiot de le chercher indéfiniment.

Si mon gestionnaire trouve le popup il va d'abord chercher la  vitre fumée  pour la rendre un peu plus transparente (vous aviez remarqué ?), puis la barre de titre du popup. À cette barre il greffe un autre gestionnaire d'événement pour traiter onmousedown, l'appui sur un bouton de souris.

Si alors vous cliquez sur la barre de titre du popup, ce nouveau gestionnaire se déclenche à son tour et c'est le grand jeu. D'abord repérer les coordonnées de la souris au moment de l'appui sur le bouton, puis ajouter encore deux gestionnaires d'événement : onmousemove pour traiter le déplacement de la souris et onmouseup pour traiter la fin du déplacement. J'ajoute aussi une classe au popup pour indiquer qu'il est en déplacement (c'est ce qui permet de lui donner une bordure en pointillé tandis qu'il se déplace)

Si on bouge la souris, le gestionnaire onmousemove relève les nouvelles coordonnées de la souris et bouge le popup en conséquence. (propriétés CSS left et top pour un élément en positionnement absolu). Magie ! Pour bien faire, le déplacement est limité au périmètre de la fenêtre.

Lorsqu'enfin on relâche le bouton, le gestionnaire onmouseup fait le ménage : enlever la classe ajoutée au popup, enlever le gestionnaire onmousemove et, pour finir, s'enlever lui-même. Le popup est redevenu tel que le JS d'OB l'avait créé, juste muni du onmousedown sur la barre de titre, prêt à servir pour un nouveau déplacement.

C'est beau, non ?

---

J'ai emprunté la technique du déplacement à Peter-Paul Koch, dont l'article original est fort bien traduit sur developpez.com.