gallery/interaction.js

   1 /*global Gallery,Dygraph,data */
   2 /*global NoisyData,downV3,moveV3,upV3,clickV3,dblClickV3,scrollV3,restorePositioning,downV4,moveV4,upV4,dblClickV4,captureCanvas */
   3
   4 Gallery.register(
   5   'interaction',
   6   {
   7     name: 'Custom interaction models',
   8     title: 'title',
   9     setup: function(parent) {
  10       parent.innerHTML = [
  11           "<h3>Default interaction model</h3>",
  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           "",
  19           "<h3>Empty interaction model</h3>",
  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           "",
  28           "<h3>Custom interaction model</h3>",
  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>",
  40           "<h3>Fun model!</h3>",
  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>",
  47           "</div>"
  48           ].join('\n');
  49
  50     },
  51     run: function() {
  52       var lastClickedGraph;
  53       document.addEventListener("mousewheel", function() { lastClickedGraph = null; });
  54       document.addEventListener("click", function() { lastClickedGraph = null; });
  55       new Dygraph(document.getElementById("div_g"),
  56            NoisyData, { errorBars : true });
  57       new Dygraph(document.getElementById("div_g2"),
  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);
  74       };
  75       new Dygraph(document.getElementById("div_g4"),
  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           });
  87     },
  88     clean: function() {
  89       document.removeEventListener('mousewheel');
  90       document.removeEventListener('click');
  91     }
  92   });