Internet Explorer compatibility plus some fixes.

author: Stef Walter <stef@memberwebs.com> 2006-01-21 00:53:15 +0000
committer: Stef Walter <stef@memberwebs.com> 2006-01-21 00:53:15 +0000
commit: 13461e5282ede2470d24bec06ebbffd104290d07 (patch)
tree: f16f3edb4b01b69bfb1acf18104323a22b9f2b83 /html
parent: 5818b8a46be86ea42d2f558e43117907e654b266 (diff)
4 files changed, 153 insertions, 121 deletions
diff --git a/html/frame.html b/html/frame.html
new file mode 100644
index 0000000..a5e9735
--- /dev/null
+++ b/html/frame.html
@@ -0,0 +1,42 @@
+<html>
+    <head>
+        <link href="style.css" type="text/css" rel="stylesheet"/>
+    </head>
+    <body class="in-frame" onload="window.parent._frameLoaded = true;">
+
+        <div id="graphs" align="center"></div>
+        <div id="zoom"></div>
+
+        <!-- The action buttons -->
+        <div id="actions">
+            <img id="action-prev" class="action" src="action-prev.gif"
+                alt="Move Backwards" title="Move Backwards"/><br/>
+            <img id="action-next" class="action" src="action-next.gif"
+                alt="Move Forwards" title="Move Forwards"/><br/>
+            <img id="action-zoom" class="action" src="action-zoom.gif"
+                alt="Zoom Out" title="Zoom Out"/><br/>
+            <img id="action-goto" class="action" src="action-date.gif"
+                alt="Select a Time Span" title="Select a Time Span"/><br/>
+        </div>
+
+        <!-- Date selection drop down -->
+        <div id="goto">
+            <select id="goto-select" size="6">
+                <option value="1800:0">Last 30 Minutes</option>
+                <option value="3600:0">Last Hour</option>
+                <option value="10800:0">Last 3 Hours</option>
+                <option value="21600:0">Last 6 Hours</option>
+                <option value="86400:0">Last Day</option>
+                <option value="259200:0">Last 3 Days</option>
+                <option value="604800:0">Last Week</option>
+                <option value="1209600:0">Last 2 Weeks</option>
+                <option value="1209600:0">Last 2 Weeks</option>
+                <option value="2678400:0">Last Month</option>
+                <option value="5356800:2678400">Month Before Last</option>
+                <option value="7948800:0">Last 3 Months</option>
+                <option value="15897600:0">Last 6 Months</option>
+                <option value="31536000:0">Last Year</option>
+            </select>
+        </div>
+    </body>
+</html>
diff --git a/html/index.html b/html/index.html
index 43c79ed..102ad09 100644
--- a/html/index.html
+++ b/html/index.html
@@ -2,7 +2,7 @@
     <head>
         <script language="javascript">
             // Settings
-            endpoint = "http://shondo/rrduiback/";
+            var ENDPOINT = "/rrduiback/";
         </script>
         <title>Statistics Monitoring</title>
         <link href="style.css" type="text/css" rel="stylesheet"/>
@@ -16,9 +16,10 @@
 
             </td></tr>
             <tr id="main-row"><td colspan="2" id="main-cell">
-                <iframe id="main-frame"></iframe>
+                <iframe id="main-frame" src="frame.html"
+                    border="0" frameborder="0"></iframe>
             </td></tr>
         </table>
-        <script language="javascript" src="rrdui.js"/>
+        <script language="javascript" src="rrdui.js"></script>
     </body>
 </html>
diff --git a/html/rrdui.js b/html/rrdui.js
index 12bce92..e61f545 100644
--- a/html/rrdui.js
+++ b/html/rrdui.js
@@ -10,10 +10,23 @@
 var categoryCurrent = null;
 var categoryArea = document.getElementById("headers");
 var xmlData = null;
-var graphDoc = null;
+var gdoc = null;
+var gwindow = null;
 
