tern-aui2.0.x
Version:
A Tern plugin adding AlloyUI 2.x support.
111 lines (90 loc) • 4.54 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: Javascript - Lint + Hint with Tern demo</title>
<!-- CodeMirror -->
<link rel="stylesheet" href="../../codemirror/lib/codemirror.css">
<script src="../../codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="../../codemirror/theme/eclipse.css">
<script src="../../codemirror/addon/hint/show-hint.js"></script>
<script src="../../codemirror/addon/edit/closetag.js"></script>
<script src="../../codemirror/addon/edit/closebrackets.js"></script>
<script src="../../codemirror/addon/edit/matchbrackets.js"></script>
<script src="../../codemirror/addon/selection/active-line.js"></script>
<script src="../../codemirror/addon/runmode/runmode.js"></script>
<script src="../../codemirror/mode/javascript/javascript.js"></script>
<script src="../../jshint/jshint-r12-80277ef.js"></script>
<script src="../../codemirror/addon/lint/lint.js"></script>
<link rel="stylesheet" href="../../codemirror/addon/lint/lint.css">
<script src="../../codemirror/addon/lint/javascript-lint.js"></script>
<!-- Tern JS -->
<script src="../../ternjs/acorn/acorn.js"></script>
<script src="../../ternjs/acorn/acorn_loose.js"></script>
<script src="../../ternjs/acorn/util/walk.js"></script>
<script src="../../ternjs/tern/lib/signal.js"></script>
<script src="../../ternjs/tern/lib/tern.js"></script>
<script src="../../ternjs/tern/lib/def.js"></script>
<script src="../../ternjs/tern/lib/comment.js"></script>
<script src="../../ternjs/tern/lib/infer.js"></script>
<script src="../../ternjs/tern/plugin/cordovajs.js"></script>
<!-- Official CodeMirror Tern addon -->
<script src="../../codemirror/addon/tern/tern.js"></script>
<!-- Extension of CodeMirror Tern addon -->
<link rel="stylesheet" href="../addon/hint/tern/tern-extension.css">
<script src="../addon/hint/tern/tern-extension.js"></script>
<script src="../addon/hint/tern/defs/ecma5.json.js"></script>
<script src="../addon/hint/tern/defs/browser.json.js"></script>
<!-- CodeMirror Extension -->
<link rel="stylesheet" href="../../codemirror-extension/addon/hint/show-hint-eclipse.css">
<script src="../../codemirror-extension/addon/hint/show-context-info.js"></script>
<link rel="stylesheet" href="../../codemirror-extension/addon/hint/show-context-info.css">
<link rel="stylesheet" href="../../codemirror-extension/addon/hint/templates-hint.css">
<script src="../../codemirror-extension/addon/hint/templates-hint.js"></script>
<!-- CodeMirror Javascript -->
<script src="../addon/hint/javascript/javascript-templates.js"></script>
<!-- Tern Hover -->
<link rel="stylesheet" href="../../codemirror-extension/addon/hover/text-hover.css">
<script src="../../codemirror-extension/addon/hover/text-hover.js"></script>
<script src="../addon/hint/tern/tern-hover.js"></script>
<link rel="stylesheet" href="../../codemirror/doc/docs.css">
</head>
<body>
<h1>Demo with Tern plugin CordovaJS </h1>
<form><textarea id="code" name="code">co //<-Ctrl+Space shows cordova
cordova. //<-Ctrl+Space shows cordova object's members:
</textarea></form>
<script type="text/javascript">
function passAndHint(cm) {
setTimeout(function() {cm.execCommand("autocomplete");}, 100);
return CodeMirror.Pass;
}
function myHint(cm) {
return CodeMirror.showHint(cm, CodeMirror.ternHint, {async: true});
}
CodeMirror.commands.autocomplete = function(cm) {
CodeMirror.showHint(cm, myHint);
}
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: 'application/javascript',
theme : "eclipse",
styleActiveLine: true,
lineNumbers: true,
lineWrapping: true,
autoCloseBrackets: true,
matchBrackets: true,
extraKeys: {
"'.'": passAndHint,
"Ctrl-Space": "autocomplete",
"Ctrl-I": function(cm) { CodeMirror.tern.showType(cm); },
"Alt-.": function(cm) { CodeMirror.tern.jumpToDef(cm); },
"Alt-,": function(cm) { CodeMirror.tern.jumpBack(cm); },
"Ctrl-Q": function(cm) { CodeMirror.tern.rename(cm); }
},
gutters: ["CodeMirror-linenumbers"],
textHover: {delay:300},
ternWith: { plugins: {"cordovajs" : "../cordovajs"}}
});
</script>
</body>
</html>