[rhmessaging-commits] rhmessaging commits: r2707 - mgmt/trunk/cumin/python/cumin.

[rhmessaging-commits at lists.jboss.org]

Author: eallen
Date: 2008-10-30 15:49:47 -0400 (Thu, 30 Oct 2008)
New Revision: 2707

Modified:
   mgmt/trunk/cumin/python/cumin/pool.strings
   mgmt/trunk/cumin/python/cumin/stat.strings
Log:
Ensure the grid popup doesn't extend past the right side of the page on Firefox and IE

Modified: mgmt/trunk/cumin/python/cumin/pool.strings
===================================================================
--- mgmt/trunk/cumin/python/cumin/pool.strings	2008-10-30 00:23:51 UTC (rev 2706)
+++ mgmt/trunk/cumin/python/cumin/pool.strings	2008-10-30 19:49:47 UTC (rev 2707)
@@ -28,7 +28,7 @@
   {general}
   </div>
 </div>
-<div style="width: 25%; float: left; margin-left: 4em;">
+<div style="float: left; margin-left: 4em;">
   <h2>Job Activity</h2>
   {job_grid}
 </div>

Modified: mgmt/trunk/cumin/python/cumin/stat.strings
===================================================================
--- mgmt/trunk/cumin/python/cumin/stat.strings	2008-10-30 00:23:51 UTC (rev 2706)
+++ mgmt/trunk/cumin/python/cumin/stat.strings	2008-10-30 19:49:47 UTC (rev 2707)
@@ -165,6 +165,81 @@
   &nbsp; <span class="ph" statname="{stat_name}" statmode="{mode}">{stat_value}</span>
 </li>
 
+[StatUtilizationGrid.javascript]
+/* called on page resize to make sure
+   the grid popup notes don't go
+   off the edge of the page */
+function ensure_notes_visible() {
+	// see if the current rule will show the note off the page
+
+	this.find_rule = function() {
+		if (document.styleSheets) {
+			for (var i=0; i<document.styleSheets.length; i++) {
+				sheet = document.styleSheets[i];
+				if (sheet.href.indexOf("cumin.css") != -1) {
+					rules = sheet.rules ? sheet.rules : sheet.cssRules;
+					if (rules[0].selectorText) { // IE
+						for (var j=0; j<rules.length; j++) {
+							if (rules[j].selectorText.indexOf("sticky_note") != -1) {
+								if (rules[j].selectorText.indexOf("position") != -1) {
+									return rules[j];
+								}
+							}
+						}			
+					} else {
+						for (var j=0; j<rules.length; j++) {
+							if (rules[j].cssText.indexOf("div.sticky_note.position") != -1) {
+								return rules[j];
+							}
+						}			
+					}
+				}
+			}
+		}
+		return null;
+	}
+	
+	this.get_left = function (o) {
+		var p = o.offsetParent;  
+		var true_left = o.offsetLeft;       
+		
+		while (p != null) {  
+			tag = p.tagName;                                       
+			if (p.clientLeft) {
+				if ( (tag != "TABLE") && (tag != "BODY") ) {
+					true_left += p.clientLeft;
+				}
+			}
+			true_left += p.offsetLeft;    
+			p = p.offsetParent; 
+		}
+		return true_left;				
+	}	
+
+	var oGrid = document.getElementById("StatGrid");
+	if (oGrid) {
+		var left = this.get_left(oGrid);
+		var right = left + oGrid.offsetWidth;
+		var rule = this.find_rule();
+		if (rule) {
+			if (window.innerWidth)
+				wwidth = window.innerWidth;
+			else if (document.documentElement)
+				wwidth = document.documentElement.clientWidth;
+			else
+				wwidth = 9999;
+			if (right + 310 > wwidth) {
+				rule.style.left = "";
+				rule.style.right = "50%";
+			}
+		}
+	}
+
+	
+}
+addEvent(window, "resize", ensure_notes_visible);
+addEvent(window, "load", ensure_notes_visible);
+
 [StatUtilizationGrid.css]
 div.StatGrid{
 	width: 10em;
@@ -199,10 +274,10 @@
 
 div.grid_cell div.sticky_note {
 	display: none;
+	font-size: 0.8em;
 	position: absolute;
-	top: 60%;
-	left: 100%;
-	width: 24em;
+	top: 120%;
+	width: 25em;
 	padding: 1em;
 	background-color: #ffffaa;
 	background-image: url(resource?name=shade.png); 
@@ -211,6 +286,12 @@
 	border: 1px solid #cccc99;
 	z-index: 1;
 }
+/* this rule is separated in order to make it easier
+   to change only this attribute in the onresize handler */
+div.grid_cell div.sticky_note.position {
+	left: 50%;
+}
+
 div.sticky_names {
 	float: left;
 	font-weight: bold;
@@ -235,7 +316,7 @@
 <div class="StatUtilizationGrid" id="{id}">
 	<div class="visualization">
 		<h2>{title}</h2>
-		<div class="StatGrid" {override_style}>
+		<div id="StatGrid" class="StatGrid" {override_style}>
 			{grid}
 		</div>
 		<div style="clear:left;"><!-- --></div>
@@ -256,7 +337,7 @@
 		onmouseover="document.getElementById('note_{cell_id}').style.display='block';"
 		onmouseout="document.getElementById('note_{cell_id}').style.display='none';">
 		<a href="#"><button id="button_{cell_id}" class="btn {color}" >{contents}</button></a>
-		<div id="note_{cell_id}" class="sticky_note">
+		<div id="note_{cell_id}" class="sticky_note position">
 			<div class="sticky_names">
 				{sticky_names}
 			</div>