diff options
Diffstat (limited to 'help3/xhpeditor/cm/demo/tern.html')
-rw-r--r-- | help3/xhpeditor/cm/demo/tern.html | 133 |
1 files changed, 133 insertions, 0 deletions
diff --git a/help3/xhpeditor/cm/demo/tern.html b/help3/xhpeditor/cm/demo/tern.html new file mode 100644 index 00000000..c6834e88 --- /dev/null +++ b/help3/xhpeditor/cm/demo/tern.html @@ -0,0 +1,133 @@ +<!doctype html> + +<title>CodeMirror: Tern Demo</title> +<meta charset="utf-8"/> +<link rel=stylesheet href="../doc/docs.css"> + +<link rel="stylesheet" href="../lib/codemirror.css"> +<link rel="stylesheet" href="../addon/dialog/dialog.css"> +<link rel="stylesheet" href="../addon/hint/show-hint.css"> +<link rel="stylesheet" href="../addon/tern/tern.css"> +<script src="../lib/codemirror.js"></script> +<script src="../mode/javascript/javascript.js"></script> +<script src="../addon/dialog/dialog.js"></script> +<script src="../addon/hint/show-hint.js"></script> +<script src="../addon/tern/tern.js"></script> +<script src="//ternjs.net/node_modules/acorn/dist/acorn.js"></script> +<script src="//ternjs.net/node_modules/acorn-loose/dist/acorn-loose.js"></script> +<script src="//ternjs.net/node_modules/acorn-walk/dist/walk.js"></script> +<script src="//ternjs.net/doc/demo/polyfill.js"></script> +<script src="//ternjs.net/lib/signal.js"></script> +<script src="//ternjs.net/lib/tern.js"></script> +<script src="//ternjs.net/lib/def.js"></script> +<script src="//ternjs.net/lib/comment.js"></script> +<script src="//ternjs.net/lib/infer.js"></script> +<script src="//ternjs.net/plugin/doc_comment.js"></script> +<style> + .CodeMirror {border: 1px solid #ddd;} + </style> +<div id=nav> + <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> + + <ul> + <li><a href="../index.html">Home</a> + <li><a href="../doc/manual.html">Manual</a> + <li><a href="https://github.com/codemirror/codemirror">Code</a> + </ul> + <ul> + <li><a class=active href="#">Tern</a> + </ul> +</div> + +<article> +<h2>Tern Demo</h2> +<form><textarea id="code" name="code">// Use ctrl-space to complete something +// Put the cursor in or after an expression, press ctrl-o to +// find its type + +var foo = ["array", "of", "strings"]; +var bar = foo.slice(0, 2).join("").split("a")[0]; + +// Works for locally defined types too. + +function CTor() { this.size = 10; } +CTor.prototype.hallo = "hallo"; + +var baz = new CTor; +baz. + +// You can press ctrl-q when the cursor is on a variable name to +// rename it. Try it with CTor... + +// When the cursor is in an argument list, the arguments are +// shown below the editor. + +[1].reduce( ); + +// And a little more advanced code... + +(function(exports) { + exports.randomElt = function(arr) { + return arr[Math.floor(arr.length * Math.random())]; + }; + exports.strList = "foo".split(""); + exports.intList = exports.strList.map(function(s) { return s.charCodeAt(0); }); +})(window.myMod = {}); + +var randomStr = myMod.randomElt(myMod.strList); +var randomInt = myMod.randomElt(myMod.intList); +</textarea></form> + +<p>Demonstrates integration of <a href="http://ternjs.net/">Tern</a> +and CodeMirror. The following keys are bound:</p> + +<dl> + <dt>Ctrl-Space</dt><dd>Autocomplete</dd> + <dt>Ctrl-O</dt><dd>Find docs for the expression at the cursor</dd> + <dt>Ctrl-I</dt><dd>Find type at cursor</dd> + <dt>Alt-.</dt><dd>Jump to definition (Alt-, to jump back)</dd> + <dt>Ctrl-Q</dt><dd>Rename variable</dd> + <dt>Ctrl-.</dt><dd>Select all occurrences of a variable</dd> +</dl> + +<p>Documentation is sparse for now. See the top of +the <a href="../addon/tern/tern.js">script</a> for a rough API +overview.</p> + +<script> + function getURL(url, c) { + var xhr = new XMLHttpRequest(); + xhr.open("get", url, true); + xhr.send(); + xhr.onreadystatechange = function() { + if (xhr.readyState != 4) return; + if (xhr.status < 400) return c(null, xhr.responseText); + var e = new Error(xhr.responseText || "No response"); + e.status = xhr.status; + c(e); + }; + } + + var server; + getURL("//ternjs.net/defs/ecmascript.json", function(err, code) { + if (err) throw new Error("Request for ecmascript.json: " + err); + server = new CodeMirror.TernServer({defs: [JSON.parse(code)]}); + editor.setOption("extraKeys", { + "Ctrl-Space": function(cm) { server.complete(cm); }, + "Ctrl-I": function(cm) { server.showType(cm); }, + "Ctrl-O": function(cm) { server.showDocs(cm); }, + "Alt-.": function(cm) { server.jumpToDef(cm); }, + "Alt-,": function(cm) { server.jumpBack(cm); }, + "Ctrl-Q": function(cm) { server.rename(cm); }, + "Ctrl-.": function(cm) { server.selectName(cm); } + }) + editor.on("cursorActivity", function(cm) { server.updateArgHints(cm); }); + }); + + var editor = CodeMirror.fromTextArea(document.getElementById("code"), { + lineNumbers: true, + mode: "javascript" + }); +</script> + + </article> |