mirror of
https://github.com/renbaoshuo/S2OJ.git
synced 2024-09-21 16:35:18 +00:00
96d4a3ecf7
Due to historical reasons, the code is in subfolder "1". With SVN removal, we place the code back and remove the annoying "1" folder.
110 lines
3.5 KiB
HTML
110 lines
3.5 KiB
HTML
<!doctype html>
|
|
|
|
<title>CodeMirror: Multiple Buffer & Split View Demo</title>
|
|
<meta charset="utf-8"/>
|
|
<link rel=stylesheet href="../doc/docs.css">
|
|
|
|
<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>
|
|
<style type="text/css" id=style>
|
|
.CodeMirror {border: 1px solid black; height: 250px;}
|
|
</style>
|
|
<div id=nav>
|
|
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
|
|
|
|
<ul>
|
|
<li><a href="../index.html">Home</a>
|
|
<li><a href="../doc/manual.html">Manual</a>
|
|
<li><a href="https://github.com/marijnh/codemirror">Code</a>
|
|
</ul>
|
|
<ul>
|
|
<li><a class=active href="#">Multiple Buffer & Split View</a>
|
|
</ul>
|
|
</div>
|
|
|
|
<article>
|
|
<h2>Multiple Buffer & Split View Demo</h2>
|
|
|
|
|
|
<div id=code_top></div>
|
|
<div>
|
|
Select buffer: <select id=buffers_top></select>
|
|
<button onclick="newBuf('top')">New buffer</button>
|
|
</div>
|
|
<div id=code_bot></div>
|
|
<div>
|
|
Select buffer: <select id=buffers_bot></select>
|
|
<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>
|
|
|
|
</article>
|