X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=gallery%2Finteraction.js;h=9dce5b7aec63e4c21b24d1b3c18e5e5345adcb7a;hb=6611837c5490f2f4b6d61967aa1ad658ed5f11d4;hp=7ef64b03b9d7a1277af378877c7a7d39deac6e2f;hpb=abfadf4c33d50d5b8f0ec97ea94c2ff60e6db38a;p=dygraphs.git

diff --git a/gallery/interaction.js b/gallery/interaction.js
index 7ef64b0..9dce5b7 100644
--- a/gallery/interaction.js
+++ b/gallery/interaction.js
@@ -1,51 +1,57 @@
+/*global Gallery,Dygraph,data */
+/*global NoisyData,downV3,moveV3,upV3,clickV3,dblClickV3,scrollV3,restorePositioning,downV4,moveV4,upV4,dblClickV4,captureCanvas */
+
 Gallery.register(
   'interaction',
   {
     name: 'Custom interaction models',
     title: 'title',
     setup: function(parent) {
-      parent.innerHTML =
-          "<table border='1'>" +
-          "<tr><td>" +
-          "<b>Default interaction model</b>" +
-          "<div id='div_g' style='width:600px; height:300px;'></div>" +
-          "</td><td>Zoom: click-drag<br/>Pan: shift-click-drag<br/>Restore zoom level: double-click<br/>" +
-          "</td></tr>" +
-          "<tr><td>" +
-          "<b>No interaction model</b>" +
-          "<div id='div_g2' style='width:600px; height:300px;'></div>" +
-          "</td><td>Click and drag all you like, it won't do anything!" +
-          "<div id='g2_console'></div>" +
-          "</td></tr>" +
-          "<tr><td>" +
-          "<b>Custom interaction model</b>" +
-          "<button id='restore3'>Restore Position</button>" +
-          "<div id='div_g3' style='width:600px; height:300px;'></div>" +
-          "</td><td>" +
-          "Zoom in: double-click, scroll wheel<br/>" +
-          "Zoom out: ctrl-double-click, scroll wheel<br/>" +
-          "Standard Zoom: shift-click-drag" +
-          "Standard Pan: click-drag<br/>" +
-          "Restore zoom level: press button<br/>" +
-          "</td></tr>" +
-          "<tr><td>" +
-          "<b>Fun model!</b>" +
-          "<div id='div_g4' style='width:600px; height:300px;'></div>" +
-          "</td><td>" +
-          "Keep the mouse button pressed, and hover over all points" +
-          "to mark them." +
-          "</td></tr>" +
-          "</table>";
+      parent.innerHTML = [
+          "<h3>Default interaction model</h3>",
+          "<div style='width:600px;'>",
+          "  <p style='text-align:center;'>",
+          "    Zoom: click-drag, Pan: shift-click-drag, Restore: double-click",
+          "  </p>",
+          "  <div id='div_g' style='width:600px; height:300px;'></div>",
+          "</div>",
+          "",
+          "<h3>Empty interaction model</h3>",
+          "<div style='width:600px;'>",
+          "  <p style='text-align:center;'>",
+          "    Click and drag all you like, it won't do anything!",
+          "  </p>",
+          "  <div id='div_g2' style='width:600px; height:300px;'></div>",
+          "</div>",
+          "<div id='g2_console'></div>", // what is this?
+          "",
+          "<h3>Custom interaction model</h3>",
+          "<div style='width:600px;'>",
+          "  <p style='text-align:center;'>",
+          "    Zoom in: double-click, scroll wheel<br/>",
+          "    Zoom out: ctrl-double-click, scroll wheel<br/>",
+          "    Standard Zoom: shift-click-drag",
+          "    Standard Pan: click-drag<br/>",
+          "    Restore zoom level: press button<br/>",
+          "  </p>",
+          "  <button id='restore3'>Restore position</button>",
+          "  <div id='div_g3' style='width:600px; height:300px;'></div>",
+          "</div>",
+          "<h3>Fun model!</h3>",
+          "<div style='width:600px;'>",
+          "  <p style='text-align:center;'>",
+          "    Keep the mouse button pressed, and hover over all points",
+          "    to mark them.",
+          "  </p>",
+          "  <div id='div_g4' style='width:600px; height:300px;'></div>",
+          "</div>"
+          ].join('\n');
 
     },
     run: function() {
-      // TODO(konigsberg): Add cleanup to remove callbacks.
-      Dygraph.addEvent(document, "mousewheel", function() { lastClickedGraph = null; });
-      Dygraph.addEvent(document, "click", function() { lastClickedGraph = null; });
-      var g = new Dygraph(document.getElementById("div_g"),
+      new Dygraph(document.getElementById("div_g"),
            NoisyData, { errorBars : true });
-      var s = document.getElementById("g2_console");
-      var g2 = new Dygraph(document.getElementById("div_g2"),
+      new Dygraph(document.getElementById("div_g2"),
            NoisyData,
            {
              errorBars : true,
@@ -62,15 +68,18 @@ Gallery.register(
       }});
       document.getElementById("restore3").onclick = function() {
         restorePositioning(g3);
-      }
-      var g4 = new Dygraph(document.getElementById("div_g4"),
-           NoisyData, { errorBars : true, drawPoints : true, interactionModel : {
-            'mousedown' : downV4,
-            'mousemove' : moveV4,
-            'mouseup' : upV4,
-            'dblclick' : dblClickV4,
-           },
-           underlayCallback : captureCanvas
-      });
+      };
+      new Dygraph(document.getElementById("div_g4"),
+           NoisyData, {
+             errorBars : true,
+             drawPoints : true,
+             interactionModel : {
+               'mousedown' : downV4,
+               'mousemove' : moveV4,
+               'mouseup' : upV4,
+               'dblclick' : dblClickV4
+             },
+             underlayCallback : captureCanvas
+          });
     }
   });