to-be-integrated/third-party/codemirror-3.15/demo/buffers.html

   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
  12     <style type="text/css" id=style>
  13       .CodeMirror {border: 1px solid black; height: 250px;}
  14     </style>
  15   </head>
  16   <body>
  17     <h1>CodeMirror: Multiple Buffer & Split View Demo</h1>
  18
  19     <div id=code_top></div>
  20     <div>
  21       Select buffer: <select id=buffers_top></select>
  22       &nbsp; &nbsp; <button onclick="newBuf('top')">New buffer</button>
  23     </div>
  24     <div id=code_bot></div>
  25     <div>
  26       Select buffer: <select id=buffers_bot></select>
  27       &nbsp; &nbsp; <button onclick="newBuf('bot')">New buffer</button>
  28     </div>
  29
  30     <script id=script>
  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);
  34 });
  35
  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);
  39 });
  40
  41 var buffers = {};
  42
  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));
  49 }
  50
  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.");
  56     return;
  57   }
  58   openBuffer(name, "", "javascript");
  59   selectBuffer(where == "top" ? ed_top : ed_bot, name);
  60   var sel = where == "top" ? sel_top : sel_bot;
  61   sel.value = name;
  62 }
  63
  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;});
  69   if (linked) {
  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);
  73   }
  74   editor.focus();
  75 }
  76
  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";
  80   return val;
  81 }
  82 openBuffer("js", nodeContent("script"), "javascript");
  83 openBuffer("css", nodeContent("style"), "css");
  84
  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");
  89 </script>
  90
  91     <p>Demonstration of
  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>
  96
  97   </body>
  98 </html>