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