-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsnabbt.html
115 lines (94 loc) · 4.67 KB
/
snabbt.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Snabbt Tern Demo</title>
<!-- CodeMirror -->
<link rel="stylesheet" href="resources/codemirror/lib/codemirror.css">
<script src="resources/codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="resources/codemirror/theme/eclipse.css">
<script src="resources/codemirror/addon/hint/show-hint.js"></script>
<script src="resources/codemirror/addon/edit/closetag.js"></script>
<script src="resources/codemirror/addon/edit/closebrackets.js"></script>
<script src="resources/codemirror/addon/edit/matchbrackets.js"></script>
<script src="resources/codemirror/addon/selection/active-line.js"></script>
<script src="resources/codemirror/addon/runmode/runmode.js"></script>
<script src="resources/codemirror/mode/javascript/javascript.js"></script>
<!-- Tern JS -->
<script src="resources/ternjs/acorn/acorn.js"></script>
<script src="resources/ternjs/acorn/acorn_loose.js"></script>
<script src="resources/ternjs/acorn/util/walk.js"></script>
<script src="resources/ternjs/tern/lib/signal.js"></script>
<script src="resources/ternjs/tern/lib/tern.js"></script>
<script src="resources/ternjs/tern/lib/def.js"></script>
<script src="resources/ternjs/tern/lib/comment.js"></script>
<script src="resources/ternjs/tern/lib/infer.js"></script>
<script src="../snabbt.js"></script>
<!-- Official CodeMirror Tern addon -->
<script src="resources/codemirror/addon/tern/tern.js"></script>
<!-- Extension of CodeMirror Tern addon -->
<link rel="stylesheet" href="resources/codemirror-javascript/addon/hint/tern/tern-extension.css">
<script src="resources/codemirror-javascript/addon/hint/tern/tern-extension.js"></script>
<script src="resources/codemirror-javascript/addon/hint/tern/defs/ecma5.json.js"></script>
<script src="resources/codemirror-javascript/addon/hint/tern/defs/browser.json.js"></script>
<!-- CodeMirror Extension -->
<link rel="stylesheet" href="resources/codemirror-extension/addon/hint/show-hint-eclipse.css">
<script src="resources/codemirror-extension/addon/hint/show-context-info.js"></script>
<link rel="stylesheet" href="resources/codemirror-extension/addon/hint/show-context-info.css">
<link rel="stylesheet" href="resources/codemirror-extension/addon/hint/templates-hint.css">
<script src="resources/codemirror-extension/addon/hint/templates-hint.js"></script>
<!-- CodeMirror Javascript -->
<script src="resources/codemirror-javascript/addon/hint/javascript/javascript-templates.js"></script>
<!-- Tern Hover -->
<link rel="stylesheet" href="resources/codemirror-extension/addon/hover/text-hover.css">
<script src="resources/codemirror-extension/addon/hover/text-hover.js"></script>
<script src="resources/codemirror-javascript/addon/hint/tern/tern-hover.js"></script>
<link rel="stylesheet" href="resources/codemirror/doc/docs.css">
</head>
<body>
<h1>Demo with Snabbt Tern plugin</h1>
<p>See <a href="https://github.com/daniel-lundin/tern-snabbt">https://github.com/daniel-lundin/tern-snabbt</a> for more infos.</p>
<form><textarea id="code" name="code">sn // here Ctrl+Space shows snabbt, snabbtjs
snabbt(element, {
// here Ctrl+Space shows delay, duration, etc
})
snabbt(element, {
position: [100, 0, 0],
easing: 'ease'
}). // here Ctrl+Space shows then
snabbtjs. // here Ctrl+Space shows ident, mult, etc
</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: {"snabbt" : {}}}
});
</script>
</body>
</html>