diff options
| author | bjorn <bjorn@bringert.net> | 2008-08-15 11:14:13 +0000 |
|---|---|---|
| committer | bjorn <bjorn@bringert.net> | 2008-08-15 11:14:13 +0000 |
| commit | 08fae303df1df7ffb2e09a3d9d5cbd378dba281c (patch) | |
| tree | 2d216a88183f30121d7cfc8bb3c77adf88ec1a0c | |
| parent | 0ce04f1a6e0237c3282be737ba2f2069e318100e (diff) | |
First working version of the AJAX translation client.
| -rw-r--r-- | src/server/MainFastCGI.hs | 4 | ||||
| -rw-r--r-- | src/server/gf-client.html | 31 | ||||
| -rw-r--r-- | src/server/gf-server-jsapi.js | 19 | ||||
| -rw-r--r-- | src/server/translator.js | 49 |
4 files changed, 94 insertions, 9 deletions
diff --git a/src/server/MainFastCGI.hs b/src/server/MainFastCGI.hs index e275d6e7e..a0ce72f9d 100644 --- a/src/server/MainFastCGI.hs +++ b/src/server/MainFastCGI.hs @@ -42,8 +42,8 @@ cgiMain pgf = mfrom <- getLang pgf "from" mto <- getLang pgf "to" outputJSON $ translate pgf input mcat mfrom mto - "/cats" -> outputJSON $ categories pgf - "/langs" -> outputJSON $ languages pgf + "/categories" -> outputJSON $ categories pgf + "/languages" -> outputJSON $ languages pgf _ -> outputNotFound path getCat :: PGF -> String -> CGI (Maybe Category) diff --git a/src/server/gf-client.html b/src/server/gf-client.html index 6a4627981..68131a44f 100644 --- a/src/server/gf-client.html +++ b/src/server/gf-client.html @@ -4,9 +4,36 @@ <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="gf-server-jsapi.js"></script> + <script type="text/javascript" src="translator.js"></script> + <script type="text/javascript"> + function updateTranslation () { + var input = document.getElementById('inputText').value; + var fromLang = document.getElementById('fromLang').value; + var toLang = document.getElementById('toLang').value; + var output = document.getElementById('output'); + var callback = function(translation) { + removeChildren(output); + output.appendChild(formatTranslation(translation)); + }; + gf.translate(input, fromLang, toLang, '', callback); + } + + function populateLangs (langs) { + var f = document.getElementById('fromLang'); + var t = document.getElementById('toLang'); + for (var i in langs) { + addOption(f, langs[i], langs[i]); + addOption(t, langs[i], langs[i]); + } + } + + function initialize() { + gf.getLanguages(populateLangs); + } + </script> <title>Web-based GF Translator</title> </head> - <body> + <body onload="initialize()"> <form id="translate"> <p> <input type="text" name="inputText" id="inputText" value="this cheese is warm" size="50" /> @@ -14,7 +41,7 @@ <p> From: <select name="fromLang" id="fromLang" onchange=""><option value="">Any language</option></select> To: <select name="toLang" id="toLang"><option value="">All languages</option></select> - <input type="button" value="Translate" onclick="translate(document.getElementById('inputText').value,document.getElementById('fromLang').value,document.getElementById('toLang').value,'');" /> + <input type="button" value="Translate" onclick="updateTranslation();" /> </p> </form> <div id="output"></div> diff --git a/src/server/gf-server-jsapi.js b/src/server/gf-server-jsapi.js index f9db41ef2..9a2096532 100644 --- a/src/server/gf-server-jsapi.js +++ b/src/server/gf-server-jsapi.js @@ -1,8 +1,14 @@ -function translate (input,from,to,cat) { - httpGetText("gf.fcgi/translate?input="+escape(input)+"&from="+escape(from)+"&to="+escape(to)+"&cat="+escape(cat), function (output) { alert(output); }); -} +var gf = new Object(); -function httpGetText(url, callback) { +gf.translate = function (input,from,to,cat,callback) { + gf.httpGetText("gf.fcgi/translate?input="+escape(input)+"&from="+escape(from)+"&to="+escape(to)+"&cat="+escape(cat), function (output) { callback(gf.readJSON(output)); }); +}; + +gf.getLanguages = function (callback) { + gf.httpGetText("gf.fcgi/languages", function (output) { callback(gf.readJSON(output)); }); +}; + +gf.httpGetText = function (url, callback) { var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { @@ -25,5 +31,8 @@ function httpGetText(url, callback) { XMLHttpRequestObject.send(null); } +}; -} +gf.readJSON = function (text) { + return eval("("+text+")"); +}; diff --git a/src/server/translator.js b/src/server/translator.js new file mode 100644 index 000000000..99bd8b191 --- /dev/null +++ b/src/server/translator.js @@ -0,0 +1,49 @@ +function formatTranslation (outputs) { + var dl1 = document.createElement("dl"); + for (var fromLang in outputs) { + var ul = document.createElement("ul"); + addDefinition(dl1, document.createTextNode(fromLang), ul); + for (var i in outputs[fromLang]) { + var dl2 = document.createElement("dl"); + for (var toLang in outputs[fromLang][i]) { + addDefinition(dl2, document.createTextNode(toLang), document.createTextNode(outputs[fromLang][i][toLang])); + } + addItem(ul, dl2); + } + } + + return dl1; +} + +/* DOM utilities for specific tags */ + +function addDefinition (dl, t, d) { + var dt = document.createElement("dt"); + dt.appendChild(t); + dl.appendChild(dt); + var dd = document.createElement("dd"); + dd.appendChild(d); + dl.appendChild(dd); +} + +function addItem (ul, i) { + var li = document.createElement("ul"); + li.appendChild(i); + ul.appendChild(li); +} + +function addOption (select, value, content) { + var option = document.createElement("option"); + option.value = value; + option.appendChild(document.createTextNode(content)); + select.appendChild(option); +} + +/* General DOM utilities */ + +/* Removes all the children of a node */ +function removeChildren(node) { + while (node.hasChildNodes()) { + node.removeChild(node.firstChild); + } +} |