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
This commit is contained in:
Emily Eisenberg
parent
506c0b389b
commit
d2fa50c836
108
MJLite.js
Normal file
108
MJLite.js
Normal file
|
|
@ -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
|
||||
};
|
||||
|
||||
})();
|
||||
163
build.js
163
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);
|
||||
};
|
||||
};
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user