msyds/gf-core
1
0
Fork 0
forked from GitHub/gf-core
Code Pull Requests 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.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()

38
src/www/wc.html
View File

@@ -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>