Mercurial
comparison .cms/lib/codemirror/demo/panel.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: Panel 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/xml/xml.js"></script> | |
11 <script src="../mode/htmlmixed/htmlmixed.js"></script> | |
12 <script src="../addon/display/panel.js"></script> | |
13 <style> | |
14 .border { | |
15 border: 1px solid #f7f7f7; | |
16 } | |
17 .add-panel { | |
18 background: orange; | |
19 padding: 3px 6px; | |
20 color: white !important; | |
21 border-radius: 3px; | |
22 } | |
23 .add-panel, .remove-panel { | |
24 cursor: pointer; | |
25 } | |
26 .remove-panel { | |
27 float: right; | |
28 } | |
29 .panel { | |
30 background: #f7f7f7; | |
31 padding: 3px 7px; | |
32 font-size: 0.85em; | |
33 } | |
34 .panel.top, .panel.after-top { | |
35 border-bottom: 1px solid #ddd; | |
36 } | |
37 .panel.bottom, .panel.before-bottom { | |
38 border-top: 1px solid #ddd; | |
39 } | |
40 </style> | |
41 | |
42 <div id=nav> | |
43 <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> | |
44 | |
45 <ul> | |
46 <li><a href="../index.html">Home</a> | |
47 <li><a href="../doc/manual.html">Manual</a> | |
48 <li><a href="https://github.com/codemirror/codemirror5">Code</a> | |
49 </ul> | |
50 <ul> | |
51 <li><a class=active href="#">Panel</a> | |
52 </ul> | |
53 </div> | |
54 | |
55 <article> | |
56 | |
57 <h2>Panel Demo</h2> | |
58 | |
59 <div class="border"> | |
60 <textarea id="code" name="code"></textarea> | |
61 </div> | |
62 | |
63 <p> | |
64 The <a href="../doc/manual.html#addon_panel"><code>panel</code></a> | |
65 addon allows you to display panels above or below an editor. | |
66 <br> | |
67 Click the links below to add panels at the given position: | |
68 </p> | |
69 | |
70 <div id="demo"> | |
71 <p> | |
72 <a class="add-panel" onclick="addPanel('top')">top</a> | |
73 <a class="add-panel" onclick="addPanel('after-top')">after-top</a> | |
74 <a class="add-panel" onclick="addPanel('before-bottom')">before-bottom</a> | |
75 <a class="add-panel" onclick="addPanel('bottom')">bottom</a> | |
76 </p> | |
77 <p> | |
78 You can also replace an existing panel: | |
79 </p> | |
80 <form onsubmit="return replacePanel(this);" name="replace_panel"> | |
81 <input type="submit" value="Replace panel n°" /> | |
82 <input type="number" name="panel_id" min="1" value="1" /> | |
83 </form> | |
84 | |
85 <script> | |
86 var textarea = document.getElementById("code"); | |
87 var demo = document.getElementById("demo"); | |
88 var numPanels = 0; | |
89 var panels = {}; | |
90 var editor; | |
91 | |
92 textarea.value = demo.innerHTML.trim(); | |
93 editor = CodeMirror.fromTextArea(textarea, { | |
94 lineNumbers: true, | |
95 mode: "htmlmixed" | |
96 }); | |
97 | |
98 function makePanel(where) { | |
99 var node = document.createElement("div"); | |
100 var id = ++numPanels; | |
101 var widget, close, label; | |
102 | |
103 node.id = "panel-" + id; | |
104 node.className = "panel " + where; | |
105 close = node.appendChild(document.createElement("a")); | |
106 close.setAttribute("title", "Remove me!"); | |
107 close.setAttribute("class", "remove-panel"); | |
108 close.textContent = "✖"; | |
109 CodeMirror.on(close, "mousedown", function(e) { | |
110 e.preventDefault() | |
111 panels[node.id].clear(); | |
112 }); | |
113 label = node.appendChild(document.createElement("span")); | |
114 label.textContent = "I'm panel n°" + id; | |
115 return node; | |
116 } | |
117 function addPanel(where) { | |
118 var node = makePanel(where); | |
119 panels[node.id] = editor.addPanel(node, {position: where, stable: true}); | |
120 } | |
121 | |
122 addPanel("top"); | |
123 addPanel("bottom"); | |
124 | |
125 function replacePanel(form) { | |
126 var id = form.elements.panel_id.value; | |
127 var panel = panels["panel-" + id]; | |
128 var node = makePanel(""); | |
129 | |
130 panels[node.id] = editor.addPanel(node, {replace: panel, position: "after-top", stable: true}); | |
131 return false; | |
132 } | |
133 </script> | |
134 | |
135 </div> | |
136 | |
137 </article> |