| Server IP : 134.29.175.74 / Your IP : 216.73.216.160 Web Server : nginx/1.10.2 System : Windows NT CST-WEBSERVER 10.0 build 19045 (Windows 10) i586 User : Administrator ( 0) PHP Version : 7.1.0 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/nginx/html/js/ |
Upload File : |
// js/tooltip.js
// Custom tooltip functions.
// Note: Canvas_onClick[XY] (canvas onclick function to call) is set in ttDisplay_onClick() in tooltip.js.
// _Initialize_Tooltip() ................ Attach onmousemove function ttControl to the document.
// ttControl(evt, debug) ................ Position the tooltip.
// ttDelayShow(evt, tooltip) ............ Will show the tooltip after 100 millisecond delay. Used to show tooltip change for event driven changes.
// ttHide() ............................. Will hide the tooltip when the mouse leaves the object.
// ttLoad(eId) .......................... Load the text in the element and show as tooltip.
// ttShow(ttText, ttClass) .............. Will display the tooltip when the mouse ia over the object.
var evt;
var ttDEBUG_Position = false; // Shows DEBUG information for ttControl x and y positions.
var ttDEBUG_PositionX = false; // Shows DEBUG information for ttControl x position.
var ttDEBUG_PositionY = false; // Shows DEBUG information for ttControl y position.
if ( ttDEBUG_Position ) { ttDEBUG_PositionX = true; ttDEBUG_PositionY = true; }
var ttAllGet = document.all ? true : ( document.getElementById ? true : false ); // True if either the document.all or document.getElementById function exists else false.
var ttContentsContainer = 'tooltipDiv'; // The id of the div that will contain the tooltip contents.
var ttEnable = false; // Allow the tooltip to be shown. ttHide() sets it false. ttShow() sets it true.
var ttinnerHTML = ''; // The tooltip contents.
var ttMaxEventsToShow = 6; // The maximum number of events to show.
var ttObj; // The ttContentsContainer element.
var ttOffsetX = 15; // Customize x offset of the tooltip.
var ttOffsetY = -25; // Customize y offset of the tooltip.
var ttOffsetYMovement = 0; // Used to move the map tooltip down to place it below the movement tooltip during movement.
var ttTrueBody = ( document.compatMode && document.compatMode !== "BackCompat" ) ? document.documentElement : document.body; // Contains the html element unless the browser is in compatMode == 'BackCompat' (quirks mode), then it contains the body element.
// _Initialize_Tooltip()
// Attach onmousemove function to ttControl().
var ttInitializeCount = 0; // Count of initialization attempts.
function _Initialize_Tooltip() {
ttInitializeCount++;
//console.log(`${PC}_Initialize_Tooltip[${ttInitializeCount}]`,CH);
//console.warn('_Initialize_Tooltip['+ttInitializeCount+']');
// Wait for the ttContentsContainer to be part of the DOM.
if ( document.getElementById(ttContentsContainer) ) { // Is the ttContentsContainer part of the DOM yet?
ttObj = document.getElementById(ttContentsContainer);
doc_onmousemove = 'ttControl'; //if ( DEBUG_doc_on ) { console.info(PC+'_Initialize_Tooltip document.onmousemove = '+doc_onmousemove,CS); }
document.onmousemove = ttControl;
} else { // Is the ttContentsContainer part of the DOM yet?
if ( ttInitializeCount < 10 ) { setTimeout(_Initialize_Tooltip,100); }
} // Is the ttContentsContainer part of the DOM yet?
} // END _Initialize_Tooltip.
// ttControl(evt, debug)
// Position the tooltip.
function ttControl(evt, debug) {
var DEBUG_ttControlDisabled = false;
var DEBUG_ttControl = false;
if ( typeof debug !== 'undefined' && debug ) { DEBUG_ttControl = true; }
var ttDebugMessage = '';
evt = evt || window.event; // Get the event.
if ( DEBUG_ttControlDisabled ) { console.warn('ttControl[evt.target='+evt.target+'] ttEnable='+ttEnable); }
if ( ( typeof evt !== 'undefined' ) && ttEnable ) { // Are tooltips enabled?
if ( !DEBUG_ttControlDisabled && DEBUG_ttControl ) { console.warn('ttControl[evt.target='+evt.target+'] ttEnable='+ttEnable); }
if ( DEBUG_ttControl ) { console.log(TB+'Set ttDEBUG_Position variables true to debug the tooltip positioning.'); }
ttObj.style.visibility="visibility";
ttObj.style.display="block";
mouseXY(evt); // Get mouse mx and my position.
//console.warn('ttAllGet='+ttAllGet);
var hscroll = ttAllGet? ttTrueBody.scrollLeft : window.pageXOffset;
var vscroll = ttAllGet? ttTrueBody.scrollTop : window.pageYOffset;
// Find out how close the mouse is to the corner of the window.
var rightedge=ttAllGet&&!window.opera? ttTrueBody.clientWidth-evt.clientX-ttOffsetX : window.innerWidth-evt.clientX-ttOffsetX-20;
var BottomDistance=ttAllGet&&!window.opera? ttTrueBody.clientHeight-evt.clientY-ttOffsetY : window.innerHeight-evt.clientY-ttOffsetY-20;//+ttOffsetYMovement +ttOffsetYMovement;
var leftedge=(ttOffsetX<0)? ttOffsetX*(-1) : -1000;
if ( ttDEBUG_PositionX ) { console.log(PC+'66 mx='+mx+' hscroll='+hscroll+' re='+rightedge+' le='+leftedge+' offsetWidth='+ttObj.offsetWidth+' ttOffsetX='+ttOffsetX,CI); }
if ( ttDEBUG_PositionY ) { ttDebugMessage += '67 my='+my+' vscroll='+vscroll+' be='+BottomDistance+' offsetHeight='+ttObj.offsetHeight+' ttOffsetY='+ttOffsetY; }
// If the horizontal distance isn't enough to accomodate the width of the tooltip then:
var leftValue = parseInt(mx+ttOffsetX); // The mouse position + ttOffsetX.
var leftOriginalValue = leftValue;
if ( rightedge < ttObj.offsetWidth) { // Is the tooltip beyond the right edge?
// Move the horizontal position of the tooltip left by it's width.
if ( ttDEBUG_PositionX ) { ttDebugMessage += '<br>73 .pageXOffset='+window.pageXOffset+' evt.clientX='+evt.clientX; }
var offsetx = ttOffsetX / 2;
leftValue = parseInt(ttAllGet? ttTrueBody.scrollLeft+evt.clientX-ttObj.offsetWidth-offsetx : window.pageXOffset+evt.clientX-ttObj.offsetWidth-offsetx);
ttObj.style.left = leftValue+"px";
if ( ttDEBUG_PositionX ) { ttDebugMessage += '<br>77 tt beyond the right edge.<br>leftOriginalValue='+leftOriginalValue+' leftValue='+leftValue+' ttObj.style.left='+ttObj.style.left; }
} else { // Is the tooltip beyond the right edge?
if ( mx < leftedge ) { // Is the tooltip before the left edge?
// Position the horizontal position of the tooltip 2 px from the left edge.
leftValue = 2;
ttObj.style.left = leftValue+"px";
if ( ttDEBUG_PositionX ) { ttDebugMessage += '<br>83 tt before the left edge.<br>leftOriginalValue='+leftOriginalValue+' leftValue='+leftValue+' ttObj.style.left='+ttObj.style.left; }
} else { // Is the tooltip before the left edge?
// Position the horizontal position of the tooltip where the mouse is positioned.
//leftValue = parseInt(mx+ttOffsetX);
ttObj.style.left = leftValue+"px";
if ( ttDEBUG_PositionX ) { ttDebugMessage += '<br>88 tt x OK.<br>leftValue='+leftValue+' ttObj.style.left='+ttObj.style.left; }
} // Is the tooltip before the left edge?
}
var topValue = parseInt(my+ttOffsetY+ttOffsetYMovement);
var topOriginalValue = topValue;
if ( ttDEBUG_PositionY ) { ttDebugMessage += '<br>93 topValue='+topValue+' ttOffsetY='+ttOffsetY+' ttOffsetYMovement='+ttOffsetYMovement; }
var ttTrueHeight = ttObj.offsetHeight + ttOffsetYMovement + 2;
// This is for the movement div.
if ( typeof ttMove === 'undefined' ) {
ttMoveHeight = 0;
} else {
ttMoveHeight = ttMove.offsetHeight;
}
if ( ttDEBUG_PositionY ) { console.log(PC+'BottomDistance='+BottomDistance+' ttTrueHeight='+ttTrueHeight,CI); }
if ( ttDEBUG_PositionY ) {
console.log(PC+'ttMoveHeight='+ttMoveHeight,CL);
//ttDebugMessage += '<br>ttMoveBounds'+JSON.stringify(ttMoveBounds);
}
if ( BottomDistance < ttTrueHeight ) { // If the vertical distance isn't enough to accomodate the height of the tooltip then:
topOriginalValue = topValue;
// Move the vertical position of the tooltip up by it's height.
topValue = parseInt(ttAllGet? ttTrueBody.scrollTop+evt.clientY-ttObj.offsetHeight : window.pageYOffset+evt.clientY-ttObj.offsetHeight) - ttOffsetYMovement + ttMoveHeight;
//topValue -= ( ttTrueHeight - BottomDistance );
ttObj.style.top = topValue+"px";
if ( ttDEBUG_PositionY ) { console.log(PC+'112 tt below the bottom edge. topOriginalValue='+topOriginalValue+' topValue='+topValue+' ttObj.style='+ttObj.style.top,CW); ttDebugMessage += '<br>112 tt below the bottom edge.<br>topOriginalValue='+topOriginalValue+' topValue='+topValue+' ttObj.style.top='+ttObj.style.top; }
} else {
// Position the vertical position of the tooltip where the mouse is positioned.
//topValue = parseInt(my+ttOffsetY+ttOffsetYMovement);
ttObj.style.top = topValue+"px";
if ( ttDEBUG_PositionY ) { console.log(PC+'117 tt y OK. topValue='+topValue+' ttObj.style='+ttObj.style.top,CD); ttDebugMessage += '<br>117 tt y OK.<br>topValue='+topValue+' ttObj.style.top='+ttObj.style.top; }
}
if ( topValue < vscroll ) { // Is the tooltip above the scroll?
topOriginalValue = topValue;
topValue = 2;
ttObj.style.top = topValue+vscroll+"px";
if ( ttDEBUG_PositionY ) { ttDebugMessage += '<br>123 tt above the scroll.<br>topOriginalValue='+topOriginalValue+' topValue='+topValue+' ttObj.style.top='+ttObj.style.top; }
} // Is the tooltip above the scroll?
ttObjBounds = ElementBounds(ttObj);
// Check the x position in case it 'got relative' to a DOM element other than the body.
if ( leftValue !== ttObjBounds.left ) {
if ( ttDEBUG_PositionX ) { ttDebugMessage += '<br>128 <span class="warntext bold">x position is incorrect!</span> leftValue='+leftValue+' left='+ttObjBounds.left;}
leftValue += leftValue - ttObjBounds.left;
ttObj.style.left = leftValue+"px";
ttObjBounds = ElementBounds(ttObj);
if ( ttDEBUG_PositionX ) { ttDebugMessage += '<br>132 leftValue='+leftValue+' left='+ttObjBounds.left;}
}
// Check y position in case it 'got relative' to a DOM element other than the body.
if ( topValue !== ttObjBounds.top ) {
if ( ttDEBUG_PositionY ) { console.log(PC+'136 y position is incorrect! topValue='+topValue+' top='+ttObjBounds.top,CW); ttDebugMessage += '<br>136 <span class="warntext bold">y position is incorrect!</span> topValue='+topValue+' top='+ttObjBounds.top;}
//console.log('topValue='+topValue+' ttObjBounds='+JSON.stringify(ttObjBounds));
//topValue += topValue - ttObjBounds.top;
topValue = ttObjBounds.top - topValue;
ttObj.style.top = topValue+"px";
ttObjBounds = ElementBounds(ttObj);
//console.log('topValue='+topValue+' ttObjBounds='+JSON.stringify(ttObjBounds));
if ( ttDEBUG_PositionY ) { console.log(PC+'<br>140 topValue='+topValue+' top='+ttObjBounds.top,CS); ttDebugMessage += '<br>140 topValue='+topValue+' top='+ttObjBounds.top;}
}
if ( ttDEBUG_PositionY ) { ttDebugMessage += '<br>'; }
if ( ttDEBUG_PositionX || ttDEBUG_PositionY ) { console.log(ttDebugMessage.replace(/<br\s*[\/]?>/gi,"\n")); }
if ( ttDEBUG_PositionX || ttDEBUG_PositionY ) { console.log(PC+'ttObjBounds='+JSON.stringify(ttObjBounds),CI); }
ttObj.innerHTML=ttDebugMessage+ttinnerHTML;
ttDebugMessage = '';
ttObj.style.visibility="visible";
} // Are tooltips enabled?
if ( typeof evt !== 'undefined' ) { evt.stopPropagation(); } else { ttHide(); }
} // END ttControl.
// ttDelayShow(evt, tooltip)
// Will show the tooltip after 100 millisecond delay. Used to show tooltip change.
function ttDelayShow(evt, tooltip) {
setTimeout(function(){ttShow(tooltip);ttControl(evt);},100);
} // END ttDelayShow.
// ttHide()
// Hide the tooltip.
function ttHide() {
//console.info('ttHide()');
if ( ttAllGet && ( typeof ttObj !== 'undefined' ) ) {
ttEnable=false;
ttObj.style.display = "none";
ttObj.style.left = "-1000px";
ttObj.style.backgroundColor = '';
ttObj.style.width = '';
ttObj.className = '';
}
}// END ttHide.
// ttLoad(eId)
// Load the text in the element and show as tooltip.
function ttLoad(eId) {
//console.info('ttLoad('+eId+')');
if ( document.getElementById(eId) ) {
var ttText = document.getElementById(eId).innerHTML;
ttShow(ttText);
} else {
ttShow('Element '+eId+' not found in document.');
}
} // END ttLoad.
// ttShow(ttText, ttClass, ttWidth)
// Show the tooltip.
// " is changed to ".
// ~~n is changed to \n.
function ttShow(ttText, ttClass) { //, ttWidth) {
//console.info('ttShow[]');
if ( ttAllGet && ttText !== '' && ( typeof ttObj !== 'undefined' ) ) {
if ( typeof ttClass === 'undefined' ) {
ttObj.className = '';
} else {
ttObj.className = ttClass;
}
ttinnerHTML = ttText.replace(/"/g,'"'); // Replace " with ".
ttinnerHTML = ttinnerHTML.replace(/<\/table>\n<table/g,"</table><table"); // Remove newline between tables.
ttinnerHTML = ttinnerHTML.replace(/~~n/g,"\n"); // Replace ~~n with newline.
ttinnerHTML = ttinnerHTML.trim();
ttObj.innerHTML=ttinnerHTML;
ttEnable=true;
return false;
}
} // END ttShow.
// ttShowHTML(ttText, ttClass, ttWidth)
// Show the tooltip.
// " is changed to ".
// ~~n is changed to \n.
function ttShowHTML(ttText, ttClass) { //, ttWidth) {
//console.info('ttShow[]');
if ( ttAllGet && ttText !== '' && ( typeof ttObj !== 'undefined' ) ) {
if ( typeof ttClass === 'undefined' ) {
ttObj.className = '';
} else {
ttObj.className = ttClass;
}
ttinnerHTML = ttText.replace(/"/g,'"'); // Replace " with ".
ttinnerHTML = ttinnerHTML.replace(/<\/table>\n<table/g,"</table><table"); // Remove newline between tables.
ttinnerHTML = ttinnerHTML.replace(/~~n/g,"\n"); // Replace ~~n with newline.
ttinnerHTML = ttinnerHTML.replace(/</g,"<"); // Replace < with <.
ttinnerHTML = ttinnerHTML.replace(/>/g,">"); // Replace > with >.
ttinnerHTML = ttinnerHTML.replace(/~~b/g,"<br>"); // Replace ~~b with <br>.
ttinnerHTML = ttinnerHTML.trim();
ttObj.innerHTML=ttinnerHTML;
ttEnable=true;
return false;
}
} // END ttShowHTML.