← Back to branch summary

~ubuntu-branches/ubuntu/utopic/codemirror-js/utopic

« back to all changes in this revision

Viewing changes to demo/fullscreen.html

  • Committer: Package Import Robot
  • Author(s): David Paleino
  • Date: 2012-04-12 12:25:28 UTC
  • Revision ID: package-import@ubuntu.com-20120412122528-8xp5a8frj4h1d3ee
Tags: upstream-2.23
Import upstream version 2.23

Show diffs side-by-side

added added

removed removed

Lines of Context:
demo/fullscreen.html
 
1
<!doctype html>
 
2
<html>
 
3
  <head>
 
4
    <title>CodeMirror: Full Screen Editing</title>
 
5
    <link rel="stylesheet" href="../lib/codemirror.css">
 
6
    <script src="../lib/codemirror.js"></script>
 
7
    <link rel="stylesheet" href="../theme/night.css">
 
8
    <script src="../mode/xml/xml.js"></script>
 
9
    <link rel="stylesheet" href="../doc/docs.css">
 
10
 
 
11
    <style type="text/css">
 
12
        .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
 
13
        .CodeMirror-fullscreen {
 
14
            display: block;
 
15
            position: absolute;
 
16
            top: 0;
 
17
            left: 0;
 
18
            width: 100%;
 
19
            height: 100%;
 
20
            z-index: 9999;
 
21
            margin: 0;
 
22
            padding: 0;
 
23
            border: 0px solid #BBBBBB;
 
24
            opacity: 1;
 
25
        }
 
26
    </style>
 
27
  </head>
 
28
  <body>
 
29
    <h1>CodeMirror: Full Screen Editing</h1>
 
30
 
 
31
    <form><textarea id="code" name="code" rows="5">
 
32
  <dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt>
 
33
  <dd>Whether, when indenting, the first N*8 spaces should be
 
34
  replaced by N tabs. Default is false.</dd>
 
35
 
 
36
  <dt id="option_tabMode"><code>tabMode (string)</code></dt>
 
37
  <dd>Determines what happens when the user presses the tab key.
 
38
  Must be one of the following:
 
39
    <dl>
 
40
      <dt><code>"classic" (the default)</code></dt>
 
41
      <dd>When nothing is selected, insert a tab. Otherwise,
 
42
      behave like the <code>"shift"</code> mode. (When shift is
 
43
      held, this behaves like the <code>"indent"</code> mode.)</dd>
 
44
      <dt><code>"shift"</code></dt>
 
45
      <dd>Indent all selected lines by
 
46
      one <a href="#option_indentUnit"><code>indentUnit</code></a>.
 
47
      If shift was held while pressing tab, un-indent all selected
 
48
      lines one unit.</dd>
 
49
      <dt><code>"indent"</code></dt>
 
50
      <dd>Indent the line the 'correctly', based on its syntactic
 
51
      context. Only works if the
 
52
      mode <a href="#indent">supports</a> it.</dd>
 
53
      <dt><code>"default"</code></dt>
 
54
      <dd>Do not capture tab presses, let the browser apply its
 
55
      default behaviour (which usually means it skips to the next
 
56
      control).</dd>
 
57
    </dl></dd>
 
58
 
 
59
  <dt id="option_enterMode"><code>enterMode (string)</code></dt>
 
60
  <dd>Determines whether and how new lines are indented when the
 
61
  enter key is pressed. The following modes are supported:
 
62
    <dl>
 
63
      <dt><code>"indent" (the default)</code></dt>
 
64
      <dd>Use the mode's indentation rules to give the new line
 
65
      the correct indentation.</dd>
 
66
      <dt><code>"keep"</code></dt>
 
67
      <dd>Indent the line the same as the previous line.</dd>
 
68
      <dt><code>"flat"</code></dt>
 
69
      <dd>Do not indent the new line.</dd>
 
70
    </dl></dd>
 
71
 
 
72
  <dt id="option_enterMode"><code>enterMode (string)</code></dt>
 
73
  <dd>Determines whether and how new lines are indented when the
 
74
  enter key is pressed. The following modes are supported:
 
75
    <dl>
 
76
      <dt><code>"indent" (the default)</code></dt>
 
77
      <dd>Use the mode's indentation rules to give the new line
 
78
      the correct indentation.</dd>
 
79
      <dt><code>"keep"</code></dt>
 
80
      <dd>Indent the line the same as the previous line.</dd>
 
81
      <dt><code>"flat"</code></dt>
 
82
      <dd>Do not indent the new line.</dd>
 
83
    </dl></dd>
 
84
 
 
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
 
 
98
  <dt id="option_enterMode"><code>enterMode (string)</code></dt>
 
99
  <dd>Determines whether and how new lines are indented when the
 
100
  enter key is pressed. The following modes are supported:
 
101
    <dl>
 
102
      <dt><code>"indent" (the default)</code></dt>
 
103
      <dd>Use the mode's indentation rules to give the new line
 
104
      the correct indentation.</dd>
 
105
      <dt><code>"keep"</code></dt>
 
106
      <dd>Indent the line the same as the previous line.</dd>
 
107
      <dt><code>"flat"</code></dt>
 
108
      <dd>Do not indent the new line.</dd>
 
109
    </dl></dd>
 
110
 
 
111
</textarea></form>
 
112
 <script>
 
113
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
 
114
        lineNumbers: true,
 
115
        theme: "night",
 
116
        extraKeys: {
 
117
            "F11": function() {
 
118
              var scroller = editor.getScrollerElement();
 
119
              if (scroller.className.search(/\bCodeMirror-fullscreen\b/) === -1) {
 
120
                scroller.className += " CodeMirror-fullscreen";
 
121
                scroller.style.height = "100%";
 
122
                scroller.style.width = "100%";
 
123
                editor.refresh();
 
124
              } else {
 
125
                scroller.className = scroller.className.replace(" CodeMirror-fullscreen", "");
 
126
                scroller.style.height = '';
 
127
                scroller.style.width = '';
 
128
                editor.refresh();
 
129
              }
 
130
            },
 
131
            "Esc": function() {
 
132
              var scroller = editor.getScrollerElement();
 
133
              if (scroller.className.search(/\bCodeMirror-fullscreen\b/) !== -1) {
 
134
                scroller.className = scroller.className.replace(" CodeMirror-fullscreen", "");
 
135
                scroller.style.height = '';
 
136
                scroller.style.width = '';
 
137
                editor.refresh();
 
138
              }
 
139
            }
 
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
 
 
147
    <p><strong>Note:</strong> Does not currently work correctly in IE
 
148
    6 and 7, where setting the height of something
 
149
    to <code>100%</code> doesn't make it full screen.</p>
 
150
 
 
151
  </body>
 
152
</html>