← Back to branch summary

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

« back to all changes in this revision

Viewing changes to demo/folding.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/folding.html
 
1
<!doctype html>
 
2
<html>
 
3
  <head>
 
4
    <title>CodeMirror: Code Folding Demo</title>
 
5
    <link rel="stylesheet" href="../lib/codemirror.css">
 
6
    <script src="../lib/codemirror.js"></script>
 
7
    <script src="../lib/util/foldcode.js"></script>
 
8
    <script src="../mode/javascript/javascript.js"></script>
 
9
    <script src="../mode/xml/xml.js"></script>
 
10
    <link rel="stylesheet" href="../doc/docs.css">
 
11
 
 
12
    <style type="text/css">
 
13
      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
 
14
      .CodeMirror-gutter {min-width: 2.6em; cursor: pointer;}
 
15
    </style>
 
16
  </head>
 
17
  <body>
 
18
    <h1>CodeMirror: Code Folding Demo</h1>
 
19
 
 
20
    <p>Demonstration of code folding using the code
 
21
    in <a href="../lib/util/foldcode.js"><code>foldcode.js</code></a>.
 
22
    Press ctrl-q or click on the gutter to fold a block, again
 
23
    to unfold.</p>
 
24
    <form>
 
25
      <div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br><textarea id="code" name="code"></textarea></div>
 
26
      <div style="max-width: 50em">HTML:<br><textarea id="code-html" name="code-html"></textarea></div>
 
27
    </form>
 
28
    <script id="script">
 
29
window.onload = function() {
 
30
  var te = document.getElementById("code");
 
31
  var sc = document.getElementById("script");
 
32
  te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");
 
33
  sc.innerHTML = "";
 
34
  var te_html = document.getElementById("code-html");
 
35
  te_html.value = "<html>\n  " + document.documentElement.innerHTML + "\n</html>";
 
36
 
 
37
  var foldFunc = CodeMirror.newFoldFunction(CodeMirror.braceRangeFinder);
 
38
  window.editor = CodeMirror.fromTextArea(te, {
 
39
    mode: "javascript",
 
40
    lineNumbers: true,
 
41
    lineWrapping: true,
 
42
    onGutterClick: foldFunc,
 
43
    extraKeys: {"Ctrl-Q": function(cm){foldFunc(cm, cm.getCursor().line);}}
 
44
  });
 
45
  foldFunc(editor, 9);
 
46
  foldFunc(editor, 20);
 
47
 
 
48
  var foldFunc_html = CodeMirror.newFoldFunction(CodeMirror.tagRangeFinder);
 
49
  window.editor_html = CodeMirror.fromTextArea(te_html, {
 
50
    mode: "text/html",
 
51
    lineNumbers: true,
 
52
    lineWrapping: true,
 
53
    onGutterClick: foldFunc_html,
 
54
    extraKeys: {"Ctrl-Q": function(cm){foldFunc_html(cm, cm.getCursor().line);}}
 
55
  })
 
56
  foldFunc_html(editor_html, 1);
 
57
  foldFunc_html(editor_html, 15);
 
58
};
 
59
</script>
 
60
  </body>
 
61
</html>