summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: e19c221)
raw | patch | inline | side by side (parent: e19c221)
author | Florian Forster <octo@huhu.verplant.org> | |
Mon, 28 Jul 2008 09:06:51 +0000 (11:06 +0200) | ||
committer | Florian Forster <octo@huhu.verplant.org> | |
Mon, 28 Jul 2008 09:06:51 +0000 (11:06 +0200) |
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.
show the same timespan in all graphs. This allows to compare different graphs
much more easily.
contrib/collection3/bin/index.cgi | patch | blob | history | |
contrib/collection3/share/navigate.js | patch | blob | history |
index 927767e723a18730849ebd8f3792a8a9e5b962a1..d581bfbee11fcbbfa65fc3202d33702a68e1a3b4 100755 (executable)
<input type="hidden" name="action" value="show_selection" />
<input type="submit" name="ok_button" value="OK" />
</fieldset>
<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="←" 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="→" title="Later"
- onclick="nav_move_later ('*');" />
- </fieldset>
</form>
HTML
} # show_selector
</form>
HTML
} # show_selector
<div class="graph_float">
<img id="${id}" class="graph_image"
alt="A graph"
<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}');">←</div>
<div class="controls zoom">
<div title="Earlier"
onclick="nav_move_earlier ('${id}');">←</div>
onclick="nav_time_reset ('${id}', 31 * 86400);">M</div>
<div title="Show current year"
onclick="nav_time_reset ('${id}', 366 * 86400);">Y</div>
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>
</div>
</div>
</div>
index da47a6ac3c57fa6c5b6afc3b50afd55b2bc914e5..3bfe56ed3d2580f1d9a38cdfe347d8a25a79d227 100644 (file)
all_images[i].navBaseURL = all_images[i].src.replace (/;(begin|end)=[^;]*/g, '');
if (all_images[i].addEventListener) /* Mozilla */
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].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);
}
return (true);
{
var diff;
{
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;
return (false);
diff = img.navTimeEnd - img.navTimeBegin;
img.navTimeBegin += (diff * factor_begin);
img.navTimeEnd += (diff * 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 */
return (true);
} /* nav_time_change */
if (img_id == '*')
{
var all_images;
if (img_id == '*')
{
var all_images;
+ var i;
all_images = document.getElementsByTagName ("img");
for (i = 0; i < all_images.length; i++)
all_images = document.getElementsByTagName ("img");
for (i = 0; i < all_images.length; i++)
return (nav_time_change (img_id, (-1.0 / 3.0), (1.0 / 3.0)));
} /* nav_zoom_in */
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;
function nav_recenter (e)
{
var x;