|
0
|
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>
|
