forked from mathquill/mathquill
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
116 lines (115 loc) · 6.51 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<title>MathQuill 0.2a Demo</title>
<link rel="stylesheet" type="text/css" href="mathquill.css">
<style type="text/css">
body{
width:6.5in;
margin:0 auto;
font-family:"Times New Roman",serif;
}
code,#html-source{
font-family:"Courier New",sans-serif;
}
a#codecogslink{
text-decoration: none;
}
a#codecogslink:link span,a#codecogslink:visited span{
text-decoration: underline;
}
img#codecogs{
vertical-align:middle;
border: none;
}
span.mathquill-textbox{
width:100%;
}
#html-source{
display:none;
}
.mathquill-embedded-latex .mathquill-editable {
min-width: 1cm;
}
</style>
</head>
<body>
<h2><a href="http://laughinghan.github.com/mathquill">MathQuill 0.2α</a></h2>
<p>by Jay and <a href="http://github.com/laughinghan">Han (laughinghan)</a></p>
<p>The HTML source <code><span class="mathquill-embedded-latex">e^{i\pi}+1=0</span></code> with LaTeX math embedded in it and wrapped in an element with CSS class "mathquill-embedded-latex" get's turned into the inline equation <span class="mathquill-embedded-latex">e^{i\pi}+1=0</span>.
<p>This button runs the JavaScript code written on it to MathQuill-ify the following <code><code></code> element into an editable math textbox: <button onclick="$(this).text('$(this).next().mathquill(\'revert\')').next().mathquill('editable').focus(); var orig = arguments.callee; this.onclick = function(){ $(this).text('$(this).next().mathquill(\'editable\').focus()').next().mathquill('revert'); this.onclick = orig;$};">$(this).next().mathquill('editable').focus()</button>
<code>\frac{d}{dx}\sqrt{x} = \frac{d}{dx}x^{\frac{1}{2}} = \frac{1}{2}x^{-\frac{1}{2}} = \frac{1}{2\sqrt{x}}</code></p>
<p>MathQuill editable math: <span id="editable-math" class="mathquill-editable">\frac{d}{dx}\sqrt{x}=\frac{1}{2\sqrt{x}}</span></p>
<p><small>(You can start by trying <code>x^2</code> or <code>3/4</code> and using the arrow keys to move around. <a href="javascript:void(0)" onclick="var more = arguments.callee; this.onclick = function(){ var less = arguments.callee; this.onclick = more; $(this).html('more »').prev().remove(); }; $(this).html('less «').before('<span>You can also try using the tab key instead of arrow keys, which gets you "out" of a command, and <code>a_n</code> for subscripts. Numerous LaTeX-style commands preceded by a backslash, such as <code>\\theta</code>[space or enter], are supported as well. Another example is <code>\\sqrt</code>[space or enter]<code>2</code>.</span> ');">more »</a>)</small></p>
<p>Latex source: <textarea id="latex-source" style="width:80%;vertical-align:top"></textarea></p>
<p><button onclick="LatexImages = true; $('#editable-math').triggerHandler('keydown'); $(this).remove()">Enable</button> Code Cogs: <a id="codecogslink"><img id="codecogs" alt="LaTeX rendered as an image"> <span>Link</span></a></p>
<p><a href="javascript:void(0)" onclick="$(this).html('Hide HTML Source (Note how semantically meaningful it is)').parent().next().show(); var show = arguments.callee; this.onclick=function(){ $(this).html('Show HTML Source (Note how semantically meaningful it is)').parent().next().hide(); this.onclick = show; };">Show HTML Source (Note how semantically meaningful it is)</a></p>
<pre id="html-source"></pre>
<p>In many applications, such as a chat client, you probably type mostly normal text with some math interspersed, so we also have a MathQuill Textbox that let's you type math between $'s: <span class="mathquill-textbox">lolwut $a^2 + b^2 = c^2$. Also, awesomesauce: $\int_0^1 \sin x dx.</span></p>
<p>LaTeX math can also have textboxes inside: <span class="mathquill-embedded-latex">\int\editable{}dx</span> or even <span class="mathquill-embedded-latex">\sqrt{\editable{x^2+y^2}}</span></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript" src="build/mathquill.js"></script>
<script type="text/javascript">
var LatexImages = false;
$(function(){
function printTree(html)
{
html = html.match(/<[a-z]+|<\/[a-z]+>|./ig);
if(!html) return '';
var indent = '\n', tree = '';
while(html.length)
{
var token = html.shift();
if(token.charAt(0) === '<')
{
if(token.charAt(1) === '/')
{
indent = indent.slice(0,-2);
if(html[0] && html[0].slice(0,2) === '</')
token += indent.slice(0,-2);
}
else
{
tree += indent;
indent += ' ';
}
token = token.toLowerCase();
}
tree += token;
}
return tree.slice(1);
}
var editingSource = false, latexSource = $('#latex-source'), htmlSource = $('#html-source'), codecogs = $('#codecogs'), latexMath = $('#editable-math').bind('keydown keypress', function()
{
setTimeout(function() {
htmlSource.text(printTree(latexMath.mathquill('html')));
var latex = latexMath.mathquill('latex');
if(!editingSource)
latexSource.val(latex);
if(!LatexImages)
return;
latex = encodeURIComponent(latexSource.val());
// location.hash = '#'+latex; //extremely performance-crippling in Chrome for some reason
codecogs.attr('src','http://latex.codecogs.com/gif.latex?'+latex).parent().attr('href','http://latex.codecogs.com/gif.latex?'+latex);
});
}).keydown().focus();
if(location.hash && location.hash.length > 1)
latexMath.mathquill('latex', decodeURIComponent(location.hash.slice(1))).focus();
var textarea = latexSource.focus(function(){
editingSource = true;
}).blur(function(){
editingSource = false;
}).bind('keydown keypress', function()
{
var oldtext = textarea.val();
setTimeout(function()
{
var newtext = textarea.val();
if(newtext !== oldtext)
latexMath.mathquill('latex', newtext);
});
});
});
</script>
</body>
</html>