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">
12 <style type="text/css" id=style>
13 .CodeMirror {border: 1px solid black; height: 250px;}
17 <h1>CodeMirror: Multiple Buffer & Split View Demo</h1>
19 <div id=code_top></div>
21 Select buffer: <select id=buffers_top></select>
22 <button onclick="newBuf('top')">New buffer</button>
24 <div id=code_bot></div>
26 Select buffer: <select id=buffers_bot></select>
27 <button onclick="newBuf('bot')">New buffer</button>
31 var sel_top = document.getElementById("buffers_top");
32 CodeMirror.on(sel_top, "change", function() {
33 selectBuffer(ed_top, sel_top.options[sel_top.selectedIndex].value);
36 var sel_bot = document.getElementById("buffers_bot");
37 CodeMirror.on(sel_bot, "change", function() {
38 selectBuffer(ed_bot, sel_bot.options[sel_bot.selectedIndex].value);
43 function openBuffer(name, text, mode) {
44 buffers[name] = CodeMirror.Doc(text, mode);
45 var opt = document.createElement("option");
46 opt.appendChild(document.createTextNode(name));
47 sel_top.appendChild(opt);
48 sel_bot.appendChild(opt.cloneNode(true));
51 function newBuf(where) {
52 var name = prompt("Name for the buffer", "*scratch*");
53 if (name == null) return;
54 if (buffers.hasOwnProperty(name)) {
55 alert("There's already a buffer by that name.");
58 openBuffer(name, "", "javascript");
59 selectBuffer(where == "top" ? ed_top : ed_bot, name);
60 var sel = where == "top" ? sel_top : sel_bot;
64 function selectBuffer(editor, name) {
65 var buf = buffers[name];
66 if (buf.getEditor()) buf = buf.linkedDoc({sharedHist: true});
67 var old = editor.swapDoc(buf);
68 var linked = old.iterLinkedDocs(function(doc) {linked = doc;});
70 // Make sure the document in buffers is the one the other view is looking at
71 for (var name in buffers) if (buffers[name] == old) buffers[name] = linked;
72 old.unlinkDoc(linked);
77 function nodeContent(id) {
78 var node = document.getElementById(id), val = node.textContent || node.innerText;
79 val = val.slice(val.match(/^\s*/)[0].length, val.length - val.match(/\s*$/)[0].length) + "\n";
82 openBuffer("js", nodeContent("script"), "javascript");
83 openBuffer("css", nodeContent("style"), "css");
85 var ed_top = CodeMirror(document.getElementById("code_top"), {lineNumbers: true});
86 selectBuffer(ed_top, "js");
87 var ed_bot = CodeMirror(document.getElementById("code_bot"), {lineNumbers: true});
88 selectBuffer(ed_bot, "js");
92 using <a href="../doc/manual.html#linkedDoc">linked documents</a>
93 to provide a split view on a document, and
94 using <a href="../doc/manual.html#swapDoc"><code>swapDoc</code></a>
95 to use a single editor to display multiple documents.</p>