| <!doctype html> | |
| <html> | |
| <head> | |
| <title>CodeMirror: Code Folding Demo</title> | |
| <link rel="stylesheet" href="../lib/codemirror.css"> | |
| <script src="../lib/codemirror.js"></script> | |
| <script src="../lib/util/foldcode.js"></script> | |
| <script src="../mode/javascript/javascript.js"></script> | |
| <link rel="stylesheet" href="../doc/docs.css"> | |
| <style type="text/css"> | |
| .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} | |
| .CodeMirror-gutter {min-width: 2.6em; cursor: pointer;} | |
| </style> | |
| </head> | |
| <body> | |
| <h1>CodeMirror: Code Folding Demo</h1> | |
| <form><div style="max-width: 50em"><textarea id="code" name="code"></textarea></div></form> | |
| <script id="script"> | |
| window.onload = function() { | |
| var te = document.getElementById("code"); | |
| var sc = document.getElementById("script"); | |
| te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, ""); | |
| var foldFunc = CodeMirror.newFoldFunction(CodeMirror.braceRangeFinder); | |
| function keyEvent(cm, e) { | |
| if (e.keyCode == 81 && e.ctrlKey) { | |
| if (e.type == "keydown") { | |
| e.stop(); | |
| setTimeout(function() {foldFunc(cm, cm.getCursor().line);}, 50); | |
| } | |
| return true; | |
| } | |
| } | |
| window.editor = CodeMirror.fromTextArea(te, { | |
| mode: "javascript", | |
| lineNumbers: true, | |
| lineWrapping: true, | |
| onGutterClick: foldFunc, | |
| extraKeys: {"Ctrl-Q": function(cm){foldFunc(cm, cm.getCursor().line);}} | |
| }); | |
| foldFunc(editor, 6); | |
| foldFunc(editor, 16); | |
| }; | |
| </script> | |
| <p>Demonstration of code folding using the code | |
| in <a href="../lib/util/foldcode.js"><code>foldcode.js</code></a>. | |
| Press ctrl-q or click on the gutter to fold a block, again | |
| to unfold.</p> | |
| </body> | |
| </html> | |