-loadXml(endpoint, loadedGraphData);
-setupFrame();
+function init()
+{
+    /* Set by frame.html */
+    if(!window._frameLoaded)
+    {
+        window.setTimeout("init();", 100);
+        return;
+    }
+
+    setupFrame();
+    loadXml(makeEndpointURI(), loadedGraphData);
+}
+
+init();
 
 function loadedGraphData(doc)
 {
@@ -37,66 +50,14 @@ function loadedGraphData(doc)
 function setupFrame()
 {
     var frame = document.getElementById("main-frame");
-    graphDoc = frame.contentDocument;
-
-    /* Get the stylesheet info for frame */
-    var i, links = document.getElementsByTagName("link");
-    var csslink = null;
-    for(i = 0; i < links.length; i++)
-    {
-        if(links.item(i).getAttribute("rel") == "stylesheet")
-            csslink = links.item(i);
-    }
-
-    graphDoc.open();
-    graphDoc.write("<html><head>\n");
-    /* TODO: We probably need to write a <base> tag for relative URIs */
-    if(csslink)
-        graphDoc.write("<link href=\"" + csslink.getAttribute("href") +
-                       "\" type=\"text/css\" rel=\"stylesheet\"/>\n");
-    graphDoc.write("</head><body class=\"in-frame\">\n");
-
-    /* The graph area */
-    graphDoc.write("<div id=\"graphs\" align=\"center\"></div>\n");
-
-    /* Zoom overlay */
-    graphDoc.write("<div id=\"zoom\"></div>\n");
-
-    /* The action buttons */
-    graphDoc.write("<div id=\"actions\">\n");
-    graphDoc.write("<img id=\"action-prev\" class=\"action\" src=\"action-prev.gif\"/><br/>");
-    graphDoc.write("<img id=\"action-next\" class=\"action\" src=\"action-next.gif\"/><br/>");
-    graphDoc.write("<img id=\"action-zoom\" class=\"action\" src=\"action-zoom.gif\"/><br/>");
-    graphDoc.write("<img id=\"action-goto\" class=\"action\" src=\"action-date.gif\"/><br/>");
-    graphDoc.write("</div>");
-
-    /* Date selection drop down */
-    graphDoc.write("<div id=\"goto\">\n");
-    graphDoc.write("<select id=\"goto-select\" size=\"6\">");
-    graphDoc.write("<option value=\"1800:0\">Last 30 Minutes</option>");
-    graphDoc.write("<option value=\"3600:0\">Last Hour</option>");
-    graphDoc.write("<option value=\"10800:0\">Last 3 Hours</option>");
-    graphDoc.write("<option value=\"21600:0\">Last 6 Hours</option>");
-    graphDoc.write("<option value=\"86400:0\">Last Day</option>");
-    graphDoc.write("<option value=\"259200:0\">Last 3 Days</option>");
-    graphDoc.write("<option value=\"604800:0\">Last Week</option>");
-    graphDoc.write("<option value=\"1209600:0\">Last 2 Weeks</option>");
-    graphDoc.write("<option value=\"1209600:0\">Last 2 Weeks</option>");
-    graphDoc.write("<option value=\"2678400:0\">Last Month</option>");
-    graphDoc.write("<option value=\"5356800:2678400\">Month Before Last</option>");
-    graphDoc.write("<option value=\"7948800:0\">Last 3 Months</option>");
-    graphDoc.write("<option value=\"15897600:0\">Last 6 Months</option>");
-    graphDoc.write("<option value=\"31536000:0\">Last Year</option>");
-    graphDoc.write("</select>");
-
-    /* And wrap it up */
-    graphDoc.write("</body></html>");
-    graphDoc.close();
+    /* COMPAT: IE and Mozilla access the content of frames differently */
+    gdoc = frame.contentDocument ? frame.contentDocument : frame.contentWindow.document;
+    gwindow = frame.contentWindow ? frame.contentWindow : frame.contentDocument.window;
 }
 
 function displayCurrentPage()
 {
-    var area = graphDoc.getElementById("graphs");
+    var area = gdoc.getElementById("graphs");
 
     /* Hide all images not from this category */
     var i, images = area.getElementsByTagName("img");
@@ -122,8 +83,7 @@ function displayCurrentPage()
     for(i = 0; i < children.length; i++)
     {
         var child = children.item(i);
-        if(child.nodeType != Node.ELEMENT_NODE ||
-           child.localName != "graph")
+        if(child.nodeType != 1 || child.nodeName != "graph")
             continue;
 
         var name = child.getAttribute("name");
@@ -132,13 +92,14 @@ function displayCurrentPage()
 
         /* Make sure we don't already have this graph */
         var id = "graph-" + categoryCurrent + "-" + name;
-        var img = graphDoc.getElementById(id);
+        var img = gdoc.getElementById(id);
         if(img != null)
             continue;
 
-        img = document.createElement("img");
+        img = gdoc.createElement("img");
 
-        if(child.hasAttribute("title"))
+        var title = child.getAttribute("title");
+        if(title && title.length)
         {
             img.setAttribute("title", child.getAttribute("title"));
             img.setAttribute("alt", child.getAttribute("title"));
@@ -146,8 +107,8 @@ function displayCurrentPage()
         else
             img.setAttribute("alt", "Graph");
 
-        img.setAttribute("class", "graph");
-        img.setAttribute("id", id);
+        img.className = "graph";
+        img.id = id;
 
         area.appendChild(img);
 
@@ -159,9 +120,9 @@ function displayCurrentPage()
         reloadGraph(img);
 
         img.onmousedown = function(evt)
-            { return zoomGraphStart(window.event ? window.event : evt); }
+            { return zoomGraphStart(gwindow.event ? gwindow.event : evt); }
         img.onmouseover = function(evt)
-            { return actionsDisplay(window.event ? window.event : evt); }
+            { return actionsDisplay(gwindow.event ? gwindow.event : evt); }
     }
 }
 
@@ -174,7 +135,7 @@ function reloadGraph(img)
     var GRAPH_WIDTH = 450;
     var GRAPH_HEIGHT = 120
 
-    var uri = endpoint + "/graph?category=" + img._category + "&name=" + img._name;
+    var uri = makeEndpointURI() + "/graph?category=" + img._category + "&name=" + img._name;
 
     /* Add date options */
     uri += "&start=" + img._tbeg + "&end=" + img._tend;
@@ -191,18 +152,23 @@ function reloadGraph(img)
 
 function zoomGraphStart(evt)
 {
-    if(evt.button != 0)
+    /* COMPAT: In IE the left button is 1, Mozilla is 0 */
+    var lbutton = gwindow.event ? 1 : 0;
+
+    if(evt.button != lbutton)
         return;
 
-    if(evt.target.getAttribute("class") != "graph")
+    /* COMPAT: Target is handled differently in Internet nastiness */
+    var img = evt.target || evt.srcElement;
+
+    if(img.className != "graph")
         return;
 
-    var img = evt.target;
-    var zoom = graphDoc.getElementById("zoom");
+    var zoom = gdoc.getElementById("zoom");
 
     zoom._img = img;
     zoom._zooming = true;
-    zoom._from = evt.clientX + graphDoc.body.scrollLeft;
+    zoom._from = evt.clientX + gdoc.body.scrollLeft;
 
     zoom._start = zoom._from - img.offsetLeft;
     zoom._end = zoom._start;
@@ -214,24 +180,23 @@ function zoomGraphStart(evt)
     zoom.style.display = "block";
 
     zoom.onmousemove = zoom._img.onmousemove = function(evt)
-        { return zoomGraphUpdate(window.event ? window.event : evt); }
+        { return zoomGraphUpdate(gwindow.event ? gwindow.event : evt); }
     zoom.onmouseup = zoom._img.onmouseup = function(evt)
-        { return zoomGraphDone(window.event ? window.event : evt); }
-    document.onmouseup = graphDoc.onmouseup = function(evt)
-        { return zoomGraphDone(window.event ? window.event : evt); }
+        { return zoomGraphDone(gwindow.event ? gwindow.event : evt); }
+    document.onmouseup = gdoc.onmouseup = function(evt)
+        { return zoomGraphDone(gwindow.event ? gwindow.event : evt); }
 
-    evt.preventDefault();
-    evt.stopPropagation();
+    cancelEvent(evt);
     return false;
 }
 
 function zoomGraphUpdate(evt)
 {
-    var zoom = graphDoc.getElementById("zoom");
+    var zoom = gdoc.getElementById("zoom");
     if(!zoom._zooming || !zoom._img)
         return;
 
-    var to = evt.clientX + graphDoc.body.scrollLeft;
+    var to = evt.clientX + gdoc.body.scrollLeft;
     var width = to - zoom._from;
     zoom._end = to - zoom._img.offsetLeft;
 
@@ -253,18 +218,19 @@ function zoomGraphUpdate(evt)
     zoom.style.top = zoom._img.offsetTop;
     zoom.style.display = "block";
 
-    evt.preventDefault();
-    evt.stopPropagation();
+    cancelEvent(evt);
     return false;
 }
 
 function zoomGraphDone(evt)
 {
-    var zoom = graphDoc.getElementById("zoom");
+    var zoom = gdoc.getElementById("zoom");
     if(!zoom._zooming)
         return;
 
-    if(evt.target == zoom || evt.target == zoom._img)
+    /* COMPAT: Target is handled differently in Internet nastiness */
+    var targ = evt.target || evt.srcElement;
+    if(targ == zoom || targ == zoom._img)
         zoomGraphSelect(zoom);
 
     zoomGraphCancel(evt);
@@ -313,7 +279,7 @@ function zoomGraphSelect(zoom)
 
 function zoomGraphCancel(evt)
 {
-    var zoom = graphDoc.getElementById("zoom");
+    var zoom = gdoc.getElementById("zoom");
 
     if(zoom._zooming) {
         if(zoom._img)
@@ -359,12 +325,13 @@ function zoomGraphMove(img, dir)
 
 function actionsDisplay(evt)
 {
-    if(evt.target.getAttribute("class") != "graph")
-        return;
+    /* COMPAT: Target is handled differently in Internet nastiness */
+    var img = evt.target || evt.srcElement;
 
-    var img = evt.target;
+    if(img.className != "graph")
+        return;
 
-    var actions = graphDoc.getElementById("actions");
+    var actions = gdoc.getElementById("actions");
     actions._img = img;
     actions._display = true;
 
@@ -373,25 +340,25 @@ function actionsDisplay(evt)
     actions.style.display = "block";
 
     actions.onmouseout = img.onmouseout = function(evt)
-            { return actionsHide(window.event ? window.event : evt); }
+            { return actionsHide(gwindow.event ? gwindow.event : evt); }
 
     /* TODO: We only actually have to do this once */
     var i, acts = actions.getElementsByTagName("img");
     for(i = 0; i < acts.length; i++)
     {
         acts.item(i).onclick = function(evt)
-            { return actionRun(window.event ? window.event : evt); }
+            { return actionRun(gwindow.event ? gwindow.event : evt); }
     }
 }
 
 function actionsHide(evt)
 {
-    var actions = graphDoc.getElementById("actions");
+    var actions = gdoc.getElementById("actions");
     if(!actions._display)
         return;
 
-    var x = evt.clientX - graphDoc.body.scrollLeft;
-    var y = evt.clientY - graphDoc.body.scrollTop;
+    var x = evt.clientX + gdoc.body.scrollLeft;
+    var y = evt.clientY + gdoc.body.scrollTop;
     var img = actions._img;
 
     /* See if we're actually still within the image */
@@ -407,15 +374,16 @@ function actionsHide(evt)
 
 function actionRun(evt)
 {
-    if(evt.target.getAttribute("class") != "action")
+    /* COMPAT: Target is handled differently in Internet nastiness */
+    var act = evt.target || evt.srcElement;
+
+    if(act.className != "action")
         return;
 
-    var actions = graphDoc.getElementById("actions");
+    var actions = gdoc.getElementById("actions");
     if(!actions._display)
         return;
 
-    var act = evt.target;
-
     switch(act.getAttribute("id"))
     {
     case "action-zoom":
@@ -436,7 +404,7 @@ function actionRun(evt)
 function actionGoto(img, act)
 {
     /* Display the selection thingy */
-    var got = graphDoc.getElementById("goto");
+    var got = gdoc.getElementById("goto");
 
     /* TODO: Make 120/170 a constant */
     got.style.top = act.offsetTop;
@@ -446,20 +414,20 @@ function actionGoto(img, act)
 
     img.onmouseclick = actionGotoCancel;
 
-    var sel = graphDoc.getElementById("goto-select");
+    var sel = gdoc.getElementById("goto-select");
     sel.onchange = actionGotoChange;
     sel._img = img;
 }
 
 function actionGotoCancel()
 {
-    var got = graphDoc.getElementById("goto");
+    var got = gdoc.getElementById("goto");
     got.style.display = "none";
 }
 
 function actionGotoChange()
 {
-    var sel = graphDoc.getElementById("goto-select");
+    var sel = gdoc.getElementById("goto-select");
     var img = sel._img;
     sel.onchange = null;
     sel._img = null;
@@ -493,9 +461,10 @@ function findCategoryData(cat)
     return null;
 }
 
-function changeCategory(cat)
+function changeCategory(evt)
 {
-    categoryCurrent = cat;
+    var header = evt.target || evt.srcElement;
+    categoryCurrent = header.getAttribute("category");
     displayCurrentPage();
 }
 
@@ -505,9 +474,6 @@ function displayCategories()
 
     /* Get the template and clean it up a bit */
     var template = document.getElementById("header-template");
-    while(template.hasChildNodes())
-        template.removeChild(template.firstChild);
-
     var groups = xmlData.getElementsByTagName("category");
 
     for(i = 0; i < groups.length; i++)
@@ -517,13 +483,15 @@ function displayCategories()
         if(!categoryCurrent)
             categoryCurrent = name;
 
-        var el = template.cloneNode(true);
+        var el = template.cloneNode(false);
         el.removeAttribute("id");
         el.appendChild(document.createTextNode(name));
-        el.setAttribute("group", name);
-        el.setAttribute("onclick", "changeCategory('" + name + "');");
+        el.setAttribute("category", name);
+
+        el.onclick = function(evt)
+            { return changeCategory(evt || window.event); }
 
-        categoryArea.appendChild(el);
+        categoryArea.insertBefore(el, template);
     }
 }
 
@@ -570,7 +538,7 @@ function loadXml(uri, callback)
 function displayError(message, place)
 {
     var el = document.createElement("span");
-    el.setAttribute("class", "error");
+    el.className = "error";
     var text = document.createTextNode(message);
     el.appendChild(text);
 
@@ -584,3 +552,22 @@ function nowTime()
 {
     return Math.floor((new Date()).getTime() / 1000);
 }
+
+function makeEndpointURI()
+{
+    /* TODO: This should use the scheme of the current URI */
+    return "http://" + document.location.host + ENDPOINT;
+}
+
+function cancelEvent(evt)
+{
+    /* COMPAT: Totally different for IE and mozilla */
+    if(evt.preventDefault)
+        evt.preventDefault();
+    if(evt.stopPropagation)
+        evt.stopPropagation();
+    if("cancelBubble" in evt)
+        evt.cancelBubble = true;
+    if("returnValue" in evt)
+        evt.returnValue = false;
+}
diff --git a/html/style.css b/html/style.css
index 6b45978..fdacb1b 100644
--- a/html/style.css
+++ b/html/style.css
@@ -58,7 +58,7 @@ body
 
 /* Our sample header (which gets copied for each group) is hidden */
 #header-template
-    { display: none; }
+    { visibility: hidden; }
 
 /* -----------------------------------------------------------------------------
  * GRAPHS/FRAME
@@ -105,11 +105,14 @@ img.graph
     display: none;
 }
 
-img.action
+.action
 {
     margin: 3px;
     cursor: pointer;
-    filter: alpha(opacity=75);
+
+    /* COMPAT: IE doesn't support :hover on anything but links
+       so transparency has no use whatsover */
+
     -moz-opacity: 0.75;
     -khtml-opacity: 0.75;
     opacity: 0.75;
@@ -117,7 +120,6 @@ img.action
 
 img.action:hover
 {
-     filter: alpha(opacity=100);
     -moz-opacity: 1;
     -khtml-opacity: 1;
     opacity: 1;
author	Stef Walter <stef@memberwebs.com>	2006-01-21 00:53:15 +0000
committer	Stef Walter <stef@memberwebs.com>	2006-01-21 00:53:15 +0000
commit	13461e5282ede2470d24bec06ebbffd104290d07 (patch)
tree	f16f3edb4b01b69bfb1acf18104323a22b9f2b83 /html
parent	5818b8a46be86ea42d2f558e43117907e654b266 (diff)