Annotation of loncom/html/adm/LC_math_editor/test.html, revision 1.3
1.1 damieng 1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>Math editor test</title>
6: <style>
7: div.eqnbox { margin: 1em }
8: textarea.math { font-family: monospace; height: 3em; width: 100%; }
9: </style>
1.2 damieng 10: <script>
11: function addField() {
12: var div = document.createElement('div');
13: div.classList.add('eqnbox');
14: var input = document.createElement('input');
15: input.classList.add('math');
16: input.setAttribute('data-implicit_operators', 'true');
17: input.setAttribute('data-unit_mode', 'true');
18: input.setAttribute('data-constants', 'c, pi, e, hbar, amu');
19: input.setAttribute('spellcheck', 'false');
20: div.appendChild(input);
21: var removeb = document.createElement('button');
22: removeb.appendChild(document.createTextNode('remove'));
23: removeb.addEventListener('click', function(e) {
24: div.parentNode.removeChild(div);
25: initEditors();
26: }, false);
27: div.appendChild(removeb);
28: var modeb = document.createElement('button');
29: modeb.appendChild(document.createTextNode('switch mode'));
30: modeb.addEventListener('click', function(e) {
31: if (input.getAttribute('data-unit_mode') == 'true')
32: input.setAttribute('data-unit_mode', 'false');
33: else
34: input.setAttribute('data-unit_mode', 'true');
35: initEditors();
36: }, false);
37: div.appendChild(modeb);
38: document.body.appendChild(div);
39: initEditors();
40: }
41: </script>
1.1 damieng 42: </head>
43: <body>
44: <p>Strict syntax, symbolic mode:</p>
45: <div class="eqnbox">
46: <textarea class="math" spellcheck="false" autofocus="autofocus"></textarea>
47: </div>
48: <p>Strict syntax, unit mode (no variable):</p>
49: <div class="eqnbox">
50: <textarea class="math" data-unit_mode="true" data-constants="c, pi, e, hbar, amu" spellcheck="false" autofocus="autofocus"></textarea>
51: </div>
52: <p>Lax syntax, symbolic mode:</p>
53: <div class="eqnbox">
54: <textarea class="math" data-implicit_operators="true" spellcheck="false" autofocus="autofocus"></textarea>
55: </div>
56: <p>Lax syntax, unit mode:</p>
57: <div class="eqnbox">
58: <textarea class="math" data-implicit_operators="true" data-unit_mode="true" data-constants="c, pi, e, hbar, amu" spellcheck="false" autofocus="autofocus"></textarea>
59: </div>
60: <div class="eqnbox">
1.2 damieng 61: Test in a field <input class="math" data-implicit_operators="true" spellcheck="false" autofocus="autofocus"> with text around (Lax syntax, symbolic mode)
62: </div>
63: <div style="position: absolute; left: 500px; top: 400px; background: rgba(200, 255, 200, 0.7)">
64: inside an absolute position div (lax symbolic)<br>
65: <textarea class="math" data-implicit_operators="true" spellcheck="false" autofocus="autofocus"></textarea>
1.1 damieng 66: </div>
1.2 damieng 67: <p><button onclick="addField();">click to add a field</button></p>
68: <p>static math on a line: <span class="math" data-implicit_operators="true">2x/(3y)</span></p>
69: <p>static math as a block:</p>
70: <div class="math" data-implicit_operators="true">2x/(3y)</div>
1.1 damieng 71: <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=MML_HTMLorMML"></script>
72: <script src="src/definitions.js"></script>
73: <script src="src/enode.js"></script>
74: <script src="src/operator.js"></script>
75: <script src="src/parse_exception.js"></script>
76: <script src="src/parser.js"></script>
77: <script src="src/token.js"></script>
78: <script src="src/tokenizer.js"></script>
79: <script src="src/ui.js"></script>
80: <script>
81: window.addEventListener('load', function(e) {
1.2 damieng 82: initEditors(); // will be LCMATH.initEditors() with the minimized version
83: updateMathSpanAndDiv(); // will be LCMATH.updateMathSpanAndDiv()
1.1 damieng 84: }, false);
85: </script>
86: </body>
87: </html>
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>