Mercurial > jsparser

changeset 11:49145e1db3e5

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
added an interactive tokenization display.
author Atul Varma <varmaa@toolness.com>
date Sat, 30 May 2009 16:38:20 -0700
parents 8de776b8ed31
children 485783e3b54c
files jsparser.css jsparser.html parser-demo.js
diffstat 3 files changed, 50 insertions(+), 19 deletions(-) [+]
line wrap: on
line diff
--- /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;
+}
--- 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 @@
 <html>
 <head>
+  <link rel="stylesheet" type="text/css" media="all"
+        href="jsparser.css" />
   <title>jsparser demo</title>
 </head>
 <body>
@@ -8,8 +10,10 @@
 5+(1-3) * 4+       
      -4
 </pre>
-<p>Output</p>
-<pre class="output"></pre>
+<p>Tokenization</p>
+<pre class="tokenization"></pre>
+<p>Parse Tree</p>
+<pre class="parse-tree"></pre>
 </body>
 <script src="jquery.js"></script>
 <script src="jsparser.js"></script>
--- 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 = $('<span class="token"></span>');
+        node.text(token.value);
+        node.hover(
+          function onIn() {
+            var overlay = $('<div class="overlay"></div>');
+            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());
   });