Christian
/
amber
forked from amber/amber


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
							<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CodeMirror: Multiple Buffer & Split View Demo</title>
    <link rel="stylesheet" href="../lib/codemirror.css">
    <script src="../lib/codemirror.js"></script>
    <script src="../mode/javascript/javascript.js"></script>
    <script src="../mode/css/css.js"></script>
    <link rel="stylesheet" href="../doc/docs.css">

    <style type="text/css" id=style>
      .CodeMirror {border: 1px solid black; height: 250px;}
    </style>
  </head>
  <body>
    <h1>CodeMirror: Multiple Buffer & Split View Demo</h1>

    <div id=code_top></div>
    <div>
      Select buffer: <select id=buffers_top></select>
      &nbsp; &nbsp; <button onclick="newBuf('top')">New buffer</button>
    </div>
    <div id=code_bot></div>
    <div>
      Select buffer: <select id=buffers_bot></select>
      &nbsp; &nbsp; <button onclick="newBuf('bot')">New buffer</button>
    </div>

    <script id=script>
var sel_top = document.getElementById("buffers_top");
CodeMirror.on(sel_top, "change", function() {
  selectBuffer(ed_top, sel_top.options[sel_top.selectedIndex].value);
});

var sel_bot = document.getElementById("buffers_bot");
CodeMirror.on(sel_bot, "change", function() {
  selectBuffer(ed_bot, sel_bot.options[sel_bot.selectedIndex].value);
});

var buffers = {};

function openBuffer(name, text, mode) {
  buffers[name] = CodeMirror.Doc(text, mode);
  var opt = document.createElement("option");
  opt.appendChild(document.createTextNode(name));
  sel_top.appendChild(opt);
  sel_bot.appendChild(opt.cloneNode(true));
}

function newBuf(where) {
  var name = prompt("Name for the buffer", "*scratch*");
  if (name == null) return;
  if (buffers.hasOwnProperty(name)) {
    alert("There's already a buffer by that name.");
    return;
  }
  openBuffer(name, "", "javascript");
  selectBuffer(where == "top" ? ed_top : ed_bot, name);
  var sel = where == "top" ? sel_top : sel_bot;
  sel.value = name;
}

function selectBuffer(editor, name) {
  var buf = buffers[name];
  if (buf.getEditor()) buf = buf.linkedDoc({sharedHist: true});
  var old = editor.swapDoc(buf);
  var linked = old.iterLinkedDocs(function(doc) {linked = doc;});
  if (linked) {
    // Make sure the document in buffers is the one the other view is looking at
    for (var name in buffers) if (buffers[name] == old) buffers[name] = linked;
    old.unlinkDoc(linked);
  }
  editor.focus();
}

function nodeContent(id) {
  var node = document.getElementById(id), val = node.textContent || node.innerText;
  val = val.slice(val.match(/^\s*/)[0].length, val.length - val.match(/\s*$/)[0].length) + "\n";
  return val;
}
openBuffer("js", nodeContent("script"), "javascript");
openBuffer("css", nodeContent("style"), "css");

var ed_top = CodeMirror(document.getElementById("code_top"), {lineNumbers: true});
selectBuffer(ed_top, "js");
var ed_bot = CodeMirror(document.getElementById("code_bot"), {lineNumbers: true});
selectBuffer(ed_bot, "js");
</script>

    <p>Demonstration of
    using <a href="../doc/manual.html#linkedDoc">linked documents</a>
    to provide a split view on a document, and
    using <a href="../doc/manual.html#swapDoc"><code>swapDoc</code></a>
    to use a single editor to display multiple documents.</p>

  </body>
</html>