Statistics Monitoring

\n"); - graphDoc.write(""); - - /* And wrap it up */ - graphDoc.write(""); - 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; -- cgit v1.2.3