|
|
@@ -0,0 +1,117 @@
|
|
|
+<!DOCTYPE HTML>
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
|
+ <title>Mathematical term rewriting frontend</title>
|
|
|
+ <script type="text/javascript" src="../../../external/mathjax/unpacked/MathJax.js?config=trs"></script>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+
|
|
|
+ <style>
|
|
|
+ html {
|
|
|
+ background-color: #ccc;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 20px;
|
|
|
+ font: 16px/24px Verdana, Arial, sans;
|
|
|
+ }
|
|
|
+
|
|
|
+ .panel {
|
|
|
+ border: 3px solid #bbb;
|
|
|
+ background-color: #fff;
|
|
|
+ width: 47%;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+
|
|
|
+ #input {
|
|
|
+ float:left;
|
|
|
+ left: 2%;
|
|
|
+ }
|
|
|
+
|
|
|
+ #input textarea {
|
|
|
+ width: 100%;
|
|
|
+ border: 0;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: visible;
|
|
|
+ font: 16px/24px Verdana, Arial, sans;
|
|
|
+ }
|
|
|
+
|
|
|
+ #math {
|
|
|
+ float:right;
|
|
|
+ right: 2%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box {
|
|
|
+ height: 380px;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #math .box {
|
|
|
+ height: 384px;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ </style>
|
|
|
+
|
|
|
+ <div id="input" class="panel">
|
|
|
+ <div class="box">
|
|
|
+ <textarea id="MathInput"></textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="math" class="panel">
|
|
|
+ <div class="box" id="box" style="visibility:hidden">
|
|
|
+ <div id="MathOutput">$${}$$</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script type="text/javascript">
|
|
|
+ (function () {
|
|
|
+ var QUEUE = MathJax.Hub.queue; // shorthand for the queue
|
|
|
+ var math = null, box = null; // the element jax for the math output, and the box it's in
|
|
|
+
|
|
|
+ // Hide and show the box (so it doesn't flicker as much)
|
|
|
+ var hide_box = function () {box.style.visibility = "hidden"}
|
|
|
+ var show_box = function () {box.style.visibility = "visible"}
|
|
|
+
|
|
|
+ // Get the element jax when MathJax has produced it.
|
|
|
+ QUEUE.Push(function () {
|
|
|
+ math = MathJax.Hub.getAllJax("MathOutput")[0];
|
|
|
+ box = document.getElementById("box");
|
|
|
+ show_box();
|
|
|
+
|
|
|
+ var trigger_update = true,
|
|
|
+ input_box = document.getElementById("MathInput");
|
|
|
+
|
|
|
+ input_box.onkeydown = input_box.onchange = function(e){
|
|
|
+ trigger_update = true;
|
|
|
+ };
|
|
|
+
|
|
|
+ // The onchange event handler that typesets the math entered
|
|
|
+ // by the user. Hide the box, then typeset, then show it again
|
|
|
+ // so we don't see a flash as the math is cleared and replaced.
|
|
|
+ var update_math = function (tex) {
|
|
|
+ //var start = '\\begin{equation}\\begin{split}';
|
|
|
+ //var end = '\\end{split}\\end{equation}';
|
|
|
+ //tex = start + tex.replace(/\n/g, end + start) + end;
|
|
|
+ tex = '\\displaystyle{' + tex.replace(/\n/g, '\\\\') + '}';
|
|
|
+ QUEUE.Push(hide_box, ["Text", math, tex], show_box);
|
|
|
+ }
|
|
|
+
|
|
|
+ setInterval(function() {
|
|
|
+ if (trigger_update) {
|
|
|
+ trigger_update = false;
|
|
|
+ update_math(input_box.value);
|
|
|
+ }
|
|
|
+ }, 50);
|
|
|
+ });
|
|
|
+ })();
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
Sander Mathijs van Veen