From: Florian Forster <octo@huhu.verplant.org>
Date: Mon, 28 Jul 2008 09:06:51 +0000 (+0200)
Subject: contrib/collection3: Add JavaScript code to unify the timespan of all graphs.
X-Git-Tag: collectd-4.4.3~18
X-Git-Url: https://git.octo.it/?p=collectd.git;a=commitdiff_plain;h=63e7c4e8ef41d64caaf8e91cf04c3cb8b5b9ef6e

contrib/collection3: Add JavaScript code to unify the timespan of all graphs.

Using the new ``Set all images to this timespan'' button one can now easily
show the same timespan in all graphs. This allows to compare different graphs
much more easily.
---

diff --git a/contrib/collection3/bin/index.cgi b/contrib/collection3/bin/index.cgi
index 927767e7..d581bfbe 100755
--- a/contrib/collection3/bin/index.cgi
+++ b/contrib/collection3/bin/index.cgi
@@ -210,17 +210,6 @@ HTML
 	<input type="hidden" name="action" value="show_selection" />
 	<input type="submit" name="ok_button" value="OK" />
       </fieldset>
-      <fieldset>
-	<legend>Move all graphs</legend>
-	<input type="button" name="earlier" value="&#x2190;" title="Earlier"
-	  onclick="nav_move_earlier ('*');" />
-	<input type="button" name="zoom_out" value="-" title="Zoom out"
-	  onclick="nav_zoom_out ('*');" />
-	<input type="button" name="zoom_in" value="+" title="Zoom in"
-	  onclick="nav_zoom_in ('*');" />
-	<input type="button" name="later" value="&#x2192;" title="Later"
-	  onclick="nav_move_later ('*');" />
-      </fieldset>
     </form>
 HTML
 } # show_selector
@@ -340,8 +329,7 @@ sub action_show_selection
             <div class="graph_float">
               <img id="${id}" class="graph_image"
                 alt="A graph"
-                src="$url"
-		ondblclick="nav_handle_dblclick (event);" />
+                src="$url" />
               <div class="controls zoom">
                 <div title="Earlier"
                   onclick="nav_move_earlier ('${id}');">&#x2190;</div>
@@ -363,6 +351,8 @@ sub action_show_selection
                   onclick="nav_time_reset ('${id}', 31 * 86400);">M</div>
                 <div title="Show current year"
                   onclick="nav_time_reset ('${id}', 366 * 86400);">Y</div>
+                <div title="Set all images to this timespan"
+                  onclick="nav_set_reference ('${id}');">!</div>
               </div>
             </div>
           </div>
diff --git a/contrib/collection3/share/navigate.js b/contrib/collection3/share/navigate.js
index da47a6ac..3bfe56ed 100644
--- a/contrib/collection3/share/navigate.js
+++ b/contrib/collection3/share/navigate.js
@@ -15,9 +15,17 @@ function nav_init (time_begin, time_end)
     all_images[i].navBaseURL = all_images[i].src.replace (/;(begin|end)=[^;]*/g, '');
 
     if (all_images[i].addEventListener) /* Mozilla */
+    {
+      all_images[i].addEventListener ('dblclick', nav_handle_dblclick,
+          false /* == bubbling */);
       all_images[i].addEventListener ('DOMMouseScroll', nav_handle_wheel,
           false /* == bubbling */);
-    all_images[i].onmousewheel = nav_handle_wheel;
+    }
+    else
+    {
+      all_images[i].ondblclick = nav_handle_dblclick;
+      all_images[i].onmousewheel = nav_handle_wheel;
+    }
   }
 
   return (true);
@@ -54,10 +62,8 @@ function nav_time_change_obj (img, factor_begin, factor_end)
 {
   var diff;
 
-  if (!img)
-    return (false);
-
-  if (!img.navTimeEnd || !img.navTimeBegin)
+  if (!img || !img.navBaseURL
+      || !img.navTimeBegin || !img.navTimeEnd)
     return (false);
 
   diff = img.navTimeEnd - img.navTimeBegin;
@@ -69,9 +75,7 @@ function nav_time_change_obj (img, factor_begin, factor_end)
   img.navTimeBegin += (diff * factor_begin);
   img.navTimeEnd   += (diff * factor_end);
 
-  img.src = img.navBaseURL + ";"
-    + "begin=" + img.navTimeBegin.toFixed (0) + ";"
-    + "end=" + img.navTimeEnd.toFixed (0);
+  nav_image_repaint (img);
 
   return (true);
 } /* nav_time_change */
@@ -83,6 +87,7 @@ function nav_time_change (img_id, factor_begin, factor_end)
   if (img_id == '*')
   {
     var all_images;
+    var i;
 
     all_images = document.getElementsByTagName ("img");
     for (i = 0; i < all_images.length; i++)
@@ -127,6 +132,77 @@ function nav_zoom_out (img_id)
   return (nav_time_change (img_id, (-1.0 / 3.0), (1.0 / 3.0)));
 } /* nav_zoom_in */
 
+function nav_set_reference (img_id)
+{
+  var img;
+  var all_images;
+  var tmp;
+  var i;
+
+  img = document.getElementById (img_id);
+  if (!img || (img.className != "graph_image")
+      || !img.navTimeBegin || !img.navTimeEnd)
+    return;
+
+  all_images = document.getElementsByTagName ("img");
+  for (i = 0; i < all_images.length; i++)
+  {
+    tmp = all_images[i];
+    if (!tmp || (tmp.className != "graph_image")
+        || !tmp.navTimeBegin || !tmp.navTimeEnd)
+      continue;
+
+    if (tmp.id == img_id)
+      continue;
+
+    tmp.navTimeBegin = img.navTimeBegin;
+    tmp.navTimeEnd = img.navTimeEnd;
+
+    nav_image_repaint (tmp);
+  }
+} /* nav_set_reference */
+
+/* 
+ * TODO: calculate the mouse position relative to the image in a cross-browser
+ * manner.
+ */
+function nav_calculate_offset_x (obj)
+{
+  var offset = 0;
+
+  if (!obj)
+    return (offset);
+
+  offset = obj.offsetLeft;
+  if (obj.offsetParent)
+    offset += nav_calculate_offset_x (obj.offsetParent);
+
+  return (offset);
+} /* nav_calculate_offset_x */
+
+function nav_calculate_event_x (e)
+{
+  var pos = 0;
+  var off = 0;
+
+  if (!e || !e.target)
+    return;
+  
+  off = nav_calculate_offset_x (e.target);
+
+  if (e.pageX || e.pageY)
+  {
+    pos = e.pageX;
+  }
+  else if (e.clientX || e.clientY)
+  {
+    pos = e.clientX + document.body.scrollLeft
+      + document.documentElement.scrollLeft;
+  }
+
+  return (pos);
+} /* nav_calculate_event_x */
+
 function nav_recenter (e)
 {
   var x;