Inline Widget Demo
1
var widgets = []
2
function updateHints() {
3
editor.operation(function(){
4
for (var i = 0; i < widgets.length; ++i)
5
editor.removeLineWidget(widgets[i]);
6
widgets.length = 0;
7
8
JSHINT(editor.getValue());
9
for (var i = 0; i < JSHINT.errors.length; ++i) {
10
var err = JSHINT.errors[i];
11
if (!err) continue;
12
var msg = document.createElement("div");
13
var icon = msg.appendChild(document.createElement("span"));
14
icon.innerHTML = "!!";
15
icon.className = "lint-error-icon";
16
msg.appendChild(document.createTextNode(err.reason));
17
msg.className = "lint-error";
18
widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
19
}
20
});
21
var info = editor.getScrollInfo();
22
var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
23
if (info.top + info.clientHeight < after)
24
editor.scrollTo(null, after - info.clientHeight + 3);
25
}
26
27
window.onload = function() {
28
var sc = document.getElementById("script");
29
var content = sc.textContent || sc.innerText || sc.innerHTML;
30
31
window.editor = CodeMirror(document.getElementById("code"), {
32
lineNumbers: true,
33
mode: "javascript",
34
value: content
35
});
36
37
var waiting;
38
editor.on("change", function() {
39
clearTimeout(waiting);
40
waiting = setTimeout(updateHints, 500);
41
});
42
43
setTimeout(updateHints, 100);
44
};
45
46
"long line to create a horizontal scrollbar, in order to test whether the (non-inline) widgets stay in place when scrolling to the right";
47
This demo runs JSHint over the code in the editor (which is the script used on this page), and inserts line widgets to display the warnings that JSHint comes up with.