js/tooltip.js

   1 /* vim: set expandtab sw=4 ts=4 sts=4: */
   2 /**
   3  * Displays the Tooltips (hints), if we have some
   4  * 2005-01-20 added by Michael Keck (mkkeck)
   5  *
   6  * @version $Id$
   7  */
   8
   9 /**
  10  *
  11  */
  12 var ttXpos = 0, ttYpos = 0;
  13 var ttXadd = 10, ttYadd = -10;
  14 var ttDisplay = 0, ttHoldIt = 0;
  15
  16 // Check if browser does support dynamic content and dhtml
  17 if (document.getElementById) {
  18     // DOM-compatible browsers
  19     var ttDOM = 1;
  20 } else {
  21     // the old Netscape 4
  22     var ttNS4 = (document.layers) ? 1 : 0;
  23     // browser wich uses document.all
  24     var ttIE4 = (document.all) ? 1 : 0;
  25 }
  26
  27 var myTooltipContainer = null;
  28
  29 /**
  30  * initialize tooltip
  31  */
  32 function PMA_TT_init()
  33 {
  34     // get all 'light bubbles' on page
  35     var tooltip_icons = window.parent.getElementsByClassName('footnotemarker', document, 'sup');
  36     var tooltip_count = tooltip_icons.length;
  37
  38     if (tooltip_count < 1) {
  39         // no 'bubbles' found
  40         return;
  41     }
  42
  43     // insert tooltip container
  44     myTooltipContainer = document.createElement("div");
  45     myTooltipContainer.id = 'TooltipContainer';
  46     window.parent.addEvent(myTooltipContainer, 'mouseover', holdTooltip);
  47     window.parent.addEvent(myTooltipContainer, 'mouseout', swapTooltip);
  48     document.body.appendChild(myTooltipContainer);
  49
  50     // capture mouse-events
  51     for (i = 0; i < tooltip_count; i++) {
  52         window.parent.addEvent(tooltip_icons[i], 'mousemove', mouseMove);
  53         window.parent.addEvent(tooltip_icons[i], 'mouseover', pmaTooltip);
  54         window.parent.addEvent(tooltip_icons[i], 'mouseout', swapTooltip);
  55     }
  56 }
  57
  58 /**
  59  * init the tooltip and write the text into it
  60  *
  61  * @param string theText tooltip content
  62  */
  63 function PMA_TT_setText(theText)
  64 {
  65     if (ttDOM || ttIE4) {                   // document.getEelementById || document.all
  66         myTooltipContainer.innerHTML = "";  // we should empty it first
  67         myTooltipContainer.innerHTML = theText;
  68     } else if (ttNS4) {                     // document.layers
  69         var layerNS4 = myTooltipContainer.document;
  70         layerNS4.write(theText);
  71         layerNS4.close();
  72     }
  73 }
  74
  75 /**
  76  * @var integer
  77  */
  78 var ttTimerID = 0;
  79
  80 /**
  81  * swap the Tooltip // show and hide
  82  *
  83  * @param boolean stat view status
  84  */
  85 function swapTooltip(stat)
  86 {
  87     if (ttHoldIt != 1) {
  88         if (stat == 'true') {
  89             showTooltip(true);
  90         } else if (ttDisplay) {
  91             ttTimerID = setTimeout("showTooltip(false);", 500);
  92         } else {
  93             showTooltip(true);
  94         }
  95     } else {
  96         if (ttTimerID) {
  97            clearTimeout(ttTimerID);
  98            ttTimerID = 0;
  99         }
 100         showTooltip(true);
 101     }
 102 }
 103
 104 /**
 105  * show / hide the Tooltip
 106  *
 107  * @param boolean stat view status
 108  */
 109 function showTooltip(stat)
 110 {
 111     if (stat == false) {
 112         if (ttNS4)
 113             myTooltipContainer.visibility = "hide";
 114         else
 115             myTooltipContainer.style.visibility = "hidden";
 116         ttDisplay = 0;
 117     } else {
 118         if (ttNS4)
 119             myTooltipContainer.visibility = "show";
 120         else
 121             myTooltipContainer.style.visibility = "visible";
 122         ttDisplay = 1;
 123     }
 124 }
 125
 126 /**
 127  * hold it, if we create or move the mouse over the tooltip
 128  */
 129 function holdTooltip()
 130 {
 131     ttHoldIt = 1;
 132     swapTooltip('true');
 133     ttHoldIt = 0;
 134 }
 135
 136 /**
 137  * move the tooltip to mouse position
 138  *
 139  * @param integer posX    horiz. position
 140  * @param integer posY    vert. position
 141  */
 142 function moveTooltip(posX, posY)
 143 {
 144     if (ttDOM || ttIE4) {
 145         myTooltipContainer.style.left = posX + "px";
 146         myTooltipContainer.style.top  = posY + "px";
 147     } else if (ttNS4) {
 148         myTooltipContainer.left = posX;
 149         myTooltipContainer.top  = posY;
 150     }
 151 }
 152
 153 /**
 154  * build the tooltip
 155  * usally called from eventhandler
 156  *
 157  * @param    string    theText    tooltip content
 158  */
 159 function pmaTooltip(e)
 160 {
 161     var theText = document.getElementById('footnote_' + this.innerHTML).innerHTML;
 162
 163     var plusX = 0, plusY = 0, docX = 0, docY = 0;
 164     var divHeight = myTooltipContainer.clientHeight;
 165     var divWidth  = myTooltipContainer.clientWidth;
 166
 167     if (navigator.appName.indexOf("Explorer") != -1) {
 168         // IE ...
 169         if (document.documentElement && document.documentElement.scrollTop) {
 170             plusX = document.documentElement.scrollLeft;
 171             plusY = document.documentElement.scrollTop;
 172             docX = document.documentElement.offsetWidth + plusX;
 173             docY = document.documentElement.offsetHeight + plusY;
 174         } else {
 175             plusX = document.body.scrollLeft;
 176             plusY = document.body.scrollTop;
 177             docX = document.body.offsetWidth + plusX;
 178             docY = document.body.offsetHeight + plusY;
 179         }
 180     } else {
 181         docX = document.body.clientWidth;
 182         docY = document.body.clientHeight;
 183     }
 184
 185     ttXpos = ttXpos + plusX;
 186     ttYpos = ttYpos + plusY;
 187
 188     if ((ttXpos + divWidth) > docX)
 189         ttXpos = ttXpos - (divWidth + (ttXadd * 2));
 190     if ((ttYpos + divHeight) > docY)
 191         ttYpos = ttYpos - (divHeight + (ttYadd * 2));
 192
 193     PMA_TT_setText(theText);
 194     moveTooltip((ttXpos + ttXadd), (ttYpos + ttYadd));
 195     holdTooltip();
 196 }
 197
 198 /**
 199  * register mouse moves
 200  *
 201  * @param    event    e
 202  */
 203 function mouseMove(e) {
 204     if ( typeof( event ) != 'undefined' ) {
 205         ttXpos = event.x;
 206         ttYpos = event.y;
 207     } else {
 208         ttXpos = e.pageX;
 209         ttYpos = e.pageY;
 210     }
 211     moveTooltip((ttXpos + ttXadd), (ttYpos + ttYadd));
 212 }