2
0

fullscreen.html 5.5 KB

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