openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

widget.html (2938B)


      1 <!doctype html>
      2 
      3 <title>CodeMirror: Inline Widget 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 <script src="../lib/codemirror.js"></script>
      9 <script src="../mode/javascript/javascript.js"></script>
     10 <script src="//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
     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 <div id=nav>
     17   <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
     18 
     19   <ul>
     20     <li><a href="../index.html">Home</a>
     21     <li><a href="../doc/manual.html">Manual</a>
     22     <li><a href="https://github.com/codemirror/codemirror">Code</a>
     23   </ul>
     24   <ul>
     25     <li><a class=active href="#">Inline Widget</a>
     26   </ul>
     27 </div>
     28 
     29 <article>
     30 <h2>Inline Widget Demo</h2>
     31 
     32 
     33     <div id=code></div>
     34     <script id="script">var widgets = []
     35 function updateHints() {
     36   editor.operation(function(){
     37     for (var i = 0; i < widgets.length; ++i)
     38       editor.removeLineWidget(widgets[i]);
     39     widgets.length = 0;
     40 
     41     JSHINT(editor.getValue());
     42     for (var i = 0; i < JSHINT.errors.length; ++i) {
     43       var err = JSHINT.errors[i];
     44       if (!err) continue;
     45       var msg = document.createElement("div");
     46       var icon = msg.appendChild(document.createElement("span"));
     47       icon.innerHTML = "!!";
     48       icon.className = "lint-error-icon";
     49       msg.appendChild(document.createTextNode(err.reason));
     50       msg.className = "lint-error";
     51       widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
     52     }
     53   });
     54   var info = editor.getScrollInfo();
     55   var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
     56   if (info.top + info.clientHeight < after)
     57     editor.scrollTo(null, after - info.clientHeight + 3);
     58 }
     59 
     60 window.onload = function() {
     61   var sc = document.getElementById("script");
     62   var content = sc.textContent || sc.innerText || sc.innerHTML;
     63 
     64   window.editor = CodeMirror(document.getElementById("code"), {
     65     lineNumbers: true,
     66     mode: "javascript",
     67     value: content
     68   });
     69 
     70   var waiting;
     71   editor.on("change", function() {
     72     clearTimeout(waiting);
     73     waiting = setTimeout(updateHints, 500);
     74   });
     75 
     76   setTimeout(updateHints, 100);
     77 };
     78 
     79 "long line to create a horizontal scrollbar, in order to test whether the (non-inline) widgets stay in place when scrolling to the right";
     80 </script>
     81 <p>This demo runs <a href="http://jshint.com">JSHint</a> over the code
     82 in the editor (which is the script used on this page), and
     83 inserts <a href="../doc/manual.html#addLineWidget">line widgets</a> to
     84 display the warnings that JSHint comes up with.</p>
     85   </article>