www/plugins/auto/couteau_suisse/couteau_suisse/outils/glossaire.js

   1 var gloss_el = null;
   2 var gloss_dt = null;
   3 var gloss_dd = null;
   4 var gloss_dl = null;
   5
   6 // compatibilite Ajax : ajouter "this" a "jQuery" pour mieux localiser les actions
   7 // et tagger avec cs_done pour eviter de binder plrs fois le meme bloc
   8 function glossaire_init() {
   9   if(jQuery('span.gl_js', this).length) {
  10         if(!jQuery('#glossOverDiv').length) {
  11                 jQuery('body').append('<div id="glossOverDiv" style="position:absolute; display:none; visibility: hidden;"><span class="gl_dl"><span class="gl_dt">TITRE</span><span class="gl_dd">Definition</span></span></div>');
  12                 gloss_el = document.getElementById('glossOverDiv');
  13                 gloss_dl = gloss_el.firstChild;
  14                 gloss_dt = gloss_dl.firstChild;
  15                 gloss_dd = gloss_dl.lastChild;
  16         }
  17         jQuery('span.gl_mot', this).cs_todo().hover(
  18                 function(e) {
  19                         $this = jQuery(this);
  20                         // cas du surligneur (SPIP 2)
  21                         if(this.firstChild.className=="spip_surligne") {
  22                                 this.className = "gl_mot spip_surligne";
  23                                 this.innerHTML = this.firstChild.innerHTML;
  24                         }
  25                         gloss_dt.innerHTML = $this.parent().children('.gl_js')[0].title;  // titre
  26                         gloss_dd.innerHTML = $this.parent().children('.gl_jst')[0].title; // definition
  27                         reg = $this.css('font-size').match(/^\d\d?(?:\.\d+)?px/);
  28                         if(reg) gloss_el.style.fontSize = reg[0];
  29                         jQuery(gloss_el)
  30                                 .css('top', e.pageY.toString()+"px")
  31                                 .css('left', e.pageX.toString()+"px")
  32                                 .css('font-family', jQuery(this).css('font-family'));
  33                         gloss_el.style.display    = 'block';
  34                         gloss_el.style.visibility = 'visible';
  35                         if(typeof jQuery.fn.offset=="function") { // plugin jquery.dimensions disponible a partir de SPIP 2
  36 if(1) {///////////////////////// optimisation du placement, encore en test...
  37         var $glossOverDiv = jQuery('#glossOverDiv');
  38         var $gloss_dl = jQuery(gloss_dl);
  39         positionBy = 'auto'; // Type de positionnement : 'dessus', 'dessous', 'auto', 'mouse' (a tester...)
  40         ombre = 0;  // Taille d'une ombre, en pixels (non implemente)
  41         decalX = 2; // decalage entre le glossaire et le lien appelant
  42         width = 180; // largeur totale de #glossOverDiv : definie dans glossaire.css
  43         height = 'auto'; // hauteur totale de #glossOverDiv : 'auto' ou nombre de pixels
  44         // initiation verticale
  45         var glossHeight, wHeight;
  46         var linkHeight = this.offsetHeight;
  47         var defHeight = isNaN(parseInt(height, 10)) ? 'auto' : (/\D/g).test(height) ? height : height + 'px';
  48         var sTop, linkTop, posY, mouseY, baseLine;
  49         sTop = jQuery(document).scrollTop();
  50         // initiation horizontale
  51         var glossWidth = width + ombre;
  52         var linkWidth = this.offsetWidth;
  53         var linkLeft, posX, mouseX, winWidth;
  54         winWidth = jQuery(window).width();
  55         // c'est parti !
  56         linkTop = posY = $this.offset().top;
  57         linkLeft = $this.offset().left;
  58         mouseX = e.pageX;
  59         mouseY = e.pageY;
  60 // securite pour l'instant
  61 $glossOverDiv.css({margin:'0px'}); $gloss_dl.css({margin:'0px'});
  62         // calcul de la position horizontale : glossaire au centre du lien
  63         posX = Math.max(linkLeft - (glossWidth-linkWidth)/2,0);
  64         if (positionBy == 'dessous' || positionBy == 'dessus') { // glossaire fixe
  65                 $glossOverDiv.css({left: posX + 'px'});
  66         } else {
  67                 // au cas ou, glossaire a droite ou a gauche du lien ?
  68                 posX2 = (linkWidth > linkLeft && linkLeft > glossWidth) || (linkLeft + linkWidth + glossWidth + decalX > winWidth)
  69                   ? linkLeft - glossWidth - decalX
  70                   : linkWidth + linkLeft + decalX;
  71                 // suivre la souris ?
  72                 if (positionBy == 'mouse' || linkWidth + glossWidth > winWidth) {
  73                   posX = Math.max(mouseX - (glossWidth-linkWidth)/2,0); // glossaire au centre de la souris
  74                 /*if (mouseX + 20 + glossWidth > winWidth)
  75                         posX = (mouseX - glossWidth) >= 0 ? mouseX - glossWidth :  mouseX - (glossWidth/2);
  76                 else posX = mouseX;*/
  77         }
  78         var pY = e.pageY;
  79         $glossOverDiv.css({left: (posX > 0 && positionBy != 'dessus') ? posX : (mouseX + (glossWidth/2) > winWidth) ? winWidth/2 - glossWidth/2 : Math.max(mouseX - (glossWidth/2),0)});
  80         }
  81         // calcul de la position verticale
  82         wHeight = jQuery(window).height();
  83         $glossOverDiv.css({overflow: defHeight == 'auto' ? 'visible' : 'auto', height: defHeight});
  84         glossHeight = defHeight == 'auto' ? Math.max($gloss_dl.outerHeight(),$gloss_dl.height()) : parseInt(defHeight,10);
  85         glossHeight += ombre;
  86         tipY = posY;
  87         baseLine = sTop + wHeight;
  88         if (positionBy == 'dessous') tipY = posY + linkHeight + 2; // glossaire fixe sous le lien
  89         else if (positionBy == 'dessus') tipY = posY - glossHeight - 2; // glossaire fixe au-dessus du lien
  90         else if ( posX < mouseX && Math.max(posX, 0) + glossWidth > mouseX ) { // glossaire cache le lien
  91                 if (posY + glossHeight > baseLine && mouseY - sTop > glossHeight) {
  92                   tipY = posY - glossHeight - 2;
  93                 } else {
  94                   tipY = posY + linkHeight + 2;
  95                 }
  96         } else if ( posY + glossHeight > baseLine ) {
  97                 tipY = (glossHeight >= wHeight) ? sTop : baseLine - glossHeight;
  98         } else if ($this.css('display') == 'block' || positionBy == 'mouse') {
  99                 tipY = pY;
 100         } else {
 101                 tipY = posY /*- ombre*/;
 102         }
 103         $glossOverDiv.css({top: tipY + 'px'});
 104 }////////////////////////////////////////
 105
 106                         } // typeof jQuery.fn.offset=="function"
 107                         gloss_el.style.visibility = 'visible';
 108                 },
 109                 function(e) {
 110                         gloss_el.style.display    = 'none';
 111                         gloss_el.style.visibility = 'hidden';
 112                 }
 113         );
 114
 115         // accessibilite au clavier
 116         if(typeof jQuery.fn.offset=="function") { // plugin jquery.dimensions disponible a partir de SPIP 2
 117                 jQuery('a.cs_glossaire').focus(
 118                         function() {
 119                                 legl_mot = this.firstChild;
 120                                 gloss_dt.innerHTML = jQuery(this).children('.gl_js')[0].title;  // titre
 121                                 gloss_dd.innerHTML = jQuery(this).children('.gl_jst')[0].title; // definition
 122                                 reg = jQuery(this.firstChild).css('font-size').match(/^\d\d?(?:\.\d+)?px/);
 123                                 if(reg) gloss_el.style.fontSize = reg[0];
 124                                 var result = jQuery(this).offset({ scroll: false });
 125                                 jQuery(gloss_el)
 126                                         .css('top',result.top+"px")
 127                                         .css('left', result.left+"px")
 128                                         .css('font-family', jQuery(this.firstChild).css('font-family'));
 129                                 gloss_el.style.display    = 'block';
 130                                 gloss_el.style.visibility = 'visible';
 131                         }
 132                 );
 133                 jQuery('a.cs_glossaire').blur(
 134                         function() {
 135                                 gloss_el.style.display    = 'none';
 136                                 gloss_el.style.visibility = 'hidden';
 137                         }
 138                 );
 139         } // typeof jQuery.fn.offset=="function"
 140   }
 141 }