Rewrite HTML generation.
[dygraphs.git] / gallery / interaction.js
index 7ef64b0..03b30e4 100644 (file)
@@ -4,38 +4,38 @@ Gallery.register(
     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 = [
+          "<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>"].join("\n");
 
     },
     run: function() {