buffers.html 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CodeMirror: Multiple Buffer & Split View Demo</title>
  6. <link rel="stylesheet" href="../lib/codemirror.css">
  7. <script src="../lib/codemirror.js"></script>
  8. <script src="../mode/javascript/javascript.js"></script>
  9. <script src="../mode/css/css.js"></script>
  10. <link rel="stylesheet" href="../doc/docs.css">
  11. <style type="text/css" id=style>
  12. .CodeMirror {border: 1px solid black; height: 250px;}
  13. </style>
  14. </head>
  15. <body>
  16. <h1>CodeMirror: Multiple Buffer & Split View Demo</h1>
  17. <div id=code_top></div>
  18. <div>
  19. Select buffer: <select id=buffers_top></select>
  20. &nbsp; &nbsp; <button onclick="newBuf('top')">New buffer</button>
  21. </div>
  22. <div id=code_bot></div>
  23. <div>
  24. Select buffer: <select id=buffers_bot></select>
  25. &nbsp; &nbsp; <button onclick="newBuf('bot')">New buffer</button>
  26. </div>
  27. <script id=script>
  28. var sel_top = document.getElementById("buffers_top");
  29. CodeMirror.on(sel_top, "change", function() {
  30. selectBuffer(ed_top, sel_top.options[sel_top.selectedIndex].value);
  31. });
  32. var sel_bot = document.getElementById("buffers_bot");
  33. CodeMirror.on(sel_bot, "change", function() {
  34. selectBuffer(ed_bot, sel_bot.options[sel_bot.selectedIndex].value);
  35. });
  36. var buffers = {};
  37. function openBuffer(name, text, mode) {
  38. buffers[name] = CodeMirror.Doc(text, mode);
  39. var opt = document.createElement("option");
  40. opt.appendChild(document.createTextNode(name));
  41. sel_top.appendChild(opt);
  42. sel_bot.appendChild(opt.cloneNode(true));
  43. }
  44. function newBuf(where) {
  45. var name = prompt("Name for the buffer", "*scratch*");
  46. if (name == null) return;
  47. if (buffers.hasOwnProperty(name)) {
  48. alert("There's already a buffer by that name.");
  49. return;
  50. }
  51. openBuffer(name, "", "javascript");
  52. selectBuffer(where == "top" ? ed_top : ed_bot, name);
  53. var sel = where == "top" ? sel_top : sel_bot;
  54. sel.value = name;
  55. }
  56. function selectBuffer(editor, name) {
  57. var buf = buffers[name];
  58. if (buf.getEditor()) buf = buf.linkedDoc({sharedHist: true});
  59. var old = editor.swapDoc(buf);
  60. var linked = old.iterLinkedDocs(function(doc) {linked = doc;});
  61. if (linked) {
  62. // Make sure the document in buffers is the one the other view is looking at
  63. for (var name in buffers) if (buffers[name] == old) buffers[name] = linked;
  64. old.unlinkDoc(linked);
  65. }
  66. editor.focus();
  67. }
  68. function nodeContent(id) {
  69. var node = document.getElementById(id), val = node.textContent || node.innerText;
  70. val = val.slice(val.match(/^\s*/)[0].length, val.length - val.match(/\s*$/)[0].length) + "\n";
  71. return val;
  72. }
  73. openBuffer("js", nodeContent("script"), "javascript");
  74. openBuffer("css", nodeContent("style"), "css");
  75. var ed_top = CodeMirror(document.getElementById("code_top"), {lineNumbers: true});
  76. selectBuffer(ed_top, "js");
  77. var ed_bot = CodeMirror(document.getElementById("code_bot"), {lineNumbers: true});
  78. selectBuffer(ed_bot, "js");
  79. </script>
  80. <p>Demonstration of
  81. using <a href="../doc/manual.html#linkedDoc">linked documents</a>
  82. to provide a split view on a document, and
  83. using <a href="../doc/manual.html#swapDoc"><code>swapDoc</code></a>
  84. to use a single editor to display multiple documents.</p>
  85. </body>
  86. </html>