taddeus
/
trs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
							<!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="../../../build/external/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="../../../external/mathjax/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full"></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>