refactored tooltip handling (please test!)
This commit is contained in:
117
js/tooltip.js
117
js/tooltip.js
@@ -12,23 +12,46 @@
|
||||
var ttXpos = 0, ttYpos = 0;
|
||||
var ttXadd = 10, ttYadd = -10;
|
||||
var ttDisplay = 0, ttHoldIt = 0;
|
||||
|
||||
// Check if browser does support dynamic content and dhtml
|
||||
var ttNS4 = (document.layers) ? 1 : 0; // the old Netscape 4
|
||||
var ttIE4 = (document.all) ? 1 : 0; // browser wich uses document.all
|
||||
var ttDOM = (document.getElementById) ? 1 : 0; // DOM-compatible browsers
|
||||
if (ttDOM) { // if DOM-compatible, set the others to false
|
||||
ttNS4 = 0;
|
||||
ttIE4 = 0;
|
||||
if (document.getElementById) {
|
||||
// DOM-compatible browsers
|
||||
var ttDOM = 1;
|
||||
} else {
|
||||
// the old Netscape 4
|
||||
var ttNS4 = (document.layers) ? 1 : 0;
|
||||
// browser wich uses document.all
|
||||
var ttIE4 = (document.all) ? 1 : 0;
|
||||
}
|
||||
|
||||
var myTooltipContainer = null;
|
||||
|
||||
if ( (ttDOM) || (ttIE4) || (ttNS4) ) {
|
||||
// mouse-event
|
||||
if ( ttNS4 ) {
|
||||
document.captureEvents(Event.MOUSEMOVE);
|
||||
} else {
|
||||
document.onmousemove = mouseMove;
|
||||
/**
|
||||
* initialize tooltip
|
||||
*/
|
||||
function PMA_TT_init()
|
||||
{
|
||||
// get all 'light bubbles' on page
|
||||
var tooltip_icons = window.parent.getElementsByClassName('footnotemarker', document, 'sup');
|
||||
var tooltip_count = tooltip_icons.length;
|
||||
|
||||
if (tooltip_count < 1) {
|
||||
// no 'bubbles' found
|
||||
return;
|
||||
}
|
||||
|
||||
// insert tooltip container
|
||||
myTooltipContainer = document.createElement("div");
|
||||
myTooltipContainer.id = 'TooltipContainer';
|
||||
window.parent.addEvent(myTooltipContainer, 'mouseover', holdTooltip);
|
||||
window.parent.addEvent(myTooltipContainer, 'mouseout', swapTooltip);
|
||||
document.body.appendChild(myTooltipContainer);
|
||||
|
||||
// capture mouse-events
|
||||
for (i = 0; i < tooltip_count; i++) {
|
||||
window.parent.addEvent(tooltip_icons[i], 'mousemove', mouseMove);
|
||||
window.parent.addEvent(tooltip_icons[i], 'mouseover', pmaTooltip);
|
||||
window.parent.addEvent(tooltip_icons[i], 'mouseout', swapTooltip);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,8 +60,9 @@ if ( (ttDOM) || (ttIE4) || (ttNS4) ) {
|
||||
*
|
||||
* @param string theText tooltip content
|
||||
*/
|
||||
function textTooltip(theText) {
|
||||
if (ttDOM || ttIE4) { // document.getEelementById || document.all
|
||||
function PMA_TT_setText(theText)
|
||||
{
|
||||
if (ttDOM || ttIE4) { // document.getEelementById || document.all
|
||||
myTooltipContainer.innerHTML = ""; // we should empty it first
|
||||
myTooltipContainer.innerHTML = theText;
|
||||
} else if (ttNS4) { // document.layers
|
||||
@@ -58,18 +82,15 @@ var ttTimerID = 0;
|
||||
*
|
||||
* @param boolean stat view status
|
||||
*/
|
||||
function swapTooltip(stat) {
|
||||
if (ttHoldIt!=1) {
|
||||
if (stat!='default') {
|
||||
if (stat=='true')
|
||||
showTooltip(true);
|
||||
else if (stat=='false')
|
||||
showTooltip(false);
|
||||
function swapTooltip(stat)
|
||||
{
|
||||
if (ttHoldIt != 1) {
|
||||
if (stat == 'true') {
|
||||
showTooltip(true);
|
||||
} else if (ttDisplay) {
|
||||
ttTimerID = setTimeout("showTooltip(false);", 500);
|
||||
} else {
|
||||
if (ttDisplay)
|
||||
ttTimerID = setTimeout("showTooltip(false);",500);
|
||||
else
|
||||
showTooltip(true);
|
||||
showTooltip(true);
|
||||
}
|
||||
} else {
|
||||
if (ttTimerID) {
|
||||
@@ -85,8 +106,9 @@ function swapTooltip(stat) {
|
||||
*
|
||||
* @param boolean stat view status
|
||||
*/
|
||||
function showTooltip(stat) {
|
||||
if (stat==false) {
|
||||
function showTooltip(stat)
|
||||
{
|
||||
if (stat == false) {
|
||||
if (ttNS4)
|
||||
myTooltipContainer.visibility = "hide";
|
||||
else
|
||||
@@ -100,10 +122,12 @@ function showTooltip(stat) {
|
||||
ttDisplay = 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* hold it, if we create or move the mouse over the tooltip
|
||||
*/
|
||||
function holdTooltip() {
|
||||
function holdTooltip()
|
||||
{
|
||||
ttHoldIt = 1;
|
||||
swapTooltip('true');
|
||||
ttHoldIt = 0;
|
||||
@@ -115,10 +139,11 @@ function holdTooltip() {
|
||||
* @param integer posX horiz. position
|
||||
* @param integer posY vert. position
|
||||
*/
|
||||
function moveTooltip(posX, posY) {
|
||||
function moveTooltip(posX, posY)
|
||||
{
|
||||
if (ttDOM || ttIE4) {
|
||||
myTooltipContainer.style.left = posX + "px";
|
||||
myTooltipContainer.style.top = posY + "px";
|
||||
myTooltipContainer.style.left = posX + "px";
|
||||
myTooltipContainer.style.top = posY + "px";
|
||||
} else if (ttNS4) {
|
||||
myTooltipContainer.left = posX;
|
||||
myTooltipContainer.top = posY;
|
||||
@@ -127,31 +152,20 @@ function moveTooltip(posX, posY) {
|
||||
|
||||
/**
|
||||
* build the tooltip
|
||||
* usally called from eventhandler
|
||||
*
|
||||
* @param string theText tooltip content
|
||||
*/
|
||||
function pmaTooltip( theText ) {
|
||||
// reference to TooltipContainer
|
||||
if ( null == myTooltipContainer ) {
|
||||
if (ttNS4) {
|
||||
myTooltipContainer = document.TooltipContainer;
|
||||
} else if (ttIE4) {
|
||||
myTooltipContainer = document.all('TooltipContainer');
|
||||
} else if (ttDOM) {
|
||||
myTooltipContainer = document.getElementById('TooltipContainer');
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
function pmaTooltip(e)
|
||||
{
|
||||
var theText = document.getElementById(this.getAttribute('name')).innerHTML;
|
||||
|
||||
if ( typeof( myTooltipContainer ) == 'undefined' ) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
var plusX=0, plusY=0, docX=0, docY=0;
|
||||
var plusX = 0, plusY = 0, docX = 0, docY = 0;
|
||||
var divHeight = myTooltipContainer.clientHeight;
|
||||
var divWidth = myTooltipContainer.clientWidth;
|
||||
if (navigator.appName.indexOf("Explorer")!=-1) {
|
||||
|
||||
if (navigator.appName.indexOf("Explorer") != -1) {
|
||||
// IE ...
|
||||
if (document.documentElement && document.documentElement.scrollTop) {
|
||||
plusX = document.documentElement.scrollLeft;
|
||||
plusY = document.documentElement.scrollTop;
|
||||
@@ -176,7 +190,7 @@ function pmaTooltip( theText ) {
|
||||
if ((ttYpos + divHeight) > docY)
|
||||
ttYpos = ttYpos - (divHeight + (ttYadd * 2));
|
||||
|
||||
textTooltip(theText);
|
||||
PMA_TT_setText(theText);
|
||||
moveTooltip((ttXpos + ttXadd), (ttYpos + ttYadd));
|
||||
holdTooltip();
|
||||
}
|
||||
@@ -194,4 +208,5 @@ function mouseMove(e) {
|
||||
ttXpos = e.pageX;
|
||||
ttYpos = e.pageY;
|
||||
}
|
||||
moveTooltip((ttXpos + ttXadd), (ttYpos + ttYadd));
|
||||
}
|
||||
|
@@ -94,19 +94,9 @@ function PMA_auth_fails()
|
||||
<table border="0" cellpadding="0" cellspacing="3" align="center" width="80%">
|
||||
<tr>
|
||||
<td>
|
||||
<?php
|
||||
echo "\n";
|
||||
$GLOBALS['is_header_sent'] = TRUE;
|
||||
|
||||
/**
|
||||
* @todo I have included this div from libraries/header.inc.php to work around
|
||||
* an undefined variable in tooltip.js, when the server is not responding.
|
||||
* Work has to be done to merge all code that starts the page (DOCTYPE and
|
||||
* this div) to one place
|
||||
*/
|
||||
?>
|
||||
<div id="TooltipContainer" onmouseover="holdTooltip();" onmouseout="swapTooltip('default');"></div>
|
||||
<?php
|
||||
$GLOBALS['is_header_sent'] = TRUE;
|
||||
|
||||
if (isset($GLOBALS['allowDeny_forbidden']) && $GLOBALS['allowDeny_forbidden']) {
|
||||
echo '<p>' . $GLOBALS['strAccessDenied'] . '</p>' . "\n";
|
||||
|
@@ -459,6 +459,11 @@ $GLOBALS['js_messages'] = array();
|
||||
*/
|
||||
$GLOBALS['js_events'] = array();
|
||||
|
||||
/**
|
||||
* footnotes to be displayed ot the page bottom
|
||||
* @global array $footnotes
|
||||
*/
|
||||
$GLOBALS['footnotes'] = array();
|
||||
|
||||
/******************************************************************************/
|
||||
/* parsing configuration file LABEL_parsing_config_file */
|
||||
|
@@ -425,20 +425,29 @@ function PMA_showMySQLDocu($chapter, $link, $big_icon = false)
|
||||
} // end of the 'PMA_showMySQLDocu()' function
|
||||
|
||||
/**
|
||||
* Displays a hint icon, on mouse over show the hint
|
||||
* returns HTML for a footnote marker and add the messsage to the footnotes
|
||||
*
|
||||
* @uses $GLOBALS['pmaThemeImage']
|
||||
* @uses PMA_jsFormat()
|
||||
* @uses $GLOBALS['footnotes']
|
||||
* @param string the error message
|
||||
*
|
||||
* @return string html code for a footnote marker
|
||||
* @access public
|
||||
*/
|
||||
function PMA_showHint($hint_message)
|
||||
function PMA_showHint($hint_message, $type = 'notice')
|
||||
{
|
||||
//return '<img class="lightbulb" src="' . $GLOBALS['pmaThemeImage'] . 'b_tipp.png" width="16" height="16" border="0" alt="' . $hint_message . '" title="' . $hint_message . '" align="middle" onclick="alert(\'' . PMA_jsFormat($hint_message, false) . '\');" />';
|
||||
return '<img class="lightbulb" src="' . $GLOBALS['pmaThemeImage']
|
||||
. 'b_tipp.png" width="16" height="16" alt="Tip" title="Tip" onmouseover="pmaTooltip(\''
|
||||
. PMA_jsFormat($hint_message, false) . '\'); return false;" onmouseout="swapTooltip(\'default\'); return false;" />';
|
||||
$key = md5($hint_message);
|
||||
|
||||
if (! isset($GLOBALS['footnotes'][$key])) {
|
||||
$nr = count($GLOBALS['footnotes']) + 1;
|
||||
$GLOBALS['footnotes'][$key] = array(
|
||||
'note' => $hint_message,
|
||||
'type' => $type,
|
||||
'nr' => $nr,
|
||||
);
|
||||
} else {
|
||||
$nr = $GLOBALS['footnotes'][$key]['nr'];
|
||||
}
|
||||
|
||||
return '<sup class="footnotemarker" name="footnote_' . $nr . '">' . $nr . '</sup>';
|
||||
}
|
||||
|
||||
/**
|
||||
|
@@ -32,7 +32,7 @@
|
||||
* @uses $cfg['DBG']['enable']
|
||||
* @uses $cfg['DBG']['profile']['enable']
|
||||
* @uses $GLOBALS['strOpenNewWindow']
|
||||
* @uses $cfg['MaxCharactersInDisplayedSQL']
|
||||
* @uses $cfg['MaxCharactersInDisplayedSQL']
|
||||
* @uses PMA_isValid()
|
||||
* @uses PMA_setHistory()
|
||||
* @uses PMA_ifSetOr()
|
||||
@@ -58,6 +58,15 @@ if (! PMA_isValid($_REQUEST['no_history']) && empty($GLOBALS['error_message'])
|
||||
$GLOBALS['sql_query']);
|
||||
}
|
||||
|
||||
if (count($GLOBALS['footnotes'])) {
|
||||
echo '<div class="notice">';
|
||||
foreach ($GLOBALS['footnotes'] as $footnote) {
|
||||
echo '<span id="footnote_' . $footnote['nr'] . '"><sup>'
|
||||
. $footnote['nr'] . '</sup> ' . $footnote['note'] . '</span><br />';
|
||||
}
|
||||
echo '</div>';
|
||||
}
|
||||
|
||||
?>
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
|
@@ -41,7 +41,6 @@ if (empty($GLOBALS['is_header_sent'])) {
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="TooltipContainer" onmouseover="holdTooltip();" onmouseout="swapTooltip('default');"></div>
|
||||
<?php
|
||||
|
||||
// Include possible custom headers
|
||||
|
Reference in New Issue
Block a user