nitlight_aas: use linewidgets for error messages

[nit.git] / src / examples / nitlight_as_a_service.nit
diff --git a/src/examples/nitlight_as_a_service.nit b/src/examples/nitlight_as_a_service.nit

index fa95f6c..7007b70 100644 (file)
--- a/src/examples/nitlight_as_a_service.nit
+++ b/src/examples/nitlight_as_a_service.nit
@@ -76,6 +76,26 @@ class HLCode
  
         # The pseudo source-file
         var source: SourceFile
+
+       # JavaScript code to update an existing codemirror editor.
+       fun code_mirror_update: Template
+       do
+
+               var res = new Template
+               res.add """
+       function nitmessage() {
+               editor.operation(function(){
+               for m in source.messages do
+                       res.add """
+                       var l = document.createElement("div");
+                       l.className = "lint-error"
+                       l.innerHTML = "<span class='glyphicon glyphicon-warning-sign lint-error-icon'></span> {{{m.text.html_escape}}}";
+                       var w = editor.addLineWidget({{{m.location.line_start-1}}}, l);
+"""
+               end
+               res.add """});}"""
+               return res
+       end
  end
  
  # Nitcorn service to hightlight code
@@ -88,13 +108,20 @@ class HighlightAction
         do
                 var hl = new HighlightVisitor
                 var page = new Template
+
+               # There is code? Process it
                 var code = http_request.post_args.get_or_null("code")
+               var hlcode = null
+               if code != null then hlcode = hightlightcode(hl, code)
  
                 page.add """
                 <!doctype html><html><head>{{{hl.head_content}}}
+               <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/codemirror.css">
                 <style>
                         {{{hl.css_content}}}
                         textarea {width:100%;}
+                       .lint-error {font-family: arial; font-size: 70%; background: #ffa; color: #a00; padding: 2px 5px 3px; }
+                       .lint-error-icon {color: red; padding: 0 3px; margin-right: 7px;}
                 </style></head><body>
                 """
                 # Add the form+textarea
@@ -102,10 +129,7 @@ class HighlightAction
                 <form action="#light" method=post><textarea id=code name=code rows=10>{{{code or else ""}}}</textarea><br><input type=submit></form>
                 """
  
-               if code != null then
-                       # There is code? Process it
-                       var hlcode = hightlightcode(hl, code)
-
+               if hlcode != null then
                         # Inject highlight
                         page.add "<pre id=light><code id=lightcode>"
                         page.add hl.html.write_to_string
@@ -120,7 +144,26 @@ class HighlightAction
                 end
  
                 page.add hl.foot_content
+
+               # Call codemirror
+               page.add """
+               <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.16.0/codemirror.min.js"></script>
+               <script>
+               var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+                       lineNumbers: true
+               });
+               """
+
+               # Callback to update codemirror messages
+               if hlcode != null then
+                       page.add hlcode.code_mirror_update
+               else
+                       page.add "function nitmessage()\{\}"
+               end
                 page.add """
+               nitmessage();
+
+               </script>
                 </body></html>
                 """