Skip to content

Instantly share code, notes, and snippets.

@hogeika

hogeika/test.html

Forked from karino2/test.html
Created February 24, 2012 07:38
Show Gist options
  • Save hogeika/1898774 to your computer and use it in GitHub Desktop.
Save hogeika/1898774 to your computer and use it in GitHub Desktop.
Download ZIP
EquationPad
Raw
test.html
<html>
<head>
<style type="text/css">
.selectedTarget { background-color: red}
</style>
</head>
<body onload="onload()">
test.
<script language="javascript">
function assertEq(exp, act) {
if(exp != act)
alert("not equal [" + exp + "] and [" + act + "]");
}
function assertNeq(exp, act) {
if(exp == act)
alert("not equal [" + exp + "] and [" + act + "]");
}
function $(id) {
return document.getElementById(id);
}
var g_id = 1;
function IdGen() {
return g_id++;
}
function MnOrMi(term) {
if(term instanceof Number){
return "<mn id=\"" + term.objId + "\">" + term + "</mn>";
}
if(term instanceof String){
return "<mi id=\"" + term.objId + "\">" + term + "</mi>";
}
throw "Unknow terminal";
}
function EvalTerm(builder, term){
if(term instanceof Array){
builder.push("<mfenced id=\"");
builder.push(term.objId);
builder.push("\"><mrow>");
builder.push(JsonToMathML(term));
builder.push("</mrow></mfenced>");
}else{
builder.push(MnOrMi(term));
}
}
function JsonToMathML(json) {
var tag = json[0];
if(tag == "+" || tag == "*")
{
var builder = [];
var len = json.length;
EvalTerm(builder, json[1]);
for(var i = 2; i < len; i++) {
builder.push("<mo>");
builder.push(tag);
builder.push("</mo>");
EvalTerm(builder,json[i]);
}
return builder.join("");
}
throw "unknown tag";
}
function dp(st) {
var con = $("console");
con.value += st + "\n";
}
function showMath(str) {
var header ="<math id=\"mathcanvas\" display=\"block\" xmlns=\"http://www.w3.org/1998/Math/MathML\">"
var footer ="</math>"
var math = $("mathcanvas");
math.innerHTML = header + str + footer;
}
function onClear() {
var con = $("console");
con.value = '';
}
var g_hash = {};
function JsonParser(str) {
var sexp = eval(str);
var res = [];
res.objId = IdGen();
g_hash[res.objId] = res;
for(var i = 0; i < sexp.length; i++) {
var obj;
if(typeof(sexp[i]) == "number")
obj = new Number(sexp[i]);
else if(typeof(sexp[i]) == "string")
obj = new String(sexp[i]);
else if(sexp[i] instanceof Array)
obj = JsonParser(sexp[i]);
else
obj = sexp[i];
obj.objId = IdGen();
g_hash[obj.objId] = obj;
res.push(obj);
obj.parent = res;
}
assertNeq(res, sexp);
return res;
}
var g_sexp;
function clicked() {
var inp = $("input");
g_sexp = JsonParser(inp.value);
var result = JsonToMathML(g_sexp);
dp(result);
showMath(result);
// alert(inp.value);
}
function Update(sexp) {
var result = JsonToMathML(sexp);
dp(result);
showMath(result);
if(g_selected) {
var elem = $(g_selected.obj.objId);
elem.setAttribute("class", "selectedTarget");
g_selected.elem = elem;
}
}
function FindIndex(arr, obj) {
for(var i = 0; i < arr.length; i++) {
if(arr[i] == obj)
return i;
}
return -1;
}
function MoveLeftTerm(sel) {
var parent = sel.obj.parent;
var i = FindIndex(parent, sel.obj);
if(i == 1)
return;
assertEq(parent[i], sel.obj);
var prev = parent[i-1];
parent[i] = prev;
parent[i-1] = sel.obj;
}
function MoveRightTerm(sel) {
var parent = sel.obj.parent;
var i = FindIndex(parent, sel.obj);
if(i == parent.length -1 )
return;
assertEq(parent[i], sel.obj);
var next = parent[i+1];
parent[i] = next;
parent[i+1] = sel.obj;
}
var g_selected = undefined;
function onload() {
var canv = $("mathcanvas");
canv.addEventListener("click", function(evt) {
var id = evt.target.getAttribute("id");
g_selected = {obj: g_hash[id], elem: evt.target};
g_selected.elem.setAttribute("class", "selectedTarget");
// alert(g_selected.elem);
});
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
document.body.addEventListener("keypress", function(evt) {
if(evt.keyCode == KEY_LEFT) {
MoveLeftTerm(g_selected);
Update(g_sexp);
} else if (evt.keyCode == KEY_RIGHT) {
MoveRightTerm(g_selected);
Update(g_sexp);
}
// alert(evt.keyCode);
});
// alert(document.getElementById("hoge"));
//document.getElementById("hoge").addEventListener("click", function() {
// alert("clicked!"); } );
/*
document.getElementById("x").addEventListener("click", function() {
alert("x!"); } );
document.getElementById("d").addEventListener("click", function() {
alert("d!"); } );
*/
}
</script>
<br>
<textarea id="input" rows="10" cols="100" ></textarea><br>
<textarea id="console" rows="10" cols="100" ></textarea><br>
<input value="OK" type="button" onclick="clicked();">
<input value="Clear" type="button" onclick="onClear();">
<br>
<!--
<math id="mathcanvas" display="block" xmlns="http://www.w3.org/1998/Math/MathML">
</math>
-->
<div id="mathcanvas"></div>
以下は適当な例。<br>
<math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
<mn> 3 </mn>
<mo> + </mo>
<mn> 4 </mn>
</math>
<math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow id="hoge">
<munderover>
<mo>&int;</mo>
<mn>0</mn>
<mn>1</mn>
</munderover>
<mrow>
<msup>
<mi>e</mi>
<mi id="x">x</mi>
</msup>
<mi id="d">d</mi>
<mi>x</mi>
</mrow>
</mrow>
</math>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mfenced>
<mrow>
<mi> a </mi>
<mo> + </mo>
<mi> b </mi>
</mrow>
</mfenced>
</math>
以下はダメ
<math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<cn type="complex-cartesian"> 12.3 <sep/> 5 </cn>
<bind id="outer"><csymbol cd="fns1">lambda</csymbol>
<bvar><ci>x</ci></bvar>
<apply><ci>f</ci>
<bind id="inner"><csymbol cd="fns1">lambda</csymbol>
<bvar><ci>x</ci></bvar>
<share id="copy" href="#orig"/>
</bind>
<apply id="orig"><ci>g</ci><ci>x</ci></apply>
</apply>
</bind>
</mrow>
</math>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment