+++ /dev/null
-<!doctype html>
-<html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: Full Screen Editing</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <link rel="stylesheet" href="../theme/night.css">
- <script src="../mode/xml/xml.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
-
- <style type="text/css">
- .CodeMirror-fullscreen {
- display: block;
- position: absolute;
- top: 0; left: 0;
- width: 100%;
- z-index: 9999;
- }
- </style>
- </head>
- <body>
- <h1>CodeMirror: Full Screen Editing</h1>
-
- <form><textarea id="code" name="code" rows="5">
- <dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt>
- <dd>Whether, when indenting, the first N*8 spaces should be
- replaced by N tabs. Default is false.</dd>
-
- <dt id="option_tabMode"><code>tabMode (string)</code></dt>
- <dd>Determines what happens when the user presses the tab key.
- Must be one of the following:
- <dl>
- <dt><code>"classic" (the default)</code></dt>
- <dd>When nothing is selected, insert a tab. Otherwise,
- behave like the <code>"shift"</code> mode. (When shift is
- held, this behaves like the <code>"indent"</code> mode.)</dd>
- <dt><code>"shift"</code></dt>
- <dd>Indent all selected lines by
- one <a href="#option_indentUnit"><code>indentUnit</code></a>.
- If shift was held while pressing tab, un-indent all selected
- lines one unit.</dd>
- <dt><code>"indent"</code></dt>
- <dd>Indent the line the 'correctly', based on its syntactic
- context. Only works if the
- mode <a href="#indent">supports</a> it.</dd>
- <dt><code>"default"</code></dt>
- <dd>Do not capture tab presses, let the browser apply its
- default behaviour (which usually means it skips to the next
- control).</dd>
- </dl></dd>
-
- <dt id="option_enterMode"><code>enterMode (string)</code></dt>
- <dd>Determines whether and how new lines are indented when the
- enter key is pressed. The following modes are supported:
- <dl>
- <dt><code>"indent" (the default)</code></dt>
- <dd>Use the mode's indentation rules to give the new line
- the correct indentation.</dd>
- <dt><code>"keep"</code></dt>
- <dd>Indent the line the same as the previous line.</dd>
- <dt><code>"flat"</code></dt>
- <dd>Do not indent the new line.</dd>
- </dl></dd>
-
- <dt id="option_enterMode"><code>enterMode (string)</code></dt>
- <dd>Determines whether and how new lines are indented when the
- enter key is pressed. The following modes are supported:
- <dl>
- <dt><code>"indent" (the default)</code></dt>
- <dd>Use the mode's indentation rules to give the new line
- the correct indentation.</dd>
- <dt><code>"keep"</code></dt>
- <dd>Indent the line the same as the previous line.</dd>
- <dt><code>"flat"</code></dt>
- <dd>Do not indent the new line.</dd>
- </dl></dd>
-
- <dt id="option_enterMode"><code>enterMode (string)</code></dt>
- <dd>Determines whether and how new lines are indented when the
- enter key is pressed. The following modes are supported:
- <dl>
- <dt><code>"indent" (the default)</code></dt>
- <dd>Use the mode's indentation rules to give the new line
- the correct indentation.</dd>
- <dt><code>"keep"</code></dt>
- <dd>Indent the line the same as the previous line.</dd>
- <dt><code>"flat"</code></dt>
- <dd>Do not indent the new line.</dd>
- </dl></dd>
-
- <dt id="option_enterMode"><code>enterMode (string)</code></dt>
- <dd>Determines whether and how new lines are indented when the
- enter key is pressed. The following modes are supported:
- <dl>
- <dt><code>"indent" (the default)</code></dt>
- <dd>Use the mode's indentation rules to give the new line
- the correct indentation.</dd>
- <dt><code>"keep"</code></dt>
- <dd>Indent the line the same as the previous line.</dd>
- <dt><code>"flat"</code></dt>
- <dd>Do not indent the new line.</dd>
- </dl></dd>
-
-</textarea></form>
- <script>
- function isFullScreen(cm) {
- return /\bCodeMirror-fullscreen\b/.test(cm.getWrapperElement().className);
- }
- function winHeight() {
- return window.innerHeight || (document.documentElement || document.body).clientHeight;
- }
- function setFullScreen(cm, full) {
- var wrap = cm.getWrapperElement();
- if (full) {
- wrap.className += " CodeMirror-fullscreen";
- wrap.style.height = winHeight() + "px";
- document.documentElement.style.overflow = "hidden";
- } else {
- wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
- wrap.style.height = "";
- document.documentElement.style.overflow = "";
- }
- cm.refresh();
- }
- CodeMirror.on(window, "resize", function() {
- var showing = document.body.getElementsByClassName("CodeMirror-fullscreen")[0];
- if (!showing) return;
- showing.CodeMirror.getWrapperElement().style.height = winHeight() + "px";
- });
- var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
- lineNumbers: true,
- theme: "night",
- extraKeys: {
- "F11": function(cm) {
- setFullScreen(cm, !isFullScreen(cm));
- },
- "Esc": function(cm) {
- if (isFullScreen(cm)) setFullScreen(cm, false);
- }
- }
- });
- </script>
-
- <p>Press <strong>F11</strong> when cursor is in the editor to toggle full screen editing. <strong>Esc</strong> can also be used to <i>exit</i> full screen editing.</p>
- </body>
-</html>
git://git.onelab.eu / myslice.git / blobdiff