commit d2fa50c8361a91e393e4b06fc39003ba371f16c0
parent 506c0b389b4111eb2b5777ca3c5c2bb0e49aee5b
Author: Emily Eisenberg <xymostech@gmail.com>
Date: Fri, 5 Jul 2013 20:34:24 -0700
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
Diffstat:
| A | MJLite.js | | | 108 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| D | build.js | | | 163 | ------------------------------------------------------------------------------- |
| M | index.html | | | 4 | +++- |
| A | main.js | | | 10 | ++++++++++ |
4 files changed, 121 insertions(+), 164 deletions(-)
diff --git a/MJLite.js b/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
+ };
+
+})();
diff --git a/build.js b/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);
- };
-};
diff --git a/index.html b/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>
diff --git a/main.js b/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);
+ };
+};
