widget.html 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CodeMirror: Inline Widget Demo</title>
  6. <link rel="stylesheet" href="../lib/codemirror.css">
  7. <script src="../lib/codemirror.js"></script>
  8. <script src="../mode/javascript/javascript.js"></script>
  9. <script src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
  10. <link rel="stylesheet" href="../doc/docs.css">
  11. <style type="text/css">
  12. .CodeMirror {border: 1px solid black;}
  13. .lint-error {font-family: arial; font-size: 70%; background: #ffa; color: #a00; padding: 2px 5px 3px; }
  14. .lint-error-icon {color: white; background-color: red; font-weight: bold; border-radius: 50%; padding: 0 3px; margin-right: 7px;}
  15. </style>
  16. </head>
  17. <body>
  18. <h1>CodeMirror: Inline Widget Demo</h1>
  19. <div id=code></div>
  20. <script id="script">var widgets = []
  21. function updateHints() {
  22. editor.operation(function(){
  23. for (var i = 0; i < widgets.length; ++i)
  24. editor.removeLineWidget(widgets[i]);
  25. widgets.length = 0;
  26. JSHINT(editor.getValue());
  27. for (var i = 0; i < JSHINT.errors.length; ++i) {
  28. var err = JSHINT.errors[i];
  29. if (!err) continue;
  30. var msg = document.createElement("div");
  31. var icon = msg.appendChild(document.createElement("span"));
  32. icon.innerHTML = "!!";
  33. icon.className = "lint-error-icon";
  34. msg.appendChild(document.createTextNode(err.reason));
  35. msg.className = "lint-error";
  36. widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
  37. }
  38. });
  39. var info = editor.getScrollInfo();
  40. var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
  41. if (info.top + info.clientHeight < after)
  42. editor.scrollTo(null, after - info.clientHeight + 3);
  43. }
  44. window.onload = function() {
  45. var sc = document.getElementById("script");
  46. var content = sc.textContent || sc.innerText || sc.innerHTML;
  47. window.editor = CodeMirror(document.getElementById("code"), {
  48. lineNumbers: true,
  49. mode: "javascript",
  50. value: content
  51. });
  52. var waiting;
  53. editor.on("change", function() {
  54. clearTimeout(waiting);
  55. waiting = setTimeout(updateHints, 500);
  56. });
  57. setTimeout(updateHints, 100);
  58. };
  59. "long line to create a horizontal scrollbar, in order to test whether the (non-inline) widgets stay in place when scrolling to the right";
  60. </script>
  61. <p>This demo runs <a href="http://jshint.com">JSHint</a> over the code
  62. in the editor (which is the script used on this page), and
  63. inserts <a href="../doc/manual.html#addLineWidget">line widgets</a> to
  64. display the warnings that JSHint comes up with.</p>
  65. </body>
  66. </html>