source: spip-zone/_plugins_/skeleditor/trunk/codemirror/demo/panel.html @ 111862

Last change on this file since 111862 was 111862, checked in by arnaud.berard@…, 14 months ago

avec svn add c'est mieux

  • addons
  • demo
  • mode

-theme

  • Property svn:eol-style set to native
File size: 3.4 KB
Line 
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 type="text/css">
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"><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/codemirror">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>
86var textarea = document.getElementById("code");
87var demo = document.getElementById("demo");
88var numPanels = 0;
89var panels = {};
90var editor;
91
92textarea.value = demo.innerHTML.trim();
93editor = CodeMirror.fromTextArea(textarea, {
94  lineNumbers: true,
95  mode: "htmlmixed"
96});
97
98function 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, "click", function() {
110    panels[node.id].clear();
111  });
112  label = node.appendChild(document.createElement("span"));
113  label.textContent = "I'm panel n°" + id;
114  return node;
115}
116function addPanel(where) {
117  var node = makePanel(where);
118  panels[node.id] = editor.addPanel(node, {position: where, stable: true});
119}
120
121addPanel("top");
122addPanel("bottom");
123
124function replacePanel(form) {
125  var id = form.elements.panel_id.value;
126  var panel = panels["panel-" + id];
127  var node = makePanel("");
128
129  panels[node.id] = editor.addPanel(node, {replace: panel, position: "after-top", stable: true});
130  return false;
131}
132</script>
133
134</div>
135
136</article>
Note: See TracBrowser for help on using the repository browser.