openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

buffers.html (3564B)

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