francis
/
amber
forked from amber/amber


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
							<!doctype html>
<html>
  <head>
    <title>CodeMirror 2: Full Screen Editing</title>
    <link rel="stylesheet" href="../lib/codemirror.css">
    <script src="../lib/codemirror.js"></script>
    <link rel="stylesheet" href="../theme/default.css">
    <link rel="stylesheet" href="../theme/night.css">
    <script src="../mode/xml/xml.js"></script>
    <link rel="stylesheet" href="../css/docs.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

    <style type="text/css">
        .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
        .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 2: 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",
        onKeyEvent: function(i, e) {
          // Hook into F11
          if ((e.keyCode == 122 || e.keyCode == 27) && e.type == 'keydown') {
            e.stop();
            return toggleFullscreenEditing();
          }
        }
    });

    function toggleFullscreenEditing()
    {
        var editorDiv = $('.CodeMirror-scroll');
        if (!editorDiv.hasClass('fullscreen')) {
            toggleFullscreenEditing.beforeFullscreen = { height: editorDiv.height(), width: editorDiv.width() }
            editorDiv.addClass('fullscreen');
            editorDiv.height('100%');
            editorDiv.width('100%');
            editor.refresh();
        }
        else {
            editorDiv.removeClass('fullscreen');
            editorDiv.height(toggleFullscreenEditing.beforeFullscreen.height);
            editorDiv.width(toggleFullscreenEditing.beforeFullscreen.width);
            editor.refresh();
        }
    }

})();
</script>

    <p>Press <strong>F11</strong> (or <strong>ESC</strong> in Safari on Mac OS X) when cursor is in the editor to toggle 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>