--- a/js/flotr2/examples/lib/codemirror/demo/folding.html +++ b/js/flotr2/examples/lib/codemirror/demo/folding.html @@ -1,1 +1,57 @@ +<!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> +