Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
17 décembre 2010 5 17 /12 /décembre /2010 06:00

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.

par Wilhelm von Schmürz - dans Journal du savant fou
commenter cet article

commentaires

christina 10/01/2011 23:55


youppiee, un revenant !
oui, j'avais remarqué ces flèches, il y a quelques temps déjà, mais combien je ne sais plus, le temps passe vite et pas vite, je n'ai plus de repères.....


WvS 11/01/2011 00:00



Ce n'est pas très vieux, j'en ai eu l'idée à la fin du mois dernier en voyant la longueur du truc. Et comme je refuse d'écrire en tout petit pour gagner de la place..... :-D



christina 10/01/2011 23:06


Cloué au lit par la grippe ou parti sous les tropiques ?


WvS 10/01/2011 23:40



Pas de grippe et revenu de mes montagnes natales, parti pour en attaquer une autre : celle des travaux en retard.


Petite gâterie : avez-vous remarqué les deux 'tites flèches en haut et en bas de la liste des commentaires ?



christina 06/01/2011 17:36


Bonne année à vous aussi.
on peut s'encourager en se disant qu'elle peut difficilement être pire que la précédente...
ch


Bren du fat ! 10/01/2011 23:38



Ouais, c'est une vision assez juste......


Bonne année donc, à vous et à tous ceux qui passent ici et trouvent sans doute que le prochain article se fait désirer :-)



le banc moussu 27/12/2010 17:26


je te trouve très fort et tu peux être très fier...en tous cas moi je n'ai rien compris.


WvS 28/12/2010 17:10



Cette fois c'est sûr, je ranime le B-A-BA ! :-D



Ophi 25/12/2010 16:36


Oserais-je dire que c'est génialissime ? Et zut, j'ose. C'est trop bien de pouvoir vérifier un p'tit truc dans l'article ou un précédent commentaire sans avoir à refermer la boîtàcomm parce que le
p'tit truc se trouve pile poil en-dessous — évidemment, c'est la loi de Murphy adaptée à OB.

Merci pour cette petite merveille de bidouille — et j'en profite pour poser ici le "Joyeux Noël" d'usage, tiens.


WvS 28/12/2010 17:09



Ton audace t'honore... En effet, c'est bien la loi de Murphy qu'il s'agissait de combattre. Si ça pouvait donner des idées aux grands  chefs....


PS, edit, addendum et tout et tout : tant que j'y étais, j'ai greffé le truc aux deux autres diablogs de ma connaissance, hop là !



le coucou 22/12/2010 16:01


C'est beau comme un camion en kit, en effet… Je n'ai strictement rien compris aux explications (et pourtant, il y a des expressions que je reconnais : "onmousedown, onmousemove"… qui me rappellent
un temps où j'essayais laborieusement d'apprendre le langage "hypercard"). Et ça marche, compliments !


WvS 28/12/2010 17:06



L'important n'est pas de se faire comprendre mais de briller dans la conversation :-D. Bon, je crois que je vais ranimer la rubrique B-A-BA l'an prochain....



christina 18/12/2010 12:38


et là ça marche avec les coms affichés et du premier coup... décidément c'est vraiment aléatoire, à ne rien y comprendre
à part wolofi, il y en a d'autres que moi qui ont ce bug ??


WvS 18/12/2010 13:13



Pas à ma connaissance mais ça ne prouve rien : ils ou elles doivent se décourager sans rien dire :-(



christina 18/12/2010 12:02


ah oui, chouette le déplacement hors du cadre !
pour info : avec FF3.5.16 on a les flèches en croix
et en ce qui concerne l'ouverture aléatoire du popup (qui n'est pas propre à ce blog) : ce coup-ci pas de problème de l'ouvrir sous l'article, mais impossible avec les coms affichés - pourtant il
me semble que l'autre jour c'était l'inverse...


Ardalia 17/12/2010 18:17


Trop cool, Raoul ! :))
It is !


WvS 17/12/2010 20:00



Hu hu ! ^_^



David 17/12/2010 15:05


euh vi ca explique.... dodo moi....


WvS 17/12/2010 15:11



Grrrrroooo dodo... Tiens, le source est en ligne :


http://ddata.over-blog.com/xxxyyy/0/38/68/97/JM_blog.js



Archives