/** * ======================================================================================= * * Class: Infobulle * v 0.1 * ======================================================================================= */ var retourInfoBulle = function(e) { $("__infobulle").innerHTML = e; } var Infobulle = Class.create(); Infobulle.prototype = { /** * ==================================== * GROUP: Methodes publiques * ==================================== * * Method: initialize * * Parameters: * */ initialize: function() { if ($('body') == null) { alert('!! Erreur fatale : body DOIT avoir l\'id body () !!'); return; } this.bVisible = false; this.MARGE_CURSEUR = 20; document.onmousemove = function (e) { tooltip._bouge(e); } }, /** * Method: affiche * * Parameters: * - sHtml, String le contenu (html ou non) de l'infobulle */ affiche: function(sHtml) { $('__infobulle').innerHTML = sHtml; $('__infobulle').style.display = 'block'; this.bVisible = true; }, rempliInfoBulle: function(idProduit) { var actualiseInfoBulle = new Ajax("../medias/includes/crazy_categorisation_produit.php"); actualiseInfoBulle.ajoute('actualiseInfoBulle', idProduit); actualiseInfoBulle.envoie(retourInfoBulle); }, /** * Method: masque * Masque l'infobulle */ masque: function() { $('__infobulle').style.display = 'none'; this.bVisible = false; }, /** * ==================================== * GROUP: Methodes privees * ==================================== * * Method: _bouge * * Parameters: * MouseEvent e */ _bouge: function(e) { var ie = document.all; e = (ie?window.event:e); if (this.bVisible) { $('__infobulle').style.left = (ie?e.clientX:e.pageX) + (ie?document.documentElement.scrollLeft:0) + this.MARGE_CURSEUR + "px"; $('__infobulle').style.top = (ie?e.clientY:e.pageY) + (ie?document.documentElement.scrollTop:0) + this.MARGE_CURSEUR + "px"; // On test si on doit décaller la popup if($('__infobulle').style.width && $('__infobulle').style.height) { var largeurImage = parseInt($('__infobulle').style.width); var hauteurImage = parseInt($('__infobulle').style.height); var largeurFenetre = document.documentElement.clientWidth; var hauteurFenetre = document.documentElement.clientHeight; var cursorLeft = (ie?e.clientX:e.pageX) - (ie?0:document.documentElement.scrollLeft); var cursorTop = (ie?e.clientY:e.pageY) - (ie?0:document.documentElement.scrollTop); var decalageTop = 0; var decalageLeft = 0; // Test si image dépasse le bas de la page if( (hauteurFenetre - cursorTop) < hauteurImage) { decalageTop = (hauteurFenetre - cursorTop) - hauteurImage; $('__infobulle').style.top = parseInt($('__infobulle').style.top) + decalageTop - this.MARGE_CURSEUR - 10 + "px"; } // Test si image dépasse pas le bord droit de la page if( (largeurFenetre - cursorLeft) < largeurImage) { decalageLeft = (largeurFenetre - cursorLeft) - largeurImage; $('__infobulle').style.left = parseInt($('__infobulle').style.left) + decalageLeft - this.MARGE_CURSEUR - 10 + "px"; } // Si l'image a dépassé les 2 bords en même temps, il faut faire attention car sinon l'image passe sur le mouseover, il faut donc la décaller if(decalageTop && decalageLeft) { $('__infobulle').style.left = (ie?e.clientX:e.pageX) + (ie?document.documentElement.scrollLeft:0) - this.MARGE_CURSEUR - largeurImage + "px"; $('__infobulle').style.top = (ie?e.clientY:e.pageY) + (ie?document.documentElement.scrollTop:0) - this.MARGE_CURSEUR - hauteurImage + "px"; var decalageTop = 0; var decalageLeft = 0; // Test si image dépasse le haut de la page if( cursorTop < hauteurImage) { decalageTop = (hauteurFenetre - cursorTop) - hauteurImage; $('__infobulle').style.top = 10 + "px"; } // Test si image dépasse pas le bord gauche de la page if( cursorLeft < largeurImage) { decalageLeft = (largeurFenetre - cursorLeft) - largeurImage; $('__infobulle').style.left = 10 + "px"; } } } } } };