// 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; } }