kristiankime/MathJax+D3 Dynamic Equations Test Page

## MathJax+D3 Dynamic Equations Test Page
<!DOCTYPE html>
<html>
<head>
<title>MathJax+D3 Dynamic Equations Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<script src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
// =========== General functions ========
// Returns the first Jax element with the given id, mostly to save typing
function jax(id) {
    return MathJax.Hub.getAllJax(id)[0];
}

// Update a Jax element with a string in TeX format
// Modified from http://docs.mathjax.org/en/latest/typeset.html
function updateJaxTeX(jax, TeX) {
    MathJax.Hub.queue.Push([ "Text", jax, "\\displaystyle{" + TeX + "}" ]);
}

// Returns the MathML associated with a Jax element
// Modified from https://groups.google.com/forum/#!msg/mathjax-users/unL8IjcrTto/DjHpH4BbPRcJ
function toMathML(jax, callback) {
    var mml;
    try {
    // Try to produce the MathML. If an asynchronous action occurs, a reset error is thrown. Otherwise we got the MathML and call the user's callback passing the MathML.
	mml = jax.root.toMathML("");
    } catch (err) {
	if (!err.restart) {
	    // This means an actual error occurred, nothing we can do but re-throw.
	    throw err;
	}
	// This means files are still loading. In this case we call this routine again after waiting for the the asynchronous action to finish.
	return MathJax.Callback.After([ toMathML, jax, callback ], err.restart);
    }
    // Pass the MathML to the user's callback
    MathJax.Callback(callback)(mml);
}

function arrayIndicies(array) {
    var ret = [];
    for ( var key in array) {
	if (key !== 'length' && array.hasOwnProperty(key)) {
	    ret.push(key);
	}
    }
    return ret;
}

function identityIsData(data) {
    return data;
}

// ================ Page Specific ==============
var savedEquations = [];

function savedEquationId(data, index) {
    return "savedEquation" + index;
}

function savedEquationHtml(data, index) {
    return '<script type="math/mml">' + data + '</script>';
}

function saveEquation() {
    toMathML(jax("MathOutput"), function(mathML) {
	savedEquations.push(mathML);
    });
}

function cleanJaxFrom(containerElement) {
    var scriptTag = containerElement.getElementsByTagName("script")[0];
    scriptTag.removeAttribute("id");
    delete scriptTag.MathJax;
}

function generateEquationHTML() {
    var select = d3.select("#savedEquations").selectAll("div").data(arrayIndicies(savedEquations), identityIsData).each(function(d, i) {
	cleanJaxFrom(this);
    });

    select.enter().append("div").attr("id", savedEquationId).html(function(d, i) {
	return savedEquationHtml(savedEquations[d], i);
    });

    select.exit().remove();
}

function generateEquationJaxByTypeset() {
    for ( var i = 0; i < savedEquations.length; i++) {
	MathJax.Hub.Queue([ "Typeset", MathJax.Hub, document.getElementById("savedEquation" + i) ]);
    }
}

function updateEquations() {
    saveEquation();
    generateEquationHTML();
    generateEquationJaxByTypeset();
}
</script>

</head>
<body>
    <p>
		Type some \(\rm\TeX\) code and press RETURN: <br> <input id="MathInput" size="80" onchange="updateJaxTeX(jax('MathOutput'), this.value)" />
	</p>

	<div id="box">
		You typed:<br>
		<div id="MathOutput">$${}$$</div>
		<br>
		<button type="button" onclick="updateEquations();">Update Equations</button>
	</div>

	<p>Saved Equations:</p>
	<div id="savedEquations"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>MathJax+D3 Dynamic Equations Test Page</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />

	<script src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	// =========== General functions ========
	// Returns the first Jax element with the given id, mostly to save typing
	function jax(id) {
	return MathJax.Hub.getAllJax(id)[0];
	}

	// Update a Jax element with a string in TeX format
	// Modified from http://docs.mathjax.org/en/latest/typeset.html
	function updateJaxTeX(jax, TeX) {
	MathJax.Hub.queue.Push([ "Text", jax, "\\displaystyle{" + TeX + "}" ]);
	}

	// Returns the MathML associated with a Jax element
	// Modified from https://groups.google.com/forum/#!msg/mathjax-users/unL8IjcrTto/DjHpH4BbPRcJ
	function toMathML(jax, callback) {
	var mml;
	try {
	// Try to produce the MathML. If an asynchronous action occurs, a reset error is thrown. Otherwise we got the MathML and call the user's callback passing the MathML.
	mml = jax.root.toMathML("");
	} catch (err) {
	if (!err.restart) {
	// This means an actual error occurred, nothing we can do but re-throw.
	throw err;
	}
	// This means files are still loading. In this case we call this routine again after waiting for the the asynchronous action to finish.
	return MathJax.Callback.After([ toMathML, jax, callback ], err.restart);
	}
	// Pass the MathML to the user's callback
	MathJax.Callback(callback)(mml);
	}

	function arrayIndicies(array) {
	var ret = [];
	for ( var key in array) {
	if (key !== 'length' && array.hasOwnProperty(key)) {
	ret.push(key);
	}
	}
	return ret;
	}

	function identityIsData(data) {
	return data;
	}

	// ================ Page Specific ==============
	var savedEquations = [];

	function savedEquationId(data, index) {
	return "savedEquation" + index;
	}

	function savedEquationHtml(data, index) {
	return '<script type="math/mml">' + data + '</script>';
	}

	function saveEquation() {
	toMathML(jax("MathOutput"), function(mathML) {
	savedEquations.push(mathML);
	});
	}

	function cleanJaxFrom(containerElement) {
	var scriptTag = containerElement.getElementsByTagName("script")[0];
	scriptTag.removeAttribute("id");
	delete scriptTag.MathJax;
	}

	function generateEquationHTML() {
	var select = d3.select("#savedEquations").selectAll("div").data(arrayIndicies(savedEquations), identityIsData).each(function(d, i) {
	cleanJaxFrom(this);
	});

	select.enter().append("div").attr("id", savedEquationId).html(function(d, i) {
	return savedEquationHtml(savedEquations[d], i);
	});

	select.exit().remove();
	}

	function generateEquationJaxByTypeset() {
	for ( var i = 0; i < savedEquations.length; i++) {
	MathJax.Hub.Queue([ "Typeset", MathJax.Hub, document.getElementById("savedEquation" + i) ]);
	}
	}

	function updateEquations() {
	saveEquation();
	generateEquationHTML();
	generateEquationJaxByTypeset();
	}
	</script>

	</head>
	<body>
	<p>
	Type some \(\rm\TeX\) code and press RETURN: <br> <input id="MathInput" size="80" onchange="updateJaxTeX(jax('MathOutput'), this.value)" />
	</p>

	<div id="box">
	You typed:<br>
	<div id="MathOutput">$${}$$</div>
	<br>
	<button type="button" onclick="updateEquations();">Update Equations</button>
	</div>

	<p>Saved Equations:</p>
	<div id="savedEquations"></div>
	</body>
	</html>