You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
155 lines
4.9 KiB
155 lines
4.9 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
<title>Demo of Google SMD / Translate test</title> |
|
<style type="text/css"> |
|
body, html { |
|
width:100%; |
|
margin:0; padding:0; |
|
} |
|
.logo { |
|
border:0; vertical-align:middle; |
|
} |
|
.summary { |
|
color:#666; |
|
font:8pt Arial,sans-serif; |
|
} |
|
#container { |
|
width:760px; |
|
margin:0 auto; |
|
} |
|
#loader { |
|
position:absolute; |
|
top:3px; |
|
left:3px; |
|
visibility:hidden; |
|
height:50px; |
|
width:50px; |
|
background:url("../../../dojox/image/resources/images/loading.gif") no-repeat center center; |
|
} |
|
.inputBox { |
|
width:300px; |
|
} |
|
.warn { color:magenta; } |
|
.over { color:red !important; } |
|
</style> |
|
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script> |
|
<script type="text/javascript"> |
|
dojo.require("dojox.rpc.Service"); |
|
dojo.require("dojo.io.script"); |
|
|
|
var google, showLoader, hideLoader = null; |
|
function init(){ |
|
|
|
var s = dojo.query("select.clone")[0]; |
|
var n = dojo.clone(s); |
|
dojo.attr(s,"id","fromLang"); |
|
dojo.attr(n,"id","toLang"); |
|
dojo.place(n, "target", "after"); |
|
|
|
google = new dojox.rpc.Service(dojo.moduleUrl("dojox.rpc","SMDLibrary/google.smd")); |
|
|
|
showLoader = dojo.hitch(dojo,"style","loader","visibility","visible"); |
|
hideLoader = dojo.hitch(dojo,"style","loader","visibility","hidden"); |
|
|
|
dojo.connect(dojo.byId("test"),"onkeypress",function(e){ |
|
var n = dojo.byId('test'); |
|
var len = n.value.length + 1; |
|
if(len >= 400 && len < 500){ |
|
if(!dojo.hasClass("progress","warn")){ dojo.addClass("progress","warn"); } |
|
}else if(len >= 501){ |
|
n.value = n.value.substr(0, 500) |
|
if(!dojo.hasClass("progress","over")){ dojo.addClass("progress","over"); } |
|
return false; |
|
}else{ |
|
dojo.removeClass("progress","over"); |
|
dojo.removeClass("progress","warn"); |
|
} |
|
dojo.byId("used").innerHTML = len + ""; |
|
|
|
}); |
|
|
|
var runner = function(e){ |
|
var pair = dojo.byId("fromLang").value + "|" + dojo.byId("toLang").value; |
|
google.translate({ q: dojo.byId("test").value, langpair:pair }) |
|
.addBoth(function(response){ |
|
var r = response.responseData; |
|
if(r && r.translatedText){ |
|
dojo.byId("response").value = r.translatedText; |
|
} |
|
dojo.byId("flop").disabled = false; |
|
}); |
|
}; |
|
|
|
dojo.connect(dojo.byId("doit"),"onclick", runner); |
|
|
|
dojo.connect(dojo.byId("flop"),"onclick", function(e){ |
|
// take the value from the translated text, dump it in the incoming |
|
// and set the values opposite |
|
var input = dojo.byId("test"); |
|
var resp = dojo.byId("response"); |
|
var trans = resp.value; |
|
|
|
resp.value = ""; |
|
input.value = trans; |
|
|
|
var cur = dojo.byId("fromLang").selectedIndex; |
|
dojo.query("#toLang option").map(function(n){ return (n.selected) ? n : false; }) |
|
.forEach(function(n,i){ |
|
if(n){ |
|
dojo.byId("fromLang").selectedIndex = i; |
|
dojo.byId("toLang").selectedIndex = cur; |
|
} |
|
}); |
|
dojo.byId("flop").disabled = true; |
|
runner(); |
|
|
|
}); |
|
|
|
} |
|
dojo.addOnLoad(init); |
|
|
|
</script> |
|
</head> |
|
|
|
<body> |
|
<div id="loader"></div> |
|
<div id="container"> |
|
<h2><a href="http://google.com"><img class="logo" src="http://www.google.com/logos/Logo_40wht.gif" alt="Google" /></a> Ajax API SMD / Translation Test</h2> |
|
|
|
<div id="progress">Used: <span id="used">?</span> of 500 max.</div> |
|
<textarea id="test" style="float:left; width:300px; height:200px; border:1px solid #666; background:#ededed; color:#666"></textarea> |
|
<textarea id="response" style="float:right; width:300px; height:200px; border:1px solid #666; background:#ededed; color:#666"></textarea> |
|
|
|
<br style="clear:both"> |
|
|
|
<div style="padding-top:15px;"> |
|
From: |
|
<select class="clone"> |
|
<option value="ar">Arabic</option><option value="bg">Bulgarian</option> |
|
<option value="zh-CN">Chinese (Simplified)</option><option value="zh-TW">Chinese (Traditional)</option> |
|
<option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option> |
|
<option value="nl">Dutch</option><option SELECTED value="en">English</option><option value="fi">Finnish</option> |
|
<option value="fr">French</option><option value="de">German</option><option value="el">Greek</option> |
|
<option value="hi">Hindi</option><option value="it">Italian</option><option value="ja">Japanese</option> |
|
<option value="ko">Korean</option><option value="no">Norwegian</option><option value="pl">Polish</option> |
|
<option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option> |
|
<option value="es">Spanish</option><option value="sv">Swedish</option> |
|
</select> |
|
|
|
<span id="target">To: </span> |
|
|
|
<button id="doit">Translate</button> |
|
<button id="flop" disabled="disabled">Flip Back</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
</body> |
|
</html>
|
|
|