GitHub/gf-core
1
0
Fork 1
mirror of https://github.com/GrammaticalFramework/gf-core.git synced 2026-04-23 19:42:50 -06:00
Code Issues Packages Projects Releases Wiki Activity

Wide Coverage Translation Web App: redesigned user interface

Browse Source 
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.
This commit is contained in:
hallgren
2014-04-04 12:52:41 +00:00
parent 8677d799c8
commit 703f61313c
2 changed files with 34 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/www/js/wc.js
View File

@@ -4,6 +4,13 @@ wc.f=document.forms[0]
wc.e=element("extra") wc.e=element("extra")
wc.p=element("pick") wc.p=element("pick")
wc.serial=0 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() { wc.translate=function() {
var current= ++wc.serial var current= ++wc.serial
var f=wc.f, e=wc.e, p=wc.p var f=wc.f, e=wc.e, p=wc.p
@@ -18,6 +25,7 @@ wc.translate=function() {
f.output.className="" f.output.className=""
wc.r=[] wc.r=[]
wc.current=0 wc.current=0
wc.translating=f.input.value
clear(e) clear(e)
clear(p) clear(p)
@@ -117,7 +125,7 @@ wc.translate=function() {
step3cnl, step3cnl,
function(){step2(text)}) function(){step2(text)})
} }
lextext(f.input.value,wc.cnl ? step2cnl : step2) lextext(wc.translating,wc.cnl ? step2cnl : step2)
return false; return false;
} }
@@ -132,11 +140,13 @@ wc.speak=function(text,lang) {
wc.swap=function() { wc.swap=function() {
var f=wc.f var f=wc.f
var old_input=f.input.value
f.input.value=f.output.value; f.input.value=f.output.value;
f.output.value=old_input
var from=f.from.value var from=f.from.value
f.from.value=f.to.value f.from.value=f.to.value
f.to.value=from f.to.value=from
//wc.translate() // changing f.to.value is enough to start the translation wc.translate()
} }
wc.google_translate_url=function() { wc.google_translate_url=function() {
@@ -182,3 +192,4 @@ if(wc.cnl) {
wc.pgf_online=pgf_online({}); wc.pgf_online=pgf_online({});
wc.pgf_online.switch_grammar(wc.cnl+".pgf") wc.pgf_online.switch_grammar(wc.cnl+".pgf")
} }
wc.f.input.focus()

38
src/www/wc.html
View File

@@ -7,10 +7,11 @@
<link rel=top href="../" title="GF"> <link rel=top href="../" title="GF">
<style> <style>
div.center { text-align: center; } 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; } textarea { margin: 0; }
body:target h1, body:target div.modtime { display: none; } body:target h1, body:target div.modtime { display: none; }
#extra { color: #666; } small { color: #666; }
#pick>* { padding: 0 0.5ex; } #pick>* { padding: 0 0.5ex; }
#speak { display: none; } #speak { display: none; }
.default_quality { background-color: #ffc; } .default_quality { background-color: #ffc; }
@@ -20,16 +21,13 @@ body:target h1, body:target div.modtime { display: none; }
</head> </head>
<body id=embed> <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> <h1><a href="http://www.grammaticalframework.org/"><img class=nofloat src="P/gf-cloud.png" alt="GF"></a> Wide Coverage Translation</h1>
</div> </div>
<table class="center"> <form onsubmit="return wc.translate()" style="width: 100%">
<table>
<tr><td> <tr><td>
<form onsubmit="return wc.translate()">
<textarea name=input rows=3 style="width: 100%"></textarea>
<br>
<big>⤷</big>
<select name=from> <select name=from>
<option value=Bul>Bulgarian</option> <option value=Bul>Bulgarian</option>
<option value=Chi>Chinese</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=Ger>German</option>
<option value=Hin>Hindi</option> <option value=Hin>Hindi</option>
<option value=Swe>Swedish</option> <option value=Swe>Swedish</option>
</select> → </select>
<button name=translate type=submit><strong><big>Translate</big></strong></button> → <td style="text-align: right">
<input type=button name=swap onclick="wc.swap()" value="⇆">
<td>
<select name=to onchange="wc.translate()"> <select name=to onchange="wc.translate()">
<option value=Bul>Bulgarian</option> <option value=Bul>Bulgarian</option>
<option value=Chi>Chinese</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=Hin>Hindi</option>
<option value=Swe selected>Swedish</option> <option value=Swe selected>Swedish</option>
</select> </select>
<big style="position: relative; top: 1ex">⤵</big> <td><button name=translate type=submit><strong><big>Translate</big></strong></button>
  <button name=swap onclick="wc.swap()">↑↓</button> <tr><td colspan=2>
<br> <textarea name=input rows=5 style="width: 100%" onkeyup="wc.delayed_translate()"></textarea>
<textarea name=output rows=3 style="width: 100%" readonly></textarea> <td colspan=2>
<small id=speak><input name=speak type=checkbox> Speak</small> <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> </form>
</table>
<div class=center> <div class=center>
<!--input type=button onclick="wc.try_google()" value="Google Translate"--> <!--input type=button onclick="wc.try_google()" value="Google Translate"-->
<div id=pick></div> <div id=pick></div>
@@ -66,7 +70,7 @@ body:target h1, body:target div.modtime { display: none; }
</div> </div>
<p> <p>
<div class=modtime><small> <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> </small></div>
<script src="js/support.js"></script> <script src="js/support.js"></script>
<script src="js/gftranslate.js"></script> <script src="js/gftranslate.js"></script>