File modules/editor/codemirror/demo/tern.html

Last commit: Tue May 22 22:39:54 2018 +0200	Jan Dankert	Fix für PHP 7.2: 'Object' darf nun nicht mehr als Klassennamen verwendet werden. AUCH NICHT IN EINEM NAMESPACE! WTF, wozu habe ich das in einen verfickten Namespace gepackt? Wozu soll der sonst da sein??? Amateure. Daher nun notgedrungen unbenannt in 'BaseObject'.


     1 <!doctype html>
     2 
     3 <title>CodeMirror: Tern Demo</title>
     4 <meta charset="utf-8"/>
     5 <link rel=stylesheet href="../doc/docs.css">
     6 
     7 <link rel="stylesheet" href="../lib/codemirror.css">
     8 <link rel="stylesheet" href="../addon/dialog/dialog.css">
     9 <link rel="stylesheet" href="../addon/hint/show-hint.css">
    10 <link rel="stylesheet" href="../addon/tern/tern.css">
    11 <script src="../lib/codemirror.js"></script>
    12 <script src="../mode/javascript/javascript.js"></script>
    13 <script src="../addon/dialog/dialog.js"></script>
    14 <script src="../addon/hint/show-hint.js"></script>
    15 <script src="../addon/tern/tern.js"></script>
    16 <script src="//ternjs.net/node_modules/acorn/dist/acorn.js"></script>
    17 <script src="//ternjs.net/node_modules/acorn/dist/acorn_loose.js"></script>
    18 <script src="//ternjs.net/node_modules/acorn/dist/walk.js"></script>
    19 <script src="//ternjs.net/doc/demo/polyfill.js"></script>
    20 <script src="//ternjs.net/lib/signal.js"></script>
    21 <script src="//ternjs.net/lib/tern.js"></script>
    22 <script src="//ternjs.net/lib/def.js"></script>
    23 <script src="//ternjs.net/lib/comment.js"></script>
    24 <script src="//ternjs.net/lib/infer.js"></script>
    25 <script src="//ternjs.net/plugin/doc_comment.js"></script>
    26 <style>
    27       .CodeMirror {border: 1px solid #ddd;}
    28     </style>
    29 <div id=nav>
    30   <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
    31 
    32   <ul>
    33     <li><a href="../index.html">Home</a>
    34     <li><a href="../doc/manual.html">Manual</a>
    35     <li><a href="https://github.com/codemirror/codemirror">Code</a>
    36   </ul>
    37   <ul>
    38     <li><a class=active href="#">Tern</a>
    39   </ul>
    40 </div>
    41 
    42 <article>
    43 <h2>Tern Demo</h2>
    44 <form><textarea id="code" name="code">// Use ctrl-space to complete something
    45 // Put the cursor in or after an expression, press ctrl-o to
    46 // find its type
    47 
    48 var foo = ["array", "of", "strings"];
    49 var bar = foo.slice(0, 2).join("").split("a")[0];
    50 
    51 // Works for locally defined types too.
    52 
    53 function CTor() { this.size = 10; }
    54 CTor.prototype.hallo = "hallo";
    55 
    56 var baz = new CTor;
    57 baz.
    58 
    59 // You can press ctrl-q when the cursor is on a variable name to
    60 // rename it. Try it with CTor...
    61 
    62 // When the cursor is in an argument list, the arguments are
    63 // shown below the editor.
    64 
    65 [1].reduce(  );
    66 
    67 // And a little more advanced code...
    68 
    69 (function(exports) {
    70   exports.randomElt = function(arr) {
    71     return arr[Math.floor(arr.length * Math.random())];
    72   };
    73   exports.strList = "foo".split("");
    74   exports.intList = exports.strList.map(function(s) { return s.charCodeAt(0); });
    75 })(window.myMod = {});
    76 
    77 var randomStr = myMod.randomElt(myMod.strList);
    78 var randomInt = myMod.randomElt(myMod.intList);
    79 </textarea></form>
    80 
    81 <p>Demonstrates integration of <a href="http://ternjs.net/">Tern</a>
    82 and CodeMirror. The following keys are bound:</p>
    83 
    84 <dl>
    85   <dt>Ctrl-Space</dt><dd>Autocomplete</dd>
    86   <dt>Ctrl-O</dt><dd>Find docs for the expression at the cursor</dd>
    87   <dt>Ctrl-I</dt><dd>Find type at cursor</dd>
    88   <dt>Alt-.</dt><dd>Jump to definition (Alt-, to jump back)</dd>
    89   <dt>Ctrl-Q</dt><dd>Rename variable</dd>
    90   <dt>Ctrl-.</dt><dd>Select all occurrences of a variable</dd>
    91 </dl>
    92 
    93 <p>Documentation is sparse for now. See the top of
    94 the <a href="../addon/tern/tern.js">script</a> for a rough API
    95 overview.</p>
    96 
    97 <script>
    98   function getURL(url, c) {
    99     var xhr = new XMLHttpRequest();
   100     xhr.open("get", url, true);
   101     xhr.send();
   102     xhr.onreadystatechange = function() {
   103       if (xhr.readyState != 4) return;
   104       if (xhr.status < 400) return c(null, xhr.responseText);
   105       var e = new Error(xhr.responseText || "No response");
   106       e.status = xhr.status;
   107       c(e);
   108     };
   109   }
   110 
   111   var server;
   112   getURL("//ternjs.net/defs/ecmascript.json", function(err, code) {
   113     if (err) throw new Error("Request for ecmascript.json: " + err);
   114     server = new CodeMirror.TernServer({defs: [JSON.parse(code)]});
   115     editor.setOption("extraKeys", {
   116       "Ctrl-Space": function(cm) { server.complete(cm); },
   117       "Ctrl-I": function(cm) { server.showType(cm); },
   118       "Ctrl-O": function(cm) { server.showDocs(cm); },
   119       "Alt-.": function(cm) { server.jumpToDef(cm); },
   120       "Alt-,": function(cm) { server.jumpBack(cm); },
   121       "Ctrl-Q": function(cm) { server.rename(cm); },
   122       "Ctrl-.": function(cm) { server.selectName(cm); }
   123     })
   124     editor.on("cursorActivity", function(cm) { server.updateArgHints(cm); });
   125   });
   126 
   127   var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
   128     lineNumbers: true,
   129     mode: "javascript"
   130   });
   131 </script>
   132 
   133   </article>



Download modules/editor/codemirror/demo/tern.html


History
Tue, 22 May 2018 22:39:54 +0200	Jan Dankert	Fix für PHP 7.2: 'Object' darf nun nicht mehr als Klassennamen verwendet werden. AUCH NICHT IN EINEM NAMESPACE! WTF, wozu habe ich das in einen verfickten Namespace gepackt? Wozu soll der sonst da sein??? Amateure. Daher nun notgedrungen unbenannt in 'BaseObject'.