Added experimental MathJax frontend.

7aa305d1 · Sander Mathijs van Veen · 2bc65876 · 7aa305d1
Commit 7aa305d1 authored 13 years ago by Sander Mathijs van Veen
--- a/src/frontend/tpl/editor.html
+++ b/src/frontend/tpl/editor.html
+<!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>