Skip to content

T
trs
Commit 99d5e200 authored by Sander Mathijs van Veen's avatar Sander Mathijs van Veen
Browse files
Options

Separated static files and set textAlign to left.

parent 4cd28fc0
Show whitespace changes
Inline Side-by-side
Showing with 100 additions and 97 deletions
src/frontend/css/editor.css 0 → 100644
View file @ 99d5e200
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: 380px;
padding: 10px;
}
src/frontend/js/editor.js 0 → 100644
View file @ 99d5e200
(function ($) {
var QUEUE = MathJax.Hub.queue; // shorthand for the queue
var math = null; // the element jax for the math output
// 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"}
var trigger_update = true;
// Initialise codemirror environment
var input_textarea = document.getElementById("MathInput"),
input_box = CodeMirror.fromTextArea(input_textarea, {
value: '',
mode: 'r',
matchBrackets: true,
onChange: function(f) { trigger_update = true; }
});
// Get the element jax when MathJax has produced it.
QUEUE.Push(function () {
math = MathJax.Hub.getAllJax("MathOutput")[0];
box = document.getElementById("box");
show_box();
// 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, '\\\\') + '}';
//tex = '`' + 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.getValue());
}
}, 50);
});
})(jQuery);
src/frontend/tpl/editor.html
View file @ 99d5e200
...@@ -4,62 +4,14 @@ ...@@ -4,62 +4,14 @@
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Mathematical term rewriting frontend</title> <title>Mathematical term rewriting frontend</title>
<script type="text/javascript" src="../../../build/external/jquery/jquery.min.js"></script> <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> <script type="text/javascript"
src="../../../external/mathjax/MathJax.js?config=AM_HTMLorMML-full"></script>
<link rel="stylesheet" href="../../../external/codemirror2/lib/codemirror.css">
<link rel="stylesheet" href="../../../src/frontend/css/editor.css">
<script src="../../../external/codemirror2/lib/codemirror.js"></script>
<script src="../../../external/codemirror2/mode/r/r.js"></script>
</head> </head>
<body> <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 id="input" class="panel">
<div class="box"> <div class="box">
<textarea id="MathInput"></textarea> <textarea id="MathInput"></textarea>
...@@ -68,51 +20,10 @@ ...@@ -68,51 +20,10 @@
<div id="math" class="panel"> <div id="math" class="panel">
<div class="box" id="box" style="visibility:hidden"> <div class="box" id="box" style="visibility:hidden">
<div id="MathOutput">$${}$$</div> <div id="MathOutput">``</div>
</div> </div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript" src="../../../src/frontend/js/editor.js"></script>
(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> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment