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() {