analytics/webcontent/ps/cogadmin/js/tooltip.js

//    Licensed Materials - Property of IBM
//
//    IBM Cognos Products: cogadmin
//
//    (C) Copyright IBM Corp. 2005, 2013
//
//    US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
//
//
// Copyright (C) 2008 Cognos ULC, an IBM Company. All rights reserved.
// Cognos (R) is a trademark of Cognos ULC, (formerly Cognos Incorporated).

//----------------------------------------------------------
// Tooltip

var ui_current_tooltip = null;

function ui_tooltip(tooltipdef) {
	this.currentTooltip = null;
	this.tooltipdef = tooltipdef;
    this.updateableRenderers = new Array();
	// show and hide id's for the settimeouts. Allows us to cancel them if needed
	this.showTimeoutID = null;
	
	// mouse coordinates of the event
	this.x = null;
	this.y = null;

 	if (this.tooltipdef.items) {
		this.updateRenderers(this.tooltipdef.items);
	}   
	
	if (this.tooltipdef.expandedItems) {
		this.updateRenderers(this.tooltipdef.expandedItems);
	}
}

ui_tooltip.prototype = {
	// handles the mouse moving over the tooltip
	onmouseover: function(evt) {
		// cancel the timeout that would hide the tooltip
		if (this.hideTimeoutID != null) {
			clearTimeout(this.hideTimeoutID);
			this.hideTimeoutID = null;
		}
	},
	
	// handles the mouse leaving the tooltip
	onmouseout: function(evt) {
		var self = this;
		this.hideTimeoutID = setTimeout(function(){self.hideTooltip();}, 200);	
	},
	
	// build the tooltip
	buildTooltip: function(expand) {
		tbody = document.createElement('tbody');

		var items = this.tooltipdef.items;

		for (var i=0; i < items.length; i++) {	

			if (tbody.childNodes.length > 0) {
				var bufferTR = document.createElement('tr');
				tbody.appendChild(bufferTR);
			}	
			if (items[i].render) {
				var tr = items[i].render(tbody); 
				if (tr) {
					// add an extra column for the expand link and icon
					if (!expand) {
						var hasMore = i < items.length-1;
						if (hasMore && (i == this.tooltipdef.expandIdx)) {
							tr.appendChild(this.createExpandLink(expand));
							break;
						}
					}
				}
			}
		}	

		if (this.currentTooltip == null) {

			var divTable = document.createElement('div');
			var table = document.createElement('table');
			var self = this;
			EventUtils.addEventListener(divTable, 'mouseover', function(evt) {self.onmouseover(evt);});
			EventUtils.addEventListener(divTable, 'mouseout', function(evt) {self.onmouseout(evt);});
			divTable.style.display="none";
			divTable.className="popup-tooltip";
			divTable.border="0";

			divTable.appendChild(table);
			table.appendChild(tbody);	
			table.setAttribute("role","presentation");
			document.body.appendChild(divTable);
		}
		else {
			divTable = this.currentTooltip;
			table = divTable.firstChild;
			table.replaceChild(tbody, table.firstChild);
		}
		
		return divTable;
	},
	
	
	// create the column that contains the expand or collapse link and icon
	createExpandLink: function(hidden) {
		var tooltip = '';
		var iconSrc = '';
		var self = this;
		

		if (this.tooltipdef.expandText) {
			tooltip = this.tooltipdef.expandText;
		}

		
		td = document.createElement('td');
		td.style.whiteSpace = 'nowrap';
		if (hidden) {
			td.style.visibility="hidden";
		}
		
		if (this.tooltipdef.webcontent) {
						
			var a = document.createElement('a');
			a.innerHTML=this.tooltipdef.expandText;
			a.className="popup-tooltip-a";
			EventUtils.addEventListener(a, "click", 
				function() {
					ui_current_tooltip.showTooltip(true);
				}
			);
			a.style.cursor = 'pointer';
			if (tooltip != '') {
				a.title = tooltip;
			}				
			td.appendChild(a);
		}
		
		return td;		
	},

	// gets called from an onmousemove event. Used to update the current mouse position
	mousemove: function(e) {
		var alreadyVisible = this.currentTooltip ? this.currentTooltip.style.display=="block" : false;
		
		// save the current mouse coord if the tooltip isn't already visible
		if (!alreadyVisible) {
			this.updateMouseCoord(e);	
		}
	},
	
	// sets a timeout to show the tooltip. Should be called by an onmouseover event
	show: function(e) {

		// cancel the timeout that would hide the tooltip
		if (this.hideTimeoutID != null) {
			clearTimeout(this.hideTimeoutID);
			this.hideTimeoutID = null;
		}
	
		if (!this.currentTooltip || (this.currentTooltip && this.currentTooltip.style.display=="none")) {
	
			// save the current mouse coord
			this.updateMouseCoord(e);
			
			if (this.showTimeoutID == null) {
				var self = this;
				this.showTimeoutID = setTimeout(function(){self.showTooltip(false);}, 1000); 	
			}
			
			cancelBubble(e);
		}
		
	},
	
	// display the tooltip
	showTooltip: function(expanded) {
		// blank out the showTimeoutID since the event already happened
		this.showTimeoutID = null;

		// build the tooltip
		this.currentTooltip = this.buildTooltip(expanded);

		// make sure the old tooltip is in fact hidden before showing the new one
		if (ui_current_tooltip != null && ui_current_tooltip.currentTooltip.style.display == 'block') {
			ui_current_tooltip.currentTooltip.style.display = "none";
		}
		this.position();
		ui_current_tooltip = this;
		
	},
	
	position: function() {
		// position the tooltip
		this.currentTooltip.style.left=this.x +"px";
		this.currentTooltip.style.top=this.y+"px"; 
		this.currentTooltip.style.display="block";

		if ((this.x + this.currentTooltip.offsetWidth) > document.body.offsetWidth) {
			this.x = xClientWidth() - xWidth(this.currentTooltip);
			this.currentTooltip.style.left=this.x + "px"; // make some adjustments
		}
		if ((this.y + xHeight(this.currentTooltip)) > document.body.offsetHeight) {
			this.y = document.body.offsetHeight - xHeight(this.currentTooltip) - xScrollTop();
			this.currentTooltip.style.top=this.y + "px"; // make some adjustments
		}
	},
	
	// Either clears the show settimeout or sets a timeout to hide the tooltip.
	// Usually called by an onmouseout event
	hide: function() {
		if (this.showTimeoutID != null) {
			clearTimeout(this.showTimeoutID);
			this.showTimeoutID = null;
		}
		else {
			var self = this;
			this.hideTimeoutID = setTimeout(function(){self.hideTooltip();}, 200); 			
		}
	},
	
	hideTooltip: function() {
		if (this.currentTooltip) {
			this.currentTooltip.style.display="none";
		}	
	},
	
	updateMouseCoord: function(e) {
		var evt = new xEvent(e);
		// save all the event information we need
		if (!e) {
			evt = new xEvent(window.event);
		}
		var target = evt.target;
		if (target) {
			this.x = evt.pageX;
			this.y = evt.pageY + xHeight(target);
		}
	},
	
	updateRenderers: function(renderers) {
		for (var i = 0; i < renderers.length; i++) {
			var renderer = renderers[i];
			if (renderer.update) {
				this.updateableRenderers[renderer.name] = renderer;
			}
		}
	}
}

