Mercurial

comparison .cms/lib/codemirror/demo/buffers.html @ 0:78edf6b517a0 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
24.10
author Coffee CMS <info@coffee-cms.ru>
date Fri, 11 Oct 2024 22:40:23 +0000
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:78edf6b517a0
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 id=style>
12 .CodeMirror {border: 1px solid black; height: 250px;}
13 </style>
14 <div id=nav>
15 <a href="https://codemirror.net/5"><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/codemirror5">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>