--- 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> +