diff options
| author | hallgren <hallgren@chalmers.se> | 2014-04-04 12:52:41 +0000 |
|---|---|---|
| committer | hallgren <hallgren@chalmers.se> | 2014-04-04 12:52:41 +0000 |
| commit | 898654116070077e15ba3c3a30f8f22ab57d91e3 (patch) | |
| tree | 2457912b47a0629423a811f012cca49690eecffa /src | |
| parent | 5cc0f395206eab1a4950d8076376e62470228025 (diff) | |
Wide Coverage Translation Web App: redesigned user interface
The layout now resembles a certain other online translation service.
The translation is started automatically after text is entered, no need to
press the Translate button.
Diffstat (limited to 'src')
| -rw-r--r-- | src/www/js/wc.js | 15 | ||||
| -rw-r--r-- | src/www/wc.html | 38 |
2 files changed, 34 insertions, 19 deletions
diff --git a/src/www/js/wc.js b/src/www/js/wc.js index 0893ae80d..a894ccaad 100644 --- a/src/www/js/wc.js +++ b/src/www/js/wc.js @@ -4,6 +4,13 @@ wc.f=document.forms[0] wc.e=element("extra") wc.p=element("pick") wc.serial=0 + +wc.delayed_translate=function() { + function restart(){ if(wc.f.input.value!=wc.translating) wc.translate() } + if(wc.timer) clearTimeout(wc.timer); + wc.timer=setTimeout(restart,500) +} + wc.translate=function() { var current= ++wc.serial var f=wc.f, e=wc.e, p=wc.p @@ -18,6 +25,7 @@ wc.translate=function() { f.output.className="" wc.r=[] wc.current=0 + wc.translating=f.input.value clear(e) clear(p) @@ -117,7 +125,7 @@ wc.translate=function() { step3cnl, function(){step2(text)}) } - lextext(f.input.value,wc.cnl ? step2cnl : step2) + lextext(wc.translating,wc.cnl ? step2cnl : step2) return false; } @@ -132,11 +140,13 @@ wc.speak=function(text,lang) { wc.swap=function() { var f=wc.f + var old_input=f.input.value f.input.value=f.output.value; + f.output.value=old_input var from=f.from.value f.from.value=f.to.value f.to.value=from - //wc.translate() // changing f.to.value is enough to start the translation + wc.translate() } wc.google_translate_url=function() { @@ -182,3 +192,4 @@ if(wc.cnl) { wc.pgf_online=pgf_online({}); wc.pgf_online.switch_grammar(wc.cnl+".pgf") } +wc.f.input.focus() diff --git a/src/www/wc.html b/src/www/wc.html index 6d4e2aa96..17951fefe 100644 --- a/src/www/wc.html +++ b/src/www/wc.html @@ -7,10 +7,11 @@ <link rel=top href="../" title="GF"> <style> div.center { text-align: center; } -table.center { margin-left: auto; margin-right: auto; } +table { border-collapse: collapse; table-layout: fixed; width: 100%; } +td { padding: 0 5px; } textarea { margin: 0; } body:target h1, body:target div.modtime { display: none; } -#extra { color: #666; } +small { color: #666; } #pick>* { padding: 0 0.5ex; } #speak { display: none; } .default_quality { background-color: #ffc; } @@ -20,16 +21,13 @@ body:target h1, body:target div.modtime { display: none; } </head> <body id=embed> -<div class=center> +<div> <h1><a href="http://www.grammaticalframework.org/"><img class=nofloat src="P/gf-cloud.png" alt="GF"></a> Wide Coverage Translation</h1> </div> -<table class="center"> +<form onsubmit="return wc.translate()" style="width: 100%"> +<table> <tr><td> -<form onsubmit="return wc.translate()"> - <textarea name=input rows=3 style="width: 100%"></textarea> - <br> - <big>⤷</big> <select name=from> <option value=Bul>Bulgarian</option> <option value=Chi>Chinese</option> @@ -39,8 +37,10 @@ body:target h1, body:target div.modtime { display: none; } <option value=Ger>German</option> <option value=Hin>Hindi</option> <option value=Swe>Swedish</option> - </select> → - <button name=translate type=submit><strong><big>Translate</big></strong></button> → + </select> + <td style="text-align: right"> + <input type=button name=swap onclick="wc.swap()" value="⇆"> + <td> <select name=to onchange="wc.translate()"> <option value=Bul>Bulgarian</option> <option value=Chi>Chinese</option> @@ -51,14 +51,18 @@ body:target h1, body:target div.modtime { display: none; } <option value=Hin>Hindi</option> <option value=Swe selected>Swedish</option> </select> - <big style="position: relative; top: 1ex">⤵</big> - <button name=swap onclick="wc.swap()">↑↓</button> - <br> - <textarea name=output rows=3 style="width: 100%" readonly></textarea> - <small id=speak><input name=speak type=checkbox> Speak</small> + <td><button name=translate type=submit><strong><big>Translate</big></strong></button> + <tr><td colspan=2> + <textarea name=input rows=5 style="width: 100%" onkeyup="wc.delayed_translate()"></textarea> + <td colspan=2> + <textarea name=output rows=5 style="width: 100%" readonly></textarea> + <tr><td colspan=2> + <small>Enter text to translate above.</small> + <td colspan=2> + <small id=speak><input name=speak type=checkbox> Enable speech synthesis</small> +</table> </form> -</table> <div class=center> <!--input type=button onclick="wc.try_google()" value="Google Translate"--> <div id=pick></div> @@ -66,7 +70,7 @@ body:target h1, body:target div.modtime { display: none; } </div> <p> <div class=modtime><small> -<!-- hhmts start -->Last modified: Mon Mar 31 16:07:06 CEST 2014 <!-- hhmts end --> +<!-- hhmts start -->Last modified: Fri Apr 4 13:47:19 CEST 2014 <!-- hhmts end --> </small></div> <script src="js/support.js"></script> <script src="js/gftranslate.js"></script> |