From: Florian Forster <octo@leeloo.lan.home.verplant.org>
Date: Sun, 27 Jul 2008 15:23:03 +0000 (+0200)
Subject: controb/collection3: Implement zooming using the mouse wheel.
X-Git-Tag: collectd-4.4.3~20
X-Git-Url: https://git.tokkee.org/?a=commitdiff_plain;h=2d4345a4b11394f263fc6d3378122c0e17c9378f;p=collectd.git

controb/collection3: Implement zooming using the mouse wheel.

Also you can now re-center the graph with a double click.
---

diff --git a/contrib/collection3/bin/index.cgi b/contrib/collection3/bin/index.cgi
index d8769634..927767e7 100755
--- a/contrib/collection3/bin/index.cgi
+++ b/contrib/collection3/bin/index.cgi
@@ -340,7 +340,8 @@ sub action_show_selection
             <div class="graph_float">
               <img id="${id}" class="graph_image"
                 alt="A graph"
-                src="$url" />
+                src="$url"
+		ondblclick="nav_handle_dblclick (event);" />
               <div class="controls zoom">
                 <div title="Earlier"
                   onclick="nav_move_earlier ('${id}');">&#x2190;</div>
diff --git a/contrib/collection3/share/navigate.js b/contrib/collection3/share/navigate.js
index 76deb5e5..da47a6ac 100644
--- a/contrib/collection3/share/navigate.js
+++ b/contrib/collection3/share/navigate.js
@@ -13,11 +13,27 @@ function nav_init (time_begin, time_end)
     all_images[i].navTimeEnd   = new Number (time_end);
 
     all_images[i].navBaseURL = all_images[i].src.replace (/;(begin|end)=[^;]*/g, '');
+
+    if (all_images[i].addEventListener) /* Mozilla */
+      all_images[i].addEventListener ('DOMMouseScroll', nav_handle_wheel,
+          false /* == bubbling */);
+    all_images[i].onmousewheel = nav_handle_wheel;
   }
 
   return (true);
 } /* nav_init */
 
+function nav_image_repaint (img)
+{
+  if (!img || !img.navBaseURL
+      || !img.navTimeBegin || !img.navTimeEnd)
+    return;
+
+  img.src = img.navBaseURL + ";"
+    + "begin=" + img.navTimeBegin.toFixed (0) + ";"
+    + "end=" + img.navTimeEnd.toFixed (0);
+} /* nav_image_repaint */
+
 function nav_time_reset (img_id ,diff)
 {
   var img;
@@ -29,9 +45,7 @@ function nav_time_reset (img_id ,diff)
   img.navTimeEnd = new Number ((new Date ()).getTime () / 1000);
   img.navTimeBegin = new Number (img.navTimeEnd - diff);
 
-  img.src = img.navBaseURL + ";"
-    + "begin=" + img.navTimeBegin.toFixed (0) + ";"
-    + "end=" + img.navTimeEnd.toFixed (0);
+  nav_image_repaint (img);
 
   return (true);
 }
@@ -47,7 +61,9 @@ function nav_time_change_obj (img, factor_begin, factor_end)
     return (false);
 
   diff = img.navTimeEnd - img.navTimeBegin;
-  if (diff <= 300)
+
+  /* Prevent zooming in if diff is less than five minutes */
+  if ((diff <= 300) && (factor_begin > 0.0) && (factor_end < 0.0))
     return (true);
 
   img.navTimeBegin += (diff * factor_begin);
@@ -109,5 +125,100 @@ function nav_zoom_in (img_id)
 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_recenter (e)
+{
+  var x;
+  var y;
+  var img;
+  var diff;
+  var time_old_center;
+  var time_new_center;
+  var width;
+
+  img = e.target;
+  if (!img || (img.className != "graph_image")
+      || !img.navTimeBegin || !img.navTimeEnd)
+    return;
+
+  width = img.width - 97;
+
+  x = e.layerX - 70;
+  if (!x || (x < 0) || (x > width))
+    return;
+
+  y = e.layerY;
+  if (!y || (y < 35) || (y > 135))
+    return;
+
+  diff = img.navTimeEnd - img.navTimeBegin;
+
+  time_old_center = img.navTimeBegin + (diff / 2.0);
+  time_new_center = img.navTimeBegin + (x * diff / width);
+
+  img.navTimeBegin += (time_new_center - time_old_center);
+  img.navTimeEnd   += (time_new_center - time_old_center);
+} /* nav_recenter */
+
+function nav_handle_dblclick (e)
+{
+  var img;
+
+  /* M$IE */
+  if (!e)
+    e = window.event;
+
+  img = e.target;
+  if (!img || (img.className != "graph_image")
+      || !img.navTimeBegin || !img.navTimeEnd)
+    return;
+
+  nav_recenter (e);
+  nav_image_repaint (img);
+
+  // e.returnValue = false;
+} /* nav_handle_dblclick */
+
+/* Taken from <http://adomas.org/javascript-mouse-wheel/> */
+function nav_handle_wheel (e)
+{
+  var delta = 0;
+  var img;
+  
+  /* M$IE */
+  if (!e)
+    e = window.event;
+
+  img = e.target;
+  if (!img || (img.className != "graph_image")
+      || !img.navTimeBegin || !img.navTimeEnd)
+    return;
+
+  /* Opera and M$IE */
+  if (e.wheelDelta)
+  {
+    delta = e.wheelDelta; 
+    if (window.opera)
+      delta = delta * (-1);
+  }
+  else if (e.detail)
+  {
+    delta = e.detail * (-1);
+  }
+
+  if (!delta)
+    return;
+
+  nav_recenter (e);
+  if (delta > 0)
+    nav_zoom_in (img.id);
+  else
+    nav_zoom_out (img.id);
+
+  if (e.preventDefault)
+    e.preventDefault ();
+  e.returnValue = false;
+} /* function nav_handle_wheel */
+
 /* vim: set sw=2 sts=2 et : */