html5 boiler plate
[scannr.git] / js / flotr2 / examples / lib / codemirror / demo / fullscreen.html
blob:a/js/flotr2/examples/lib/codemirror/demo/fullscreen.html -> blob:b/js/flotr2/examples/lib/codemirror/demo/fullscreen.html
--- a/js/flotr2/examples/lib/codemirror/demo/fullscreen.html
+++ b/js/flotr2/examples/lib/codemirror/demo/fullscreen.html
@@ -1,1 +1,152 @@
+<!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">
+    <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: 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": toggleFullscreenEditing, "Esc": 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>
+