You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
275 lines
8.9 KiB
275 lines
8.9 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Dynamic Preview of Textarea with MathJax Content</title>
|
|
<!-- Copyright (c) 2012-2018 The MathJax Consortium -->
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
<style>
|
|
.changed { color: red }
|
|
</style>
|
|
|
|
<script type="text/x-mathjax-config">
|
|
MathJax.Hub.Config({
|
|
TeX: {
|
|
equationNumbers: {autoNumber: "AMS"},
|
|
extensions: ["begingroup.js"]
|
|
},
|
|
showProcessingMessages: false,
|
|
tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
|
|
});
|
|
</script>
|
|
<script type="text/javascript" src="../MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
|
|
|
<script>
|
|
var Preview = {
|
|
typeset: null, // the typeset preview area (filled in by Init below)
|
|
preview: null, // the untypeset preview (filled in by Init below)
|
|
buffer: null, // the new preview to be typeset (filled in by Init below)
|
|
numbers: [], // the equation numbers per paragraph
|
|
labels: [], // the equation labels per paragraph
|
|
defs: [], // the definitions per paragraph
|
|
|
|
oldtext: '', // used to see if an update is needed
|
|
pending: false, // true when a restart is in the MathJax queue
|
|
|
|
colorDelay: 400, // how long to leave changed paragraphs colored
|
|
timeout: null, // timeout for changed style remover
|
|
labelDelay: 1250, // how long to wait before reprocessing for label changes
|
|
ltimeout: null, // timeout for changed labels
|
|
|
|
//
|
|
// Get the preview and buffer DIV's
|
|
//
|
|
Init: function () {
|
|
this.typeset = document.getElementById("MathPreview");
|
|
this.buffer = document.createElement("div");
|
|
this.preview = document.createElement("div");
|
|
},
|
|
|
|
//
|
|
// This gets called when a key is pressed in the textarea.
|
|
//
|
|
Update: function () {
|
|
var text = document.getElementById("MathInput").value;
|
|
text = text.replace(/^\s+/,'').replace(/\s+$/,'');
|
|
if (text !== this.oldtext) {
|
|
this.oldtext = text;
|
|
if (!this.pending) {
|
|
this.pending = true;
|
|
MathJax.Hub.Queue(["Restart",this]);
|
|
}
|
|
}
|
|
},
|
|
|
|
Restart: function (clear,n) {
|
|
this.pending = false; this.incremental = true;
|
|
var text = this.oldtext.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
|
var text = "<p>"+text.replace(/\n\n+/g,"</p><p>")+"</p>";
|
|
// var text = text.replace(/\n\n+/g,"<p>");
|
|
this.buffer.innerHTML = text;
|
|
if (this.timeout) {clearTimeout(this.timeout); this.timeout = null}
|
|
if (this.ltimeout) {clearTimeout(this.ltimeout); this.ltimeout = null}
|
|
if (clear) {
|
|
this.preview.innerHTML = this.typeset.innerHTML = "";
|
|
this.numbers = []; this.labels = []; this.defs = [];
|
|
MathJax.Hub.Queue(["resetEquationNumbers",MathJax.InputJax.TeX]);
|
|
}
|
|
if (n != null) {
|
|
this.labels.splice(n); this.numbers.splice(n);
|
|
while (this.preview.childNodes.length > n) {
|
|
this.preview.removeChild(this.preview.childNodes(n));
|
|
this.typeset.removeChild(this.typeset.childNodes(n));
|
|
}
|
|
}
|
|
var update = this.CompareBuffers();
|
|
if (update.length) {
|
|
MathJax.Hub.Queue(
|
|
["Typeset",MathJax.Hub,update],
|
|
["PostTypeset",this,update,clear]
|
|
);
|
|
}
|
|
},
|
|
|
|
CompareBuffers: function () {
|
|
var i, t1, t2, update = [], n = 0;
|
|
var b1 = this.buffer.childNodes,
|
|
b2 = this.preview.childNodes,
|
|
b3 = this.typeset.childNodes;
|
|
var m1 = b1.length, m2 = b2.length, m = Math.min(m1,m2);
|
|
//
|
|
// Make sure all top-level elements are containers
|
|
//
|
|
for (i = 0; i < m1; i++) {
|
|
t1 = b1[i];
|
|
if (typeof(t1.innerHTML) === "undefined") {
|
|
this.buffer.replaceChild(document.createElement("span"),t1);
|
|
b1[i].appendChild(t1);
|
|
}
|
|
}
|
|
//
|
|
// Find first non-matching element,
|
|
// and determine the starting equation number
|
|
//
|
|
for (i = 0; i < m; i++) {
|
|
this.removeChanged(b3[i]);
|
|
t1 = b1[i].innerHTML, t2 = b2[i].innerHTML;
|
|
if (t1 !== t2) break;
|
|
n += this.numbers[i];
|
|
}
|
|
//
|
|
// Rest the equation numbers to the starting value
|
|
//
|
|
MathJax.InputJax.TeX.resetEquationNumbers(n,true);
|
|
this.i = i; this.changed = null;
|
|
this.refs = []; this.defs = [];
|
|
|
|
//
|
|
// Find last non-matching element
|
|
//
|
|
while (m1 > i && m2 > i) {
|
|
t1 = b1[--m1].innerHTML, t2 = b2[--m2].innerHTML;
|
|
this.removeChanged(b3[m2]);
|
|
if (t1 !== t2) break;
|
|
}
|
|
//
|
|
// Remove differing elements from typeset copy
|
|
// and add in the new (untypeset) elements.
|
|
//
|
|
var tail = b3[m2+1];
|
|
this.recordNumbers(this.numbers.splice(i,m2+1-i),n);
|
|
this.recordLabels(this.labels.splice(i,m2+1-i));
|
|
while (m2 >= i && b3[i]) {this.typeset.removeChild(b3[i]); m2--}
|
|
while (i <= m1 && b1[i]) {
|
|
this.numbers.splice(i,0,0); this.labels.splice(i,0,[]);
|
|
var node = b1[i].cloneNode(true); update.push(node);
|
|
this.typeset.insertBefore(node,tail); i++;
|
|
if (node.className && node.className != "")
|
|
{node.className += " changed"} else {node.className = "changed"}
|
|
}
|
|
//
|
|
// Swap buffers and set up the new buffer for the next change
|
|
//
|
|
this.preview = this.buffer; this.buffer = document.createElement("div");
|
|
return update;
|
|
},
|
|
|
|
recordNumbers: function (numbers,top) {
|
|
this.oldtop = this.newtop = top;
|
|
for (var i = 0, m = numbers.length; i < m; i++) {this.oldtop += numbers[i]}
|
|
},
|
|
|
|
recordLabels: function (labels) {
|
|
var AMS = MathJax.Extension["TeX/AMSmath"];
|
|
this.oldlabels = labels.join(','); this.newlabels = [];
|
|
if (labels && labels.length) {
|
|
for (var i = 0, m = labels.length; i < m; i++) {
|
|
for (var j = 0, n = labels[i].length; j < n; j++) {
|
|
delete AMS.labels[labels[i][j].split(/=/)[0]];
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
//
|
|
// Remove the "changed" class from an element (leaving all other classes)
|
|
//
|
|
removeChanged: function (node) {
|
|
if (node.className) {
|
|
node.className = node.className.toString()
|
|
.replace(/(^|\s+)changed(\s|$)/,"$2")
|
|
.replace(/^\s+/,"");
|
|
}
|
|
},
|
|
|
|
PostTypeset: function (nodes,clear) {
|
|
var incremental = this.incremental; this.incremental = false;
|
|
if (incremental && this.refs.length) {
|
|
var refs = this.refs; this.refs = [];
|
|
var queue = MathJax.Callback.Queue(["Reprocess",MathJax.Hub,refs,{}]);
|
|
return queue.Push(["PostTypeset",this,nodes,clear]);
|
|
}
|
|
this.changed = nodes; this.timeout = setTimeout(this.Unmark,this.colorDelay);
|
|
if (clear) return;
|
|
if (nodes.length !== this.preview.childNodes.length) {
|
|
// ### Make delay be dynamic based on number of equations? ###
|
|
if (this.newlabels && this.newlabels.join(',') !== this.oldlabels) {
|
|
this.ltimeout = setTimeout(this.Relabel,this.labelDelay);
|
|
} else if (this.newtop != this.oldtop) {
|
|
this.ltimeout = setTimeout(this.Renumber,this.labelDelay);
|
|
}
|
|
}
|
|
},
|
|
Unmark: function () {
|
|
var nodes = Preview.changed; Preview.changed = Preview.timeout = null;
|
|
for (var i = 0, m = nodes.length; i < m; i++) {Preview.removeChanged(nodes[i])}
|
|
},
|
|
Relabel: function () {
|
|
this.pending = true;
|
|
MathJax.Hub.Queue(["Restart",Preview,true]);
|
|
},
|
|
Renumber: function () {
|
|
if (Preview.i < Preview.preview.childNodes.length) {
|
|
this.pending = true;
|
|
MathJax.Hub.Queue(["Restart",Preview,false,Preview.i]);
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
|
|
MathJax.InputJax.TeX.postfilterHooks.Add(function (data) {
|
|
if (Preview.incremental) {
|
|
var AMS = MathJax.Extension["TeX/AMSmath"];
|
|
var labels = Preview.labels[Preview.i];
|
|
for (var id in AMS.eqlabels) {if (AMS.eqlabels.hasOwnProperty(id)) {
|
|
labels.push(id+"="+AMS.eqlabels[id])
|
|
}}
|
|
Preview.newlabels = Preview.newlabels.concat(labels);
|
|
}
|
|
});
|
|
});
|
|
MathJax.Hub.Register.MessageHook("End Math",function (message) {
|
|
if (Preview.incremental) {
|
|
var AMS = MathJax.Extension["TeX/AMSmath"];
|
|
Preview.numbers[Preview.i++] = AMS.startNumber - Preview.newtop;
|
|
Preview.newtop = AMS.startNumber;
|
|
}
|
|
});
|
|
MathJax.Hub.Register.MessageHook("End Math Input",function () {
|
|
if (Preview.incremental) {
|
|
var AMS = MathJax.Extension["TeX/AMSmath"];
|
|
Preview.refs = Preview.refs.concat(AMS.refs);
|
|
AMS.refs = [];
|
|
}
|
|
},5); // priority = 5 to make sure it is before AMS runs.
|
|
|
|
MathJax.Hub.Register.StartupHook("TeX begingroup Ready",function () {
|
|
var STACK = MathJax.InputJax.TeX.eqnStack;
|
|
var DEF = STACK.Def;
|
|
STACK.Def = function () {
|
|
if (Preview.incremental) {Preview.defs.push([].slice.call(arguments,0))}
|
|
DEF.apply(this,arguments);
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
Type text with embedded TeX in the box below:<br/>
|
|
|
|
<textarea id="MathInput" cols="60" rows="10" onkeyup="Preview.Update()" onkeydown="Preview.Update()" style="margin-top:5px">
|
|
</textarea>
|
|
<br/><br/>
|
|
Preview is shown here:
|
|
<div id="MathPreview" style="border:1px solid; padding: 3px; width:50%; margin-top:5px"></div>
|
|
|
|
<script>
|
|
Preview.Init();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|