Refactor most of the javascript

Summary: Move MJLite into its own file, make a module. Now includes underscore.

Test Plan: Make sure it still parses stuff.

Reviewers: spicyj

Reviewed By: spicyj

CC: divad12

Differential Revision: http://phabricator.benalpert.com/D32

MJLite.js

@@ -0,0 +1,108 @@
+var MJLite = (function() {
+
+    var buildExpression = function(expression) {
+        return _.map(expression, function(ex, i) {
+            var prev = i > 0 ? expression[i-1] : null;
+
+            return buildGroup(ex, prev);
+        });
+    };
+
+    var makeSpan = function(className, children) {
+        var span = document.createElement("span");
+        span.className = className;
+
+        if (_.isArray(children)) {
+            _.each(children, function(v) {
+                span.appendChild(v);
+            });
+        } else if (children) {
+            span.appendChild(children);
+        }
+
+        return span;
+    };
+
+    var buildGroup = function(group, prev) {
+        if (group.type === "ord") {
+            return makeSpan("mord", mathit(group.value));
+        } else if (group.type === "bin") {
+            var className = "mbin";
+            if (prev == null || prev.type === "bin" || prev.type === "open") {
+                group.type = "ord";
+                elem.className = "mord";
+            }
+            return makeSpan(className, mathit(group.value));
+        } else if (group.type === "sup") {
+            var sup = makeSpan("msup", buildExpression(group.value.sup));
+            return makeSpan("mord", buildExpression(group.value.base).concat(sup));
+        } else if (group.type === "sub") {
+            var sub = makeSpan("msub", buildExpression(group.value.sub, sub));
+            return makeSpan("mord", buildExpression(group.value.base, elem).concat(sub));
+        } else if (group.type === "supsub") {
+            var sup = makeSpan("msup", buildExpression(group.value.sup, sup));
+            var sub = makeSpan("msub", buildExpression(group.value.sub, sub));
+
+            var supsub = makeSpan("msupsub", [sup, sub]);
+
+            return makeSpan("mord", buildExpression(group.value.base, elem).concat(supsub));
+        } else if (group.type === "open") {
+            return makeSpan("mopen", mathit(group.value));
+        } else if (group.type === "close") {
+            return makeSpan("mclose", mathit(group.value));
+        } else if (group.type === "cdot") {
+            return makeSpan("mbin", textit("cdot"));
+        } else if (group.type === "frac") {
+            var numer = makeSpan("mfracnum", buildExpression(group.value.numer, numer));
+            var mid = makeSpan("mfracmid", makeSpan());
+            var denom = makeSpan("mfracden", buildExpression(group.value.denom, denom));
+
+            return makeSpan("mord mfrac", [numer, mid, denom]);
+        } else {
+            console.log("Unknown type:", group.type);
+        }
+    };
+
+    var charLookup = {
+        '*': '\u2217',
+        '-': '\u2212',
+        'cdot': '\u22C5'
+    };
+
+    var textit = function(value) {
+        if (value in charLookup) {
+            value = charLookup[value];
+        }
+        return document.createTextNode(value);
+    };
+
+    var mathit = function(value) {
+        var text = textit(value);
+
+        if (/[a-zA-Z]/.test(value)) {
+            return makeSpan("mathit", text);
+        } else {
+            return text;
+        }
+    };
+
+    var clearNode = function(node) {
+        var children = node.childNodes;
+        for (var i = children.length - 1; i >= 0; i--) {
+            node.removeChild(children[i]);
+        }
+    };
+
+    var process = function(toParse, baseElem) {
+        var tree = parser.parse(toParse);
+        clearNode(baseElem);
+        _.each(buildExpression(tree), function(elem) {
+            baseElem.appendChild(elem);
+        });
+    };
+
+    return {
+        process: process
+    };
+
+})();

build.js

