topical media & game development

talk show tell print

mobile-query-three-www-live-playground-vendor-CodeMirror2-demo-fullscreen.htm / htm



  <!doctype html>
  <html>
    <head>
      <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 {border-top: 1px solid black; border-bottom: 1px solid black;}
          .CodeMirror-fullscreen {
              display: block;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              z-index: 9999;
              margin: 0;
              padding: 0;
              border: 0px solid #BBBBBB;
              opacity: 1;
          }
      </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 () {
  
      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
          lineNumbers: true,
          theme: "night",
          extraKeys: {
              "F11": function() {
                scroller = editor.getScrollerElement();
                scrollerStyle = (scroller.currentStyle
                  ? scroller.currentStyle
                  : window.getComputedStyle(scroller, null)
                );
                scrollerHeight = scrollerStyle.height;
                scrollerWidth = scrollerStyle.width;
                if (scroller.className.search(/\bCodeMirror-fullscreen\b/) === -1) {
                  editor.beforeFullscreen = {
                    height: scrollerHeight,
                    width: scrollerWidth
                  }
                  scroller.className += " CodeMirror-fullscreen";
                  scroller.style.height = "100%";
                  scroller.style.width = "100%";
                  editor.refresh();
                } else {
                  scroller.className = scroller.className.replace(" CodeMirror-fullscreen", "");
                  scroller.style.height = editor.beforeFullscreen.height;
                  scroller.style.width = editor.beforeFullscreen.width;
                  editor.refresh();
                }
              },
              "Esc": function() {
                scroller = editor.getScrollerElement();
                scrollerStyle = (scroller.currentStyle
                  ? scroller.currentStyle
                  : window.getComputedStyle(scroller, null)
                );
                scrollerHeight = scrollerStyle.height;
                scrollerWidth = scrollerStyle.width;
                if (scroller.className.search(/\bCodeMirror-fullscreen\b/) !== -1) {
                  scroller.className = scroller.className.replace(" CodeMirror-fullscreen", "");
                  scroller.style.height = editor.beforeFullscreen.height;
                  scroller.style.width = editor.beforeFullscreen.width;
                  editor.refresh();
                }
              },
          }
      });
  
  })();
  </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>
  
      <p><strong>Note:</strong> Does not currently work correctly in IE
      6 and 7, where setting the height of something
      to <code>100%</code> doesn't make it full-screen.</p>
  
    </body>
  </html>


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.