Mercurial
comparison .cms/lib/codemirror/demo/buffers.html @ 0:78edf6b517a0 draft
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 <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 <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> |