source: trunk/plugins/Equation/popups/dialog.html

Last change on this file was 1254, checked in by gogo, 9 years ago

Tickets #1209 and #1182
Upgrade Equation to use new AsciiMath?, fix multiple equation editing.
Thanks to Niraj Bhawnani of University of New South Wales.

  • Property svn:keywords set to LastChangedDate LastChangedRevision LastChangedBy HeadURL Id
File size: 17.3 KB
Line 
1<!DOCTYPE html
2     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6<head>
7  <title>AsciiMath Formula Input</title>
8  <script type="text/javascript" src="../../../popups/popup.js"></script>
9  <script type="text/javascript" src="../ASCIIMathML.js"></script>
10  <link rel="stylesheet" type="text/css" href="../../../popups/popup.css" />
11
12  <style type="text/css">
13        /* <![CDATA[ */
14        #outputNode,#inputText,#mathml {
15                padding:5px;
16                background-color:white;
17                width:98%;
18                height:200px;
19                font-size:1.3em;
20                border: 1px solid darkgrey;
21                overflow:auto;
22        }
23        #clickInput {
24                width:100%;
25                border-collapse:collapse;
26                background-color: white;
27                text-align:center;
28        }
29        #clickInput td {
30                border: thin solid gray;
31                cursor:pointer;
32                font-size:1.1em;
33               
34        }
35        h3 {
36                font-size:1.6em;
37        }
38        /* ]]> */
39  </style>
40  <script type="text/javascript">
41 // <![CDATA[
42// START - Added for compatibility with ASCIIMathML 2.0
43var AMtranslated = false;
44// Next 2 functions copied from ASCIIMathML 1.4.7
45function AMcreateElementXHTML(t) {
46  if (isIE) return document.createElement(t);
47  else return document.createElementNS("http://www.w3.org/1999/xhtml", t);
48}
49function AMinitSymbols() {
50  var texsymbols = [], i;
51  for (i=0; i<AMsymbols.length; i++)
52    if (AMsymbols[i].tex)
53      texsymbols[texsymbols.length] = {input:AMsymbols[i].tex,
54        tag:AMsymbols[i].tag, output:AMsymbols[i].output, ttype:AMsymbols[i].ttype};
55  AMsymbols = AMsymbols.concat(texsymbols);
56  AMsymbols.sort(compareNames);
57  for (i=0; i<AMsymbols.length; i++) AMnames[i] = AMsymbols[i].input;
58}
59// END - Added for compatibility with ASCIIMathML 2.0
60
61   window.resizeTo(500, 300);
62var showasciiformulaonhover = false;
63if (typeof Xinha == "undefined")
64        Xinha = window.opener.Xinha;
65
66function i18n(str) {
67  return (Xinha._lc(str, 'Equation'));
68}
69function set (string)
70{
71        var inputField = document.getElementById("inputText");
72        inputField.value += string;
73        preview();
74        inputField.focus();
75        return false;
76}
77function preview() {
78  if (document.getElementById("inputText") != '') {
79      var str = document.getElementById("inputText").value;
80      var outnode = document.getElementById("outputNode");
81      var newnode = AMcreateElementXHTML("div");
82      newnode.setAttribute("id","outputNode");
83      outnode.parentNode.replaceChild(newnode,outnode);
84      outnode = document.getElementById("outputNode");
85      var n = outnode.childNodes.length;
86      for (var i = 0; i < n; i++)
87        outnode.removeChild(outnode.firstChild);
88      outnode.appendChild(document.createTextNode("`"+str+"`"));
89      AMprocessNode(outnode,true);
90  }
91}
92function Init() {
93        __dlg_translate('Equation');
94        __dlg_init();
95        var param = window.dialogArguments;
96        var cfg = param["editor"].config;
97       
98        mathcolor = cfg.Equation.mathcolor;
99        mathfontfamily = cfg.Equation.mathfontfamily;
100       
101        translate();
102        var inputField = document.getElementById("inputText");
103       
104        if (param["editedNode"] && param["editedNode"].tagName.toLowerCase() == 'span')
105        {
106                var formula = param["editedNode"].getAttribute("title").replace(/^`*(.*?)`*$/m,"$1");
107                if (!formula) formula = param["editedNode"].innerHTML.replace(/^`*(.*?)`*$/m,"$1");
108                inputField.value = formula;
109                preview();
110        }
111        else inputField.value = '';
112        inputField.focus();
113}
114 
115function onOK() {
116       
117 var param = {
118        "editedNode":window.dialogArguments.editedNode,
119        "formula" : document.getElementById("inputText").value
120 };
121 
122 __dlg_close(param);
123  return false;
124}
125
126function onCancel() {
127  __dlg_close(null);
128  return false;
129}
130
131function translate() {
132  if (!AMtranslated) { // run this only once
133    AMtranslated = true;
134    AMinitSymbols();
135    AMprocessNode(document.getElementById("clickInput"),true);
136    preview();
137  }
138}
139window.onload = Init;
140
141function AMnode2string(inNode,indent) {
142// thanks to James Frazer for contributing an initial version of this function
143   var i, str = "";
144   if(inNode.nodeType == 1) {
145       var name = inNode.nodeName.toLowerCase(); // (IE fix)
146       str = "\r" + indent + "<" + name;
147       for(i=0; i < inNode.attributes.length; i++)
148           if (inNode.attributes[i].nodeValue!="italic" &&
149               inNode.attributes[i].nodeValue!="" &&  //stop junk attributes
150               inNode.attributes[i].nodeValue!="inherit" && // (mostly IE)
151               inNode.attributes[i].nodeValue!=undefined &&
152               inNode.attributes[i].nodeName[0] != '-'
153               )
154               str += " "+inNode.attributes[i].nodeName+"="+
155                     "\""+inNode.attributes[i].nodeValue+"\"";
156       if (name == "math")
157           str += " xmlns=\"http://www.w3.org/1998/Math/MathML\"";
158       str += ">";
159       for(i=0; i<inNode.childNodes.length; i++)
160           str += AMnode2string(inNode.childNodes[i], indent+"  ");
161       if (name != "mo" && name != "mi" && name != "mn") str += "\r"+indent;
162       str += "</" + name + ">";
163   }
164   else if(inNode.nodeType == 3) {
165       var st = inNode.nodeValue;
166       for (i=0; i<st.length; i++)
167           if (st.charCodeAt(i)<32 || st.charCodeAt(i)>126)
168               str += "&#"+st.charCodeAt(i)+";";
169           else if (st.charAt(i)=="<" && indent != "  ") str += "&lt;";
170           else if (st.charAt(i)==">" && indent != "  ") str += "&gt;";
171           else if (st.charAt(i)=="&" && indent != "  ") str += "&amp;";
172           else str += st.charAt(i);
173   }
174   return str;
175}
176function showMathML()
177{
178        var math = document.getElementById("outputNode").getElementsByTagName("math")[0];
179        if (math)
180                math.parentNode.innerHTML = '<pre>'+Xinha.htmlEncode(AMnode2string(math,''))+'</pre>';
181}
182// ]]>
183</script>
184
185</head>
186
187<body class="dialog">
188<div class="title">AsciiMath Formula Input</div>
189<!--
190Table modified from CharacterMap for ASCIIMathML by Peter Jipsen
191HTMLSource based on HTMLArea XTD 1.5 (http://mosforge.net/projects/htmlarea3xtd/) modified by Holger Hees
192Original Author - Bernhard Pfeifer novocaine@gmx.net
193-->
194<table  id="clickInput">
195<tr>
196<td colspan="3" class="character" title="(x+1)/(x-1)" onclick="set('(x+1)/(x-1)')">`(x+1)/(x-1)`</td>
197<td colspan="2" class="character" title="x^(m+n)" onclick="set('x^(m+n)')">`x^(m+n)`</td>
198<td colspan="2" class="character" title="x_(mn)" onclick="set('x_(mn)')">`x_(mn)`</td>
199<td colspan="2" class="character" title="sqrt(x)" onclick="set('sqrt(x)')">`sqrt(x)`</td>
200<td colspan="3" class="character" title="root(n)(x)" onclick="set('root(n)(x)')">`root(n)(x)`</td>
201<td colspan="2" class="character" title="&quot;text&quot;" onclick="set('&quot;text&quot;')">`&quot;text&quot;`</td>
202<td colspan="2" class="character" style="cursor:default"></td>
203</tr><tr>
204<td colspan="2" class="character" title="dy/dx" onclick="set('dy/dx')">`dy/dx`</td>
205<td colspan="3" class="character" title="lim_(x-&gt;oo)" onclick="set('lim_(x-&gt;oo)')">`lim_(x-&gt;oo)`</td>
206<td colspan="3" class="character" title="sum_(n=1)^oo" onclick="set('sum_(n=1)^oo')">`sum_(n=1)^oo`</td>
207<td colspan="3" class="character" title="int_a^bf(x)dx" onclick="set('int_a^bf(x)dx')">`int_a^bf(x)dx`</td>
208<td colspan="3" class="character" title="[[a,b],[c,d]]" onclick="set('[[a,b],[c,d]]')">`[[a,b],[c,d]]`</td>
209<td colspan="2" class="character" title="((n),(k))" onclick="set('((n),(k))')">`((n),(k))`</td>
210</tr><tr>
211<td class="character" title="*" onclick="set('*')">`*`</td>
212<td class="character" title="**" onclick="set('**')">`**`</td>
213<td class="character" title="//" onclick="set('//')">`//`</td>
214<td class="character" title="\\" onclick="set('\\\\')">`\\`</td>
215<td class="character" title="xx" onclick="set('xx')">`xx`</td>
216<td class="character" title="-:" onclick="set('-:')">`-:`</td>
217<td class="character" title="@" onclick="set('@')">`@`</td>
218<td class="character" title="o+" onclick="set('o+')">`o+`</td>
219<td class="character" title="ox" onclick="set('ox')">`ox`</td>
220<td class="character" title="o." onclick="set('o.')">`o.`</td>
221<td class="character" title="sum" onclick="set('sum')">`sum`</td>
222<td class="character" title="prod" onclick="set('prod')">`prod`</td>
223<td class="character" title="^^" onclick="set('^^')">`^^`</td>
224<td class="character" title="^^^" onclick="set('^^^')"><span style="font-size:larger">`&and;`</span></td>
225<td class="character" title="vv" onclick="set('vv')">`vv`</td>
226<td class="character" title="vvv" onclick="set('vvv')"><span style="font-size:larger">`&or;`</span></td>
227</tr><tr>
228<td class="character" title="!=" onclick="set('!=')">`!=`</td>
229<td class="character" title="&lt;=" onclick="set('&lt;=')">`&lt;=`</td>
230<td class="character" title="&gt;=" onclick="set('&gt;=')">`&gt;=`</td>
231<td class="character" title="-&lt;" onclick="set('-&lt;')">`-&lt;`</td>
232<td class="character" title="&gt;-" onclick="set('&gt;-')">`&gt;-`</td>
233<td class="character" title="in" onclick="set('in')">`in`</td>
234<td class="character" title="!in" onclick="set('!in')">`!in`</td>
235<td class="character" title="sub" onclick="set('sub')">`sub`</td>
236<td class="character" title="sup" onclick="set('sup')">`sup`</td>
237<td class="character" title="sube" onclick="set('sube')">`sube`</td>
238<td class="character" title="supe" onclick="set('supe')">`supe`</td>
239<td class="character" title="O/" onclick="set('O/')">`O/`</td>
240<td class="character" title="nn" onclick="set('nn')">`nn`</td>
241<td class="character" title="nnn" onclick="set('nnn')"><span style="font-size:larger">`&cap;`</span></td>
242<td class="character" title="uu" onclick="set('uu')">`uu`</td>
243<td class="character" title="uuu" onclick="set('uuu')"><span style="font-size:larger">`&cup;`</span></td>
244</tr><tr>
245<td class="character" title="and" onclick="set('and')">`and`</td>
246<td class="character" title="or" onclick="set('or')">`or`</td>
247<td class="character" title="not" onclick="set('not')">`not`</td>
248<td class="character" title="=&gt;" onclick="set('==&gt;')">`=&gt;`</td>
249<td class="character" title="if" onclick="set('if')">`if`</td>
250<td class="character" title="&lt;=&gt;" onclick="set('&lt;=&gt;')">`&lt;=&gt;`</td>
251<td class="character" title="AA" onclick="set('AA')">`AA`</td>
252<td class="character" title="EE" onclick="set('EE')">`EE`</td>
253<td class="character" title="_|_" onclick="set('_|_')">`_|_`</td>
254<td class="character" title="TT" onclick="set('TT')">`TT`</td>
255<td class="character" title="|--" onclick="set('|--')">`|--`</td>
256<td class="character" title="|==" onclick="set('|==')">`|==`</td>
257<td class="character" title="-=" onclick="set('-=')">`-=`</td>
258<td class="character" title="~=" onclick="set('~=')">`~=`</td>
259<td class="character" title="~~" onclick="set('~~')">`~~`</td>
260<td class="character" title="prop" onclick="set('prop')">`prop`</td>
261</tr><tr>
262<td class="character" title="int" onclick="set('int')">`int`</td>
263<td class="character" title="oint" onclick="set('oint')">`oint`</td>
264<td class="character" title="del" onclick="set('del')">`del`</td>
265<td class="character" title="grad" onclick="set('grad')">`grad`</td>
266<td class="character" title="+-" onclick="set('+-')">`+-`</td>
267<td class="character" title="oo" onclick="set('oo')">`oo`</td>
268<td class="character" title="aleph" onclick="set('aleph')">`aleph`</td>
269<td class="character" title="quad" onclick="set('quad')">`quad`</td>
270<td class="character" title="diamond" onclick="set('diamond')">`diamond`</td>
271<td class="character" title="square" onclick="set('square')">`square`</td>
272<td class="character" title="|__" onclick="set('|__')">`|__`</td>
273<td class="character" title="__|" onclick="set('__|')">`__|`</td>
274<td class="character" title="|~" onclick="set('|~')">`|~`</td>
275<td class="character" title="~|" onclick="set('~|')">`~|`</td>
276<td class="character" title="&lt;x&gt;" onclick="set('&lt;x&gt;')">`&lt;x&gt;`</td>
277<td class="character" title="/_" onclick="set('/_')">`/_`</td>
278</tr><tr>
279<td class="character" title="uarr" onclick="set('uarr')">`uarr`</td>
280<td class="character" title="darr" onclick="set('darr')">`darr`</td>
281<td class="character" title="larr" onclick="set('larr')">`larr`</td>
282<td class="character" title="-&gt;" onclick="set('-&gt;')">`-&gt;`</td>
283<td class="character" title="|-&gt;" onclick="set('|-&gt;')">`|-&gt;`</td>
284<td class="character" title="harr" onclick="set('harr')">`harr`</td>
285<td class="character" title="lArr" onclick="set('lArr')">`lArr`</td>
286<td class="character" title="rArr" onclick="set('rArr')">`rArr`</td>
287<td class="character" title="hArr" onclick="set('hArr')">`hArr`</td>
288<td class="character" title="hata" onclick="set('hat')">`hata`</td>
289<td class="character" title="ula" onclick="set('ul')">`ula`</td>
290<td class="character" title="dota" onclick="set('dot')">`dota`</td>
291<td class="character" title="ddota" onclick="set('ddot')">`ddota`</td>
292<td class="character" title="veca" onclick="set('vec')">`veca`</td>
293<td class="character" title="bara" onclick="set('bar')">`bara`</td>
294<td class="character" title=":." onclick="set(':.')">`:.`</td>
295</tr><tr>
296<td class="character" title="NN" onclick="set('NN')">`NN`</td>
297<td class="character" title="ZZ" onclick="set('ZZ')">`ZZ`</td>
298<td class="character" title="QQ" onclick="set('QQ')">`QQ`</td>
299<td class="character" title="RR" onclick="set('RR')">`RR`</td>
300<td class="character" title="CC" onclick="set('CC')">`CC`</td>
301<td class="character" title="bba" onclick="set('bb')">`bba`</td>
302<td class="character" title="bbba" onclick="set('bbb')">`bbba`</td>
303<td class="character" title="cca" onclick="set('cc')">`cca`</td>
304<td class="character" title="fra" onclick="set('fr')">`fra`</td>
305<td class="character" title="sfa" onclick="set('sf')">`sfa`</td>
306<td class="character" title="tta" onclick="set('tt')">`tta`</td>
307<td colspan="4" class="character" title="stackrel(-&gt;)(+)" onclick="set('stackrel(-&gt;)(+)')">`stackrel(-&gt;)(+)`</td>
308<td class="character" title="upsilon" onclick="set('upsilon')">`upsilon`</td>
309</tr><tr>
310<td class="character" title="alpha" onclick="set('alpha')">`alpha`</td>
311<td class="character" title="beta" onclick="set('beta')">`beta`</td>
312<td class="character" title="gamma" onclick="set('gamma')">`gamma`</td>
313<td class="character" title="Gamma" onclick="set('Gamma')">`Gamma`</td>
314<td class="character" title="delta" onclick="set('delta')">`delta`</td>
315<td class="character" title="Delta" onclick="set('Delta')">`Delta`</td>
316<td class="character" title="epsi" onclick="set('epsi')">`epsi`</td>
317<td class="character" title="zeta" onclick="set('zeta')">`zeta`</td>
318<td class="character" title="eta" onclick="set('eta')">`eta`</td>
319<td class="character" title="theta" onclick="set('theta')">`theta`</td>
320<td class="character" title="Theta" onclick="set('Theta')">`Theta`</td>
321<td class="character" title="iota" onclick="set('iota')">`iota`</td>
322<td class="character" title="kappa" onclick="set('kappa')">`kappa`</td>
323<td class="character" title="lambda" onclick="set('lambda')">`lambda`</td>
324<td class="character" title="Lambda" onclick="set('Lambda')">`Lambda`</td>
325<td class="character" title="mu" onclick="set('mu')">`mu`</td>
326</tr><tr>
327<td class="character" title="nu" onclick="set('nu')">`nu`</td>
328<td class="character" title="pi" onclick="set('pi')">`pi`</td>
329<td class="character" title="Pi" onclick="set('Pi')">`Pi`</td>
330<td class="character" title="rho" onclick="set('rho')">`rho`</td>
331<td class="character" title="sigma" onclick="set('sigma')">`sigma`</td>
332<td class="character" title="Sigma" onclick="set('Sigma')">`Sigma`</td>
333<td class="character" title="tau" onclick="set('tau')">`tau`</td>
334<td class="character" title="xi" onclick="set('xi')">`xi`</td>
335<td class="character" title="Xi" onclick="set('Xi')">`Xi`</td>
336<td class="character" title="phi" onclick="set('phi')">`phi`</td>
337<td class="character" title="Phi" onclick="set('Phi')">`Phi`</td>
338<td class="character" title="chi" onclick="set('chi')">`chi`</td>
339<td class="character" title="psi" onclick="set('psi')">`psi`</td>
340<td class="character" title="Psi" onclick="set('Psi')">`Psi`</td>
341<td class="character" title="omega" onclick="set('omega')">`omega`</td>
342<td class="character" title="Omega" onclick="set('Omega')">`Omega`</td>
343</tr>
344</table>
345<form action="javascript:void(0);">
346<table style="width: 100%;border:none">
347  <tr>
348    <td style="width:50%">Input</td><td style="width:50%"><input type="button" onclick="showMathML()" style="float:right;font-size:10px" value="Show MathML" /><span>Preview</span></td>
349  </tr>
350  <tr>
351    <td>
352    <textarea id="inputText" onkeyup="preview()"></textarea>
353    </td>
354    <td>
355    <div id="outputNode"></div>
356    <textarea id="mathml" style="display:none"></textarea>
357    </td>
358  </tr>
359  <tr><td colspan="2">
360  <span>Based on ASCIIMathML by </span><a href="http://www.chapman.edu/~jipsen" onclick="window.open(this.href,'_blank','');return false;">Peter Jipsen</a>,
361<a href="http://www.chapman.edu" onclick="window.open(this.href,'_blank','');return false;">Chapman University</a><br />
362  <span>For more information on AsciiMathML visit this page: </span><a href="http://www1.chapman.edu/~jipsen/mathml/asciimath.html" onclick="window.open(this.href,'_blank','');return false;">http://www1.chapman.edu/~jipsen/mathml/asciimath.html</a></td></tr>
363</table>
364
365<div id="buttons">
366<script type="text/javascript">
367// <![CDATA[
368if (Xinha.is_ie)
369 document.write('<span style="color:red;float:left">'+i18n('Attention Internet Explorer users: Please note that there is no WYSIWYG representation of the formula in the editor!<br />You might wish to use <a href="http://www.mozilla.com" onclick="window.open(this.href,\'_blank\');return false;">Mozilla Firefox</a> instead.')+'</span>');
370// ]]>
371</script>
372  <button type="submit" name="ok" onclick="return onOK();">OK</button>
373  <button type="button" name="cancel" onclick="return onCancel();">Cancel</button>
374</div>
375</form>
376</body>
377</html>
Note: See TracBrowser for help on using the repository browser.