demo-list.js 3.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. ;(function() {
  2. var entries = [
  3. { id:"demo", name:"jsPlumb Home", about:"Main jsPlumb demo page. Contains a bit of everything" },
  4. { id:"flowchartConnectorsDemo", name:"Flowchart Connectors", about:"Demonstration of the Flowchart connectors" },
  5. { id:"draggableConnectorsDemo", name:"Draggable Connections", about:"Demonstration of drag and drop connections" },
  6. { id:"chartDemo", name:"Chart Demonstration", about:"Simple Chart Demo" },
  7. { id:"anchorDemo", name:"Sources and Targets", about:"Demonstration of how to make whole elements Connection sources and targets" },
  8. { id:"stateMachineDemo", name:"State Machine", about:"Demonstration of the State Machine Connectors and Continuous Anchors" },
  9. { id:"dynamicAnchorsDemo", name:"Dynamic Anchors", about:"Demonstration of Dynamic Anchors" },
  10. { id:"dragAnimDemo", name:"Animation", about:"Drag/drop demo with animation" }
  11. ],
  12. libraries = [
  13. {id:"jquery", name:"jQuery"},
  14. {id:"mootools", name:"MooTools"},
  15. {id:"yui3", name:"YUI3"}
  16. ],
  17. prepareOtherLibraryString = function(demoId, library) {
  18. var s = "", demoInfo = jsPlumb.DemoList.find(demoId);
  19. for (var i = 0; i < libraries.length; i++) {
  20. var c = libraries[i].id == library ? "selected" : "";
  21. s += '<a class="' + c + '" href="../' + libraries[i].id + '/' + demoId + '.html">' + libraries[i].name + '</a>&nbsp;&nbsp;';
  22. }
  23. return s;
  24. },
  25. demoSelectorString = (function() {
  26. var s = '<h5>Select Demo:</h5><select id="demoSelector" class="demoSelector">';
  27. for (var i = 0; i < entries.length; i++) {
  28. s += '<option value="' + entries[i].id + '.html">' + entries[i].name + '</option>';
  29. }
  30. s += '</select>';
  31. return s;
  32. })();
  33. jsPlumb.DemoList = {
  34. find:function(id) {
  35. for (var i = 0; i < entries.length; i++) {
  36. if (entries[i].id === id) {
  37. var next = i < entries.length - 1 ? i + 1 : 0,
  38. prev = i > 0 ? i - 1 : entries.length - 1;
  39. return {
  40. current:entries[i],
  41. prev:entries[prev],
  42. next:entries[next],
  43. idx:i
  44. };
  45. }
  46. }
  47. },
  48. init : function() {
  49. var bod = document.body,
  50. demoId = bod.getAttribute("data-demo-id"),
  51. library = bod.getAttribute("data-library"),
  52. renderModeString = '<h5>Render Mode:</h5><a href="#" class="rmode" mode="svg">SVG</a>&nbsp;|&nbsp;<a href="#" class="selected rmode" mode="canvas">Canvas</a>&nbsp;|&nbsp;<a href="#" class="rmode" mode="vml">VML</a>',
  53. libraryString = '<h5>Library:</h5><div class="otherLibraries"></div>' + prepareOtherLibraryString(demoId, library),
  54. demoInfo = jsPlumb.DemoList.find(demoId);
  55. if (demoInfo) {
  56. var prevString = '<h5>Previous:</h5><a href="' + demoInfo.prev.id + '.html">' + demoInfo.prev.name + '</a>',
  57. nextString = '<h5>Next:</h5><a href="' + demoInfo.next.id + '.html">' + demoInfo.next.name + '</a>',
  58. menuString = '<div class="menu"><a href="../doc/usage.html" class="mplink">view documentation</a>' +
  59. '&nbsp;|&nbsp;<a href="../apidocs">view api docs</a>' +
  60. '&nbsp;|&nbsp;<a href="../../tests/qunit-all.html">qUnit tests</a>' +
  61. '&nbsp;|&nbsp;<a href="mailto:simon.porritt@gmail.com" class="mplink">contact me</a>' +
  62. '&nbsp;|&nbsp;<a href="http://github.com/sporritt/jsplumb/" class="mplink">jsPlumb on GitHub</a>' +
  63. '&nbsp;|&nbsp;<a href="http://code.google.com/p/jsplumb/" class="mplink">jsPlumb on Google code</a>' +
  64. '&nbsp;|&nbsp;<a href="http://jsplumb.tumblr.com" class="mplink">jsPlumb on Tumblr</a>';
  65. var d = document.createElement("div");
  66. d.className = "renderMode";
  67. d.innerHTML = renderModeString + libraryString + prevString + "<br/>" + nextString + demoSelectorString;
  68. bod.appendChild(d);
  69. var m = document.createElement("div");
  70. m.className = "menu";
  71. m.innerHTML = menuString;
  72. bod.appendChild(m);
  73. var ds = document.getElementById("demoSelector");
  74. ds.selectedIndex = demoInfo.idx;
  75. ds.onchange = function() {
  76. window.location.href = ds.options[ds.selectedIndex].value;
  77. };
  78. }
  79. }
  80. };
  81. })();