function attrValueTooltipRenderer(name, values) {
	this.name = name;
	this.values =  (values instanceof Array) ? values : [values];
	this.valueAsNode = null;
}

attrValueTooltipRenderer.prototype = {
	// handles the mouse moving over the tooltip
	render: function(tbody) {
		var nameTR = document.createElement('tr');
		var nameTD = document.createElement('td');
		nameTD.style.whiteSpace = 'nowrap';
		nameTD.className = 'popup-tooltip-label';
		nameTD.appendChild(document.createTextNode(this.name));
		nameTR.appendChild(nameTD);
		
		var valueTR = null;
		for (var i=0; i < this.values.length ;i++) {
			valueTR = document.createElement('tr');		
			var valueTD = document.createElement('td');
			valueTD.style.whiteSpace = 'nowrap';
			this.valueAsNode = document.createTextNode(this.values[i]);
			valueTD.appendChild(this.valueAsNode);
			valueTD.style.paddingRight = '10px';
			valueTR.appendChild(valueTD);
			if (i==0) {
				tbody.appendChild(nameTR);
			}
			tbody.appendChild(valueTR);	
		}
		return valueTR;	
	},
	
	update: function(value) {
		this.value = value;
		if (this.valueAsNode) {
			this.valueAsNode.nodeValue = this.value;
		}
	}
}

