Gecko [ theprintave.ca ]

Name	Size	Permission	Date
activeline.html	3.26 KB	-rw-r--r--	2022-01-28 11:40
anywordhint.html	2.87 KB	-rw-r--r--	2022-01-28 11:40
bidi.html	4.88 KB	-rw-r--r--	2022-01-28 11:40
btree.html	2.94 KB	-rw-r--r--	2022-01-28 11:40
buffers.html	3.59 KB	-rw-r--r--	2022-01-28 11:40
changemode.html	1.78 KB	-rw-r--r--	2022-01-28 11:40
closebrackets.html	1.72 KB	-rw-r--r--	2022-01-28 11:40
closetag.html	1.58 KB	-rw-r--r--	2022-01-28 11:40
complete.html	4.4 KB	-rw-r--r--	2022-01-28 11:40
emacs.html	2.76 KB	-rw-r--r--	2022-01-28 11:40
folding.html	6.12 KB	-rw-r--r--	2022-01-28 11:40
fullscreen.html	3.53 KB	-rw-r--r--	2022-01-28 11:40
hardwrap.html	2.62 KB	-rw-r--r--	2022-01-28 11:40
html5complete.html	1.99 KB	-rw-r--r--	2022-01-28 11:40
indentwrap.html	2.62 KB	-rw-r--r--	2022-01-28 11:40
loadmode.html	2.31 KB	-rw-r--r--	2022-01-28 11:40
marker.html	1.53 KB	-rw-r--r--	2022-01-28 11:40
markselection.html	1.94 KB	-rw-r--r--	2022-01-28 11:40
matchhighlighter.html	4.89 KB	-rw-r--r--	2022-01-28 11:40
matchtags.html	1.48 KB	-rw-r--r--	2022-01-28 11:40
multiplex.html	2.25 KB	-rw-r--r--	2022-01-28 11:40
mustache.html	2.18 KB	-rw-r--r--	2022-01-28 11:40
panel.html	3.57 KB	-rw-r--r--	2022-01-28 11:40
placeholder.html	1.55 KB	-rw-r--r--	2022-01-28 11:40
preview.html	2.54 KB	-rw-r--r--	2022-01-28 11:40
requirejs.html	2.27 KB	-rw-r--r--	2022-01-28 11:40
resize.html	1.4 KB	-rw-r--r--	2022-01-28 11:40
rulers.html	1.45 KB	-rw-r--r--	2022-01-28 11:40
runmode-standalone.html	2.3 KB	-rw-r--r--	2022-01-28 11:40
runmode.html	2.36 KB	-rw-r--r--	2022-01-28 11:40
search.html	4.89 KB	-rw-r--r--	2022-01-28 11:40
simplemode.html	8.14 KB	-rw-r--r--	2022-01-28 11:40
simplescrollbars.html	5.1 KB	-rw-r--r--	2022-01-28 11:40
spanaffectswrapping_shim.html	3 KB	-rw-r--r--	2022-01-28 11:40
sublime.html	3.23 KB	-rw-r--r--	2022-01-28 11:40
theme.html	7.5 KB	-rw-r--r--	2022-01-28 11:40
trailingspace.html	1.61 KB	-rw-r--r--	2022-01-28 11:40
variableheight.html	2.12 KB	-rw-r--r--	2022-01-28 11:40
vim.html	4.32 KB	-rw-r--r--	2022-01-28 11:40
visibletabs.html	1.89 KB	-rw-r--r--	2022-01-28 11:40
xmlcomplete.html	3.78 KB	-rw-r--r--	2022-01-28 11:40

Rename

<!doctype html>

<title>CodeMirror: Panel Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../html/docs.css">

<div id=nav>
  <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../html/logo.png"></a>

<ul>
    <li><a href="../index.html">Home</a>
    <li><a href="../html/manual.html">Manual</a>
    <li><a href="https://github.com/codemirror/codemirror">Code</a>
  </ul>
  <ul>
    <li><a class=active href="#">Panel</a>
  </ul>
</div>

<h2>Panel Demo</h2>

<p>
  The <a href="../html/manual.html#addon_panel"><code>panel</code></a>
  addon allows you to display panels above or below an editor.
  <br>
  Click the links below to add panels at the given position:
</p>

<div id="demo">
<p>
  <a class="add-panel" onclick="addPanel('top')">top</a>
  <a class="add-panel" onclick="addPanel('after-top')">after-top</a>
  <a class="add-panel" onclick="addPanel('before-bottom')">before-bottom</a>
  <a class="add-panel" onclick="addPanel('bottom')">bottom</a>
</p>
<p>
  You can also replace an existing panel:
</p>
<form onsubmit="return replacePanel(this);" name="replace_panel">
  <input type="submit" value="Replace panel n°" />
  <input type="number" name="panel_id" min="1" value="1" />
</form>

textarea.value = demo.innerHTML.trim();
editor = CodeMirror.fromTextArea(textarea, {
  lineNumbers: true,
  mode: "htmlmixed"
});

function makePanel(where) {
  var node = document.createElement("div");
  var id = ++numPanels;
  var widget, close, label;

node.id = "panel-" + id;
  node.className = "panel " + where;
  close = node.appendChild(document.createElement("a"));
  close.setAttribute("title", "Remove me!");
  close.setAttribute("class", "remove-panel");
  close.textContent = "✖";
  CodeMirror.on(close, "mousedown", function(e) {
    e.preventDefault()
    panels[node.id].clear();
  });
  label = node.appendChild(document.createElement("span"));
  label.textContent = "I'm panel n°" + id;
  return node;
}
function addPanel(where) {
  var node = makePanel(where);
  panels[node.id] = editor.addPanel(node, {position: where, stable: true});
}

addPanel("top");
addPanel("bottom");

function replacePanel(form) {
  var id = form.elements.panel_id.value;
  var panel = panels["panel-" + id];
  var node = makePanel("");

panels[node.id] = editor.addPanel(node, {replace: panel, position: "after-top", stable: true});
  return false;
}
</script>

</div>

</article>