diff --git a/MJLite.js b/MJLite.js new file mode 100644 index 000000000..c257ae4c3 --- /dev/null +++ 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 deleted file mode 100644 index 3404dc950..000000000 --- a/build.js +++ /dev/null @@ -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 index 36edfd787..00457936a 100644 --- a/index.html +++ b/index.html @@ -2,8 +2,10 @@ MJLite Test + - + + diff --git a/main.js b/main.js new file mode 100644 index 000000000..13d0e598e --- /dev/null +++ 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); + }; +};