Attempt to make async tests run faster
[dygraphs.git] / gallery / interaction.js
CommitLineData
e88a95b4
DV
1/*global Gallery,Dygraph,data */
2/*global NoisyData,downV3,moveV3,upV3,clickV3,dblClickV3,scrollV3,restorePositioning,downV4,moveV4,upV4,dblClickV4,captureCanvas */
3
abfadf4c
RK
4Gallery.register(
5 'interaction',
6 {
7 name: 'Custom interaction models',
8 title: 'title',
9 setup: function(parent) {
605b6119 10 parent.innerHTML = [
2a3953eb 11 "<h3>Default interaction model</h3>",
3e81f5dd
RK
12 "<div style='width:600px;'>",
13 " <p style='text-align:center;'>",
14 " Zoom: click-drag, Pan: shift-click-drag, Restore: double-click",
15 " </p>",
16 " <div id='div_g' style='width:600px; height:300px;'></div>",
17 "</div>",
18 "",
2a3953eb 19 "<h3>Empty interaction model</h3>",
3e81f5dd
RK
20 "<div style='width:600px;'>",
21 " <p style='text-align:center;'>",
22 " Click and drag all you like, it won't do anything!",
23 " </p>",
24 " <div id='div_g2' style='width:600px; height:300px;'></div>",
25 "</div>",
26 "<div id='g2_console'></div>", // what is this?
27 "",
2a3953eb 28 "<h3>Custom interaction model</h3>",
3e81f5dd
RK
29 "<div style='width:600px;'>",
30 " <p style='text-align:center;'>",
31 " Zoom in: double-click, scroll wheel<br/>",
32 " Zoom out: ctrl-double-click, scroll wheel<br/>",
33 " Standard Zoom: shift-click-drag",
34 " Standard Pan: click-drag<br/>",
35 " Restore zoom level: press button<br/>",
36 " </p>",
37 " <button id='restore3'>Restore position</button>",
38 " <div id='div_g3' style='width:600px; height:300px;'></div>",
39 "</div>",
2a3953eb 40 "<h3>Fun model!</h3>",
3e81f5dd
RK
41 "<div style='width:600px;'>",
42 " <p style='text-align:center;'>",
43 " Keep the mouse button pressed, and hover over all points",
44 " to mark them.",
45 " </p>",
46 " <div id='div_g4' style='width:600px; height:300px;'></div>",
e1e80cce 47 "</div>"
3e81f5dd 48 ].join('\n');
abfadf4c
RK
49
50 },
51 run: function() {
e88a95b4 52 var lastClickedGraph;
178b1e0a
DV
53 document.addEventListener("mousewheel", function() { lastClickedGraph = null; });
54 document.addEventListener("click", function() { lastClickedGraph = null; });
e88a95b4 55 new Dygraph(document.getElementById("div_g"),
abfadf4c 56 NoisyData, { errorBars : true });
e88a95b4 57 new Dygraph(document.getElementById("div_g2"),
abfadf4c
RK
58 NoisyData,
59 {
60 errorBars : true,
61 interactionModel: {}
62 });
63 var g3 = new Dygraph(document.getElementById("div_g3"),
64 NoisyData, { errorBars : true, interactionModel : {
65 'mousedown' : downV3,
66 'mousemove' : moveV3,
67 'mouseup' : upV3,
68 'click' : clickV3,
69 'dblclick' : dblClickV3,
70 'mousewheel' : scrollV3
71 }});
72 document.getElementById("restore3").onclick = function() {
73 restorePositioning(g3);
e1e80cce 74 };
e88a95b4 75 new Dygraph(document.getElementById("div_g4"),
e1e80cce
DV
76 NoisyData, {
77 errorBars : true,
78 drawPoints : true,
79 interactionModel : {
80 'mousedown' : downV4,
81 'mousemove' : moveV4,
82 'mouseup' : upV4,
83 'dblclick' : dblClickV4
84 },
85 underlayCallback : captureCanvas
86 });
178b1e0a
DV
87 },
88 clean: function() {
89 document.removeEventListener('mousewheel');
90 document.removeEventListener('click');
c1f22b5a 91 }
c1f22b5a 92 });