# HG changeset patch # User Atul Varma # Date 1243726700 25200 # Node ID 49145e1db3e5ab427415931dcfd8ac7e60d97549 # Parent 8de776b8ed316c3034e14603ba6da1acef84ae57 added an interactive tokenization display. diff -r 8de776b8ed31 -r 49145e1db3e5 jsparser.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jsparser.css Sat May 30 16:38:20 2009 -0700 @@ -0,0 +1,23 @@ +body { + font-family: helvetica, arial, sans-serif; + font-size: 9pt; +} + +pre { + font-family: monaco, monospace; +} + +.overlay { + position: absolute; + background: rgba(0, 0, 0, 0.5); + color: white; + padding: 0.5em; +} + +.highlight { + background-color: yellow; +} + +.tokenization { + cursor: pointer; +} diff -r 8de776b8ed31 -r 49145e1db3e5 jsparser.html --- a/jsparser.html Sat May 30 16:08:25 2009 -0700 +++ b/jsparser.html Sat May 30 16:38:20 2009 -0700 @@ -1,5 +1,7 @@ + jsparser demo @@ -8,8 +10,10 @@ 5+(1-3) * 4+ -4 -

Output

-

+
Tokenization

+

+
Parse Tree

+

 
 
 
diff -r 8de776b8ed31 -r 49145e1db3e5 parser-demo.js
--- a/parser-demo.js	Sat May 30 16:08:25 2009 -0700
+++ b/parser-demo.js	Sat May 30 16:38:20 2009 -0700
@@ -42,27 +42,31 @@
 
 $(window).ready(
   function() {
-    function print(text) {
-      var node = document.createTextNode(text.toString() + '\n');
-      $('.output').append(node);
-    }
-
     var code = $('.input').text();
     var tokens = Parsing.tokenize({lexicon: MyLexicon,
                                    text: code});
 
-    function printTokens(tokens) {
-      tokens.forEach(
-        function(token) {
-          var repr = token.name;
-          if (token.value)
-            repr += ":" + token.value;
-          repr += " @L" + token.lineNo + ":" + token.charNo;
-          print(repr);
-        });
-    }
+    jQuery.each(
+      tokens,
+      function() {
+        var token = this;
+        var node = $('');
+        node.text(token.value);
+        node.hover(
+          function onIn() {
+            var overlay = $('
');
+            overlay.text(token.name);
+            overlay.css({left: $(this).position().left});
+            $(this).append(overlay);
+            $(this).addClass("highlight");
+          },
+          function onOut() {
+            $(".overlay", this).remove();
+            $(this).removeClass("highlight");
+          });
+        $('.tokenization').append(node);
+      });
 
-    printTokens(tokens);
     var parser = new Parsing.Parser(tokens);
-    print(parser.parse());
+    $('.parse-tree').text(parser.parse().toString());
   });