function captionTooltipRenderer(name, value) {
	this.name = name;
	this.value = value;
	this.valueAsNode = null;
}

captionTooltipRenderer.prototype = {
	// handles the mouse moving over the tooltip
	render: function(tbody) {
		var nameTR = document.createElement('tr');
		var nameTD = document.createElement('td');
		nameTD.className = 'popup-tooltip-label';
		nameTD.appendChild(document.createTextNode(this.name));
		nameTR.appendChild(nameTD);
		
		var valueTR = document.createElement('tr');		
		var valueTD = document.createElement('td');
		this.valueAsNode = document.createTextNode(this.value);
		valueTD.appendChild(this.valueAsNode);
		valueTR.appendChild(valueTD);
		
		tbody.appendChild(nameTR);
		tbody.appendChild(valueTR);	
		return valueTR;	
	},
	
	update: function(value) {
		this.value = value;
		if (this.valueAsNode) {
			this.valueAsNode.nodeValue = this.value;
		}
	}
}

function thresholdsTooltipRenderer(fragId, name, resourceID, metricName, value, propertyType, enabled) {
	this.name = name;
	this.resourceID = resourceID;
	this.metricName = metricName;
	this.metricValue = value;
	this.fragId = fragId;
	this.propertyType = propertyType;
	this.enabled = enabled;
	
}

thresholdsTooltipRenderer.prototype = {
	// handles the mouse moving over the tooltip
	render: function(tbody) {
		if (this.enabled) {
			var div = document.getElementById("threshDiv");
			if (!div) {
				div = document.createElement('div');
				div.id = "threshDiv";
			} else {
				while (div.childNodes.length > 0) {
				     div.removeChild(div.firstChild);
				}
			}
			if (!fragments[this.fragId]) {
				createFragment(this.fragId, 'threshDiv', '/cogadmin/controls/threshold.xts');
			}
			
			var nameTR = document.createElement('tr');
			var nameTD = document.createElement('td');
			nameTD.style.whiteSpace = 'nowrap';
			nameTD.className = 'popup-tooltip-label';
			nameTD.appendChild(document.createTextNode(this.name + ':'));
			nameTR.appendChild(nameTD);
			
			var valueTR = document.createElement('tr');
			var valueTD = document.createElement('td');
			valueTD.style.whiteSpace = 'nowrap';
			
			var params = 'thresholdGroupName=na&thresholdPropertyCaption=na&thresholdPropertyName=' + this.metricName + '&thresholdResourceID=' + this.resourceID + '&metricValue=' + this.metricValue + '&propertyType=' + this.propertyType + '&style=tooltip';
			fragments[this.fragId].retrieve(params);
			valueTD.appendChild(div);
			valueTD.style.paddingRight = '10px';
			valueTR.appendChild(valueTD);
			
			tbody.appendChild(nameTR);	
			tbody.appendChild(valueTR);	
			
			return valueTR;
		} 
	},
		
	update: function(enabled) {
		this.enabled = enabled;
	}
}