@@ -1,163 +0,0 @@
-var doParse = function(toparse, baseelem) {
-    var makeex = function(ex, base) {
-        for (var i = 0; i < ex.length; i++) {
-            var prev = i > 0 ? ex[i-1] : null;
-            var group = makegroup(ex[i], prev);
-            base.appendChild(group);
-        }
-
-        return base;
-    };
-
-    var makegroup = function(group, prev) {
-        if (group.type === "ord") {
-            var elem = document.createElement("span");
-            elem.className = "mord";
-            elem.appendChild(mathit(group.value));
-            return elem;
-        } else if (group.type === "bin") {
-            var elem = document.createElement("span");
-            if (prev == null || prev.type === "bin" || prev.type === "open") {
-                group.type = "ord";
-                elem.className = "mord";
-            } else {
-                elem.className = "mbin";
-            }
-            elem.appendChild(mathit(group.value));
-            return elem;
-        } else if (group.type === "sup") {
-            var elem = document.createElement("span");
-            elem.className = "mord";
-            makeex(group.value.base, elem);
-
-            var sup = document.createElement("span");
-            sup.className = "msup";
-            makeex(group.value.sup, sup);
-
-            elem.appendChild(sup);
-
-            return elem;
-        } else if (group.type === "sub") {
-            var elem = document.createElement("span");
-            elem.className = "mord";
-            makeex(group.value.base, elem);
-
-            var sub = document.createElement("span");
-            sub.className = "msub";
-            makeex(group.value.sub, sub);
-
-            elem.appendChild(sub);
-
-            return elem;
-        } else if (group.type === "supsub") {
-            var elem = document.createElement("span");
-            elem.className = "mord";
-            makeex(group.value.base, elem);
-
-            var supsub = document.createElement("span");
-            supsub.className = "msupsub";
-
-            var sup = document.createElement("span");
-            sup.className = "msup";
-            makeex(group.value.sup, sup);
-
-            var sub = document.createElement("span");
-            sub.className = "msub";
-            makeex(group.value.sub, sub);
-
-            supsub.appendChild(sup);
-            supsub.appendChild(sub);
-
-            elem.appendChild(supsub);
-
-            return elem;
-        } else if (group.type === "open") {
-            var elem = document.createElement("span");
-            elem.className = "mopen";
-            elem.appendChild(mathit(group.value));
-            return elem;
-        } else if (group.type === "close") {
-            var elem = document.createElement("span");
-            elem.className = "mclose";
-            elem.appendChild(mathit(group.value));
-            return elem;
-        } else if (group.type === "cdot") {
-            var elem = document.createElement("span");
-            elem.className = "mbin";
-            elem.appendChild(textit('\u22C5'));
-            return elem;
-        } else if (group.type === "frac") {
-            var frac = document.createElement("span");
-            frac.className = "mord mfrac";
-
-            var numer = document.createElement("span");
-            numer.className = "mfracnum";
-            makeex(group.value.numer, numer);
-
-            var mid = document.createElement("span");
-            mid.className = "mfracmid";
-            mid.appendChild(document.createElement("span"));
-
-            var denom = document.createElement("span");
-            denom.className = "mfracden";
-            makeex(group.value.denom, denom);
-
-            frac.appendChild(numer);
-            frac.appendChild(mid);
-            frac.appendChild(denom);
-
-            return frac;
-        } else {
-            console.log(group.type);
-        }
-    };
-
-    var charLookup = {
-        '*': '\u2217',
-        '-': '\u2212',
-        'cdot': '\u22C5'
-    };
-
-    var textit = function(value) {
-        if (value in charLookup) {
-            value = charLookup[value];
-        }
-        return document.createTextNode(value);
-    };
-
-    var mathit = function(value) {
-        var text = textit(value);
-
-        if (/[a-zA-Z]/.test(value)) {
-            var elem = document.createElement("span");
-            elem.className = "mathit";
-            elem.appendChild(text);
-            return elem;
-        } else {
-            return text;
-        }
-    };
-
-    var tree = parser.parse(toparse);
-    clearNode(baseelem);
-    makeex(tree, baseelem);
-};
-
-var clearNode = function(node) {
-    var children = node.childNodes;
-    for (var i = children.length - 1; i >= 0; i--) {
-        console.log(children[i]);
-        node.removeChild(children[i]);
-    }
-};
-
-window.onload = function() {
-    var input = document.getElementById("input");
-    var math = document.getElementById("math");
-
-    doParse(input.value, math);
-
-    input.oninput = function() {
-        doParse(input.value, math);
-    };
-};

index.html

@@ -2,8 +2,10 @@
 <html>
     <head>
         <title>MJLite Test</title>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js" type="text/javascript"></script>
         <script src="parser.js" type="text/javascript"></script>
-        <script src="build.js" type="text/javascript"></script>
+        <script src="MJLite.js" type="text/javascript"></script>
+        <script src="main.js" type="text/javascript"></script>
         <link href="style.css" rel="stylesheet" type="text/css">
     </head>
     <body>

main.js

@@ -0,0 +1,10 @@
+window.onload = function() {
+    var input = document.getElementById("input");
+    var math = document.getElementById("math");
+
+    MJLite.process(input.value, math);
+
+    input.oninput = function() {
+        MJLite.process(input.value, math);
+    };
+};