html5 boiler plate
[scannr.git] / js / flotr2 / examples / lib / codemirror / demo / folding.html
blob:a/js/flotr2/examples/lib/codemirror/demo/folding.html -> blob:b/js/flotr2/examples/lib/codemirror/demo/folding.html
--- 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>
+