third-party/codemirror-3.15/demo/fullscreen.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CodeMirror: Full Screen Editing</title>
   6     <link rel="stylesheet" href="../lib/codemirror.css">
   7     <script src="../lib/codemirror.js"></script>
   8     <link rel="stylesheet" href="../theme/night.css">
   9     <script src="../mode/xml/xml.js"></script>
  10     <link rel="stylesheet" href="../doc/docs.css">
  11
  12     <style type="text/css">
  13       .CodeMirror-fullscreen {
  14         display: block;
  15         position: absolute;
  16         top: 0; left: 0;
  17         width: 100%;
  18         z-index: 9999;
  19       }
  20     </style>
  21   </head>
  22   <body>
  23     <h1>CodeMirror: Full Screen Editing</h1>
  24
  25     <form><textarea id="code" name="code" rows="5">
  26   <dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt>
  27   <dd>Whether, when indenting, the first N*8 spaces should be
  28   replaced by N tabs. Default is false.</dd>
  29
  30   <dt id="option_tabMode"><code>tabMode (string)</code></dt>
  31   <dd>Determines what happens when the user presses the tab key.
  32   Must be one of the following:
  33     <dl>
  34       <dt><code>"classic" (the default)</code></dt>
  35       <dd>When nothing is selected, insert a tab. Otherwise,
  36       behave like the <code>"shift"</code> mode. (When shift is
  37       held, this behaves like the <code>"indent"</code> mode.)</dd>
  38       <dt><code>"shift"</code></dt>
  39       <dd>Indent all selected lines by
  40       one <a href="#option_indentUnit"><code>indentUnit</code></a>.
  41       If shift was held while pressing tab, un-indent all selected
  42       lines one unit.</dd>
  43       <dt><code>"indent"</code></dt>
  44       <dd>Indent the line the 'correctly', based on its syntactic
  45       context. Only works if the
  46       mode <a href="#indent">supports</a> it.</dd>
  47       <dt><code>"default"</code></dt>
  48       <dd>Do not capture tab presses, let the browser apply its
  49       default behaviour (which usually means it skips to the next
  50       control).</dd>
  51     </dl></dd>
  52
  53   <dt id="option_enterMode"><code>enterMode (string)</code></dt>
  54   <dd>Determines whether and how new lines are indented when the
  55   enter key is pressed. The following modes are supported:
  56     <dl>
  57       <dt><code>"indent" (the default)</code></dt>
  58       <dd>Use the mode's indentation rules to give the new line
  59       the correct indentation.</dd>
  60       <dt><code>"keep"</code></dt>
  61       <dd>Indent the line the same as the previous line.</dd>
  62       <dt><code>"flat"</code></dt>
  63       <dd>Do not indent the new line.</dd>
  64     </dl></dd>
  65
  66   <dt id="option_enterMode"><code>enterMode (string)</code></dt>
  67   <dd>Determines whether and how new lines are indented when the
  68   enter key is pressed. The following modes are supported:
  69     <dl>
  70       <dt><code>"indent" (the default)</code></dt>
  71       <dd>Use the mode's indentation rules to give the new line
  72       the correct indentation.</dd>
  73       <dt><code>"keep"</code></dt>
  74       <dd>Indent the line the same as the previous line.</dd>
  75       <dt><code>"flat"</code></dt>
  76       <dd>Do not indent the new line.</dd>
  77     </dl></dd>
  78
  79   <dt id="option_enterMode"><code>enterMode (string)</code></dt>
  80   <dd>Determines whether and how new lines are indented when the
  81   enter key is pressed. The following modes are supported:
  82     <dl>
  83       <dt><code>"indent" (the default)</code></dt>
  84       <dd>Use the mode's indentation rules to give the new line
  85       the correct indentation.</dd>
  86       <dt><code>"keep"</code></dt>
  87       <dd>Indent the line the same as the previous line.</dd>
  88       <dt><code>"flat"</code></dt>
  89       <dd>Do not indent the new line.</dd>
  90     </dl></dd>
  91
  92   <dt id="option_enterMode"><code>enterMode (string)</code></dt>
  93   <dd>Determines whether and how new lines are indented when the
  94   enter key is pressed. The following modes are supported:
  95     <dl>
  96       <dt><code>"indent" (the default)</code></dt>
  97       <dd>Use the mode's indentation rules to give the new line
  98       the correct indentation.</dd>
  99       <dt><code>"keep"</code></dt>
 100       <dd>Indent the line the same as the previous line.</dd>
 101       <dt><code>"flat"</code></dt>
 102       <dd>Do not indent the new line.</dd>
 103     </dl></dd>
 104
 105 </textarea></form>
 106   <script>
 107     function isFullScreen(cm) {
 108       return /\bCodeMirror-fullscreen\b/.test(cm.getWrapperElement().className);
 109     }
 110     function winHeight() {
 111       return window.innerHeight || (document.documentElement || document.body).clientHeight;
 112     }
 113     function setFullScreen(cm, full) {
 114       var wrap = cm.getWrapperElement();
 115       if (full) {
 116         wrap.className += " CodeMirror-fullscreen";
 117         wrap.style.height = winHeight() + "px";
 118         document.documentElement.style.overflow = "hidden";
 119       } else {
 120         wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
 121         wrap.style.height = "";
 122         document.documentElement.style.overflow = "";
 123       }
 124       cm.refresh();
 125     }
 126     CodeMirror.on(window, "resize", function() {
 127       var showing = document.body.getElementsByClassName("CodeMirror-fullscreen")[0];
 128       if (!showing) return;
 129       showing.CodeMirror.getWrapperElement().style.height = winHeight() + "px";
 130     });
 131     var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
 132       lineNumbers: true,
 133       theme: "night",
 134       extraKeys: {
 135         "F11": function(cm) {
 136           setFullScreen(cm, !isFullScreen(cm));
 137         },
 138         "Esc": function(cm) {
 139           if (isFullScreen(cm)) setFullScreen(cm, false);
 140         }
 141       }
 142     });
 143   </script>
 144
 145     <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>
 146   </body>
 147 </html>