Name: JavaScript Code to enable Persistent and Repositionable Tooltips/Pop-ups

Author: Ian Kerman

Version: 1.0

Created: 1/2011

/*
* JavaScript Code to enable Persistent and Repositionable Tooltips/Pop-ups
*
* Author: Ian Kerman, Accelrys
* Version: 1.0

* Created: 1/2011
* Requirements: Pipeline Pilot 8.0.1 or higher with Reporting
*
* Description: This JavaScript will allow you to have persistent tooltips or
*  popups in your HTML Reports. These popups can be opened and closed and
*  repositioned around your report. This can be useful when trying to view
*  meta-data side-by-side for multiple compounds or for taking screenshots.
*
* Usage: If setup as describe below, then you can click on a cell, data point,
*  bar, or slice and the tooltip will appear where you clicked. To hide the
*  tooltip, click the data point again. You can also hide the tooltip by
*  holding down the left-mouse button on it and pressing the 'D', Delete,
*  or Backspace key.
*
*  To reposition the tooltip, you have two options. You can double-click the
*  tooltip and it will recenter onto where you clicked. This is useful for
*  small adjustments such as trying to align multiple tooltips for a
*  screenshot. You can also click-and-drag the tooltip and position it where
*  you would like. If click on an image in your tooltip, this can be a
*  little buggy, but it will still work. If the tooltip becomes "stuck" on
*  your mouse cursor, just click the left-mouse button and it will unstick.
*
* Setup: Place this code in the Source parameter of a "JavaScript" component
*  with the Output Location parameter set to "Header". In your protocol,
*  you must use a "Tooltip" component to generate the tooltip/pop-up
*  window. You will not use the Tooltip ID to attach the tooltip to your
*  other components, but this will be used in the code below, so this
*  needs to be set to a unique value for each data point.
* 
*  To use the tooltips with your reporting elements, use the following
*  functions:
*   showTooltip(TOOLTIPID) -> This will show and hide the tooltip.
*    Typically use with the "onclick" event of a reporting element.
*   moveThisTooltip(TOOLTIPID) -> This should be placed on the tooltip
*    component using the "onmousedown" event.
*   centerThisTooltip(TOOLTIPID) -> This should also be placed on the
*    tooltip component, but using the "ondblclick" event.
*/

var posX = 0;
var posY = 0;
var startPosX = 0;
var startPosY = 0;
var moveme = null;

//Call this function everytime the mouse moves
document.onmousemove = myMouseMove;
//Call this function when the mouse button is let go
document.onmouseup = myMouseUp;
//Call this function when a keyboard button is pressed
document.onkeyup = myKeyPress;

//Show or hide the tooltip
function showTooltip(myobj){
var myDiv = document.getElementById("pp_tt_"+myobj);
if(myDiv.style.display == 'none'){
  //Position and then show the tooltip
  myDiv.style.left = posX + "px";
  myDiv.style.top = posY + "px";
  myDiv.style.display = '';
}else{
  //Hide the tooltip
  myDiv.style.display = 'none';
  myDiv.style.left = posX + "px";
  myDiv.style.top = posY + "px";
}
moveme = null;
}

//Call this when the mouse button is pressed to start moving the tooltip
function moveThisTooltip(myobj){
moveme = document.getElementById("pp_tt_"+myobj);
startPosX = posX;
startPosY = posY;
}

//Stop moving the tooltip
function myMouseUp(){
moveme = null;
startPosX = 0;
startPosY = 0;
}

//Track the position of the Mouse
function myMouseMove(e){
if (!e) var e = window.event;
if (e.pageX || e.pageY)  {
  posX = e.pageX;
  posY = e.pageY;
}else if (e.clientX || e.clientY)  {
  //Correction for multiple layers in the HTML page
  posX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  posY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
//If we're dragging a tooltip, update its coordinates
if (moveme) {
  //Get mouse and tooltip positions
  var newPosX = posX;
  var newPosY = posY;
  var ttPosX = moveme.offsetLeft;
  var ttPosY = moveme.offsetTop;
 
  //Calculate how much the mouse moved
  var diffX = startPosX - newPosX;
  var diffY = startPosY - newPosY;
 
  //Calculate the new coordinates of the tooltip
  moveme.style.left = ttPosX - diffX + "px";
  moveme.style.top = ttPosY - diffY + "px";
 
  //Set new starting coordinates for the mouse
  startPosX = newPosX;
  startPosY = newPosY;
}
}

//Recenter the tooltip using a double click
function centerThisTooltip(myobj){
var myDiv = document.getElementById("pp_tt_"+myobj);

//Get the tooltip's dimensions and coordinates
var wh = myDiv.offsetWidth;
var ht = myDiv.offsetHeight;
var lt = myDiv.offsetLeft;
var tp = myDiv.offsetTop;

//Find the middle of the tooltip
var midW = Math.floor(wh/2);
var midH = Math.floor(ht/2);
var midX = lt+midW;
var midY = tp+midH;

//Calculate new coordinates of the tooltip
var difX = posX - midX;
var difY = posY - midY;

//Recenter the tooltip
myDiv.style.left = lt + difX + "px";
myDiv.style.top = tp + difY + "px";

//Make sure it doesn't think we're dragging the tooltip
moveme = null;
}

//Capture a keypress to hide the tooltip
function myKeyPress(e){
if (moveme){
  if (!e) var e = window.event;
  //Get the key code. Delete = 46, 'd' = 68, Backspace = 8
  var KeyID = e.keyCode;
  if (KeyID == 46 || KeyID == 68 || KeyID == 8){
   moveme.style.display = 'none';
   moveme.style.left = posX + "px";
   moveme.style.top = posY + "px";
   moveme = null;
  }
}
}