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